Tag Archives: minimal layout

Coolhunting: two navigation tricks


I was casually browsing on Coolhunting when I noticed two simple navigation features I really liked.

A collapse and expanding option: huge headlines and/or long summaries are a steady trend in nowadays websites (or is this all simply a plot to force us into buying bigger screen?) so it’s good having a feature that let you skim easily through the page by collapsing unrequired data.

A nicely shaped tag cloud: nothing really unusual, just a simple list of tags, neatly disposed into “little bricks”. Instead of the usual more-for-the-SEO-than-the-user heap of links, this tag cloud really offers an alternative to the main navigation.

Clever fonts navigation by sliding glyphs

myfonts-font-slider-navigation

Our attention was grabbed by a clever fonts comparison system in MyFonts‘ website: using a little sliding widget in the left sidebar, you can browse through thousands items, comparing the A glyph of available typefaces. You can get a more detailed preview of your type by simply hovering over the letter with your mouse.

Typetogether minimalist and classy ecommerce website

typetogether-foundry-minimal-ecommerce-website

I’m a typomaniac, I confess, and my favorites ecommerce websites are most of all digital foundries’ websites.

Usually this kind of website displays clean, sophisticated layout grids with minimal graphics elements such as horizontal dividers and flat geometrical buttons.

Big headings and wide, spacious whitespaces (which basically means removing all the graphic overbearing elements from the page) are the most common trick for making your beautiful and precious digital merchandise pop out:  in this impeccable, squared presentations cart usually are represented as coloured boxes which are able to stand out because of their strong contrast with the surrounding white background.

Muji Japan online store

muji-japanese-ecommerce-website

Even if language is unfathomable for us and online translators are of any help, we do love this clean, minimal red and white product page from Muji Japan online store. Every block is squared, lines are perpendicular and every details is finely designed in an accurate, minimalist way: for example the beige and red callout box, with its thick red horizontal lines, really pops out in contrast with the dominating white and so does the red box on the top right.

Besides, we think that the little icons on the left side (e.g. the blue dress) showing the shop categories, are really cute.

Zaraillustrates’ minimal layout

Zaraillustrates website's grid and illustrations

Zara Picken‘s a Bristol-based illustrator that brings us back to the magic Fifties with her clean, marvelous illustration style.

Aside from that, we definitely love Zara’s website structural rigor: broad wide spaces are cut into columns and rows simply by black/gray lines while circle shapes of various kinds play a major role in grabbing user’s attention and to mitigate the otherwise too rigid elements organisation.

In fact:

  • a black circle is used to create this website’s logo;
  • semi-circle shapes, jutting out from the layout , emphasize slideshow’s arrows;
  • big gray bullets encircle posts date.