A little typographic hierarchy
If you aren’t familiar, 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.
This is the career list. The spacing between cities and jobs bugged me so I made a few quick changes using the browser developer tools:
Easier to scan and differentiate. The underline isn’t even needed; white space adjustment is enough.
Add a little breathing room to menu hover
Shinola uses an expanding navigation menu to show products:
Meh. Almost elegant but not quite. Clunky on the bottom and the model names are hard to read. A few subtle changes makes it easier to read and more elegant.
Let’s break it down.
- Removed the underline from menu header. It’s too close to the text and the pop-out is enough to know the item is selected.
- Make all “the” lowercase and italic. Every model has it so the word is just visual noise making it harder to read the names.
- More space between the bottom link text and lines. A quick shorthand for elegant is white space, so let’s use it.
- Space between lines and edge of pop-up box.
What does it all mean?
Small details make a big difference. Using white space adds room for the eye to move in a design, making it 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 a bit more white space all around the images, the main navigation item, and the bottom link. A little more room to breathe. No hurrying here, sit back and look at beautiful watches.