How to learn UI/UX design from scratch.

Even if you don’t know what does UI/UX design means because I am going to start from level zero

Hi, I’m Ankit Upadhyay, well it doesn’t matter who I am. You’re not here for me…right! You are here to learn something new…something that make you better than your current version.

The title itself says that this person is going to teach you “how to become a UI/UX designer from ‘scratch’ (Note it down!).”

So yes! I’m really going to do that..but first things first…( Relax! I’m not asking you to have premium plan )…Let me ask you few questions..ready?

Great! (brave you are!)

First question is…Do you like to be comfortable and seek that comfort in digital world too?

Second one is…Do you try to find out solution for the discomfort you suffer?

If yes…then very well you’re ready to learn it…In fact you already are a designer! 

Let me tell you something basic and important.

Who is a designer?

A person who plans something before it going to execute

That means if you plan something before you do it & you plan to solve a problem in a very strategic way, you are designer!

This planning can be done through drawing or making models or demos.

Car designer makes model and diagrams for the new upcoming car, Fashion designer design dresses and wardrobes.

A inventor designing a new model for a machine is also a designer.

If you’re going to shift your home at NYC then I think you will need an interior designer to make you feel like home.

---

Hey! What do you mean by UI designer?

Because we are dealing with digital world here like websites, apps and plenty of devices like PC, smartwatch etc.

If you’re hearing the term ‘UI’ first time, then let me tell you : it’s an abbreviation of User Interface.

User Interface means how does a web page or app look like and the part of webpage or app, user going to interact with , is called UI of any webpage or app.

If any app or webpage looks good I will say “ Wow ! This app has good UI( User Interface ) ”, “ They’ve definitely hired a good UI designer”.

An UI designer design these web pages and apps before it become functional.

Okay if that doesn’t suits you, I’ve got examples.

Good UI vs Bad UI

Look at the following image and tell me which one “ looks good ” A or B?

I think ‘B’ right ?  ‘A’ could be more worse but trust me I don’t want to make your eyes bleed.

Making the web page or app look good, exactly that’s what UI designers do. 

Any webpage or app screen have numerous things to deal with, like its color, font, images, icons, illustrations etc.

UI design deals with colors, fonts, icons, shapes and illustrations to make the page or app look good

So if you’re willing to learn UI design. You need to learn that how you can make a webpage or app look good with the help of colors, various fonts, icons, shapes and relevant illustrations.

UI design is associated with these visual elements. All these (Color, font, icon, shape, illustration ) are visual elements and you as a UI designer have to make sure that you mix all these visual elements in better proportion.

I am going to write few words on these visual elements of User Interface design.

---

Wait! What the heck is UX then?

Ooh I totally forgot to tell about UX. UX means User Experience.

*Isn’t that UE* , yeah I know but…UE doesn’t sound that sexy.

So now your app or web page look good and it has better UI but does it have better UX?

Do your website users face any problem while interacting with User Interface and If they’re. Man!, you’ve got very bad UX of your website.

I know you’ve used great color combination, best fonts, catchy illustrations and good icons but if your users are still confused what to do next, you need to fix your UX.

Better user experience explains how easy and understandable is user journey.

Enough! Give me examples.

So I think you know something about UI and UX both…am I right? Now I want to discuss about those visual elements of UI design because we are going to start from level zero.

Colors : Most important visual element of UI design

Here is the most important visual element of UI design. You are all familiar with colors and you can name many colors like you used to do in your kindergarten.

Red, blue, yellow, purple, green, white, black, orange. Great!

But in this design world we use different names. In fact we use code-words ( like spies )

There are multiple color naming systems are there but the most basic and what you need to learn as a beginner are these following two… 

Hex color code and RGB color code systems

1. HEX color code system:

 In this method we use six-letter-code made up from a-f and 0–9.

Understood?

No problem! but before I give you examples, let’s play a game!

You need to write a six-letter code-word but the condition is that you can only choose those code-word from these selected letters only ( A-F and 0–9 ).

A, B, C, D, E, F, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Now you’re free to make six-letter-code word like this

Let’s make few colors with hex code

FFFFFF, 000000, FFF000, F4F4F4, DEDEDE and so on…

Now add letter ‘#’ before these codes… like this

#FFFFFF, #000000, #FFF000, #F4F4F4, #DEDEDE and so on…

Wonderful! Do you know each of these above codes represent a single color? Yeah they do!

#FFFFFF represent for pure white and #000000 represent for pure black and hence #3F8CFE represent the color of the following box.

If you want to see more examples, go to this website and check yourself that which HEX code represent which color and here are few other examples

Calm down! you don’t need to remember all the color codes for all colors, there are built-in tools in the software where we make these design.

