• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

Friday Focus 05/13/11: Isometric Buildings

May 13, 2011 By Sophia Lucero

This week’s designs feature illustrations with the isometric perspective in them, giving the sites an interesting birds-eye view.

Designs of the Week

Atlanta Web Week

I like the idea of centering a conference website around a week, instead of the regular schedule-speakers-venue-register variety. Of course it’s a trade-off, but in this instance the brand was centered around the “week” so it follows.

Cloud Networks

Using moving clouds in the background is pretty predictable, but combined with the perspective of the buildings, and mountain illustrations on several pages, it makes sense to feel that you’re high enough in the air to actually be going through them.

WBS 70 - Die Sommerfestwoche

Even more clouds in this design, but what’s great is that they’re used everywhere, as backgrounds for event icons and other content boxes. This is topped off with a nice fly-in animation when you load each page.

Social Media Weekly

HTML The hgroup hokey cokey
“To offer a quick recap, hgroup was removed from the W3C specification only (not the WHATWG spec) by Hixie at the request of Steve Faulkner. The co-chairs requested the issue be reverted following multiple requests from the likes of Tab and Tantek. The current status at the time of writing is that hgroup is in the spec.”

Accessibility, HTML, CSS, JavaScript – Front End Development Guidelines

CSS – Holmes: The CSS Markup Detective
“Holmes is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.”

Friday Focus 03/25/11: Sassy Sliders

March 25, 2011 By Sophia Lucero

This week’s Friday Focus features designs that use smart, stunning slideshow techniques that are sure to inspire you. Take some notes!

Designs of the Week

Get Satisfaction

The circus theme combined with the sketchy, painted feel looks great. Everything’s bright and cheerful.

Büro Maisengasse

Minimal but packs a punch with the clothesline effect. Nice integration of Google Translate for language localization, and the header matches each project color/pattern.

Grunnarbeid

Nice little thumbnail tabs to the right for navigating through the slides, and a nice dark overlay to the left for blending into the background.
Zbyšek Nádeník

A more conventional look, but I like how the text and image areas are separated with a nice curvy cut, breaking the typical rectangular silhouette of carousels.

Milky Interactive

The splash of milk makes all the difference. This site’s filled with content but it still feels light and nicely organized.

Daria Zakład Krawiecki w Ciechanowie

Keeping the color scheme in grayscale to let the purple pop is an interesting technique. Although using black text on it isn’t very readable. So is using italics for majority of the site.

Lega-lega

Fun sketchy illustrations everywhere—even the icons for meta information are custom. It also helps that there are tooltips in case they look a little vague. I like the treatment to the scrollbar although maybe some arrows or a change in cursor type would help more.

Bluecadet Interactive

Love or hate the vintage, classical look, the details on this site are to die for. But really, it’s the main slideshow that’s the best part, which comes together in such a pleasant way.

Social Media Weekly

Accessibility – Web Accessibility Toolbar
“In honour of Jim Thatchers important and continuing contribution to making the web a more accessible medium, I have worked on an update to the Web Accessibility Toolbar for Internet Explorer, which includes new features that he has developed.”

HTML – New HTML elements and surrogate <div>s
“What else can we do to move forward without polluting our documents with non semantic wrappers?”

User Experience – Effective Developer Experience
“Platform product owners must be concerned with assisting developers in accomplishing this if end users are to have a good user experience overall. Attention to these details is called developer experience (DX), and enabling app developers to be successful through better DX will create a more successful UX for the platform product.”

High Quality HTML and CSS Templates

February 17, 2011 By Hyde

Following the last two posts on forms, I’m now listing 10 fresh HTML and CSS templates. They are ideal for implementing a modern form, while not all templates listed here are HTML5, you can replace the old doctype for the newest, <!DOCTYPE html>, supporting HTML5. After all remember that the new doctype is backwards compatible.

Two of the HTML5 templates are part of a tutorial, which is perfect for adjusting more considering that they come with explanations on the how and why.

If you need a website online fast, it is a matter of picking out a template and implementing the latest tutorials on HTML5 and jQuery forms.

