The UI Design Process: Everything You Need to Know
Hey everyone, in this article, I’m going to give you some tips and techniques on how to start your design, whether you are designing a website or an app, a user interface design of any kind, whenever you start a design, that is the problem, “where we should start the design?” Should we select the typography first? Or should we make components first? Or should we design wireframes first? So this is the question that comes to your mind. So whenever you start a design, you have a blank canvas. So let’s find out what to do then.
The first thing you are going to do is you have to have some inspirations around you that are related to that design. Maybe that’s a financial website, then you must have some financial organizations and their websites, their screenshots where you can get the ideas.
Second thing is, you need to have the content. Paragraphs, headings, images that are going to be used, that is the second thing.
So whenever you start a design, these two things (step №1 and step №2) you always must have with you. So that is going to be your starting point. You have to put your content on the canvas. Just drop it and just use black and white colours. Never start with a colourful design. These choices are going to be at the end.
So when you start a design, you just throw the content over there. You just try to place them, then you are going to select the scale, “what is going to be the biggest, what is going to be smaller, how you are going to arrange them.”
So arrangement and scale are going to be your next step. After you put the content there, you are going to make the hiding bigger. Just select any typeface, just one typeface for all, everything. We are going to select everything later on. We can work on details later on. So select those scale and layout placement. We can change the placement, later on, but the scale, you have to make the heading very big, subheading a little bit smaller. You have to decide “what will be the typeface size for the paragraph, how bigger will be the image over here or the button be?” So you have to decide those things. This is going to be scale and placement.
After you are done with scale and placement, we are going to add typeface. First, you are going to select the typeface for your paragraph font, why because it is going to be a typeface that is more readable, easier on the eyes. These are the first things that are going to be your priority in selecting a typeface. So you have to select the typeface.
Then after you select the typeface for the paragraph font, you have to match the typeface of your heading, either you can choose the same typeface and bolder, bolder one for the heading or you can go with sans serif typeface with some, you know, serif endings for the heading because bigger sizes, it can easily be read. It’s up to you, you can match the typefaces over here.
Next is going to be your colours. In the end, we are going to add colours. Colour is going to give the hierarchy to your design. Just like scale, the scale gives the balance in what is going to be the first priority or second, third, fourth, colour is going to add into that. So it is going to give you depth like shadows, colours, you can add all those details at the end of your design.
So this is actually a design process for beginners, the beginner designers, or whenever you are designing a lot of people, they don’t know how to manage their design or if you are starting a design, you are afraid, what are you designing? Or maybe something goes wrong or what is the process I should follow? So this is a simple process I follow and you can also follow this one.
So if you follow this process, your designs will be a lot better or you can say easier to change or adapt. If you want to change the layout, you can change it. If you want to change the colour scheme, you can change it because you have already selected your typeface, you are confirmed that this typeface is done, this is going to be my typeface for this design. So if you follow all these steps, you are going to become an amazing UI designer.
