Master the basics of visual: how to become a self-taught UI/UX designer
By: Dawid Tomczyk
Tags: UI, UX Design, Prototyping, Visual Design, UX

Please keep in mind they are many different ways to get into this field - there is no one/simple path that everybody takes ! This is how I started and your journey of becoming UI/UX would be probably totally different. Although, I’d like to highlight few points that might be helpful in your journey of becoming UI/UX designer.

1. Master the basics of visual and web design

Before jumping into UI/UX design you need to master the basics of web & visual design as all of those principles and skills will be carried over UI design (designing buttons, typography, white space, drop shadow, working with colour combinations, gradients, different kinds of grids, layouts etc). Having good understanding and solid foundation in visual and web design is essential to become a skilled UI/UX designer. Below I’ve highlighted some of the basic and key design principles that you need become familiar with (If you’re not already):

1. Color

Great three-part series on color theory — color vocabulary, fundamentals and the psychology of colors.

Color Theory for Designers

2. Grid systems

What they are, and how they can be applied to your design process.

Building Better UI Designs With Layout Grids

3. Composition & Balance

Learn to how balance a composition

Design Principles: Compositional, Symmetrical And Asymmetrical Balance

4. Typography

Better Web Type is an easy-to-follow web typography email course for web designers & web developers. Created by Matej Latin

Sign up for the free typography course

5. Contrast

Using contrast to organize information, build hierarchy and create focus.

Principles of design: contrast

2. Understand the UX design process

Another very important aspect in becoming a UI/UX designer is understanding the process, methods, philosophy that are used in UX design process. Generally speaking, the UX design process is very flexible — there is no strict rules or order of phases to follow. In addition to that various companies, teams might have different methods of implementing their own design process. Although I’m going to give you idea of a general and common UX design process called Design Thinking.

What is Design Thinking?

Design Thinking is the process of designing product from perspective how it will be understood and used my users rather than requiring users to adopt their behaviours in order to learn how to use the system. The goal is to develop useful & valuable products based on user needs, not the other way around. Design Thinking occurs in the following five stages.

Design Thinking is flexible & iterative process

1. Emphasize

The first stage of the Design Thinking is about getting to know the users, their wants, needs and objectives. This includes: observing and engaging with people their experiences and motivations, as well as immersing yourself in the physical environment so you can gain a deeper personal understanding of the issues involved. All of the insights gathered at this stage are carried over the next stages

2. Define

The second stage in the Design Thinking process is dedicated to defining the problem based on the information you have gathered during the Empathise stage. During Define stage you will analyse your observations and put them in order to define the key problems that you and your team have identified so far. Once you’ve created a problem statement you can start to progress into the third stage of Design thinking, Ideate.

3. Ideate

All of the insights from the previous stages have given you very solid foundation in the terms of understanding your users, so it’s time to generate potential solutions to the problem statement you’ve defined during the define stage. There are many different types of ideation technique that will help you to generate potential solutions and ideas: brainstorming, mindmapping, bodystorming. The main goal of this stage is to generate as many potential solutions as possible when moving to the next phase in the Design Thinking process — Prototype.

4. Prototype

The fourth step in the Design Thinking process is all about experimentation and turning ideas into tangible products. A prototype is basically a scaled-down version of the product which incorporates the potential solutions identified in the previous stages. This step is key in putting each solution to the test and highlighting any constraints and flaws. Throughout the prototype stage, the proposed solutions may be accepted, improved, redesigned or rejected depending on how they fare in prototype form.

5. Test

Testing stage is about validating the product before final developing it. This is the final stage of the 5 stage-mode, however the results generated from the testing phase will often lead you back to a previous stages of the process, providing the insights you need to improve the current built of your product and test it over again.

Design Thinking is flexible & iterative process — that means process doesn’t have to follow the steps in sequential sequential order — The 5 stages should be understood as different modes that contribute to a project. I’ve described those steps very briefly, so If you need to learn more about each particular one you should visit www.interaction-design.org

3. Learn how to design user interfaces and sharpen your visual design skills

Very strong visual/UI design is very valuable asset and crucial step of becoming UI/UX designer and probably the hardest discipline to perfect — it takes months, years of practice. You need to focus on visual/UI design as the very big part of your skillset. You have to learn how to design user interfaces for different kind of devices including desktop, tablet, mobile etc. Every single day you need to work, perfect and sharpen your design skills — how to do that? I’ve pointed below few ideas and methods that you might use.

Get familiar with UI/UX design patterns

You need to get familiar with the UI/UX design patterns and what particular problems they solve.

pttrns.com A great collection of mobile design patterns

Generally speaking, a UI/UX Design patterns are recurring solutions that solve common design problems you might encounter every day working as UI/UX designer. Design patterns are also known as standard reference points, guides, templates that designers might use to solve a particular problem when designing a website or mobile app, so you do not have to reinvent the wheel every single time trying to solve a particular design problem.

