What is UI Design
User Interface design is the visual arrangement of elements within a browser or software application with the intention of maximising the user experience. User Experience (UX) design and User Interface (UI) design are not the same thing but they work hand-in-hand to create a better environment for the end-user.
UI design is a complete contradiction to the phrase ” don’t judge a book by it’s a cover”, because the better your site or app looks and functions, the better the UI design is.
The importance of UI Design
Picture this, you’re googling “how to grow your own vegetables” and you come across this blog that covers everything from soil to the length of time each vegetable takes to grow. You are excited to explore this wealth of knowledge but there’s one big issue, the site looks hideous. Incorrectly sized images, blurry images, 5 different fonts, no whitespace and a mishmash of colours. Sure, the information is good, it might even the best around, but if the website makes the reading experience unbearable, the UI design is a failure.
UI Design is not UX Design
People often get UI and UX design confused with each other and that’s understandable considering how closely the two are interconnected. A simple way of looking at their relationship is that UX design is the “why” while UI design is the “how”.
Why is this element here? Why choose these colours? Why this? Why that?
UX design uses research and data analysis to make informed decisions on how to improve the end-user’s navigation through the website or application.
UI design builds upon the information gathered by the UX designer and converts it into a visually pleasing and functional website or application for the end-user.
How does this font look? How much white space should I apply?
A UI designer may know some UX design but they are separate jobs.
Examples of UI Design
Are you a visual learner? Here are a few examples of UI design
How can I learn UI Design?
Learning UI Design is not very difficult. You just need dedication, time and practice. A good graphic design foundation is also recommended. UI design focuses on using elements such as text, images and shapes to create unique layouts that allow users to easily digest the information in front of them.
Like with other graphic design fields, its not about watching hundreds of tutorials on YouTube or buying premium courses, but actually taking the time out to practice.
The “Tutorial Limbo”
tu·to·ri·al lim·bo | \ tü-ˈtȯr-ē-əl , tyü- \ \ ˈlim-(ˌ)bō \
- The phenomenon where someone consumes hundreds and hundreds of hours of online tutorials but never actually practises.
Tutorial Limbo – The phenomenon where someone consumes hundreds and hundreds of hours of online tutorials but never actually practises.Tweet
A common example of tutorial limbo is someone who watches YouTube videos on graphic design but never opens Photoshop or someone who signs up for paid coding lessons but never opens Visual Studio Code.
Watching tutorials without practicing is a waste of time. Sit down, crack open a cold one, open up the program and “JUST DO IT”. It doesn’t matter if your first design looks like crap because that’s the point. It’s supposed to look like crap at first. The more you practice, the more you’ll improve.
Unbelievable as it might sound coming from me, but I used to be in the tutorial limbo. I would spend tens of hours just watching YouTube videos from Tutvid, Spoon Graphics and Tasty Tuts. Don’t get me wrong, these guys are amazing and I learned several valuable techniques that I still use to this day but just soaking in tutorials will get you nowhere unless you practice.
The “I don’t know what to make” excuse
I understand this one, I really do. Inspiration doesn’t always come to us and it can get very frustrating at times.
However, making excuses like “I don’t know what to make” or “I’m not skilled enough” is not only self-destructive and confidence-killing but it also prevents you from leaving the tutorial limbo.
Here are some examples on where to find inspiration as a UI designer
- Look at local businesses. Do they have an app that needs a redesign? Is their website pleasing to the eye? Try your hand at redesigning them.
- Visit crowdsourced design sites like 99designs and try tackling client briefs. I personally don’t support spec work but feel free to submit your work as a part of the contest.
- Ask your friends if they have an idea for an app and try to make their vision a reality
There is no correct way to find inspiration, however, there is one tool that I recently picked up and have been having a lot of fun with. It’s name is UI Coach.
Meet UI Coach
What is UI Coach?
UI Coach is a UI Design Challenge Generator designed and developed by @nero_awab that allows users to quickly generate practice challenges. The interface is pretty straightforward with only two buttons on the homepage (only one works at the moment). Click “Generate Challenge” to load up your first UI challenge.
How to use UI Coach
One the app page is loaded, you will notice 4 different boxes.
- Challenge – the client brief that tells you what to create
- Colour palette – Colours that should be used in the project. Each colour can be copied by clicking on it.
- Font pairing – Headline and body fonts to use in the UI challenge
- Illustration library – Icon pack to use in the UI challenge
If you don’t like the challenge you got, you can click the refresh icons in each box to change that element or click “refresh all” to generate a completely new challenge.
Other design challenges to try
Not a fan of the challenges provided by UI Coach? No problem. Check out these other design challenges available on the internet.
Did you try UI Coach? How do you like it so far? Please let me know in the comments below.