FourZeroThree

Share this post

Just starting your UX/UI journey? Start with learning UI/visual design!

www.fourzerothree.in

Discover more from FourZeroThree

⚒️ Productivity, Personal Growth, Science and Technology 👨‍💻
Continue reading
Sign in
UI/UX Design Journal

Just starting your UX/UI journey? Start with learning UI/visual design!

Sanketh Sharathkumar
Sep 6, 2023
Share this post

Just starting your UX/UI journey? Start with learning UI/visual design!

www.fourzerothree.in
Share

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.

Besides, doing consistent UI design practice helps develop a library of common UI patterns and a set of common UX heuristics.

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 👇

  • The Ultimate Guide to Figma’s Auto Layout: Design and Construct UI Components like a Pro in Figma!

  • Figma for Education: Learning Auto layout

  • Figma / Advanced Auto-Layout Tutorial

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 👇

  • The Secret to Learning Good UX/UI Design Fast

  • Copying an Existing UI to Learn How It Was Designed


💡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 👇

  • Google UX Design Professional Certificate

  • User Experience (UX): The Ultimate Guide to Usability and UX

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.

Share this post

Just starting your UX/UI journey? Start with learning UI/visual design!

www.fourzerothree.in
Share
Comments
Top
New
Community

No posts

Ready for more?

© 2023 FourZeroThree
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing