Tweaking Shinola’s website while browsing

Shinola makes beautiful watches, bicycles, and leather goods here in Detroit and sells around the world. The craftsmanship is wonderful and as you may have guessed the prices reflect the premium products. While perusing the site a few details were not enhancing the high-end look, so I played with some quick changes in the browser.

A little typographic hierarchy

On the left is the current career list. The even spacing makes it difficult to scan quickly. There’s also an issue with empty and repeating city names, but that’s a content issue. On the right, the city name is separated from the previous list by generous white space above. Less white space between the city name and list makes it clear which city each job is in. The underline is confusing though since it looks like a link now.

 

Add a little breathing room to menu hover

Shinola uses an expanding navigation menu to show products:

snippet-before
Hovering over Watches brings up this pop-out menu. 

The design here is almost elegant. The model names are hard to read, and shop watch straps at the bottom feels a bit clunky because the lines are more visually heavy than anything except the gender text.

First, the underline is removed from the menu header. The tab is enough visual cue which section is active. Next, each watch model has the word “the” and it’s given as much prominence as the name. By changing it to lowercase italic the model name stands out more. And this typeface has such nice italics it adds a bit of low-key sparkle to the menu. Adding more padding between the bottom lines and text opens the area.

 

snippet-after
Now we can appreciate the beauty of the watches.

These small details make a big difference. White space lets the eye to move around, making a design feel spacious. The effect on screen space is negligible— the menu box covers a few more grooves of the winder on the background watch image. And if the menu box were translucent the background watch wouldn’t be hidden at all.

There’s also a bit more white space around the images and navigation text. A little more room to breathe. No hurrying here, sit back and look at beautiful products.