For beginners with zero foundation, I give this super detailed summary of the UI self-study process

A few years ago, I wrote a long article about learning UI from scratch, answering "Super Practical Beginner's Guide! How to Self-study UI Design from Scratch?". After so much time, I have come into contact with many new people, including students in my own courses, and my ideas have changed a lot. Which system is more suitable for students with high perseverance, sufficient time and a good mentality (to put it bluntly, it is almost suitable for freshmen and sophomores).

Most people want to see quick results and a short learning effect feedback cycle. It is useless for newcomers to learn hand-drawing directly, and it is also useless to read books randomly and not really regard reading as learning! So in response to this demand, I have given a new answer, see below for details.

To become a UI designer, you must first understand what skills are needed to solve problems in your daily work. However, for different companies and different career stages, the problems we have to deal with are different and vary greatly.

This covers a very wide range of skill types, from print advertising to 3D modeling and animation special effects. Especially in small companies, it is necessary to have multiple roles. For example, in a small outsourcing company, the designer may have to contact the client as a project manager in addition to producing drawings, or he may have to write the front-end code himself when making a web page! This is unavoidable in any profession. The smaller and lower the level of the company, the less likely it is to maintain singleness in the work content.

Of course, because the working environment in these companies is not ideal, the work is miscellaneous and different from what they imagined, so when these designers express their opinions, they often complain bitterly, citing other skills required in the work and being exhausted every day. Over time, some people summarized these related skills and made complex mind maps, similar to the one below.

Is every skill in it useful? Of course, it is. We can even write a long article to analyze each skill and list various data to tell you its importance. However, we cannot learn all of them in the early stage. For many skills, you cannot evaluate when you have "learned" them and to what "level" you have learned. This is the biggest trap for newcomers and junior designers. They are keen to collect all aspects of the profession and then learn them without any plan.

For example, the explanation of design psychology on the Internet is generally superficial. You either read Norman's "Design Psychology" series or learn the knowledge of design-related psychology. The psychology that is truly related to design must be understood from the physiological level, such as how the retina forms an image, how the visual cortex works, and the reaction of consciousness to graphics and related behaviors. Without systematic deconstruction of related knowledge, it is impossible to smoothly apply them to real projects.

Especially for newcomers who want to enter the industry quickly, if all your time is spent on learning skills that cannot be directly applied to projects or are not easy to produce results in the short term, then the time it takes to enter the industry will be greatly extended and the speed of progress will be extremely slow.

Newcomers should first understand the most common work output and requirements of junior designers, and then formulate the core skill learning scope. Design psychology and illustration hand-drawing skills are all expanded according to actual conditions after you have achieved the core skill requirements and can find a job.

Next, I will start from the most common work output content in the industry, to the required level, and how to learn, to explain which skills junior designers should learn first, so that you can avoid some detours.

1. General Work Output

First of all, the main outputs of UI designers include the following categories: APP-related design, product homepage design, management interface and advertising images (in the interface advertising space), which account for the vast majority of the work.

Then there are the design types that UI designers may encounter in their work, such as H5, LOGO and VI, offline materials, PPT, product refinement, etc.

The main work output type is the core indicator for judging the ability of junior designers, and determines our application and work performance. Of course, you may say that many companies write the position as UI but are doing graphic design or other work. Those special cases cannot represent the whole. Even if it is a recruiter, if the performance of the main output of UI in the resume exceeds expectations, the requirements for other secondary skills can be lowered. Usually, if these things can be done well, then other types of things should not be too far behind. This is the real idea of ​​the recruiter.

In real recruitment experience, if the employer's requirements for programming, hand-drawing, and graphic design are ranked ahead of UI, and your value is measured by those skills, then with all due respect, this position is just recruiting a front-end designer (or illustrator, graphic designer) who knows a little about UI. The company may not have thought through its recruitment needs from the beginning, or may not have clearly distinguished the difference between UI and other types of work. Don't let these situations disturb your mood.

In reality, most junior UI designers on the market have not made any useful contributions in the main types of design they produce, and their standards are worrying, so it is quite easy to do better than them and exceed the average level in these areas. Designers who can make designs like the following are the ones who are ready to be replaced by newcomers and shout that the industry is failing.

By the way, the best way to develop a comprehensive design is to expand after you have mastered one or two skills and cannot be easily replaced by others. Not only is it easier to learn, but you can also use the knowledge points and thinking methods in other directions to drive the progress of your best field, rather than starting work at the same time. This is why excellent teams and designers are far better than mediocre designers with several years of experience in certain design types when they are facing them for the first time.

Most people, even adults, never achieve a sufficient level of skill in any domain to allow them to feel the true power of mental representations to plan, execute, and evaluate their performance as the elites do. As a result, they never really understand what it takes to achieve that level of skill, not just time but quality practice. Once they understand what they have to do to achieve that high enough level of skill in one domain, they understand, at least in principle, what it takes to achieve excellence in other domains. —Anders Ericsson

So let’s take a closer look at what specific content should be designed in the main output.

2. Specific Outputs

1. Mobile APP UI

APP interface

• Definition: Design and layout the corresponding interactive and visual elements in the interface according to product requirements.
• Requirements: Be able to meet the correctness of the four elements of the plane; know how to apply standard system kits; be able to reasonably define fonts and element sizes; be familiar with and able to design mainstream component types.
• Software: Sketch, XD

Interface Icons

• Definition: Contains the APP launch icon and general tool icons within the application.
• Requirements: Have some understanding of the basic specifications of icons, understand the mainstream icon types and usage scenarios, and be able to maintain a consistent basic style when drawing the entire set of icons, with a simple and beautiful form.
• Software: Sketch, Ai, PS

Interactive Prototype

• Definition: Used to display interactive prototype files that can be clicked and jumped.
• Requirements: Can clearly express the page jump logic.
• Software: Sketch, XD, Blue Lake, Modao

Basic animation (lower weight)

• Definition: It can express the animation when triggering the interface interaction effect.
• Requirements: Understand the range of animations that can be achieved and understand how to write specific documents to express animations.
• Software: After Effects, Flinto, Principle

Annotate Cut

• Definition: Mark the contents of the design draft and export the graphics required during the development process.
• Requirements: Understand the parameters that developers need to know when restoring the design, understand the functions and differences of different image formats, and be able to export cut-outs that meet the specifications.
• Software: Blue Lake, Sketch, XD, Markman

Design Specifications

• Definition: Relevant specification documents to be followed during design and development.
• Requirements: The specifications for the use of the most important colors and elements should be concise and easy to implement.
• Software: Any design software or Office

2. PC web interface

Web interface

• Definition: It is mainly the company's official website or product introduction page, which reasonably places the content in the requirements into the canvas and performs typeset and design.
• Requirements: Understand the basic web page canvas settings and specifications, the mainstream structure and interaction methods of the web page, and be able to design simple, beautiful and clear designs.
• Software: XD, Sketch, PS

Management interface (except for specific industries with lower weight)

• Definition: A management system designed to be operated on the web based on business needs, used to manage finance, inventory, customer information, etc.
• Requirements: Be able to understand the basic functions and interaction rules of management interface components, web page stretching adaptation methods, and text and color applications.
• Software: XD, Sketch

Annotate Cut

• Definition: Description of the design draft and exported pictures for development.
• Requirements: Be able to export correct cut images and explain necessary areas.
• Software: Blue Lake, Markman

3. Advertising pictures

Banner design

• Definition: Design advertising images to be displayed in product advertising spaces based on the needs of operations and marketing activities.
• Requirements: Be able to master the basic methods of mixing text and images, be able to express text in a simple and effective way, and have entry-level synthesis skills.
• Software: PS, AI

H5 activity page (low weight)

• Definition: Design a special event page displayed on the web page based on the needs of operations and marketing activities.
• Requirements: Understand the basic structure of the activity page, the specifications of mobile web design, and have entry-level main visual design skills
• Software: PS, AI

