Andrew E. Clark
Jul 21, 2017 · 1 min read

This exploration needs more attention.

Equispacing is fine and dandy if the items being equispaced are of consistent size and weight. One huge thing not mentioned in this article is VISUAL WEIGHT, which changes everything.

Without calling it out, you drastically altered the visual weight of the whole nav bar by swapping-out the original transparent line icons for opaque, filled icons. You also changed the design of the icons, most notably the ‘Network’ icon which now doesn’t match the rest of the family. (I thought it was a sunrise before I zoomed it.) And you also opaqued the labels.

This began as a spacing exercise but you switched half of the variables midstream.

Finish your spacing experiment with the original icons and styles. That’s part of their brand. OR, make this a navbar design exercise where everything is subject to change: Icons, labels, colors, states, styles, spacing etc.

Label lengths vary widely, between 2 and 13 characters which is probably the bigger issue here. ‘Me’ matches ‘My Network’ but labeling could definitely be improved. I’d stick with consistent, concise 1-word labels: Home, Network, Jobs, Messages, Profile, Work –these are 4–8 characters each but ‘Network’ could be a verb or noun.

If the labeling isn’t negotiable, simply put 64px between icons and boom!, you’re done.

If it still looks wonky, go all the way and make this a Navbar Design exercise and give us another update.

)

    Andrew E. Clark

    Written by