You might have heard the term UI and UX in your college life, or a YouTube video or anywhere else & wondered what he/she is talking about, or you might have been a Web Developer struggling to get a good UI in your Website/ Application but you don’t know anything about UI or UX. Either case, you don’t have a good idea about what UI or UX is.
UI/UX is a required skill in daily life, every time you open an application or a website the visuals you see in the website are all designed by none other than an UI/UX Designer. An UI/UX Designer looks into the overall visual of the web page or App and strategically places the visual elements (i.e. Buttons, hero image etc.). An UI/UX Designer is often called UX Designer or modern day’s Product Manager. So, first let’s see what UI and UX means.
UI stands for User Interface, User Interface is a place where the humans interact with your Machine/Code and UX on the other hand which is User Experience, dealing with the overall Experience a User gathers from an Application/Website. In this Article you will learn the basics and the fundamentals of UI/UX Design in 5 steps mainly.
It’s like any other Tech –
Let’s understand the importance of UX Design in Technology these days. In modern days every time you take out your mobile or boot up your computer and the first thing you ever see is the visuals (i.e. the icons, the wallpaper, the folder etc.). All these visuals are part of the UI UX Design, without an UI UX Designer the program/application would not have a layout. Doesn’t mean the program won’t work, but it won’t live in the market as the program lacks a strategically designed UX.
Let’s take Netflix as an example. His rivals are Amazon Prime, Mubi etc., but how did Netflix achieve to be India’s No. 1 streaming platform? It’s User Experience! In a notebook, all of those applications do the same work, Stream TV Shows/Movies. But due to Netflix’s beautiful UI and strategically designed layout, it makes the user come back more often, because you just love coming back to a place you love!
No Worries! It’s same as any other Art form –
UI/UX is the same as any other art in the world, you get an idea and you bring that idea into a visual piece. Like that, in UI/UX you are briefed with certain ideas about a website or application i.e. “We want a Hero Image and below that we want a section portraying our recent work”. With this brief, you make a scratch layout on how you want to visualize the website and then you make that design come to life, and that’s what UI/UX Design basically looks like. Yes, there are many things to look into, while making such a layout too.
1) Get Started –
Getting started with UX/UI Design is easy, all you need is a computer, a stable internet connection and UI UX Design software. You download a software and go to YouTube, search the software and there you have a lot of knowledge already (The Futur, NNGroup etc.). There are not much softwares in UI/UX Design, the most popular ones are Adobe XD & Figma. I personally use both of them and both have fulfilled the same purpose.
Pro Tip: Try learning Figma as it is Free and its biggest feature is to collaborate with other artists. (I started on a i3 4th Gen PC).
2) Know the UI Principles -
There are 4 key principles in a UI/UX Design:
1. Colour:-
Fundamentals of Colour schemes & Psychology of using colours in your design. There are various types of colour schemes like Analogous, Triad, Complimentary, monochromatic and many more. All these colour combinations make the colour contrast higher making it more visible to the user. You may use a colour and it may not look good because it doesn’t have enough contrast (that is the case with the green colour in the example above).
Pro Tip: Use complementary colour schemes as they have the most contrast in them.
2. Typography:-
Choosing fonts and using them to create enough contrast to make the design readable enough. Choosing fonts can be really intimidating at first so I suggest using only two fonts for now. Go through Google fonts and find the font you love and going to the pairing section you will find more fonts which go with the current font you selected. Keep in mind: Keep the kerning and tracking less for headings and increase those for body copies. Kerning is a bit similar to tracking still they aren’t the same. Tracking means spacing between all the characters of a font while kerning is the process of adjusting the space between two type characters.
Pro Tip: Choose any fonts from this list; Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan and Univers.
3. Iconography:-
Choosing icons or creating them in a consistent manner is necessary in a design to make it look good. Have some consistent icons.
Pro Tip: Download icons from a website(https://fonts.google.com/icons) which provides icon families, like when using holo icons use all holo or become artistic.
4. Contrast:-
Contrast is the most important thing in an UX Design, as it tells you where to look first and makes you look to the other without anyone telling you to move but visually. There can be many kinds of contrasts, Shape contrast, Colour Contrast, Typography weight contrast (Bold/Regular).
Pro Tip: Use colour contrast by using complementary colour schemes.
Overall , you need to have a graphics consistency to make the UI Appealing. Too many elements can make your graphics look messy. You have to limit yourself to using some limited elements and make the elements aligned and equally spaced as irregular spacing looks odd.
Here in the right image:
- The colours are catchy, i.e. there is enough colour harmony in them and they look good together.
- They have enough visual contrast and the typography is clean, making it easily readable.
- The image has been washed out to make it less contrasting while the name is in black as the main element of focus, the description as second.
- Also, notice how consistent icons look good.
On the other hand, the design on the left:
- Is Messy.
- The Typography isn’t readable and there is no contrast in the elements.
- Also, there is no consistent iconography. The play button has a circular design but the pause button doesn’t.
Also, something else to look at is the symmetry and alignment of the whole graphics. Alignment rules can be broken but try to break it artistically.
3) Understand the aesthetics of Design –
Knowing the UX Design principles is appreciable, but that doesn’t make your design pop, you need to get inspired and make your eye train to visualize the design in your head even before you sketch it down. You need to identify the good & bad designs yourself and justify it to yourself why you think it is bad.
Look at the works of other designers and get inspired from them. Study the design and watch at the approach they make to make a design stand out. The Dribbble is a great place to study UX Designs. So, whenever you come across a pretty design, screenshot it and save them in your folder or notes anywhere.
Some of the websites I use regularly,
4) Design for fake Companies or Redesign some BIG ONES –
So, you need to practice! Practice makes it perfect. You won’t get clients at first, so you need to discover fake companies! Fake companies in the sense, make a company which does not exist and design an UX for them for example, Brighter Shades – A company specialising in beauty cosmetics (JUST COME UP WITH A NAME AND NICHE AND START MAKING THE DESIGN).
You can also redesign some of the existing websites of your liking, for example take the website of your school and give it a new look , the look you are looking for. You can also draft the design to your school who knows maybe that becomes the new design of your school. Try things! Don’t stop trying, just remember your creativity dies with the day you stop experimenting!
5) Read the Mind:-
UX which is User Experience, deals with UI Design but with a more complicated thought process. In UX design you go through the psychological process to place and design the elements strategically.
The best way to research UX is by creating the user persona! The user persona is a small document where your client is being described and with that description you need to think like your client and make the decisions of the designs.
Here in this example, the publish button on the right gets the first attention, then comes the other! This proves how design can attract attention to a specific object in a layout. Like that, the first design does not have a priority focus or attraction.
As a UX Designer, you have to keep these in mind. You have to think about what a person would do normally and where a normal person would look first. Use this psychology to make your designs more meaningful. Read more articles on UI UX Design, go through YouTube to find tutorials and follow them! And there you go, you know the basics of UX Design. Now, go start making some interfaces. Happy Designing! ;)