Hello again 👋
Mark here.
Today we're going to get familiar with some of the key design concepts to understand, as well as important lingo.
📝 Task type(s): Reading & thinking
⏲️ Estimated time: 10-20 mins
🛠️ Tools: None
👇 Steps...
Below are the core design concepts that will help you make usable products. They can be quite hard to grasp, so I’ve tried to simplify them into bullet points. Don’t worry if you don’t fully understand them straight away, they may sink in better with practice. Come back to them as reference while you build.
- Our brains can understand things quicker if there’s at least some alignment.
- Page elements generally align and relate in some way – left, right, centred, etc. Don’t rigidly stick to one alignment for everything on a page – vary it a little to add interest.
- Relate the edges and axis of elements to something else nearby. That way they appear to have a structure, not just float.
- Use a simple column grid to guide regular spacing. However, **don't treat grids as strict rules.
- With long-form text stick to left-alignment, and use centred only on short-form text.
- If everything is important, nothing is important. How can users find what they’re looking for if everything has the same look or emphasis?
- Hierarchy visually guides users to find or do things, without needing instruction.
- The most important elements should be larger, bolder or coloured differently.
- Group related elements – same visual style, or located together with space around.
- Have a minimum of 3 distinct levels of typography – headings, subheadings and body copy.
- Ask yourself, where will the user's eyes go initially (the focal point)? Then, what will they go to next? Do this for the page as a whole, and for individual parts.
- If everything is different and unique, users won't know where to look. How can they find what they're looking for if there's no pattern?
- When you have more consistency, it’s easier to spot something inconsistent – to pay attention to.
- Use familiar design patterns from other apps, consistent stylings for your UI elements, and regular patterns of page layout.
- Aim for a balance of roughly 80% consistency / 20% unique in every thing you design.
- Sometimes called "whitespace", empty space is a very powerful design tool.
- reduces clutter, increasing clarity and focus.
- shows how individual things are grouped or related.
- creates regularity in layout.
- Our eyes need spaces in order to understand boundaries and separation, to navigate.
- Important page elements will get noticed more if there's space around them.
- Add spacing around groups of elements, so it's clear they're related.
- Increase space around important points to focus attention.
- Pay attention even to text line spacing. This should be 130-150% of the font size as a guide, to ensure it’s comfortable to read.
- Good usability doesn’t always mean good accessibility. Take extra steps where you can. Every little you can do helps someone (plus Google likes it when you do!).
- Make sure your text has a strong contrast from the background.
- Don't rely on colour to convey information. Use it to enhance only.
- Users shouldn't have to hover to find anything important in your layout.
- Links and buttons should have text that describes the destination or action (e.g not simply “Click here”).
- Where possible, form fields should have strong borders and labels above/next to them, not inside.
- There’s so much more you can do with accessibility, but you will need to balance with against the time involved and who your main users are.
- Get into the habit of creating a mobile-sized design mockup as well as desktop-sized. Just designing for desktop screens means you're not considering mobile users.
- Check your font sizes on mobile. Overly small text is one of the most common errors made on mobile.
- Make sure buttons are big enough to click easily on mobile.
- An image doesn’t introduce a subject well, so place page headings above the main image on mobile, not the other way around.
Tommorrow we'll be practising some of the key concepts we've learnt today!