DEV Community

Cover image for 7 UI Design Fundamentals for Developers
vansh bhardwaj
vansh bhardwaj

Posted on

7 UI Design Fundamentals for Developers

Hello everyone, my name is Vansh and I'm a frontend developer. A lot of people have asked me this question,"Do I need to learn design to be Front end developer?"

Before I answer this question first you need to understand that many companies do have in-house UX/UI designers, who will do the designing part and build mockups while you can concentrate on the development part. It's our task to give life to mockups, to make them interactive.

But what if you don't have a designer or you're building some side project for yourself, and when you have one, they're not always available because they have a lot of work or maybe if some mockups are missing.
So you cannot always be dependent on a designer to make minor changes to the design as well.
And you having a design sense is of considerable value for you and your team.

See I'm not saying you need to be a designer nor we are here to replace them.
But it wouldn't hurt for you to pick up some designing skills as well.
And it definitely helps to have a creative eye and develop knowledge esthetics.

So in this blog post, I'm going to share how you can build interfaces/apps that look good by just following these 7 UI fundamentals.

Let's Jump in!

  1. White space
  2. Color
  3. Contrast
  4. Scale
  5. Alignment
  6. Typography
  7. Visual Hierarchy

1. White Space

The first UI fundamental we are going to discuss is the white space.

White space is the empty space between the elements in your UI.
it's just a void of space but that gives your UI a structure.

let's look at an example

whispa.png

we can see the right side container is much more readable and looks good from the left container.

By using just 3 CSS properties, padding, margin and line-height, you can significantly improve the appearance of your text.

2. Alignment

Alignment is the process of ensuring that every element is positioned correctly in relation to other elements.

Visual alignment is one of the foundations of design, we humans prefer visually aligned objects.

First, let's look at this UI

ali1.png

We can see here are 4 elements, logo, headline, text and button,
and they all seem to be off a little bit in terms of their alignment.

Again, with just 3 properties: margin, transform and text-align we can solve this.

ali2.png

we can see now it looks much better because everything is aligned properly.

3. Contrast

Contrast is defined as being in a 'strikingly' different state from something else.
While building UIs we should keep in mind if users can clearly see and distinguish all the necessary details on the screen or page.

contra1.png

Look at the first image where there is a grey subheading and grey text on a button, we can see there is hardly any contrast from the background, it's hard to read text, especially on the button.

contra2.png

Now if we increase the contrast, using a darker color for text and white on top of the button, we can see it's much more readable.

Lack of readability can be a serious reason why users are not retained even with attractive products.

4. Scale

Scale is the size of elements that must be carefully considered. Leveraging the scale of different elements, you can greatly improve a design.

Let's look at this example, we can work on the scale on this UI.

scale1.png

First of all, cards are too small for this given layout. Also, there isn't much difference between headline and subheadline beneath it. Also, we can increase the size of the Hex color code.

Screenshot_2021-09-24_01-27-28.png

In our second UI, our cards look much more filled out and better with the space around them, we also increased the size of the heading and subheading and it looks much better than the previous.

5. Typography

Typography isn't just the font but it is the art that involves arranging a typeface in various combinations of font, size, and spacing.

Typography requires the understanding of other fundamentals, along with a few other considerations like how to effectively choose fonts, their size, spacing and a few more.

typo1.png

If we look at our first UI, we can see there's a lot going wrong in terms of typography. First, there are 3 fonts used which are unnecessary. second, we are not really sure where to look at or which text is really important so we need to fix the scale as well.

typo2.png

In our second UI, we are sticking to just 1 font family, increased the font size of headings and decreased the size of cite that is 'John Doe' which is not really important and now it looks so much better.

6. Color

Color is the first UI design fundamental that shapes the user's experience.
If you go to any website or app before you're able to process and even read anything your eyes are exposed to the colors, so color in terms of UI design is extremely important.

Different colors can have different meanings like green for instance can be associated with growth and wealth, red with loss or warmth, black for elegance and luxury and so on and so forth.

Before building UI be aware of your target audience for this particular app and what you need to project eliciting emotions

color.png

Another thing you should focus is on avoiding a bunch of colors in your UI design. Too many color destroy the quality of UI. Also, avoid colors that don't work well with each other and don't complement each other well.

7. Visual Hierarchy