3. Software Learning

The above output content covers the work of most early UI designers. Next, we will analyze the software and knowledge points to be mastered based on the requirements of these design contents.

1. PhotoShop

Photoshop is the beginning of our learning of design software. Being familiar with its interaction, functions, ideas, and professional terms is crucial for us to quickly learn other design-related software. Moreover, in the work of graphic design, PS is also a software we will inevitably use. As a giant, it is impossible for us to learn all its functions in the early stage, so we must select the appropriate functional modules.

Create Save

How to create the right canvas, understanding of resolution and color modes, and what are the knowledge points of different saving modes.

Related Tools

The functions and operation methods of the basic tools in the toolbar.

Pen Path

How to use the pen tool in PS and how to operate Bezier curves.

Layer properties

The specific functions of each option of layer properties and the corresponding application scenarios are mainly studied in depth in skeuomorphic design.

Color adjustment function

PS color-related functions, such as channels, hue adjustment, curves and other tools.

Filter function

Learn about several common filter types and their related applications.

Boolean operations

How to use Boolean operations on paths to draw graphics.

Character Settings

All settings about text layers in the Properties and Paragraph panels.

2. Adobe Illustrator

AI is the twin brother of PS. They look very similar, but they are aimed at different purposes. It is easy to learn once you are familiar with PS. In the early stage, you only need to focus on the design of graphics and icons. After screening, there are not many things we should master.

Create Export

The knowledge about file creation is the same as that of PS, but the relatively more complicated artboard rules should be understood as clearly as possible, and the differences between Ai saving and exporting should be distinguished.

Pen Path

Compared with PS, Ai's path processing is more complete and diverse, with practical functions such as path finder, deformation tool, manipulation deformation tool, rounded corner controller, etc.

Color Fill

The color filling method, gradient application, and grid filling method in Ai.

Canvas Ruler

Ai canvas related settings, rules for using the ruler tool, and how to assist us in creation.

3. Sketch, XD

Compared with the previous two, these two softwares are not difficult to use. Once you are familiar with PS and Ai, you can get started in a few days. And they are the most friendly in supporting UI design, with fast speed and high efficiency. You can choose one of them as the main focus.

4. Blue Lake, Markman, SketchMeasure

These software are used for annotation, cutting and collaboration. After understanding the knowledge related to cutting, it only takes a little time to learn how to use them.

5. AE, Flinto optional

6. Powerpoint, Keynote

PPT is a must-have in the workplace, and designers should use it better than ordinary people so that they can better present our ideas and designs to others.

4. Theoretical knowledge

After understanding the relevant software learning objectives, we should then know what theoretical learning should include.

1. Art Theory

Art theory is not something that can be mastered only through learning sketching. Daily practice and observation can help us improve our foundation in art theory.

Light and shadow

Have a deep understanding of the effects of light on objects, including highlights, backlights, reflections, dark areas, etc. And know how to analyze the strength and levels of light and dark in the picture.

Composition Tips

The composition of art and photography is basically the same, and some basic geometric composition methods are required.

Perspective Relationship

Understanding various types of perspective, such as parallel perspective, angular perspective, and oblique perspective, will help you discover errors in the use of perspective in your own creations.

Color Principles

Basic knowledge of colors, and how to match different types of colors through the color wheel, such as contrast, proximity, similarity and other color matching principles.

2. Plane theory

Four elements of plane

The four elements of alignment, intimacy, contrast and repetition are the most basic theoretical knowledge in our design and the top priority of UI design. The first half of "Graphic Design Book for Everyone" has a more detailed explanation.

Principles of plane geometry

In addition to the golden ratio, if you want to understand how to design and create through geometric mathematical derivation, I only recommend reading "Geometric Principles in Graphic Design".

Font recognition

The design principles and understanding of various basic fonts such as Chinese, English, serif and sans serif, as well as the attribute settings contained in the text, such as line height, font weight, etc., and their impact on reading and interface.

Grid system

For knowledge points about how grids are set up and how they work in typesetting, you only need to read "Grid System in Graphic Design".

