ITsets | Design simulator – Middle UI – UX designer (2023) WEB-DL [AD] [RU]

Stage 1

Quality principles, references, mistakes

Analysis of high-quality and low-quality work. What are the differences and principles?
Search for successful references and list of resources. How to work with references.
The most common mistakes are on record. Lots of effects. Creative. Coming up with something from scratch. Using creative fonts. Too much color, too much contrast or lack thereof. Scales of UI elements. Size, rhythm, color, mass. Sequence and hierarchy.

Stage 2

Typography, proximity principle

Font size, tracking, leading, paragraphs.
Hierarchy and structure of the text.
Typography elements.
Size.
Inscription.
Indents.
Color and contrast.
Do not type in caps.
Don’t make the text bold or the medium too much.
Don’t make the text too thin.
Do not use more than 1-2 fonts in one work.
Do not make paragraphs more than 5-7 lines.
Do not allow more than 4–5 paragraphs per heading.
Sufficient leading.
Justified indents. Don’t make it too big. Maintain consistency.
Text in interfaces and text styles.
The proximity principle and the indentation system using typography as an example.
Typed text size, text size in buttons and other UI elements.

Stage 3

Creating UI elements on web and mobile

Creating Buttons

Principles of construction.
Types and types.
What not to do.
Rules for creating button styles.
Elaboration of hover and click states.
Checklist for buttons.

Icons

Application area.
Principles of construction.
Types and types.
What not to do.
Rules for creating icon styles.
Checklist for icons.

Forms

Inputs.
Dropdown lists.
Calendar (date selection).
Sliders.
Radio buttons.
Checkboxes.
Textarea.
Toggles/switchers.
Buttons.
Principles of construction.
Types and types.
What not to do.
Working through states.
Rules for creating form styles.
Checklist for forms.

Carousels

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Pagination in carousels.
Working through states.

Pagination

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating pagination styles.
Checklist for pagination.

Tabs

Functional purpose.
Principles of creation.
Types and types.
What not to do.
Rules for creating tab styles.
Checklist for tabs.
Choice chips
Functional purpose.
Principles of creation.
Types and types.
What not to do.
Rules for creating styles.
Check list.

Navigation and menu: regular and pop-up

Functional purpose.
Principles of creation.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Filters, sorting

Functional purpose.
Principles of creation.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Tabbars

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Indicators

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Tooltips

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Notifications

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Progress bars

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

bread crumbs

Functional purpose.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Bubbles

Functional purpose and areas of application.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Tables

Principles of construction.
Adaptive version of tables.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Charts

Functional purpose and areas of application.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Histograms and charts

Functional purpose and areas of application.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Cards and widgets

Functional purpose and areas of application.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Check list.

Modal windows

Functional purpose and areas of application.
Principles of construction.
Types and types.
What not to do.
Rules for creating styles.
Elaboration of hover and click states.
Adaptive popups.
Check list.

States of UI elements on smartphones and desktops

Adaptive UI elements.
States on different devices.

Stage 4

Creation of the first UI compositions, micro UX

Audio track player screen

Collection and analysis of references.
Creating a mood board.
Using Figma Mirror.
Creating icons.
Screen design.
Check using a checklist.
Job overview.

Video player screen

Collection and analysis of references
Creating a mood board.
Creating icons.
Video player widget design.
Check using a checklist.
Job overview.

Product card or article for a catalog or blog

Collection and analysis of references.
Creating a mood board.
Creating icons.
Card design.
Filter design.
Check using a checklist.
Job overview.

Registration and authorization

Collection and analysis of references.
Creating a mood board.
Creating icons.
Card design.
Filter design.
Check using a checklist.
Job overview.

Dashboard

Collection and analysis of references.
Creating a mood board.
Creating icons.
Card design.
Filter design.
Check using a checklist.
Job overview.

Stage 5

Macro UX, interactive prototypes, animation

Scenario development.
Principles of animation – easing, timing.
Preparing key frames.
Creation of an interactive prototype.
Creation of an animated interactive prototype.
Process recording.
Rendering and publication.

Stage 6

Mobile application design

Description.
Creating a mood board.
Collection of references.
Creation of a functional model and CJM.
Creating a concept to coordinate the style.
Principles of high-quality mobile application design.
Development of the remaining screens.
Interactive development.
Creating animation.
Design and publication of the case.

Stage 7

Interface design for PC/WEB

Description.
Creating a mood board.
Collection of references.
Creation of a functional model and CJM.
Creating a concept to coordinate the style.
Principles of high-quality mobile application design.
Development of the remaining screens.
Interactive development
Creating animation.
Design and publication of the case.

Stage 8

Search for work, orders, career development

How to develop and what to do next. Practical tasks for finding work, orders and projects. The module structure is secret.