I’ve put together a list of some of the best places to find design patterns on the web:

pttrns.com A great collection of mobile design patterns

A great collection of mobile design patterns www.uisources.com — mobile design patterns & interactions

mobile design patterns & interactions https://uigarage.net —

— UI.patterns — User Interface Design patterns are recurring solutions that solve common design problems

— User Interface Design patterns are recurring solutions that solve common design problems uimovement.com The best UI design inspiration, every day.

Copy top designers

There is no better thing than learning from better and more experienced designers. Not everyone has a mentor or someone helping in learning UI/UX design, so I’d like to share with you very effective method that will help you improve your visual skills on your own. How to start? You need to go to Dribbble, Behance, Pinterest (or any other website where you might find good designs) and literally start copying top designers. Although, do not just blindly copy those designs, you need study them very carefully and pay close attention to the following:

layout (UI placement, spacing, padding, grids etc.)

(UI placement, spacing, padding, grids etc.) navigation (placement, size)

(placement, size) typography (font sizes, line height, serif or sans-serif)

(font sizes, line height, serif or sans-serif) icons (what type of the use? how and when the place them)

(what type of the use? how and when the place them) background (gradient, photo used? )

Focus on layout, navigation, typography, icons, background, content etc. and try to understand how all of those small details are coming together. Copying and recreating others will give you that good taste, so you will have better understanding and idea how good design looks like. This is how I got better and many, many other designers and you will only when you start using this method! Remember though— It’s all about the practice! you’re not reselling this stuff.

“The best and fastest way to learn a design it to watch and imitate a more skilled & experienced designers”

Details really matter

When it comes to UI/UX design attention to details is crucial — sometimes even really small and subtle change might make huge difference, so you need to start paying attention to every single detail of your designs — I personally believe that attention to details is a very valuable skill that puts designer on higher level.

“Devil is in the details”

You need to be able how to differentiate good from bad design. You need also train your eye every single day — go do Dribbble, Behance and study very carefully top designers — how they use white space, typography, spacing, colour combinations etc. Practice makes perfect.

Here are my favorite websites for inspiration:

behance.net Discover the latest work from top online portfolios by creative professionals across industries.

Discover the latest work from top online portfolios by creative professionals across industries. dribbble.com A community of designers sharing their work.

A community of designers sharing their work. Uplabs curates the best of design & development inspiration,

curates the best of design & development inspiration, awwwards.com Awards website that promotes design talent.

Awards website that promotes design talent. uimovement.com The best UI design inspiration, every day.

4. Work on fake/training projects

In order to improve your visual/UI design skills you should start also working on the fake/concept projects. This is great practice method which will help you to build your portfolio and then get new clients or landing full time job. In addition to that working on the fake projects is also a great fun as you’ve got total freedom to play around with different design ideas, layouts, colours, typography etc. so enjoy the learning process and have a great fun! Good Visual UI design will draw attention to the peoples

5. Learn ui/ux related tools

Few years ago when I’ve started getting into UI/UX design there wasn’t much design tools available on the market — designers haven’t got much choice and started using Adobe Photoshop as their primary UI/UX design tool (myself included). Adobe Photoshop as a software, was never created for designing websites, apps purposes. Nowadays there are tons of great and a lot more efficient UI/UX design tools on the market — the good news is that you do not have to learn all of them. Just give it a try to few of them and then stick to one/two and master them.

Sketch app — one of the most popular UI/UX design tools (MAC)

I’ve been using Sketch app for a while now, so If you’re a Mac user I highly recommend this tool. If you’re on Windows you should try the Adobe XD. Here’s the list of software that you should give it a try:

Sketch — leading UI/UX design tool (for Mac users)

— leading UI/UX design tool (for Mac users) Adobe XD for interface design and prototyping

for interface design and prototyping Framer — Interactive design and prototyping tool

— Interactive design and prototyping tool Figma for collaborative interface design

for collaborative interface design UXPin — for design, prototyping, collaboration (web browser based app)

— for design, prototyping, collaboration (web browser based app) Invision App for prototyping and collaboration

There is tons of great and free software learning resources available on-line. There is no better thing than learning from more experienced designers. Here’s few of them which will give you really good start in the terms of learning particular software.

Sketch together — one of the best youtube channels to learn Sketch app

Principle for Mac tutorials by Daniel Hooper

6. Invest in your knowledge

You need to invest your time in acquiring knowledge and then making use of the knowledge you will gain, so start reading articles, books, listen to podcasts and watch design related videos — There are tons of articles & video tutorials available online for you to learn about new design trends, use cases and tutorials. These are great resources that you can use to build your knowledge and expertise as UI/UX designer.

Here is the list of my favorite design related websites and blogs: