A directory of brand guidelines: logosearch.link

My design turned out worse than I thought

Dom Habersack
Dom HabersackSeptember 2, 2020
A printed color palette with an eye piece.
All this careful planning, and it wasn’t as pretty as I thought it would be.

Now that we know what we want the next version of our product to look like, we can finally start implementing it. Trying to make our lives easier, I am compiling a styleguide we can follow to build the components. The guides look something like this:

An excerpt from our style documentation, detailing  the dimensions, colors, and other attributes of a button.
An excerpt from our style documentation, detailing the dimensions, colors, and other attributes of a button.

The guides show all values that are necessary for the components to look as intended. I was pretty proud of how they came out. Developers won’t have to dig through layers in Figma, possibly missing one or two of these values. It seemed pretty ideal.

Since we will use some components in other projects, we are creating a component library. To make it more useful, we are using Storybook to build interactive documentation from it. That way, others can explore the full catalog and see what the components can do.

The bad part? My beautiful buttons look terrible in the browser. They seem way too tiny, the text isn’t very readable, and the icons look almost unrecognizable. The buttons are nowhere near as nice as they appear in the guide.

We can fix all this with a few adjustments, but my expectation was definitely much higher. This exercise is an argument for jumping to code and the browser much sooner. Design tools show styles differently than browsers. The sooner we work with the real thing, the sooner we can confirm if everything works out how we expect.

Storybook is an excellent tool for that. We can build our components right there and even combine them into larger units. Fixing my “beautiful” mockups is going to keep me busy for a few days now.

What other tools should I look at to make sure my designs work well everywhere (and not just in Figma)?

– Dom

Continue reading

Markers being dropped on a chair.
#43July 1, 2020

Fat marker sketches are the better mockups

Before we spend too much time on the details, we need to figure out the overall structure of a design.

Several disco balls.
#10November 13, 2019

Stress-test your layouts in disco mode

Talking about mobile-, tablet- and desktop-layouts worked well when the lines between those classes were well-defined.

A screaming cat.
#76February 17, 2021

Fonts that make you go “agh!iIl1”

This nonsense test string reveals some of the main differences when comparing typefaces, like their weight and related characteristics.

Read all issues →