Design Focus

Friday Focus 12/30/11: Blast from the Past

The last Friday Focus of the year goes back in time before we move into the future. Happy New Year to everyone!

Designs of the Week

Celebrate Christmas at Biltmore website

Celebrate Christmas at Biltmore

Beautiful graphic touches and type. This site is first split into “Day” and “Night”, then into “Awe”, “Inspiration”, “Joy”, and “Stories”. Each is further broken down into sub-slideshows. Every section on this site slides into the framed panel either vertically or horizontally.

Ramiro Delgado's website

Ramiro Delgado

I like the bold colors and the big graphics put together, but I’m not too sure about using two different script fonts on the same page.

The Cottonseed Oil Tour website

The Cottonseed Oil Tour

Another strong set of colors at play here, not to mention lots of different things grabbing your attention at once, which could be a bit of a turn off for some.

Alien Abduction Lamp website

Alien Abduction Lamp

The texture/quality of the text isn’t quite the same as the photo but I like the skewed edges on the boxes and the lighting effects everywhere.

AdPacks website


Lots of elements that drive the look home such as the sparkles, sunbursts, 3D box, and of course the cursive font. I really like the arrow/button although the alignment of the text is a little off.

Maratona Makeover website

Maratona Makeover

Love the idea of using patterns to replace the hair sections! There’s quite a bit of folding going on here, as well as stripes as backgrounds and shadows, and the blue that grounds everything makes the photos pop all the more.

Lather Bee Rich website

Lather Bee Rich

Even the slideshow and dropdown menus carry the dirt and smudges you see all over the page. There’s also a significant number of typefaces being used here in a way that’s not chaotic at all.

Shipment App website

Shipment App

There’s not a lot going on here, but it’s a wonderful look. The background illustration is perfect while the signup form in the foreground has a good number of details to look like a real ticket. I think my only question is if it’s a good choice to keep that form up there instead of the usual center alignment you see on “coming soon” pages. Once you hit submit (Notify) the whole box flips over to signal confirmation.

Social Media Weekly

User ExperienceBeyond Bandwidth: UI Performance
“UI performance tips have been disseminated throughout the community for years, but often as an aside, with bandwidth and latency concerns much more at the forefront.”

DesignA simpler and faster alternative to wireframes
“In my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.”

TypographyPublic Service Announcement: Watch Your @font-face font-weight
“The problem is the font is muddier than you originally saw it, and it’s all about font-weight.”


Design Focus

Friday Focus 12/23/11: Happy Holidays!

It’s that time of the year once more, so let’s soak up some Christmas cheer with these designs. Happy Christmas Friday Focus!

Designs of the Week

Occupy North Pole website

Occupy North Pole

This is a wonderfully decked out design from the logo to the interface elements to the themed graphics in each blog post. The cookie charts look yummy and the Twitter/Facebook widgets blend in perfectly, and it’s all topped off with subtle falling snowflakes.

A Real Letter from Santa Claus website

A Real Letter from Santa Claus

Site’s defunct now but still worth mentioning for the lovely look it has. Deep red and gold hues combined with classic type make for a warm and elegant seasonal website.

A Very Warwick Christmas website

A Very Warwick Christmas

Deep blue and white is typical for a snowy night scene but this site adds a touch of not red but hot pink for a more funky, modern touch. Each slide of the screen loads a few animations in the background and invites you to click on the ribbon button which loads a lightbox fashioned like a scroll.

You Better Not Stress website

You Better Not Stress

Simple but striking (you can never go with red and white!) and packs a responsive web design punch. Each red box shows a subtle background on hover, then loads a white box that’s the exact width of the grid. Beautiful type, photography, and concept.

It's A Shape Christmas website

It's A Shape Christmas

Another red and white design but takes the color scheme in a bolder direction: pretty much all of the text is in red on white, while other areas  simply flip the colors around. That, combined with the thin diagonal line pattern in the background makes this page a little challenging on eyes, but it’s certainly bright and cheery.

Christmas Cracker App website

Christmas Cracker App

The only design in the bunch that does not use typical Christmas color combinations, or typical color combinations at all! Also taxing for the eyes, especially with the non-stop animations in each box, repeating several screenfuls down, but it’s a fun concept.

Social Media Weekly

HTML, Accessibility – The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes
“Hopefully, that’s going to help you make the right choice as to when to give an image an empty ALT attribute so that screen readers ignore it, or one that has meaningful information that will help the user.”

BusinessFrom Side Project to Not So Side Project
“There still seems to be something of a disconnect between having a side project and turning it into something that is moderately successful; in particular, the challenge of making enough money to sustain the project and perhaps even elevating it from the sidelines so that it becomes something not so on the side at all.”

Web StandardsIE to Start Automatic Upgrades across Windows XP, Windows Vista, and Windows 7
“Today we are sharing our plan to automatically upgrade Windows customers to the latest version of Internet Explorer available for their PC.”


Design Focus

Friday Focus 12/16/11: Under Fire & Water

This week on Friday Focus: designs that use two opposing elements found in nature: fire and water.

Designs of the Week

Zindustry website


Everything is burning in here, from the wooden background to the strips and sheets of paper—not overdone at all. I really like the little area of blue flames whose color echoes as accents throughout the rest of the site. All in all a striking look.

Made By Points website

Made By Points

Here pink is the accent color as seen in the logo, navigation, footer, and the loading screen—which seems to be growing popular in non-Flash sites with lots of graphics. Another parallax-driven site with some translucent backgrounds and some very thin arrows.

Liquid Torch website

