Design Fundamentals for Developers - Part 1 Webdesign
In this short blog series we are going to tackle the basics of webdesign and everything you need to know to create beautiful landing pages and web applications. This series is aimed at developers and we will cover following topics in the first part:
- Design Systems
- Typography
- Color Theory
- Layouts
- Responsive Design
TLDR: Design is not just about making things look pretty. It's about creating a cohesive experience for the user. Use a design system, same colors, same fonts, same spacing.
Design Systems
Every good website and webapp has a cohesive way to think about design. That way every page, component, layout and email looks and feels the same. Even non-designers recognize when a page or an app feels off. And most of the time its because there is no design system behind it. A design system combines design primitives like colors, typography, spacing with other elements like components, layouts and patterns. For a pioneering design system from back in the days check out the Material Design from Google. I don't like the visual look of it but it has a lot of good principles and ideas.
Base Size Unit
We begin with the primitives. Most of the times the base size unit is 8px. This is is so handy because it's divisible by 2, 4 and 8. This will come in handy later when we talk about spacing, layout and grids. Also it's easy to use with CSS because you can use rem units.
| REM value | PX |
|---|---|
| 0.5rem | 8px |
| 1rem | 16px |
| 1.5rem | 24px |
| 2rem | 32px |
| 4rem | 64px |
Breakpoints
Breakpoints define when a layout could change. Usually we have 3 breakpoints for mobile, tablet and desktop. You can add more and adjust them to your needs. But I like to use the following:
- Mobile: 390px - 810px
- Tablet: 810px - 1440px
- Desktop: 1440px
Guides
Guides are vertical columns that help you align your content. In Desktop we usually have 12 columns - again because of it's divisibility. In mobile we usually have 4 columns. This is not a strict rule but it helps to align your content and make it look more professional. We have a outside margin of 24-64px and for the gaps something between 24-40px. You can adjust this based on how airy you want your design to be.
On tablet 12 columns are too much so we can go here with 6 columns. Also the margin and gaps need to be reduced to under 32px. And finally on mobile we can go with 2-4 columns and a margin of under 24px.
Here are some examples of how you can use the guides:
- with images
- they start at the beginning of a column and end at the end of another, not at the start of another column.
Max-width
What happens when someone uses your website on a large 4k monitor? Well if you don't set a max-width for the content, your user will have a hard time looking from edge to edge to read your content. That's why we usally set a max-width on the desktop breaking point. Something between 1200px and 1400px is a good value but you can play with it and see what fits your design best.
So with Breakpoints, Guides, Margin, Gap and max-width you have to ask yourself following questions before making the final version.
- Does your design look cohesive on all breakpoints?
- Does it look too tight or too airy?
- Does it look unbalanced or off?
- Does it look good on mobile?
If not, adjust the values to find a good balance.
Color
Color is very important obviously. In fact it's one of the firsts things we perceive when looking at a design. First we recognize the shape and then the color. So it's important to get it right to make your brand, website even logo recognizable.
If you don't have colors already start with the 60-30-10 rule. This means you have a dominant color that takes up 60% of your design (typically your background color), a second color that takes up 30% and an accent color that takes up 10%. This is a good starting point but you can adjust it based on your needs. One great tool to help you test colors is Realtimecolors by Juxtopposed.
Your color should envoke the right emotion and reflect your brand.
Color Theory Crash course
Really simply put, there is a color wheel with colors and they have relationships to each other. The most important ones are:
- Complementary: Colors that are opposite of each other on the color wheel. They create contrast and make each other pop.
- Analogous: Colors that are next to each other on the color wheel. They create a harmonious look.
- Triadic: Colors that are evenly spaced around the color wheel. They create a balanced look.
And each color has a hue value, a saturation value and a lightness value. You can adjust these values to create different shades of the same color. Practically speaking, hue is which pigment of color you use, saturation is how much of that pigment you use and lightness is how much white or black you add to the color. And you can get different looking colors that only change on the lightness value. This is called a monochromatic color scheme. Checkout Coolors for a great tool to generate color schemes.
Also if you have colors already, you can add some variations in lightness for example to use in your design. This way you can create a color palette that is cohesive and looks good together. Tailwind is known to use a lot of variations of the same color in their design system. Here a tool generate color variations for tailwind UIcolors.
Color Accessibility
We focus a lot on colors looking good together and having the right feel to it. But before all that it's essential to check whether your UI colors have enough contrast to be readable. It's not only about visually impaired people but also about everyone else. Your UI must be readable without having to zoom or squint. That's why there are guidelines for color contrast ratios. The most important one is the WCAG 2.0 AA standard. They recommend a specific color contrast for text and background colors. There is also a difference between small and large text. Small text needs more contrast to be legible. Your main text and background colors should have a AAA score but at least AA. You can check your colors with tools like ColourContrast.cc
Colors that have less contrast can still be used though, especially if they are your brand colors. But for everything that should be read its better to avoid low contrast colors. For Logos, decorative elements and other non-text elements you can use whatever col ors you want.
There is a lot more to accessibility but this one is the most important one for color.
Typography
Fonts serve two main purposes, they communicate a feel to the brand and also they are the vehicle of the content. That's why this part will make or break your design. There are alot of fonts out there, from free to expansive. Finding good fonts is not easy but here are some tips to help you out.
- Use a small number of fonts. Usually 2-3 fonts are enough. One for headings, one for body text and one for accents.
- Look into Font Families that have some different weights and styles. They are meant to be used together.
- Font pairings should not be too similar. They should contrast each other.
- Check out Typewolf for inspiration and font pairings.
- Look into Google Fonts, they have a lot of free fonts that are good quality.
- Don't use too many weights. Be intentional with weights and use them only when necessary to convey hierarchy.
Microadjustments to Fonts
Most fonts are ready to use but for websites you can make some adjustments in letter spacing or line height and font size to make it more readable. Try to decrease your letter spacing by -1% to -4%. A lot of fonts need -2% to look good on web. You can increase letter spacing for smaller text to make it more readable.
Line height is simple too. Headings need less space between lines than paragraphs. The more text you have the more space you need between lines.
| Type | Line height | variation |
|---|---|---|
| Headings | 100% | +- 10% |
| Paragraphs | 120-144% |
Font sizes
Here some guidelines for font sizes:
| Type | Font size | variation |
|---|---|---|
| Body | 16px | more than 16px for variation |
| Headings | 1,5-2x of body but in 8px grid |
Graphics
Images, Decoration, Infrographics and icons too are all important to communicate your ideas and your product's value. Graphics should enhance the meaning but should not be the primary means of meaning. If you would remove the graphics, the content should still be understandable and make sense. So don't rely on graphics to communicate your message well. They should be a nice addition to your content. Also make sure to not use generic stock images. This makes your site feel scammy and untrustworthy. Use real images of your product or service or use illustrations that are unique to your brand. Also avoid AI generated images that are obviously so.
UX Considerations
User Experience is all about inuitiv communication of ideas. Don't make users thing. Let them glide through your site without making them feel lost or confused. If you are interested in UX design principles check out Laws of UX
We will only cover them superficilly.
- Users think a product is more useful if it's asthetically pleasing to them. Also they are more forgiving if something goes wrong.
- Hick's Law: The more choices you give the user the longer it takes to make a decision. So keep your choices limited.
- Fitt's Law: The bigger the target the easier it is to click on it. So make your buttons big enough.
- Pareto Principle: 80% of the overall value comes from 20% of the features. So focus on the most important features first.
- Miller's Law: We can only hold 7 +-2 items in our memory. So keep lists, navigation bars, bullet points, etc. limited to not more than 7 items.
- Jakob's Law: Users spend a lot of time on other sites and they expect your site to work the same way. So don't reinvent the wheel. Use common patterns and conventions.
- Affordance: If something should be clicked it should look like a button. The expected behavior should be communicated through the design and subtle hints.
Especially with Affordance designers have to make the right indications to the user. If the user should scroll down, place content in a way that only a part of it is visible. If something should be hovered over, think of a way to indicate that.
Additional Tips
- Make the navigation bar hide on down scroll and show on up scroll. This way you can maximize the space for content while still having a navigation bar.
- Also the navigation bar doesn't have to stick to the top, left and right. It could have rounded edges and have a small margin.