Hey, I’m Rudri, a UI and graphic design intern at TheIToons. And here are the basics of UI and UX from what they mean, the difference between them, how and where they are useful, some tips and resources to get started with.
So let’s get started!
What is UI?
UI stands for User Interface. It’s basically the design of everything you see on your mobile screen and on your PC or laptop. Like the layout of the design, buttons and their shape and size, where to place certain elements, which fonts to use, what colors to use etc.
Right now the page where you are reading this article was designed by a UI designer, and it does not only depend on how good my article, but also how good and usable the design of this page is that it makes you enjoy reading this article.
What is UX?
UX means User Experience. It is the experience or feeling that the user gets while using the design. UX is associated with the usability or flow of the mobile app or website. It is more about functional aspect of the design and not the aesthetics of design.
It is said to be bad UX when the design is confusing and makes the user frustrated or angry, and it is good UX when the it is easy and clear to use. For example, have you ever found a site where you want to download something but just can’t find the “download button”, yeah that’s bad UX and which will make you avoid using that site in the future.
Difference between UI and UX
UI is how the design looks and UX is how the design feels.
The job of a UI designer is to make the design look aesthetically pleasing and beautiful whereas a UX designer should be in charge of making the design clear and easy to use so that it helps the user to have a good experience.
When they both go hand in hand i.e. when the the design looks gorgeous while also being easy to navigate through, the design is *chefs kiss* perfect.
UI is :
- Visual design
- Colors
- Graphic design
- Layouts
- Typography
- Shapes
UX is:
- Wireframes and prototypes
- Interaction design
- Information architecture
- User research
While these two jobs are interconnected, it’s possible to pursue only one of them and be just a UI designer or a UX designer separately but if you want to be a great UI designer I suggest you to learn basics of a good UX.
Why is a good UI so important for growing a business?
A hospital which has walls with design that looks like if it has blood stains and the staff wearing grim reapers costume with chairs that look like a skull, will probably have no patients even though the doctors might be the best ones in the world.
Just like that you will not be able to attract your audience if your design is not suitable for the target audience even though you might have the best services/solution for them.
People say “don’t judge a book by its cover” but unconsciously we judge everything before we use them and your viewers do too. That’s why it’s important to present an amazing “cover” before your viewers to turn them into clients.
What goes into making a good UI and UX?
It isn’t only just placing boxes and adding colors, there’s much more that goes into it. UI isn’t actually an art form, as art means you can do it your way but in UI design there are rules of colors, shapes and typography that you have to follow according to psychology of your target audience. You need to follow the color theory, and what typography styles to use, grid systems, Hick’s law, the isolation effect etc.
While UX is more of learning about behaviour of your audience and design flow in a way that makes sense to them. Though people who do UX are called UX designer but it is more about learning about psychology of digital users and help them achieve their ambitions.
Here are some resources to get started in field of UI/UX
Inspiration
There are amazing designs on Dribbble and Behance, but when you have to get inspiration for creating a legit app or website you can’t rely on them.
Here’s why with an example, I designed an e-commerce clothing app and as I always took inspiration from Dribbble I just focused on the design looking good and not its usability so I ended up forgetting the main key elements like the logo of the app which should be located at top and navigation bar etc. So mate, the designs on these sites are beautiful but not usable. Instead, go to Mobbin. It has almost every app’s design , with every single screen copied from top to bottom and is very helpful when you feel like you’re “missing something” in your design.
Softwares/tools for designing
Figma allows you to design and prototype all in one place. So you don’t have to juggle between apps/sites anymore. It’s super easy to use and I basically love it. Has plugin options too which came out recently.
I just started as a UI designer about 1 ½ years ago and I started out with figma, never really used any other software except it, but most of the designers used adobe earlier (now many are switching to figma) as it was more familiar to them. It’s also great for designing and has its own pros and cons but I would personally recommend figma more cause I haven’t really used adobe but give it a try if you have used other adobe softwares in the past.
It’s more of a prototyping tool than a designing one, but it’s a great one. For the intro of the app they teach you how to use framer via video in a unique and cool way. It’s dope, you’ve got to check it out!
Some tips
- Look for inspiration first before designing, and gather information.
- Sketch wireframes before you start design
- Post your designs even if they look “incomplete” or “not that good”
- Search up for design challenges/games. One I recommend is daily ui.
Some articles for you to get started
This is another article I wrote on the color theory and psychology. There you get the basic terms for colors, what they mean and how and where to use them in your designs
Grid systems were confusing to me at the start cause numbers and stuff make me dizzy so I didn’t focus on it that much but realized that grids are a must to learn which without much effort made my designs look great.
Typography is literally everywhere. It’s very important to learn about typography if you are a ui designer because if you write like this, you will ruin a design with just the wrong choice of font that would have looked great.
You can learn the tool in order to get going so learn Figma in just 24 minutes.
There you go, you learned almost all of the basics of UI/UX in case I forgot something.
Hope you found this article useful 🙂