For more entertainment you can play with this website .

2. RGB color code system: 

As you may know or not, there are 3 primary colors in all color world and these are Red, Green & Blue. All the colors available in the world are mixture of these 3 primary colors in different proportion.

Hence called RGB (Red, Green, Blue).

According to this method each one of these color have a value range from 0 to 255.

( 0 = minimum value , 255 = maximum value).

You can write it like RGB(x, y, z) where x,y,z has range from 0 to 255.

rgb( x, y, z ) 

Suppose if I need to get a pure red color as shown in the above picture I will write…

RGB(255, 0 , 0)

Let’s take few more examples

For pure red it will be …rgb( 255, 0, 0).

For pure Green it will be…rgb(0, 255, 0).

and just like that pure blue will be like rgb(0, 0, 255)

Remember! 255 is max value for a color that means max amount of a color in a mixture and 0 is the minimum as well, it means zero amount of color is available in the mixture.

What will happen if a give max value for all 3 primary colors…it will be white! 

hence for white…rgb(255, 255, 255).

And now you can think what i’m going to do next.. 🙂

For black…rgb(0, 0, 0).

More Examples for color combo

You can play with this website to learn more about RGB color code.

There are more methods to represent a color in codes, which are HSL, CYMK. and RGBA.

Leaving the research of these color codes systems to you. Keep exploring!

---

Typography: Visual text element of UI design

May be you’re familiar with this term ‘font’. It’s style of the text you’re going to use in design. We also call it it typography.

A font have various properties in itself like font-family, font-size, font-weight, font-type and letter-spacing.

Let’s learn about them with examples 

Font-Family

Different font-family means different shape of letters.

In this following image you are seeing three different font-families or different shape of letters.

Pay attention to first letter ‘H’ of above font families. It is like this…

Here have a look of different font-families in the following image.

Here is something more you need to know about fonts.

Font-families are broadly divided in to 3 types.

1. Serif fonts
2. Sans-serif fonts
3. Slab-serif fonts

1. Serif fonts

Let’s understand what this fancy term ‘serif’ means.

‘Serif’ is a term for a stroke of a letter in few font-families.

What do you mean?

Yeah a stroke! and the font-families containing this stroke in its letters are called ‘Serif fonts’.

See this example below what does it mean by stroke or serif of a letter.

2. Sans-serif fonts

Those font-families that doesn’t have this stroke or serif in their letters are called ‘sans-serif fonts’.

‘sans’ means ‘without’

that’s why…Sans-serif = without stroke.

like this example below.

So you know about serif and sans-serif fonts, what about slab-serif.

3. Slab-serif fonts

If that stroke of letters is slab like (-) , we will call it a ‘slab-serif font’. like this

Now it’s final 

Serif = stroke

Sans-serif = without stroke

Slab-serif = slab like stroke

---

Font-size 

Do I need to consider that you doesn’t know what does it mean by size?

I think you know that if font-size is small, the font size will be small and same goes for medium and large too, isn’t it!

Now then how we measure it’s size.

Kilometers?

Centimeters?

Miles?

Nah! we aren’t talking about roads here. These are digital pages and we need something digital to it.

we use ‘pixels’ ( px ) and lots of more are there but there is no need to talk about them all here.

So we are going to use pixels to measure ‘font-size’

The text you’re reading right now is written in 16px font-size! Hmmm getting something?

You can roughly figure out that what would be the font-size of the title of this article. Can’t you?

---

Font-weight

Oh that’s simple, isn’t i!

This font property shows that ‘how fat’ our letters are.

You must have heard the term ‘bold’. aha! that’s it.

One font-familiy can carry one or multiple font-weights, see the following image.

Font -family in the given picture is Roboto

Font-type

Font types are used in text highlighting in articles or writing books.

For example scan this paragraph with your eyes without reading it whole

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Are you able to highlight few words by scanning the above paragraph?

Well let me try!

Lorem Ipsum, ‘Content here, content here’, desktop publishing packages, web page, lorem ipsum

These are few words that i can see if I scan the above paragraph with bare eyes

That’s the work of font- type.

Those oblique font-types are known as Italic and you alredy know bold.

Are you curious to see more fonts and want to see them in action? Go here.

Conclusion

Now you have a basic understanding about UI/UX design and make sure you learn more.

What to do now?

Start making designs!

Where?

Start with figma! It is a software/tool for making UI/UX design.

It’s light-weight & you can use it on your desktop browser too.

I am preparing a short blog post on Introduction to Figma and how to use it.

If you want to know when It’s ready You can subscribe my newsletter.

You can get updates of such short tutorials, new blog post and valuable curated online tools directly in your inbox.

Subscribe my Newsletter for such interesting piece of information