Hi there! My name is Charlie and I'm bad at UI design... It is something that I've always wanted to get better at.
It wasn't until recently that I realized UI design was a skill that could be learned, just like anything else. After educating myself on various design principles and techniques, I've narrowed down the key components of design to the following:
- Copywriting (i.e. text)
- Design re-use
It's a pretty short list, right? Let's have a quick user interface 101 and explore each of the above in a little more detail below:
The core of any software application is the text. If you took away everything from an application except the text, you could still probably use it - even if it would be a poor user experience! For that reason, copywriting is the first design technique you should apply.
Key copywriting principles:
- Landing page headlines should succinctly explain exactly what your product does and why your target personas (i.e. customer profiles) need it
- Less is more - every additional word you say dilutes anything you've already said
- It is often easier to write your content before you apply any other design principles
After you finish writing (un-styled) content, it is often unclear what content is related and what content is not. Layout helps solve this problem. It is the second design technique you should apply.
Key layout principles:
- Group related items close together (x-axis and / or y-axis) and unrelated items far apart
- Use lots of whitespace. Whatever you think you need, double it. This makes your content far easier to read
- Choose 1 strong line and align everything to it
- Said another way, users often find it easier to use interfaces that have been split into left and right sections
- There is a time and a place for center alignment, and that time is not all of the time
- People subconsciously like strong lines from justified text
Just like layout, the style and appearance of your text clarifies related and unrelated items. Further, good typography makes content easier to read.
Key typography principles:
- Measure: your lines should not be too short or too long
- Too short and the reader is interrupted too frequently
- Too long and the reader becomes impatient
- Leading: your lines should have appropriate vertical spacing
- Too little or too much, and your text is hard to read
- 120% - 145% of the font size is 🔥
- Typeface: using different typefaces for different pieces of content helps distinguish them (e.g. titles, navigation, etc.)
- Serif can help reading speed and as such is good for blocks of text
- Sans-serif is great for titles and small footnotes
- Google Fonts provides free typefaces
A Note on Contrast
Contrast helps group together related items, as well as separate unrelated items. More contrast is better than less (less contrast makes your content harder to distinguish and more confusing). Think of your application like a billboard - it should be easy for a user to find the next action to take (i.e. link to click).
We've already touched on the first two tools for creating contrast - layout and typography. The third is colour. Colour is very effective at making the desired user Call to Action (i.e. link, button, etc.) jump out at them. It is best to add colour last in your design process, like building a house. Further, only add it where it serves a purpose.
Key colour principles:
- Don't be bold with colour contrast. Be very bold
- Use colour palettes (i.e. colour combinations) created by professionals. Check out Adobe's. They're free
- Add colour last
5. Design Re-Use
Good artists copy, great artists steal. Is design any different?
Personally, I struggle to brainstorm new design ideas myself... so I've become very comfortable borrowing ideas from others. For example, you might notice portions of this site look suspiciously similar to Medium. Medium has a great design, which is part of the reason it has been so successful. Since my site has a blog and UI that serve a similar purpose as Medium, I allowed Medium's design to inspire me.
Key design re-use principle:
- Find a design you like, and