Start with the feature/functionality first. Don’t start with designing the UI and getting it to look good.
“When you’re designing without constraints, decision-making is torture.”
Top-down approach, always. Stop focusing on low-level design details like fonts, colour, etc. That comes later.
Constantly develop what you design. Don’t design something complex entirely before moving onto coding. Work in small design/code iterations.
Stop designing nice-to-haves if your goal is to get an MVP out. It just wastes time and leaves you less adaptable when you encounter technical challenges.
Limit your choices. ← Critical advice for speed of development and design consistency.
-
Pick a small palette. Stop using a colour picker because you will agonize over the difference between
#b39ffcand#a591eb. -
Similarly, stop agonizing over low-level decisions like what opacity value to set or what padding/margin to use. Pick from a small set of values like
0.9,0.75,0.4. Better yet, use a non-linear scale like this:
-
If you don’t want to handcraft the scale, consider using the golden ratio, $\phi=1.618$, as the multiplier on a base value of 16px, the default font-size on all web browsers (but remember to $\texttt{ceil}$ or $\texttt{floor}$ the value since browsers handle fractional pixels differently).
-
-
Make a fixed scale for everything that you’d normally waste time fine-tuning. Another example of this is box-shadows.
