Just starting your UX/UI journey? Start with learning UI/visual design!
Discover more from FourZeroThree
Just starting your UX/UI journey? Start with learning UI/visual design!
I decided to learn UX/UI design at the beginning of 2023 in the hopes of making a career transition. I wasn’t sure if I wanted to, but gave it a shot nevertheless. I am now a few months in and things are not bad after all.
I initially found UX/UI boring and intimidating, as learning any new skill would obviously be.
And, anecdotal as it might be, I thought I could pen my thoughts regarding how a beginner could approach their journey of learning UX/UI. Not that I am adept. I am far from it.
I want to attempt to write this from the perspective of advice I would have found helpful when I wanted to give this a shot. Maybe this write-up could be useful to another newbie who might be struggling to start off. I don’t know. Maybe?
Start by learning UI/visual design
I started with UX and it was boring! Honestly, I found UX quite hard to comprehend. I had to clench my teeth and hang on. I was having second thoughts.
I would rather suggest beginners flip this approach and start by learning UI/visual design first. Why? You might ask.
Well, first up, visual design is fun. It’s interesting and gets your creative juices flowing. More importantly, before you learn how you could do user research and solve a problem, you might want to know what makes an interface, a screen, or a web page.
“What are the basic elements that make up a screen? How do elements make up design patterns and what design patterns could solve common design problems?”
I think knowing this stuff in the beginning sets a foundation upon which you could build UX skills.
As a designer, I first learned visual design by completing the 100-day UI challenge. I developed a mental library of UI patterns, and a set of common UX heuristics, and became extremely familiar with the iOS human interface guidelines.
- Richard Yang in his post “6 Exercises to Overcome Skill Plateaus as a Designer”
Also, as Richard Yang writes in his post, referring to and learning from Material Design and Human Interface Guidelines helps you learn a ton of stuff.
Think about it. A solid foundation of visual design actually sets you up to do meaningful UX research. I think it gets easier this way. In the end the output (well-designed screens/web pages) matters.
In fact, I also found validation for this approach from Chethan KVS (Chethan runs a YouTube Channel called Design Pilot. Amazing in-depth tutorials with no fluff). He talks about this in his guide “Learn Product Design”.
This, then begs the question. What’s an approach to learning UI/visual design?
An Approach to learning UI/Visual design
Learn Figma
You don’t have to design great interfaces to learn Figma. Have patience, just play around and get very familiar with the tool. This is key.
To begin with, I would suggest two very good resources for beginners available on YouTube.
Figma Tutorial for UI Design — Course for Beginners (FreeCodeCamp)
Free Figma UX Design UI Essentials Course (don’t get confused with the title of this video. It covers the basics of Figma and UI design).
It’s okay if you aren’t able to create meaningful elements or patterns at the start. Be patient. Keep tinkering. Get a hold of Figma first.
Learn Auto Layout
Your design needs to be responsive — designs that shrink or spread depending on the screen size. Auto Layout in Figma helps you design complex responsive layouts. Starting your designs with Auto Layout from the get-go is good practice and could save you a ton of time.
Auto Layout, however, can be daunting to learn for beginners and might have a steep learning curve. There are several tutorials on YouTube teaching this, and the best way is to follow along and do the dirty work. Practice creating different elements with Auto Layout. Learning Auto Layout is a game changer.
Study Resources 👇
Recreating screens
I learned a ton by just recreating screens (from real-world apps) pixel by pixel. Don’t believe me? There are quite a few articles/videos that talk about this.
Recreating screens, on the surface may sound like a task you don’t want to do. “I’d rather try designing or redesigning a screen/web page on my own”, you tell yourself. But wait, you are just starting, and recreating screens teaches you a lot.
When I started this practice, I had so many questions.
What should be the height of the status bar?
What should be the height of the nav bar?
What is the anatomy of a particular component/element?
What is the right approach to design any component/element?
What are the best practices for designing different elements?
You get the idea.
A lot of design thinking has gone behind well-designed apps, and you can learn a lot about various design patterns and visual hierarchies.
The best part 👉 Your entire layout needs to be in Auto Layout so your screens or pages are responsive. This could be daunting in the beginning, but you’ll come around and it’s really worth it.
You’ll actually need to research, refer to articles and videos, and read from Material Design and Human Interface Guidelines, in order to recreate screens or web pages the right way.
It’s amazing how much you’ll learn about UI design and UX heuristics from this practice alone.
Study Resources 👇
💡Remember
Recreating screens/designs is one thing, recreating the designs the right way is another. Do your research and find the right approach to design screens, lest you have to unlearn many bad practices later.
💡Tip
Always read and learn through articles/videos. Keep searching for articles or videos that talk about specific techniques that could help you design better or take the right approach to design.
⚠️ A word of caution
Recreate screens of popular, real-world apps that are well-designed. Look into websites like Mobbin, Screenlane, Pageflows, UI Sources, and the like where you can get screenshots of real-world apps.
Confident with UI? Start learning UX!
The best part about taking a UI/visual design first approach is that it is hands-on, practical, and teaches you a ton to get you confident and rolling. I really think this could set you up to learn UX. At least for me, taking this approach makes learning UX a tad easier (than when I first started) and palatable.
Besides, UX is a lot of theory and I presume the problem-solving skills that UX may warrant, could be chiseled and oiled on the job too.
Study Resources 👇
I’ll finish with this statement I came across in an article.
UI gets you the interview. UX gets you the job.
- The Biggest Mistake UX Designers Make In Their Portfolios by Hello
Closing Notes
Well, in the end, this works for me, a caveat you need to keep in mind. However, I am fairly convinced this approach could work for beginners.