bold fonts

Friday Focus 08/06/10: Sidebar Focus

August 6, 2010 By Sophia Lucero

Where sidebars are not an afterthought, and even steal the show. Happy Friday Focus!

Designs of the Week

Sometimes your product doesn’t have to be presented in a MacBook, Cinema Display, iPhone, or Safari screen. You can just nudge it to the side of your layout and it will still make quite the impact. The bright shades of blue also help, and bonus points if that’s actually a jab at that “41 shades of blue” incident at Google.

I like everything going on this page. I find it interesting that there are at least four different typefaces used in this design, but blends in nicely. Also check out how the contents of the sidebar change by page.

I enjoy the generous serving of whitespace and the very subtle watermarks slash section dividers.

Great treatment on the video thumbnails and makes me wonder why not more people are doing it. Big chunky text, arrows, and buttons for a forceful first impression.

I love how simple this looks, something atypical of technology-focused sites. Brilliant icons, strong grid.

Pretty generic looking, but I like two things here: first, the actual use of tweed; second, the tooltip action on the photographic background.

The photo wall is neat, and so is the folded motif sprinkled around the site. The green “sidebar” behaves like a deconstructed box—get it?

Using cyan and magenta together is like asking for trouble, but I don’t mind it here. This site is trying to be as eyecatching as possible, and it’s using bold fonts, bold hues. I like that you can see swatches of the site’s color scheme spill over to the hand-drawn illustrations in each section.

Social Media Weekly

User Experience – Pagination, a thing of the past?

JavaScript – Showing Off bit.ly Clicks of Your Posts With jQuery

Programming – Will the Real Browser Stats Please Stand Up?

Friday Focus 05/07/10: Power Lines

May 7, 2010 By Sophia Lucero

This week on Friday Focus: website designs that use strong lines to guide the eye in navigating around them.

Designs of the Week

I enjoy the textured starry night look and all the rotated text.

Not pictured here, but it’s the microphone wire that traverses the whole site, connected to the amplifier all the way in the footer—very neat. Beautiful illustration work, “Mad Libs” style forms, and typography.

Colorful but not overwhelming. Love the dotted lines repeating everywhere, including the submit buttons, which is a great way to soften the corners up.

Other major design trends going on here: the outerspace look and bold uppercase text.

I like the subtle gradiation of color on the broken lines. But I’m not too sure why one uses <span>s instead of more meaningful tags like <strong> or <em>.

“Follow the road to discover great American craft beer.” Great concept. And the black road echoes the broken lines from the company logo.

We’ve seen this masking effect before and here’s another take on it. Content styling needs a little more refinement (it screams Kubrick, the default WordPress theme) but it’s the illustration that shines.

White on yellow is a little too bright for people, I think, and copy could be improved.

The rainbow stream of rain and the reuse of clouds in the flowchart is really nifty.

The hand-drawn touches here are a bit subtle, you almost want more.

I like that the color-coded folded ribbons also serve as borders for different content areas.

Social Media Weekly

HTML – A Brief History of Markup
This is Chapter 1 of HTML5 for Web Designers by Jeremy Keith.

CSS – CSS Posters
“I decided to create some simple CSS3 posters based on designs that I’ve already created before.”

Design – Visual Hierarchy is the Art of Managing, Not Eliminating
“Visual hierarchy, the classification of elements according to importance and relationship to other elements, tends to be one of the most ignored and underutilized principles of design.”