Используя новейшие передовые практики в веб и мобильном дизайне, а также в дизайне пользовательского интерфейса и пользовательского опыта (UI / UX), этот курс направлен на то, чтобы эффективно помочь вам дойти с нуля до точки, где вы можете получить работу или выиграть фриланс контракты. Мы будем использовать востребованные инструменты, такие как Figma, чтобы показать вам полный рабочий процесс от начала до конца.
Учебная программа будет очень практической, поскольку мы проведем вас от начала до конца работы в качестве дизайнера, вплоть до изучения того, как создавать окончательные профессиональные проекты, а затем преобразовывать их в настоящие веб-сайты или приложения с использованием HTML и CSS.
Этот совершенно новый курс проведет вас от самых основ, где мы говорим о принципах и основах графического дизайна, вплоть до создания красивых продуктов, изучения UX / UI и взаимодействия, а также создания полного процесса проектирования, который вы сможете использовать со всеми вашими будущими проектами и клиентами. Мы в охватываем все это, чтобы в следующий раз, когда вы будете отвечать за разработку продукта, у вас был пошаговый план и руководство по работе в качестве профессионального дизайнера.
Мы собираемся научить вас навыкам, которые позволят вам брать много денег за ваше время. Не конкурировать за несколько долларов в час на каких-то случайных фриланс-сайтах. Цель состоит в том, чтобы дать вам навыки топ-дизайнера, и попутно мы собираемся разработать реальный продукт для компании, который вы сможете добавить в свое портфолио.
Этот курс не для того, чтобы заставить вас просто смотреть, не понимая принципов, чтобы, когда вы закончите курс, вы не знали, что делать, кроме как посмотреть еще один учебник. Нет! Этот курс подтолкнет вас и бросит вам вызов, чтобы вы прошли путь от абсолютного новичка к тому, кто является лучшим дизайнером, которого можно нанять! Дизайн — это ценный навык, который не устаревает так быстро, как большинство технических навыков. Тенденции меняются, но навыки и основы, которые вы изучите на этом курсе, перенесут вас на много лет вперед.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Shapes and Tools: Basic Shapes and Boolean Operations
Урок 27.
00:02:50
Designing in Figma: Images
Урок 28.
00:04:05
Designing in Figma: Getting Started with Text
Урок 29.
00:02:51
Designing in Figma: Constraints
Урок 30.
00:06:00
Designing in Figma: Using Auto Layout
Урок 31.
00:01:41
Resources and Collaboration: Community Files
Урок 32.
00:02:43
Resources and Collaboration: Community Plugins
Урок 33.
00:03:25
Resources and Collaboration: Sharing and Comments
Урок 34.
00:02:36
What We Are Going to Learn
Урок 35.
00:02:16
Exercise: Create a Quick Logo Using Shapes
Урок 36.
00:05:38
Exercise: Autolayout Buttons
Урок 37.
00:03:08
Exercise: Responsive Navigation
Урок 38.
00:04:16
Exercise: Responsive Text
Урок 39.
00:03:13
Exercise: Imagery and Gradients
Урок 40.
00:03:16
Exercise: Layout and Responsiveness
Урок 41.
00:01:03
Assignment: Create Complex Interactive Components
Урок 42.
00:05:12
User Flows Explained
Урок 43.
00:02:28
The DOs and DON'Ts
Урок 44.
00:02:07
What We Are Going To Build
Урок 45.
00:06:55
Reusable User Flow Assets
Урок 46.
00:10:59
User Flows in Figma (Onboarding)
Урок 47.
00:08:55
User Flows in Figma (Search)
Урок 48.
00:01:45
Introduction To Sitemaps
Урок 49.
00:04:17
Creating A Basic Sitemap
Урок 50.
00:01:19
What We Are Going To Learn
Урок 51.
00:09:33
Reusable Sitemap Assets
Урок 52.
00:08:52
Sitemaps in Figma (The Top Layer)
Урок 53.
00:05:54
Sitemaps in Figma (Digging Deeper)
Урок 54.
00:04:40
Sitemaps in Figma (Digging Deeper Cont.)
Урок 55.
00:07:44
Tips for Creating Great Sitemaps
Урок 56.
00:03:07
What Is A Wireframe?
Урок 57.
00:06:52
How To Create A Wireframe
Урок 58.
00:06:44
What We Are Going To Learn
Урок 59.
00:03:57
Figma Check In (Basic Button Component)
Урок 60.
00:05:35
Figma Check In (Variants)
Урок 61.
00:05:33
How To Use Our Wireframe Components
Урок 62.
00:13:03
Wireframes (Home)
Урок 63.
00:07:05
Wireframes (Cart)
Урок 64.
00:05:48
Wireframes (Profile)
Урок 65.
00:01:20
What We Are Going to Learn
Урок 66.
00:01:57
Figma Check In (Prototyping in Figma - Intro)
Урок 67.
00:05:06
Prototyping in Figma (Flows and Starting Points)
Урок 68.
00:02:52
Prototyping in Figma (Connections)
Урок 69.
00:02:58
Prototyping in Figma (Interactions)
Урок 70.
00:03:31
Prototyping in Figma (Animations)
Урок 71.
00:03:13
Prototyping in Figma (Prototype Settings)
Урок 72.
00:05:30
Prototyping in Figma (Prototype Presentation)
Урок 73.
00:03:41
Project (Navigation)
Урок 74.
00:06:17
Project (Removing an Item from Your Wishlist)
Урок 75.
00:06:14
Project (Finding a Product)
Урок 76.
00:02:57
Exercise: Imposter Syndrome
Урок 77.
00:04:03
Constructive Feedback
Урок 78.
00:02:59
Feedback Drives Better Design
Урок 79.
00:01:34
Recap: What Did We Learn?
Урок 80.
00:04:04
What Is A Grid?
Урок 81.
00:05:57
Grid Basics
Урок 82.
00:00:52
What We Are Going to Learn
Урок 83.
00:04:33
Figma Check In (Fixed and Fluid Grids)
Урок 84.
00:05:23
Figma Check In (Breakpoints)
Урок 85.
00:04:29
Figma Check In (Grid Style)
Урок 86.
00:06:57
Project (Mobile Layout Grid)
Урок 87.
00:04:52
Project (Desktop Layout Grids)
Урок 88.
00:06:33
Simple Rules to Follow
Урок 89.
00:03:22
Serifs
Урок 90.
00:03:42
Sans Serifs
Урок 91.
00:04:39
Display & Mono
Урок 92.
00:01:40
Picking Typefaces
Урок 93.
00:00:49
What We Are Going to Learn
Урок 94.
00:07:36
Figma Check In (Text Properties)
Урок 95.
00:09:56
Exercise (Elevating a Brand)
Урок 96.
00:07:14
Exercise (Typeface Scenarios)
Урок 97.
00:04:38
Exercise (Google Fonts)
Урок 98.
00:05:47
Project (Typeface Exploration)
Урок 99.
00:06:36
Project (Pairing Font Families)
Урок 100.
00:06:36
Project (Headings, Body and Labels)
Урок 101.
00:04:30
Project (Typeface System)
Урок 102.
00:07:13
Figma Check In (Text Styles)
Урок 103.
00:03:54
Color Schemes
Урок 104.
00:02:45
Important Questions To Ask
Урок 105.
00:02:56
Creating Color Palettes
Урок 106.
00:00:59
What We Are Going to Learn
Урок 107.
00:05:00
Figma Check In (Paints)
Урок 108.
00:10:37
Exercise (Expanding Upon a Strict Color Palette)
Урок 109.
00:04:00
Exercise (Creating a Color Palette)
Урок 110.
00:06:05
Figma Check In (Color Styles)
Урок 111.
00:08:21
Exercise (Using Color Styles)
Урок 112.
00:06:37
Project (Primary and Neutrals)
Урок 113.
00:06:32
Project (Accents)
Урок 114.
00:03:38
Visual Assets Introduction
Урок 115.
00:01:00
What We Are Going to Learn
Урок 116.
00:03:16
Figma Check In (Image Plugins)
Урок 117.
00:04:21
Figma Check In (Image Styles)
Урок 118.
00:02:40
Figma Check In (Masks)
Урок 119.
00:09:08
Exercise (Image Exploration)
Урок 120.
00:08:34
Exercise (Text and Imagery Working Together)
Урок 121.
00:03:50
Figma Check In (Illustration Plugins)
Урок 122.
00:08:06
New Exercise (Adding Illustrations to Your Designs)
Урок 123.
00:02:21
Figma Check In (Icon Plugins)
Урок 124.
00:05:06
Figma Check In (Pen Tool)
Урок 125.
00:11:06
Exercise (Custom Icons with the Pen Tool)
Урок 126.
00:04:20
What Are Forms + UI Elements?
Урок 127.
00:01:54
What We Are Going to Learn
Урок 128.
00:07:09
Best Practices (Forms)
Урок 129.
00:05:25
Best Practices (Basic and Advanced Inputs)
Урок 130.
00:11:31
Best Practices (Inputs)
Урок 131.
00:03:53
Best Practices (Buttons)
Урок 132.
00:04:11
Figma Check In (Component Properties)
Урок 133.
00:02:14
Properties vs. Variants
Урок 134.
00:05:19
Figma Check In (Button Component Properties)
Урок 135.
00:05:21
Figma Check In (Button Variants)
Урок 136.
00:06:26
Figma Check In (Combining Components)
Урок 137.
00:06:52
Figma Check In (Form Component Possibilities)
Урок 138.
00:10:39
Project (Registration Flow Part 1)
Урок 139.
00:08:25
Project (Registration Flow Part 2)
Урок 140.
00:06:43
Project (Registration Flow Part 3)
Урок 141.
00:02:31
What Is Accessibility?
Урок 142.
00:02:52
Assistive Technologies
Урок 143.
00:04:31
Visual Patterns For Accessibility
Урок 144.
00:06:25
Tools To Make Your Design Accessible
Урок 145.
00:06:43
Visual Patterns For Accessibility Part 2
Урок 146.
00:06:01
What Are Design Patterns
Урок 147.
00:02:25
Why Are Design Patterns Valuable
Урок 148.
00:04:30
How To Apply Design Patterns
Урок 149.
00:05:40
Analyzing Design Patterns
Урок 150.
00:06:14
Dissecting And Choosing Design Patterns
Урок 151.
00:06:59
Mobile Design Best Practices Part 1
Урок 152.
00:11:11
Mobile Design Best Practices Part 2
Урок 153.
00:01:48
What We Are Going to Learn
Урок 154.
00:04:58
Design Fidelity
Урок 155.
00:13:21
Visual Exploration (Navigation)
Урок 156.
00:08:57
Visual Exploration (Buttons)
Урок 157.
00:02:43
Figma Check In (Effect Styles)
Урок 158.
00:11:11
Visual Exploration (Product Cards)
Урок 159.
00:08:52
Visual Exploration (Text Cards)
Урок 160.
00:13:05
Screen Design (Home)
Урок 161.
00:07:36
Screen Design (Product Page)
Урок 162.
00:03:37
Misconceptions of Motion Design
Урок 163.
00:03:21
Motion Supports Usability
Урок 164.
00:05:16
Narrative and Mental Models
Урок 165.
00:01:34
What is a Microinteraction?
Урок 166.
00:01:58
The Structure of a Microinteraction
Урок 167.
00:02:04
Not Every Element is a Microinteraction!
Урок 168.
00:04:33
How Microinteractions Impact User Experiences
Урок 169.
00:01:42
What We Are Going To Learn
Урок 170.
00:02:08
Figma Check In (Intro to Smart Animate)
Урок 171.
00:03:51
Figma Check In (Smart Animate Properties)
Урок 172.
00:05:22
Exercise (Parallax)
Урок 173.
00:05:14
Exercise (New Message)
Урок 174.
00:05:18
Exercise (Overlays)
Урок 175.
00:04:44
Figma Check In (Interactive Components)
Урок 176.
00:07:55
Exercise (Interactive Buttons)
Урок 177.
00:05:20
Project (Parallax Welcome Screen)
Урок 178.
00:07:20
Project (Drag Onboarding)
Урок 179.
00:06:53
Project (Cart Overlay)
Урок 180.
00:12:57
Project (Button Microinteraction)
Урок 181.
00:01:08
What We Are Going to Learn
Урок 182.
00:03:45
Foundational Styles and Components vs. Product Specific Components
Урок 183.
00:03:29
Building Fidelity and Organizing Potential Components and Styles
Урок 184.
00:06:24
Foundational Styles and Components
Урок 185.
00:07:19
Components (Buttons)
Урок 186.
00:08:42
Components (Cards)
Урок 187.
00:06:33
Components (Headers)
Урок 188.
00:06:09
Components (Inputs)
Урок 189.
00:04:43
Components (List Items)
Урок 190.
00:08:28
Components (Navigation)
Урок 191.
00:05:42
Components (Misc. Elements)
Урок 192.
00:01:44
What We Are Going to Learn
Урок 193.
00:06:19
Working Towards Our Final Designs
Урок 194.
00:06:01
Execution (Introduction Screen)
Урок 195.
00:10:09
Execution (Onboarding Screens)
Урок 196.
00:16:03
Execution (Registration Screens)
Урок 197.
00:10:03
Execution (Home Screen)
Урок 198.
00:08:15
Execution (Wishlist Screens)
Урок 199.
00:10:03
Execution (Profile Screen)
Урок 200.
00:14:51
Execution (Cart and Checkout)
Урок 201.
00:09:48
Prototypes (Registration)
Урок 202.
00:06:07
Prototypes (Adding to Cart)
Урок 203.
00:05:11
Prototypes (Checkout)
Урок 204.
00:04:19
Prototypes (Lottie Files Plugin)
Урок 205.
00:07:53
Prototypes (Search and Filters)
Урок 206.
00:05:03
The Product Alignment Canvas
Урок 207.
00:08:31
Project Goals
Урок 208.
00:08:40
Target Users
Урок 209.
00:10:23
User Journey Map
Урок 210.
00:04:33
Risky Assumptions
Урок 211.
00:05:57
What is a User Story Map?
Урок 212.
00:07:41
Creating a User Story Map
Урок 213.
00:01:12
Is Bruno Happy?
Урок 214.
00:03:42
Project Handoff
Урок 215.
00:01:18
Thank You!
Урок 216.
00:09:52
How To Export And Place Designs
Урок 217.
00:10:58
Content For Your Portfolio
Урок 218.
00:04:59
Where To Host Your Web Portfolio
Урок 219.
00:12:58
Initial Setup - Figma Handoff
Урок 220.
00:09:25
Build UI - Adding Image Assets
Урок 221.
00:09:18
Build UI - Styling Image Assets
Авторы - udemy, zerotomastery.io
udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
+192
zerotomastery.io
Независимо от того, начинаете ли вы изучать программирование или хотите усовершенствовать свои навыки, Академия Zero To Mastery научит вас React, Javascript, Python, CSS и многим другим вещам, чтобы помочь вам продвинуться по карьерной лестнице, получить работу и добиться успеха в некоторых ведущих компаниях.
Sorry, I believe that the course has recently been updated
CourseHunter Team
dyowee
updated
dyowee
CourseHunter Team
Thanks! :)
frederic
Why is the wireframe resource different than in the video? i'm looking everywhere to find the right one. This one is much bigger but has no variants to the components. Really frustrating...
John wick
frederic
Hey Frederic, how did you manage with these resources. This is really really frustrating. like how do I create these when the resources are totally different from the video???
John wick
frederic
Lol pay for it yourself
SKS
Please update this course. Thank you.
Heppietechie
Please update this course : Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more is out with 349 lectures and 28h 8m long
support guy
Heppietechie
All is up to date. All extra materials videos you can watch at Complete Web Developer in 2023: Zero to Mastery
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Создавайте интерфейсы, которые работают для ваших пользователей Узнайте, как разрабатывать интерфейсы систематически, даже если у вас нет опыта в дизайне.
Веб Дизайн в Figma. Основы Ui Ux дизайна на практике
Курс по веб дизайну для новичков. От основ и теории до применения знаний на практике. Курс делится на несколько модулей. Мы пройдем теорию веб дизайна, узнаем основы этой науки и основные принципы создания дизайн макетов.
Веб дизайн в Figma 2022 - с нуля до результата, основы UX/UI
Если вы давно искали что то интересное по веб дизайну, добро пожаловать!) Этот курс для абсолютных новичков в дизайне, по этому вам не нужно обладать какими либо знаниями для прохождения данного курса! Вместе, вы и я, пройдем путь - от установки программы Figma до уровня UI дизайнера, который уверенно может брать заказы на фриланс и гордиться своей работой! Мы начнем с самых основ и вместе изучим все необходимые инструменты Figma,так, что в конце
На этом курсе мы научимся ориентироваться в Figma. Мы также расскажем, как создавать прототипы интерфейсов, использовать Figma с адаптивными макетами и совместно работать над идеями. Этот курс ориентирован на разработчиков. Мы рассмотрим советы и рекомендации по реализации дизайна, созданного в Figma.
Дизайн-системы становятся настолько популярными, потому что они делают продукты более последовательными, улучшают их удобство использования и сокращают время принятия дизайнерских решений. Замечательно! Но знаете ли вы, как их построить? В этом курсе вы узнаете, что такое дизайн-система и почему она так важна, но, что наиболее важно, вы научитесь создавать ее с нуля в Figma.
https://coursehunter.net/course/veb-razrabotchik-2018-s-nulya-do-mastera