This is a vast subject but lets make a start. The place to begin with UI design is typography. To make any effective interface it is essential to consider the role of the written word in your design. The words you use communicate meaning and tone. Your words will be read out by a screen reader, or heard in the minds of your users. There are lots of design principles about typography that we can learn and then apply to other design elements.
If you consider the origins of printing and the printing press, you will come to see that the paradigm of typography on the web has been inherited from this 15th century invention. For example have a look a this block print from 1490 and compare it to the 10 unique font sizes on the algolia search site.
| 15th Century | 21st Century |
|---|---|
| |
What do you notice about the way the fonts increase in size?
Why does the largest font size have the lowest number? i.e. <h1>
What this demonstrates is that size and scale is not everything, proportion and balance are just as important. What makes for good design is not down to individual elements but the way many elements are composed together. There is a relationship between the largest font and smallest font. The scale has a pleasing growth to it that is not linear, but more like a musical note gradually increasing in loudness.
If you look at the Algolia site, on each page there is a subtle sense of harmony and elements feel like they belong together. Not all sites have this. For example you can contrast the look and feel of the Algolia site with the Sky News site (from 2019). Proportion and balance for your font sizes is a good place to start.
| Design | Font Sizes |
|---|---|
 |  |
This idea of a harmonic scale translates to color pallets. A color pallet is a set of colors that complement each other. You can generate a pallet based on color values that are in natural proportion and balance to each other.
Line spacing is a good example of vertical rhythm. Getting the spaces between lines just right makes a huge difference in the readability of text. Consider the hight of a letter, the spaces between the lines needs to have some kind of proportional and balanced relationship to the letters. Just as this vertical rhythm makes our text readable, so the vertical spaces between different elements on our page also make our design pleasing and easy to follow. Line height teaches us that the vertical space between elements matters to us.
Whitespace is your best friend when creating beautiful layouts. The 2 ideas above (a hamonic scale of proportion & vertical rhythm) area captured by the concept of a unit of space. In css 1rem is equivalent to the size of a single character at the browsers default character size (16px). What is interesting about this is 2rem is double the size of 1rem. Its a scale of proportion. So our layout based on the rem unit of spacing should scale in harmony if I alter the default character size from 16px to 14px.
Frameworks like Bootstrap, Basecss and Tachyons all have this concept of a unit of spacing. So to add a single unit of space (margin) around a button you use a unit of spacing class like this:
<button class="m-1">Submit</button>
The power of this is by abstracting away the actual px sizing you lean into a system of spacing, which will make your whole design and layout coherent. You'll get really solid vertical rhythm if your header, nav, topbar, main section and footer all use the same harmonic of space between them.
Think about the text on this page. It is grouped into paragraphs with headings. Why do that? This paragraph is going to be about grouping, so all my points about grouping connected content together will go here. Look at the ways content can be grouped together. You can use borders, backgrounds, or simply white space. Often controls that are grouped together form a component, it is important that all the controls in that component communicate to the user that they belong together. What are some of the ways you have seen this done?
Since Ethan Marcottes "Responsive Web Design" article, professional web developers have made sure their designs render well on many different screen sizes.
In his article Ethan combines 3 key ideas that make up responsive web design: Fluid grids, flexible images and media queries. It is really such a cleaver and wonderful hack that developers everywhere adopted these into their sites. It requires no framework or extra software, it's just a smart use of the CSS 3 spec.
For you, as you think about laying out your pages, the mantra of "mobile first" can be really helpful. Mobile screens are narrow and the layout really will be very simple stacking components (with good vertical rhythm) should see you end up with a useable layout.
Then as the screen size increases you can start to make decisions about which components could be displayed next to each other in a simple grid, then with more screen real estate the grid can become more sophisticated. Cognitively and practically you'll find layout for mobile a great place to start.
We have looked at a set of useful ideas about design above. One key skill to practice here is the different breakpoints that will apply different CSS to your designs at different screen sizes. Remember that CSS is applied from top of definition to bottom, later CSS declarations overwrite earlier CSS declarations. Thats how the media query works, for example below in the CSS the height of the header element starts as 4rem then later conditional definitions overwrite that particular style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Responsive assignment</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* css for mobile goes here */
header {
height: 4rem;
}
/* this is for your hamburger menu for mobile */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
/* css for mid screens goes in here */
@media screen and (min-width: 30em) and (max-width: 60em) {
header {
height: 5rem;
}
}
/* css for massive screens goes in here */
@media screen and (min-width: 60em) {
header {
height: 6rem;
}
}
</style>
</head>
<body>
<header>
<section>
<a href="/">
<img alt="small multiverse logo" src="https://www.getmyfirstjob.co.uk/Portals/0/Logos/Multiverse-logo-1684076426.png" />
</a>
</section>
<nav>
<details>
<summary>
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20" fill="#242456"></rect>
<rect y="30" width="100" height="20" fill="#242456"></rect>
<rect y="60" width="100" height="20" fill="#242456"></rect>
</svg>
</summary>
<nav>
<a href="/employers">Employers</a>
<a href="/candidates">Candidates</a>
<a href="/blog">Blog</a>
<a href="/community">Community</a>
<a href="/join-the-team">Join the Team</a>
</nav>
</details>
</nav>
<nav>
<a href="/employers">Employers</a>
<a href="/candidates">Candidates</a>
<a href="/blog">Blog</a>
<a href="/community">Community</a>
<a href="/join-the-team">Join the Team</a>
</nav>
</header>
</body>
</html>
Take this starter code and paste it into a index.html file. Your job is to create a responsive component like the example above. You'll achieve this by hiding and showing different elements at different screen sizes and applying different padding and sizing to elements. Be mindful of your spacing. Apply the different ideas we have talked about for yourself.
Below are some CSS frameworks that capture many of the design principles we have looked at in this session. You can read about them and even start learning to use them.