Design Basics for Developers

A beautifully designed web application is not only appealing to the user but also increases the chances of the user visiting the site again, this is because a professional look and feel builds a sense of trust. Most pieces of art are captivating , they grab our attention and keep us looking at them and as we look our eyes don't just wonder about but the art work itself guides us as to what we look at.

beautiful painting

Such beautiful pieces are not just designed from without ,but they follow certain principles. These are referred to as principles of design. We can apply all or some of these principles of design to our web application to help us create that professional look. They are 7 principles of design. However they are different variations of these principles depending on what you are designing and in the case of web design I came up with this list : Contrasts, Balance, Typography, Hierarchy, Harmony ,Repetition and Color theory.

Principles of design

To help us better understand how we can apply these principles to our web application we will use an example of a poorly designed web application then we will try to make it look better by applying design principles to it. The site below is poorly designed :

Poorly designed app

Now lets try to make it look much better by using some principles . I will try to explain these principles in a very easy way so don’t expect buzzwords.

1. Contrasts

Contrast means items look totally different when placed together . An example can be white text on a black background or a square and circle placed together.

Why is contrast important ?

Contrast will make it easy for the users to see clearly different sections of your app and read without struggling . Imagine if this article had a gray background; it would be difficult for you to read.

How can we apply contrast

If we look at our application’s home page and top navigation bar its difficult to see the text clearly. So we can make these more clear by contrasting the texts and the backgrounds. The site below shows the results of contrast :

before(left) after(right)

2 . Balance

Balance is a design principle that entails that elements on the page must have the same visual weight. What does that even mean? simply put if you draw an imaginary line from top to bottom ,the elements on the left should look balanced with the elements on the right. You can have the same elements on both left and right to achive the balanced look or you can have different elements of different size and shape but arranged in a way that makes them look balanced.

Why is balance important?

Balance ensures that no single element overpowers another, thereby allowing the user to see the other elements on your page not just one element standing out.

How can we apply balance

If we look at our products section of the app; the product image and the product description don’t look balanced. We can apply balance as seen below:

before(left) after(right)

3. Typography

My favourite principle typography. Type has meaning and personality which is why deciding which font to use is one of the most important decisions; this is because a wrong font can convey a wrong message. The principle of typography here is that you need to use fonts that look good together and don't use more than two types fonts in a single app.

A simple trick I use is for headings i use sans-serifs font and for large text I use serifs font just the way this article is written. Deciding which fonts work together can be difficult sometimes but thanks to google fonts we can choose which font we like and google can suggest ones that work well with it. When choosing fonts you need to remember one thing : it shouldn't just look good but it should also be easier to read.

Why is typography important?

Having few font types that look good together in the application creates that professional consistent look.

How can we apply typography

As you can see currently our application is using more than two fonts and they don't look good. So we will make it look better by using different variations of just one font for our entire application. Below is the result :

before (left) after(right)

4. Hierarchy

If you look carefully at the application the “Our Products” heading looks almost same size as the heading below it , and other headings are also too small. We can fix this using hierarchy. Hierarchy means that you make large the elements you want the user to see first and make slightly smaller what you want them to see next. So you keep going smaller to what you want them to see last .

Why is hierarchy important ?

The human brain can’t grant the same level of importance to every element on the page . Rather, it tends to place more importance on the first elements that it perceives. Therefore you can guide the users eyes on what is important on your page.

How can we apply hierarchy

We will make fixes to the headings that look smaller . The results can be seen below :

Before(left) after(right)

5 . Repetition

Repetition means reusing of patterns, text, images, or graphical elements across an application to create a feeling of consistency and unity in your application.

Why is repetition important ?

As mentioned it creates a feeling of consistency, users can easily remember the application and easily anticipate how to navigate certain sections of your app by themselves, patterns are also visually appealing.

How can we apply repetition

Turns out our application is already making use of repetition. Look at the product image and description we have some repeating patterns.

Repetition applied to app

6. Harmony

What comes to mind when i hear harmony is working together . Harmony means maintaining a similar look in our application , different elements need to appear connected to one another and nothing should be out of place, useless, or random. Different elements work together in agreement.

Why is harmony important?

When everything is in the right place it makes it easier to navigate the application and provides a good user experience.

How can we apply harmony

Going back to our application you can see that some buttons and texts have different colors. To create harmony we will use colors. Our app logo has a nice blue; we can maintain the same color throughout different elements of our app for example the blue overlay in the homepage background image . We can try to do that for other parts of the app as well but be careful not to overuse the color. This is the result:

Before (left) after (right)

7. Color theory

Color, when used effectively, can instantly cause someone to feel a specific emotion or think of a certain brand. Which is why it is important to choose colors that send the right message. Regardless of what color you choose the color principle says we need to use colors which look good together. But How do you find colors that match ? There is a way, we only need to know two things :

1. Color wheel
2. Types of color harmony

Color wheel

Essentially, it is a wheel with all the colors formed in a circle. Closer to the middle of the circle, colors are less pure. At the outer edge of the circle, they are more pure and more saturated.

Types of color harmony

These are basically combinations you can perform on the color wheel to find matching colors. The types of harmonies include : Analogous, Monochromatic, Triad, Complementary, Compound and Shades. I will just talk about a few.

Complementary

Colors that are opposite each other on the color wheel are considered to be complementary colors. These colors contrast well and look good together.

Triad
A triadic color scheme uses colors that are evenly spaced around the color wheel.

Just incase you were wondering why HULK wears purple pants ,his colors are part of Triad harmony:

Analogous
Analogous colors uses colors that are next to each other on the color wheel.

Using the color wheel can be difficult but the good news is adobe color made our life easy by creating a color wheel that we can use with ease. All you need is to provide it with the base color and choose the harmony type, it will then generate colors that work well together. This is why i only had to explain a few.

Why is color theory important ?

Good combination of colors creates a very appealing look, users can use the app without destruction by poor color combinations.

how to apply the color theory

For this application I chose to use Shades i.e different shades of blue, the logo color being the base color. But we can add one more color to the app i will use complimentary colors this time to determine the color. I will only apply the color to the section headings. This is the result :

Before(left) after(right)

Finally

We have reached the end of our application fixing we can now look at our before and after.

Before

After

That is the power of the principles design you can see how clean our app looks. So whether you are a full stack developer, front end developer or just starting web development these principles when used properly can help you build beautiful and professional web applications.

This article is one of the topics that I will be covering in the Hackers Guild front end boot camp.

I Hope you enjoyed reading the article and if you did give it as many claps and share with others who might find this helpful.