Realistic

HTML CSS Templates

One Page Portfolio with HTML5 and CSS3

HTML CSS Templates

Distinctive

HTML CSS Templates

Coffee Cols

HTML CSS Templates
* HTML5
Download

CSS Heaven 3

HTML CSS Templates

Download

Memoir

HTML CSS Templates
* HTML5
Download

Outliers

HTML CSS Templates

Mondays

HTML CSS Templates

Coding a CSS3 & HTML5 One-Page Website Template

HTML CSS Templates

tree_tops

HTML CSS Templates

Friday Focus 11/19/10: Shelf Love

November 19, 2010 By Sophia Lucero

Last week I mentioned a site that uses a shelf as a nice metaphor for holding content, so let’s look at several more in this week’s Friday Focus.

Designs of the Week

Iconshelf

Big, bright, and shiny. This is a flawless design basically. My favorite part is the Twitter icon also getting the same tag treatment.

Sweet Design

Love the contrast between the old style glass jars and the new media stickers and trinkets inside them. I think the only missing part here is better typography.

ShelfLuv

The book titles and shelf height could be bigger. I like the addition of the electrical outlet to the side even if it doesn’t really add much to the design. The browsing and sorting animations look great.

All My Mac Apps

I would really love it if sites using the shelf metaphor take it all the way and support drag-and-drop, and other AJAX interactions.

Diddybears

The colors and details here are great, but I have to wonder if a kids-oriented site should use a lighter color palette. What’s stopping shelf designs from being pastel-colored instead of literally brown because of the wood? Is it the lighting?

Shelfari

It’s nice to see shelves on a more popular site such as Shelfari (the name begs that I guess). It’s probably the most well-done too: no skimping on features and the look blends well with the rest of the interface elements (tabs, buttons).

Social Media Weekly

HTML – Exploring Markup for Breadcrumbs
“So where are we at on this? I’d say that there is no super-ultimate best-possible-way to handle breadcrumb markup yet.”

Design – The Three Threats to Creativity
“Creativity depends on the right people working in the right environment. Too often these days, the people come ill-equipped, and their work environments stink.”

Accessibility – Accessibility myths in 2010
” Early this year, Ian Pouncey posted a few other Web accessibility myths. Here is a quick roundup of the myths from these two articles.”

HTML5 – HTML5 Outliner

Friday Focus 10/22/10: Beautiful Data

October 22, 2010 By Sophia Lucero

Pie charts and graphs have never looked sexier with their integration into these websites. It’s beautiful data visualizations on this week’s Friday Focus.

Designs of the Week

Daytum

This could look a little light for some but I think it’s got enough contrast and keeps the jumble of numbers and figures pristine. The notecard style boxes looks great, and it’s also the logo of the site.

Swedish Podge 2010

Pure eyecandy. The only way this site could get any better is if the charts were interactive.

Nosotros

The gray against the white text is hard to read, but it’s effective with the rainbow graphs.

Bermon Painter

A little disappointed that even the text is part of the image, but it’s clear that more designers are translating summaries of their resumes and skill sets into graphs like this.

Coffee by Week, 2009

Barely designed, but the concept of using pictures to illustrate the bar graph is great.

Joey Lomanto

Another rainbow chart, but looks more decorative than a real graph, which isn’t really an issue if that’s the goal anyway.

Sofasurfer

Similar look, similarly decorative, but great inspiration for developing a particular style in data visualization.

Social Media Weekly

Design – Welcome to the Era of Creative Meritocracy
“Without creative meritocracy, we suffer because our talent and hard work aren’t enough to land the job. Clients suffer because they receive inferior work. Moreover, our industries and society suffer from mediocrity.”

CSS – Why we don’t have a parent selector
“On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven’t worked on a browser engine, I have my theories.”

HTML, JavaScript Semantic Markup or Death? Part I
“Despite the title, this post is actually mostly about JavaScript, or more specifically, the relationship between JavaScript and HTML.”

« Previous Page
Next Page »

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge

php_frameworks

Top 7 PHP Frameworks

Search