Printing Settings

When designing content that needs to be printed, how should PS and AI set up and export the canvas?

3. UI Theory

Aesthetics of the Works

Be able to distinguish between excellent and poor designs, and comment on them through basic graphic theory. Before starting specific design, you can have a higher pursuit of quality and analytical ability support. It is recommended to create a drawing board on Huaban to continuously collect excellent works.

Resolution

Knowledge related to screen resolution, and a clear understanding of the differences in pixel ratios of different systems and mobile phones.

Design Specifications

Know the design specifications for web pages, iOS, Android and other platforms, and how to create conservative and error-free designs.

Control Type

Understand the mainstream control types, and know the states and practical application scenarios contained in different control types.

Component Type

Understand the mainstream component types, know what types of components are used in specific industries or functions, and their related interaction logic.

Cutting diagram annotation

After completing the design, how to make corresponding annotations on the design, as well as the purpose and method of cutting the picture.

Animation knowledge

The mainstream interactive animation types in APP, as well as animation-related implementation parameter types, including easing and animation curves.

5. Work efficiency

1. Project Process

The mainstream APP team project development process, what processes will be experienced from project establishment to launch, and what specific tasks different roles in the team are responsible for. Have a certain introductory understanding of collaboration methods such as Agile, Lean, and OKR.

2. Design Process

When we start our design work, how to use the correct planning and execution steps to ensure the maximum utilization of capabilities and the improvement of efficiency.

3. Time and energy management

In fact, this should be written first, but in order to avoid being abrupt, I put it at the last point to emphasize that in order to ensure learning efficiency, time management has a higher priority and is more important than learning any of the previous skills.

After understanding how to allocate time, you must use some tools to help you plan your learning process and assign tasks, such as mind mapping tools Xmind, MindNode, and To-Do-List tools Things, TickTick, Crazy Tomato, etc.

6. Misunderstandings

1. A reply

First of all, someone posted this kind of question in the comment area. Basically, they wanted to be naughty without reading the answer carefully! First of all, this will be eliminated within one year. These things are not enough for designers who want to go far, but remember the mind map I put earlier. After the core skills are solid, you can pursue and learn other things! Why would you stop by yourself and wait to be eliminated after a year without any progress?

Let’s not talk about the so-called UI position where 1,000 people applied for it. He has experienced it several times or received resumes himself! Just look at the quality of resumes generally received by BAT juniors and interns. Those who want to fully meet the requirements I mentioned above are still rare! Many people like to follow the crowd, exaggerate the difficulty of the environment, and then do not provide solutions, and show themselves in various ways!

After all, UI is a visual job. No matter where you submit your resume, our top priority is the quality of your work, which represents your professional ability! If you don't judge by your work, but only by your education, major, or so-called artistic literacy, then this kind of team is not recruiting employees who can do things. What you need to do is to use efficient learning methods to develop a solid foundation, and then crush those who boast of their so-called artistic literacy! If you learn randomly, you will never have a chance!

2. Skill Tree

Many people feel panicked when they see the skill tree, which is quite puzzling to me! I used that picture as a negative example!

It's wrong! It's wrong! It's wrong!

You must accept that each major can expand a vast number of skills, but they are useless for your current stage. When you start to advance in the future, you will only need to take some of them to improve, not all of them!

3. About reading

I will soon write a more formal answer to explain this. After reading my answer, many people in my group's first reaction is to buy theoretical books. However, the places where I mentioned books are all in the later part of the process. They are anxious about the later things before they have done the previous ones. To put it bluntly, they resist the difficult parts and only tackle the simple things, because the cost of reading books is too low and too easy.

So, don't worry about the books. Read the answers carefully, spend a day or two thinking about it, make a good study plan, adjust your work and rest schedule, and then roll up your sleeves and get to work!

Conclusion

The above is my thinking on how to improve my UI design ability and change careers as quickly as possible. Only with a clear goal can we know how to practice and have the courage to conquer these blind spots of knowledge.