In the course you will learn how to work with Figma, a free and super-cool program that is used by web design specialists all over the world. If you’re still using Photoshop, we’re waiting for you.
Introduction to Design
- Let’s get acquainted and talk about what is UX\UI design, UX vs UI: what is the difference
- Who is a UX\UI designer and what he must be able to do?
- UX\UI designer job and career options: pros and cons
- Discuss successful and unsuccessful examples of sites
- Signing up for beehance and dribble
Figma Start: the basics of designing
- Why Figma? Advantages of Figma
- Form a team to work together on the design project
- The basic tools, getting acquainted with Figma
- We will plan the work on final projects for the portfolio by stages. Let’s conduct research of sources.
- Let’s begin work on the first project for the portfolio
Figma Start: the basics of working with the program
- How does a designer approach designing a website?
- Basic landing page blocks and rules for their placement: logo, titles, categories, icons, images, etc.
- Let’s study and draw elements of different types: step-by-step instructions
- With mentor support, create the first page of the site
- Build a moodboard for your projects
Design trends, detailing the layout
- Design trends. Let’s compare skevomorphism, FLAT, material, brutalism, isometric, glass morphism
- Let’s look at different stylistic techniques: white space, custom grid, gradient, emphasis on typography, 3D, grunge, realism, etc.
- How to choose a style for a specific project?
- How to follow the trends for the novice designer?
- Layout detailing: from wireframe scetching to implementation
- Different levels of drawing in design projects: when and what is better to use. Mockup or prototype: what to show to the customer?
- The Frankstein method of design: not as scary as it sounds
Mentor session
- Getting feedback on your homework
- Analyzing classmates’ projects under the teacher’s guidance
- Practice observation, set criteria for successful projects
Typography, font pairs, text layout
- Introduction to typography. Basic concepts, important for UX\UI designer: interlineage, kerning, serif, etc.
- Criteria for font and other text parameters
- We learn what fonts are made of, what are the rules of text layout, how the font hierarchy is created.
- We use the calculator to define the font size
- Discussing the possibilities and limitations of using various fonts
Mentor session
- Getting feedback on our homework
- Analyzing classmate projects under the guidance of a teacher
- Practice observation, form criteria of successful projects
Introduction to composition and working with space
- What is composition and why do we need it? Differences between dynamic and static composition
- Choosing anchor objects to attract attention
- Learning indentation systems, working with objects
- Fitts’s law, Hicks’s law, Jacobs’s law, the law of common field, similarity law, Occam’s razor principle, “micro and macro” rule, “inside and outside” rule in design
- Create a rhythm and build site hierarchy through composition
Images and graphics for interfaces
- How the right images, icons and illustrations help convey the mood of the product
- Images that attract attention
- Sources of finding images in a designer’s work
Mentor session
- Getting feedback on your homework
- Analyzing classmates’ projects under the guidance of a teacher
- Practice observation, form criteria of successful projects
Mentor Session
- Get feedback on your homework
- Analyze classmates’ projects under the guidance of a teacher
- We train observation; create criteria for successful projects
Adaptive: a mobile version of the site
- In today’s world, users of mobile interfaces are definitely taken into account, because people visit web-sites from portable gadgets more often
- Pros and cons of responsive design
- How blocks are rebuilt from desktop to mobile: a few models
- Under the teacher’s guidance, let’s adapt the site for mobile version
Design patterns, buttons, forms, navigation
- In this lesson we will learn how to create interactive elements
- We’ll study the controls and navigation: the types and state of the buttons, designing feedback forms, calendars, menus, and navigation
Figma: creating complex pages
- How to create complex pages with forms using components, options and styles
- Introduction to auto-layout, how to create components and variants
Designer’s resume and portfolio, interview questions
- We will make a list of ideas of where to get projects for the portfolio
- Create and begin filling out a designer profile on LinkedIn
- We will learn what will be asked at the interview and how to prepare for it
- Learn how to work directly with clients
- Create a career development plan after we finish the course
Mentor session
- Get feedback on our homework
- Analyzing classmates’ projects under the guidance of a teacher
- We train observation; create criteria for successful projects
- Types of sites: landing-page, portfolio site, Internet-shop, etc.
- Basic elements of an Internet store: product cards, catalog, cart, navigation, etc.
- Start working on second project for your portfolio (Internet store)
Mentor session
- Get feedback on your homework
- Analyze classmates’ projects under the teacher’s guidance
- Practice observation, form criteria of successful projects
Handing over the design to a developer
- How does design become code?
- Preparing a template to be sent to the developer
- Getting to know the developer panel
- Learning the basics of layout
- What a coder needs for comfortable work
- Maintaining Relationships with Clients
Mentor session
- Get feedback on your homework
- Analyzing classmates’ projects under the guidance of a teacher
- We train observation; create criteria for successful projects
Working in Photoshop: the basic tools of the program
- Getting to know a new tool
- How to remove the background of objects
- How to remove unwanted objects from images
- Working on images for your portfolio projects
Figma: a practical guide to creating illustrations
- How to draw icons and other images yourself
- Practice drawing in Figma
Project defense
You’ll have to show your best work to experienced designers, developers and recruiters at the defense
Get feedback and define your way as a designer