Feature
Post

Category
Design Focus


Design Focus: Building Navigation

This week we’re featuring designs that use buildings to represent parts of their site’s navigation. Does this interaction design technique make browsing around more effective? Let’s find out.

Designs of the Week

Create unique, extraordinary websites with Squarespace. No experience necessary!

Isis & Norma Ltd.

Isis & Norma Ltd.

The buildings at the top are layered and move with the parallax effect as your mouse cursor does. They also appear in a bottom up transition when you load the page, somewhat alluding to a structures being built from the ground up. I like the illustration style on this site—it’s a mix between chic and homey.

WalletMap

WalletMap

Nice isometric graphic going on here. It’s great how they represented each idea in the context of that space but I would’ve liked to see more interactivity with the illustrations (feels like that’s a minimum these days). It could even be an evolving landscape in one page.

Fifteen Robin

Fifteen Robin

Cool interaction from the top of the building to the bottom triggered by scrolling down: text slide in from left and right, images are uncovered with parallelogram masks, the same boxes for the content areas. Overall a very sleek look.

Visit Bruges

Visit Bruges

Here’s a time-sensitive landscape which you can also control. The featured landmarks change by hour, showing the visitor appropriate things they might want to check out at that time, or one can scrub through the possibilities in the horizontal slider. If you want a more organized way of navigating, use the dropdown at the top or scroll further down, and see the spots color-coded by category (including “Romance”).

Social Media Weekly

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

TypographyNarrowing the Field: How To Bring Great Type Into Focus
“Choosing type is an exercise in understanding your subject and interpreting its meaning in a visual form. To paraphrase Robert Bringhurst: typography exists to honor the subject. Arriving at an appropriate choice depends on balancing how a typeface feels with how it functions.”

Design, TypographyReconciling SVG and Icon Fonts
“I’ll explain how to set up a powerful design workflow, going from Sketch (my new favorite SVG editing app), all the way to the browser as Icon Fonts, all automated.”

Web DesignCommon Patterns in Styleguides, Boilerplates and Pattern Libraries
“I thought there’d be more overlap between frameworks than there is. I recorded over 160 distinct patterns, none of them ubiquitous.”


  1. By traslocare posted on May 31, 2013 at 2:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Non mi capita mai di fare commenti sui blog che leggo, ma in questo caso faccio un’eccezione, perche’ il blog merita davvero e voglio scriverlo a chiare lettere.

  2. Trackback