Design Principles & UX — Part 1
What are Design Principles?
The principles that exist in the world of design are all outlined to help you create a design that is usable, aesthetically pleasing, and accessible.
There are a lot of resources out there that help outline these things, with many opinions, lists, and other related teachings that are all useful in their own rights. I wanted to share in multiple releases, some of the principles and techniques that I’ve learned of and follow as a UI/UX designer.
Without further ado, let’s get into the following:
Hierarchy
The importance of providing visual emphasis on different elements to communicate their level in the page’s hierarchy.
Contrast
The importance of providing accessible contrast between elements and the background.
Proximity
The importance of grouping related elements.
# Hierarchy
The importance of providing visual emphasis on different elements to communicate their level in the page’s hierarchy.
In design, headings are something you should become incredibly comfortable with. They help to communicate different sections on the page, in terms of their relation to the previous sections on the page. They can also help to give your brand personality, depending on the font family and size that you’re choosing to use, as well as the text itself.
Hierarchy can be communicated by one or many of the following:
- Font size and weight
- Font colour
- Background colour or highlight colour
- Text decoration
- Spacing and dividers
Depending on your website’s theme, you can employ only one of these techniques or as many as visually suits it. I find that I always use different font sizes, as typically the sections of information lose their importance the lower into the hierarchy you go. The other thing that I find I do often, is to modify the font sizes for mobile. Because you’re dealing with a much smaller screen, and sometimes a screen with a different zoom level, larger font sizes can often appear oversized and obtrusive.
I’ve seen some sites which use a highlight behind a header to give it a burst of colour and some personality, as well as other decoration. I find using lines either beside the heading or underlines are a nice touch, and helps to make it easier to relate body copy to the header in terms of spacing. Font colour for headers can also help to bring a nice differentiating factor between blocks of text, and draw a user’s eye to the header after scrolling through a section.
The dividers specifically are something I tend to forget about, but are absolutely important, especially in websites which may have long sections of text in between sections, with potentially harder to distinguish headers. Understanding where a section ends can help a user scroll better and can help break up these large sections of text so that they don’t feel like they’ve been scrolling for hours.
## Tips
- Be careful with the fonts you’re choosing for your headers. If you use a decorative or script font, it may seem that the larger font size of headers may help, it doesn’t necessarily in production. Sans-serif and serif fonts are better options for headers, as they should remain legible across all device types and screen sizes.
- If all of your headers are intended to be visually the same, keep in mind that this may get confusing for both developers and your intended users. Make sure to still differentiate your headers from your main body text and from each other, especially if your headers communicate the same thing.
- Try to be consistent in your header use. The developer(s) also need to be aware of this, but as a designer, you should make sure that you aren’t using a font size of 48px for a second-level heading on one page and font size of 48px for a first-level heading on another page.
- Get comfortable learning the different header types for a website and be sure to communicate clearly in your style guide what you want each one to look like after development. Otherwise, you and the developer may find yourself with different expectations.
# Contrast
The importance of providing accessible contrast between elements and the background.
Have you ever tried to read red writing on a green background?
Have you ever had to highlight the text on a page just to read it, because the highlighted colour provides better contrast?
Have you ever viewed a web page with low screen brightness and been unable to read it? Have you ever increased your brightness and realized you still can’t read the page?
That’s the importance of contrast. Being able to read the page. But it goes further than just your average pair of eyes: what about users who face little to no vision? What about the users who view colour differently, or those who view no colour? If someone with good vision is struggling with your site, what is it like for those with less than good vision?
There are many colour contrast tools that you can use to check if you want to come up with good contrast pairings, and there are also plugins you can use for your respective design tools or even your browsers for testing to both check if the contrast is high enough or view in other colour modes. The higher the contrast value is on the left, the better your contrast on the site. There are different levels for meeting contrast accessibility, which you can find from checking the WCAG 2.0 documentation.
Some of those tools include:
- https://color.review/
- https://webaim.org/resources/contrastchecker/
- https://coolors.co/contrast-checker
It’s important to remember that different font sizes, weights, and even icons and other elements all have different base contrast ratios to meet. These even differ between compliance levels: A, AA, and AAA all have different ratios, with A being the strictest, while AAA is the latest. You can read more on the WCAG 2.1 guidelines to better understand what you need to do to design an accessible site.
The more you train yourself before the design process to get used to designing for accessibility, the more it becomes something ingrained and habitual for you in the future. These colour contrast guidelines are most important for elements with which the user will interact with. This means any buttons, links, headers, body copy, and forms should all follow these guidelines for all of their states to ensure that your users can actually complete actions on your site.
## Tips
- Read up on your guidelines if you aren’t familiar with them. It does get more difficult, but you can still build a beautiful colour palette that is both accessible and suits your brand.
- Remember that your website’s main content doesn’t need to take advantage of your brand palette! Your logo and large blocks of colour can be your brand colour, but the interactive elements, headers and other text can all be darker variations to improve legibility.
- Remember to test your design at all stages. When you’re first prototyping something, test. As you move into development, keep testing. Testing doesn’t actually ever end — unless you hit a point where you’ve run out of time or the site is entirely out of your control.
# Proximity
The importance of grouping related elements.
Have you ever used a form where you’re not entirely sure whether the form field and the next adjacent label is actually related to the form field you’re inputting data into? That’s one of the more obvious signs of proximity not being properly taken into account where design is concerned.
Proximity in my mind is also directly related to spacing, in that your line-height should be small enough that a paragraph looks like a paragraph and not a bunch of poorly structured paragraphs, and that your paragraphs look like they’re properly spaced from each other. This is also important in list design, as you typically want more spacing than your typical line-height, but less spacing than that between your paragraphs. Play around with list spacing — usually this can be modified in the code.
Not only that, but any related elements like buttons, graphics, or icons should all be close enough to their parent item to make it clear that the items are actually related. A form’s submit button shouldn’t be spaced so far apart from the form that it looks like it’s just a floating CTA button. Icons should be spaced closer to their respective links than the next link. If an image has a caption, the caption should visually look like it’s describing the image and not a floating paragraph with no context.
## Tips
- Do a window test on your site or the design you’re working on if you think that elements may be too far apart. A window test is done by creating a box around a part of the design, resizing the viewport of your design, or resizing the artboard of your design.
- Remember that proximity might change as screen sizes change. Often, I find things I have situated in multiple columns for desktop need to be shifted to only be 1 or maybe 2 columns for mobile, which means the design itself needs to change to be responsive.
Disclaimer: I am not an expert in the field of UI or UX. I am someone who has been working in the field for 5+ years, who started when UI and UX were still questionable fields, even if it had been around long enough that some people knew what it was. I’ve seen it grow. I’ve found more and more resources over time. I’ve second-guessed every design decision. I’ve had internal stakeholders question my designs, only to go back to the original design after more vigorous feedback rounds. I’ve had designs that shifted from something I enjoyed, to something the client was happy with.
There are so many ups, downs, and confusion in this field, but every time I find new articles, I feel just that little bit more confident in the decisions that I’m making. I hope that this article finds you well, and you’re able to take it and the information it provides with you into your career and also feel just that little bit more confident in your designs and decisions.
