Renowned Italian designer, Massimo Vignelli said, “Styles come and go. Good design is a language, not a style.” While minimalism in visual design or neomorphic in UI/UX design is trending today, following them alone doesn’t automatically make for good design. To know how to design, you need to know the fundamental principles that govern user interaction with visuals. You need to understand design as a philosophy and a language.

How to Design: Key Design Principles Explained

In this blog post, we’ll explore how to design, with examples from some of the best web products in the world. We’ll understand how they apply design principles to create unique and powerful experiences that hook and engage the user.

How to Design #1: Design Principle- Emphasis

The principle of emphasis focuses on unambiguously telling the user what is the most important takeaway from the design. Think of the Google homepage, famous for its minimalist UX design. When you go to that page, you know exactly what to do — type in your search query and click on the button. Not all websites can be like Google, and it’s here that designers use a hierarchy of information to establish emphasis. The most important information gets maximum weightage; as the importance reduces, so does the visual emphasis. 

Wealthsimple-Webpage-"How to Design"
Source: Wealthsimple

Look at the above site for Wealthsimple. What are the elements that catch your attention and in what order? If you read the headline first, get started button next, the three gold coins third — this is probably the intended hierarchy. To achieve emphasis, designers use various techniques — the contrast of visuals, size of typography, even animations in user interface design.

How to Design #2: Design Principle- Balance

Balance is an important principle governing how you distribute your elements across your design. Imagine a line in the middle of your design, the visual weight on either side of it needs to be equal. How do you calculate the visual weight of something? Well, this is part science and part intuition. Larger things are often seen as heavier, so are darker colours over pastel shades. The goal of a good design is to strike a balance. However, this doesn’t mean your design needs to be perfectly symmetrical. Asymmetrical designs can be balanced too. 

Apple-Webpage-"How to Design"
Source: Apple

The apple website is a perfect example of symmetrical balance in UX design. 

Razorpay-Webpage-"How to Design"
Source: Razorpay

While Razorpay uses asymmetry, not just on the first scroll, but through diagonal lines throughout the website to strike overall balance in the user interface design.

How to Design #3: Design Principle- Alignment

Another important principle, closely related to balance is alignment. Traditionally, there are 6 kinds of alignment: three horizontal (left, right and centre) and three vertical (top, bottom and middle). Alignment across these invisible lines makes the design look more clean and organised.

Vueai-Webpage-"How to Design"
Source: Vue.ai

In this visual, you’ll notice that the vue.ai logo and the text are all left-aligned. However, the ‘know more’ button is set slightly to the right. This could have caused visual imbalance if the designers had not used the thin yellow line, which aligns with the rest of that section. This is a great example of being in alignment, while still giving the visual contrast. 

How to Design #4: Design Principle- Contrast

Have you heard people say that a design “pops”? They most likely mean that it has high contrast — which is the principle of accentuating the difference between two elements. This can be achieved through colours, shapes, typography and more. Let’s see some examples.

Avaada-Webpage-"How to Design"
Source: Avaada

In this image, Avaada, an Indian green energy startup uses colour to establish contrast in their user experience design. 

Avaada-Webpage-"How to Design"
Source: Avaada

The same tactic doesn’t work in this banner. The ‘e’ in the promise doesn’t have enough contrast from the background, making it duller.

Accenture-Webpage-Design
Source: Accenture

Accenture website is an example of using typography for contrast. See the big bold headline in all-caps, with a much smaller description in sentence-case below. In minimalist UI designs, typography plays an important role in building contrast: You’ll notice pairings of serif and sans-serif fonts, or uppercase headings with lowercase body text in italics etc.

How to Design #5: Design Principle- Repetition

When a customer opens a website or a mobile app, they settle into its design themes. For instance, they might know that the buttons are orange, links are purple, the menu is at the top etc. Repeating these helps the user get comfortable with your interface, as well as subconsciously emphasise key elements.

Netflix-Homepage-Design
Source: Netflix

Look at the Netflix interface for instance. The structure of a short title followed by tiles of movie recommendations remains the same as you scroll down. Netflix’s user interface design uses repetition to present options across categories to the viewer. 

Netflix-Homepage-Design
Source: Netflix
Netflix-Homepage-Design
Source: Netflix

For visual interest, there are minor variations like these, still not treading too far away from repetition. If you look closely, the tile sizes are consistent. This is called a rhythm, where there is a natural flow of design elements, just like in a musical composition.

Design Principle #6: Negative space

This is also called white space. But it doesn’t necessarily have to be white — any unused space in a design is negative space. Like the silences make music more meaningful, the negative space gives design the breathing space to make maximum impact. Without this, designs can look cluttered and crowded making the user uncomfortable.

Kissflow-Homepage-Design
Source: Kissflow

The Google homepage is exemplary of the white space, even if an extreme one. But consider this home page from Kissflow, an Indian digital workplace startup. In addition to the significant white space, they also use light colours as the background to simulate a faux negative space, that makes it pleasing to the eye, without compromising the message.

Design Principle #7: Movement

People typically think of animations and videos when they discuss movement. While those can be an integral part of UI/UX design, the movement principle doesn’t mean that. It means the movement of the viewer’s eye. For instance, English speakers read left to right. So typically, in web banners, text appears on the left and image on the right. Also, users scroll from top to bottom. So, designers put the most important information on top and use the inverted pyramid model as they go down.

Razorpay-Homepage-Design
Source: Razorpay

Do you remember the Razorpay screen from above? The above screengrab is another part of their homepage. By using the diagonal line design style, the designers are leading the user to read the widgets. The closing triangle at the bottom also adds emphasis.

While these principles govern the design, they are not hard and fast rules. Sometimes, designers deliberately avoid these principles with the intention to make the user slightly uncomfortable to evoke a certain reaction. That’s adventurous, but not unheard of. Because design as a philosophy is constantly evolving. Who knows, your adventure might just trigger the next change. Don’t hesitate to colour outside the lines. If you’re looking to kickstart a career in UI/UX design, consider Springboard’s 1:1 mentoring-led, project-driven online learning program