Design, uninterrupted #167

March 30th, 2011

Today’s post highlights the design of WeAreFixel.com. The landing page strikes a nice balance between text sections and images; note a relatively small portfolio slideshow that blends perfectly into the oversized header section. The calligraphic Bistro Script font is a perfect match for the subdued color palette of sand yellow, cardboard orange and faded blue – with further reinforcements of the vintage feel coming from the distressed icons and finely styled section headers. Different sections use different mix of foreground colors, with the orange used consistently for hyperlinks; note how the diagonal pattern in the middle section makes the transition between dark and light sections seem less offensive.

The humorous “We are the … to your …” banner is quite memorable, but it has a couple of problems. First, a lot of the punchlines are rooted deep in american culture and may cause bewilderment and some negative feelings if the prospective client does not understand a certain connection. Second, the position of the reload icon keeps changing based on how long the current line is. If you’re interested in quickly skimming all the combinations, it’s rather distracting to be forced to move the mouse.

On a more positive note, the “View our work” call to action button has just the perfect positioning and styling. It’s located above the fold right next to the portfolio; given that none of the entries use the orange color (an extra credit for choosing screenshots dominated by the main palette colors), it is a very distinct element. It is also situated on the “main diagonal of interest” for the visitors that are used to quickly skim the content. Note how this diagonal is anchored by four elements, all using the orange color. Finally, study the excellent styling of the tweet section in the footer – from the muted calligraphy of the section header to the consistent styling of embedded hyperlinks.