Liquid Torch

I like the splashes of water everywhere and the lighting that seems to imply an underwater environment (although I’m leaning towards an aurora in the sky). The top navigation is also fixed and the layout breathes easy.

Family of Fish website

Family of Fish

This site prides itself in beautiful photography, and another round of parallax and fixed background peekaboos take advantage of that. The later not just piles on one full-screen image after another though, there are some interesting effects to be had when you make certain areas of a photo transparent. What is unfortunate, though, is that the descriptions in each page are images.

Social Media Weekly

Web DesignWhat I Learned About the Web in 2011
It’s time to look back on the year that was and see how far we’ve grown as designers and an industry as a whole.

CSSSix CSS Layout Features To Look Forward To
Several proposed featured by the CSS Working Group to make our laying out webpages easier.

Web StandardsOn HTML and CSS best practices
Strive for the best quality possible.

User ExperienceGive Your Users A Hollywood Experience
Learn to build for your audience with film metaphors.


Design Focus

Friday Focus 12/09/11: Hello, My Name Is

This week’s featured designs business card websites, some of them looking literally like cards containing contact information of their owners. That means very minimal layouts but still all compelling experiences.

Designs of the Week

Tim Van Damme's website

Tim Van Damme

First up, the site that started this trend. The design may be over a year old but the graphical details are still all the rage today. One of the most important features for this genre of a site are the vCard download link and the social media links, accompanied of course by the colorful icons for each site. No tabs here, but each section in the menu loads with a vertically sliding animation, while the hover effects use horizontally sliding effects.

Mehmet Aksoy's website

Mehmet Aksoy

The shooting star in the background is actually animated with Flash. So are the stars which twinkle. There’s a touch of the Aero (Windows Vista/Windows 7) interface in this design (particularly the avatar) but I feel it’s the custom font used on this page that gives a different look to the whole site.

Benjamin De Cock's website

Benjamin De Cock

This site greets you with the owner’s name then displays a closed box, which you click on so it pops open to reveal this card. The animation even contains accompanying smoke effects. Other visual treats to enjoy on this page: an icon-based website tooltip on the text link for “interface designer”, glowing hover effects on the bottom icons, and a slider for his three avatars.

Chris Rowe's website

Chris Rowe

Not the usual boxed in layout but it’s all only contact information in here. Hovering over the initials reveals the full name and occupation. Same goes for the links below it.

Margot Dowleska Dyer's website

Margot Dowleska Dyer

A nice earthy look with icons that blend in and a slideshow running in the polaroid frame to the left. There are some portions though where the graphics make the text a little difficult to read and are competing for attention with the foreground.

Maximilian Schoening's website

Maximilian Schoening

The closest thing to the business card metaphor translated to a webpage, complete with an animated flip done with CSS3 transforms when you click on the top right blue corner. The background uses another CSS3 property, radial gradients. The other side contains nothing but tiny social icons.

Social Media Weekly

CSS – The CSS profilers are coming!
“Back in August I talked about the lack of benchmarks or performance tools for CSS. In the meantime, the fine folk we call browser makers have been working hard on new developer tools to do just that: measure CSS performance.”

CSS – Truncating text using only CSS
“It works in IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+”

Design, Business – Warm Gun: Design for Continuous Deployment
“In his Design for Continuous Deployment presentation at the Warm Gun conference in San Francisco, CA Randy Hunt shared how Etsy’s development process allows designers and developers to collaborate at scale on production code.”

CSS – Knyle Style Sheets
“Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team.”


Design Focus

Friday Focus 12/02/11: Like A Modern Day Leonardo

Happy December Friday Focus! This week’s featured designs contain sketches and diagrams with a scientific slant, quite reminiscent of the drawings that Leonardo Da Vinci was renowned for.

Designs of the Week

Metaphiziks website


Nice icon-based navigation although I wish the whole circle were clickable. I also wish the up/down arrows scrolling from one screen to another were in the same place, but I see how the layout affected the positioning.

Growcase website


This design looks swell, there are so many nifty details that went to it, especially how the social media icons were fashioned at the footer—as part of an atom! probably the best idea I’ve seen—but there seems to be too much uppercase styling here.

Carsonified website


Every page uses an ivory-colored foreground on a very strong colored background—orange, green, purple, you name it—and remains highly readable while gunning for maximum impact. The key to this design is definitely great illustrations and typography.

Paolo Cavanna's website

Paolo Cavanna

There’s a section that runs text a little too long but I really appreciate the use of old style fonts and graphics. There’s no horizontal menu, just the vertical one opposite the head diagram. Looks straight out of an old anatomy textbook.

Joshua Turner's website

Joshua Turner

Beautiful grid-based, black and white design with a pop of red here and there. The one thing about anchors and one-page sites is that if a section isn’t tall enough, it won’t be apparent that you’ve skipped to that place once you click on the link. Here, when you click on the Contact link, it doesn’t place that section in focus because there’s no more space to scroll down.

Social Media Weekly

HTML, JavaScriptThe Script Tag
“I’ve noticed that on a <script> tag, there are all kinds of variations that all seem to work cross-browser. What is necessary and what isn’t?”

Web StandardsMove the Web Forward
“You love web standards. You want to give back to the community. Curious about where to start? We’re here to help.”

DesignStitches – An HTML5 sprite generator
“Drag and drop image files into the space below and click “Generate” to create a sprite and stylesheet.”

Mobile Web DesignA Look Inside Mobile Design Patterns
“Although these patterns are based on best practices in mobile application design, they may also be inspiring for mobile web design.”