Every element on a user interface has a level of importance. Some elements are more important than others. Visual hierarchy is how you establish this importance. The way we do it is by utilizing the above UI fundamentals that we have discussed.

vishe.png

If we look at this UI, this lacks visual hierarchy as we are not really sure where to look at first and our call-to-action button lacks enough contract as well.

vihei2.png

Fixing this by scaling our heading and making call-to-action stand out, we have improved the visual hierarchy
Looks better than before? Right?

conclusion

There isn't one UI fundamental that is more important than the other.
They are all equally important in order to get the design right. If the design is lacking in one of these areas, it's really easy to notice that something is not quite right with the quality of the design.
So be sure to think about all these fundamentals the next time you need to build a user interface.

Good luck

Twitter

GitHub

Discussion (34)

Collapse
seokjeon profile image
Se-ok Jeon

Thx for this! This is really what I wanted. Helped A LOT.
Can I translate in Korean this post? If you don't mind, I wanna share this awesome post in Korean. Surely, There will be a linke directing to this original post.

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

Sure , go ahead.

Collapse
khangnd profile image
Khang • Edited

It would be better if you mentioned the DesignCourse channel of Gary Simon from which the majority of your screenshots were taken.

Collapse
dianale_dev profile image
Diana Le

Yep I took Gary Simon's course on Scrimba and recognized it immediately.

Collapse
swagwik profile image
Sattwik Sahu

If you took a course from Scrimba, do you happen to use Imba?

Thread Thread
dianale_dev profile image
Diana Le

The Scrimba platform does! I have not personally used Imba but I like Scrimba and the interactive code windows for lessons.

Collapse
neelansh15 profile image
Neelansh Mathur

Really like the 6th point about Color. The color feelings are well explained 🔥

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

Thanks Neelansh, I'm glad you like it :)

Collapse
miamiller2 profile image
MiaMiller

I collaborate with developers by clearly communicating my designs through words and via software such as Zeplin and by making prototypes the developers can access. your blog is very helpful form me!!! How can i make someone miss me

Collapse
rishitkhandelwal profile image
Rishit Khandelwal

Explained amazingly 👏

Collapse
ob2code profile image
Huy Dang • Edited

Many thanks for your sharing, basic but useful!

Collapse
memojtabazamani profile image
mojtaba zamani

Thank You For This !!!

Collapse
elvirafimansyah profile image
Elvira Firmansyah

thanks a lot, this is so helpful

Collapse
sourabh20078059 profile image
Sourabh Dubey

This helped me a lot. A good UI is more attractive and creative

Collapse
bobbyiliev profile image
Bobby Iliev

Great tips!

Collapse
bryandche profile image
Bryandche

Thanks very much.
Amazing

Collapse
aulerien profile image
Aulerien

Thank's

Collapse
rameshkmunjal profile image
RAMESH KUMAR MUNJAL

Really a good and much needed article. Will surely help me in coming projects.

Collapse
dhruvilp profile image
Dhruvil Patel

As the title says, it really clears the fundamentals. Also, examples are nicely shown. Really liked the constrast and color one. Great work 🔥!

Collapse
saroj8455 profile image
Saroj Padhan

Thanks a lot

Collapse
keerthivasanr profile image
Keerthivasan R

This post is a great start for anyone who want the basics :) Thanks so much

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

Welcome :)
Please do share if you find it useful

Collapse
wentallout profile image
Nguyễn Đăng Khoa

This is a really well made post, a noob developer could take a look at this and immediately understand. Thank you.

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

I'm glad you like it , please do share
Thanks :)

Collapse
tim012432 profile image
Timo

Very good points and explanation.

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

Thank you :)

Collapse
midouwebdev profile image
MidouWebDev

Awesome !

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

Thank you :)

Collapse
benjamincullendev profile image
Benjamin Cullen

Some really good straight forward advice here. Thank you.

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

Thanks Benjamin, glad you like it

Collapse
tanth1993 profile image
tanth1993

nice concepts. so far, I work without thinking about these UI concepts - just look at the design and make it as same as possible. :)

Collapse
ayabouchiha profile image
Aya Bouchiha

Keep going !

Collapse
vansh__bhardwaj profile image
vansh bhardwaj Author

thanks a lot !

Collapse
andrebezada profile image
Andre Fernando Bezada

I’m starting in development and I find this properly useful. Any suggestions about how to complement UI/UX along the code journey ?