by Can developers also design? This is a fairly tricky question to answer. Nowadays, with how teams are structured and projects are led, it is common to see developers handing off the design work to designers to focus on development tasks only. But it doesn’t have to be that way.
Not every developer is indeed a designer, but that doesn’t mean developers can’t learn the basics of design and apply them to their work.
Understanding the fundamentals that build user interfaces is essential for any developer who wants to create great products. From colors to visual hierarchy, these principles will help you create better user experiences even without being a designer.
For those who think you need to have an artistic talent to be a designer, I’ll show you 5 fundamental concepts in design that will improve any piece of UI you create.
1. Color
Color is the first UI design fundamental that changes the first impression of a user experience. When you visit a website or use an app, your eye is exposed to color. Every design has some sort of personality that is expressed through color. It can communicate securely and professionally as a baking website, or fun and playful as a game app, without any words.
Color theory
Color theory is a set of principles used to create harmonious color combinations. It’s based on the color wheel, which is a circular diagram that shows the relationships between colors.
But how do we know which colors work well together? Well, some color schemes can help us match visuals effectively using the color wheel.
Monochromatic: Uses one color in different shades and tints.
Complementary: Uses two colors that are opposite each other on the color wheel.
Triadic: Uses three colors that are evenly spaced around the color wheel, which together form a triangle.
Analogous: Uses colors that are next to each other on the color wheel.
Applying color to UI
Applying color in user interfaces is about tinting squares based on a color palette. A color palette is a set of colors that are used in a design to create a cohesive look and feel.
80-20 and 60-30-10 are common rules used to choose how your colors are going to be applied on a design. The 60-30-10 rule, for example, is a guideline where you apply 60% of your design on a primary color, 30% on a secondary, and 10% on an accent color.
If you’re not ready to pick a color palette, you can start your design with a neutral color palette, kinda like grayscale, and then add colors later, take a look at the coolors website for inspiration. You don’t have to focus on all aspects of a design at once.
General tips for Colors
- Less is more
- Consider color saturation when creating variations of a color
- Be consistent where each color is being used
- Consider color contrast with text when mixing them
2. Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. It is beyond just choosing the most aesthetic font. Great typography can tell a story like anyone could, make text pleasant to read, and help establish a brand identity.
Take any sort of graphic design that isn’t finished and choose the proper font and color, and you will see a completely drastic change in the result. These two fundamentals are just powerful ingredients to start with.
Choosing typefaces
Choosing a typeface is just as tricky as trying to estimate a ticket in a sprint. Designers often spend a lot of time mixing and matching different pairs of fonts to find the perfect combination. There are some general rules of thumb that can help you choose the right typeface for your project.
Serif: Fonts with small lines or strokes attached to the end of the character. Serif fonts are often used in print media, such as books, as they are considered more readable in long passages of text and more traditional e.g. Merriweather, Times New Roman, Georgia.
Sans-serif: Fonts without the small lines or strokes at the end of the characters. Sans-serif fonts are often used in digital media, as they are considered more legible on screens and have a more modern appearance e.g. Raleway, Roboto, Open Sans.
Monospace: Fonts in which each character takes up the same amount of horizontal space. Monospace fonts are often used in coding environments, as they make it easier to read and align code e.g. Source Code Pro, Fira Code, Courier New.
That’s not to say you can’t use serif fonts on digital media or sans-serif fonts in print media. It’s all about the context and the message you want to convey. Use fontpair to discover more about font combinations.
Line-height and letter-spacing
We spend a lot of time on our screens reading text, so it’s important to make sure that the text is easy to read and visually appealing. Fonts are designed to have a certain amount of space between letters, known as letter-spacing. The rule of thumb is to always keep a narrow letter-spacing in the main UI text and larger letter-spacing in headings and so on.
For even better reading experience, make sure your paragraphs are not too wide (between 45 and 75 characters per line) and the spacing between paragraph lines, so called line-height, is enough. Because if lines are too long, it makes it harder for people to gauge where the line starts and ends.
General tips for Typography
- Opposites attract: serif with sans-serif, small with tall, decorative with simple
- Stick with a fixed number of font-weight like normal (400/500) and bold (700/800)
- Limit the number of typefaces to 2 or 3, e.g. one for the body text and one for headings
- Use a type scale to create a consistent hierarchy
- Use a taller line-height for small text (1.5) and a shorter one for large text (1.3)
- Don’t center long form text, it will always look better left-aligned
3. Visual hierarchy
Visual hierarchy is the arrangement of elements in a way that implies importance. We use visual hierarchy to guide the user through a product. For example, in a website, we want users to first see the logo, then the main headline, call to action, and then the rest of the content, and this is done by giving visual clues such as size, color, contrast, and spacing to different elements.
How can we establish visual hierarchy?
Culturally, humans usually look at a page by quickly scanning with our eyes from top to bottom, left to right, kind of a zig-zag pattern.
So digital designers often play with some visual cues to guide users to different elements within a user interface to help users understand content and accomplish their goals.
Font size and weight
When talking about text readability and hierarchy, font-size and font-weight are the most important factors. It’s the first one or two sentences that draw our attention on the main page of a news site.
In the same way that big headlines in newspapers grab our attention, large and bold fonts help stand out and can emphasize important information and call to action.
Color and contrast
We’re visually drawn to bright colors and high contrast areas, especially when they are surrounded by more muted colors or backgrounds. The strategy is simple: play with color to direct users to key elements on the screen.
Spacing (white space)
White space, or just spacing, is the space between elements in a design. It is a vital part of UI designs and helps to create a sense of organization and structure. Thoughtful spacing between elements creates visual interest and shows users how different UI elements are related
As always, it’s important to note that when everything is competing for attention, we want to try to cut down the number of elements visible at once or de-emphasize some elements on the UI so we can have more harmony and avoid chaotic environments.
4. Contrast
Contrast is the difference between two or more elements that makes them stand out from each other. It’s the reason why we can see and distinguish objects in our environment. Every element in a user interface, by nature, has a certain amount of contrast based on the background.
Contrast is great for UX and can be used to prioritize areas of a design and draw attention to certain areas. When you use bold text to emphasize a text element, you are drawing attention to it by increasing the contrast between the bold text and the regular text, which is essentially more pixels used for text rendering.
As with anything that stands out, it can also be distracting if overused. When you run into a situation where the main element of an interface is not standing out enough, instead of trying to further emphasize the element you want to draw attention to, figure out how you can de-emphasize the elements around it. This can be done by reducing the size, weight, or color intensity of the surrounding elements.
Accessibility and Contrast
One key aspect of contrast is accessibility.
To make sure your designs are accessible, the Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text (paragraphs, links, etc), and 3:1 for large text, such as headings. This ensures that text is readable for users with visual impairments, including those with color blindness.
I personally advise avoiding using colors with a high lightness value, such as yellow or light gray, for text. These colors can be hard to read and easily violate the WCAG contrast ratio. Instead, try techniques such as rotating the hue to a slightly different color or background, for instance, a soft white instead of pure white or a different shade of dark instead of pure black. In any case, check out the contrast checker tool to guarantee your text is readable.
5. Alignment
Alignment is the design process of ensuring every element is positioned correctly in relation to other elements. It is an aspect of design that gives us a sense of order and balance. In fact, we see alignment in nature all the time that can be observed in biological and astronomical alignment, from cellular to planetary orbits. If something is out of alignment, it will be very noticeable how inconsistent the design can be.
Alignment of text is essential for readability, as bad text can be hard to read and understand. In general, we should left-align text for English-speaking users. Center-aligned text can be used for short blocks of text like headings or titles, but it should be avoided for long paragraphs.
In the case of numbers in table layouts, we should right-align numbers for better readability and comparison. This is because numbers are read from left to right, and right-alignment allows the decimal points to line up vertically, making it easier to compare values.
When using design tools such as Figma or Penpot, we can use the built-in alignment tools to ensure that elements are properly aligned. We can also use grids and guides to help us maintain consistent spacing and alignment throughout our designs.
Conclusion
In summary, developers can design too! By understanding and applying these 5 fundamental concepts of UI design: color, typography, visual hierarchy, contrast, and alignment, developers can create and deliver more visually appealing and user-friendly interfaces.
I advise you to start with color and typography (choose great fonts!) and then build upon each foundation with iterations and feedback from your design and product team.
Look for inspiration on sites like dribbble.com and remember to always practice!
We want to work with you. Check out our Services page!
