Дизайн это мышление.
Мы научим думать как дизайнер.
Дизайн это мышление.
Мы научим думать как дизайнер.
Бесплатный мини-курс и гайд для новичков в UX/UI.
00. Структура
00. Структура
Вступительный модуль
Проектирование интерфейса
UX Дизайн
UI Дизайн
Приложение
Веб-сайт
Создание портфолио
Лекция
|
1 час 15 минут
Знакомство. Структура обучения. Ответы на вопросы
Факультатив
|
1 час
Обзор Figma
Лекция
|
1 час 15 минут
Дизайн-процесс в UX/UI
Лекция
|
1 час
Основы работы с Figma
Лекция
|
1 час
Основы работы с Figma
Лекция
|
1 час
Обзор инструментов: Figma, Framer, FigJam, Notion
Вступительный модуль
Проектирование интерфейса
UX Дизайн
UI Дизайн
Приложение
Веб-сайт
Создание портфолио
Лекция
|
1 час 15 минут
Знакомство. Структура обучения. Ответы на вопросы
Факультатив
|
1 час
Обзор Figma
Лекция
|
1 час 15 минут
Дизайн-процесс в UX/UI
Лекция
|
1 час
Основы работы с Figma
Лекция
|
1 час
Основы работы с Figma
Лекция
|
1 час
Обзор инструментов: Figma, Framer, FigJam, Notion
Вступительный модуль
Проектирование интерфейса
UX Дизайн
UI Дизайн
Приложение
Веб-сайт
Создание портфолио
Лекция
|
1 час 15 минут
Знакомство. Структура обучения. Ответы на вопросы
Факультатив
|
1 час
Обзор Figma
Лекция
|
1 час 15 минут
Дизайн-процесс в UX/UI
Лекция
|
1 час
Основы работы с Figma
Лекция
|
1 час
Основы работы с Figma
Лекция
|
1 час
Обзор инструментов: Figma, Framer, FigJam, Notion
01. Введение
01. Введение
Курс UX/UI для начинающих
Этот курс подойдёт тем, кто делает первые шаги в дизайне.
Чтобы начать уверенно, мы предлагаем пройти подготовку.
За 7 дней вы освоите Figma и базовые принципы интерфейсов.
Мы даём направления, вы изучаете материалы самостоятельно.
02. Знакомство с Figma
02. Знакомство с Figma
Создайте аккаунт и изучите интерфейс
Figma — это инструмент, с которым вы будете работать.
Figma — это инструмент, с которым вы будете работать.
Зарегистрируйтесь на официальном сайте https://www.figma.com/ мы подготовили для вас (видео)
Создайте свой первый файл (видео)
Ознакомьтесь с интерфейсом: слои, рабочая зона, свойства (видео)
Изучите горячие клавиши для ускорения работы (ссылка)
Зарегистрируйтесь на официальном сайте https://www.figma.com/ мы подготовили для вас (видео)
Создайте свой первый файл (видео)
Ознакомьтесь с интерфейсом: слои, рабочая зона, свойства (видео)
Изучите горячие клавиши для ускорения работы (ссылка)
03. Основы UX/UI
03. Основы UX/UI
Прежде чем начать что-либо делать, вам необходимо знать определения и основные термины.
Перед началом важно знать ключевые термины:
Перед началом важно знать ключевые термины:
UX (User Experience)
UX (User Experience)
UX — это то, как человек ощущает и воспринимает работу с сайтом или приложением. Дизайнер UX заботится о том, чтобы всё было удобно, понятно и приятно для пользователя.
UX — это то, как человек ощущает и воспринимает работу с сайтом или приложением. Дизайнер UX заботится о том, чтобы всё было удобно, понятно и приятно для пользователя.
UI (User Interface)
UI (User Interface)
UI — это внешний вид сайта или приложения: кнопки, цвета, шрифты и всё, что мы видим на экране. UI-дизайнер делает интерфейс красивым и удобным.
UI — это внешний вид сайта или приложения: кнопки, цвета, шрифты и всё, что мы видим на экране. UI-дизайнер делает интерфейс красивым и удобным.
User Flow
User Flow
User Flow — это путь, по которому человек проходит в приложении, чтобы выполнить цель, например: выбрать товар и оформить заказ. Дизайнер продумывает этот путь шаг за шагом.
User Flow — это путь, по которому человек проходит в приложении, чтобы выполнить цель, например: выбрать товар и оформить заказ. Дизайнер продумывает этот путь шаг за шагом.
Functional Map
Functional Map
Функциональная карта — это список всех функций и возможностей сайта или приложения. Она помогает понять, что именно должен уметь продукт: например, регистрация, поиск, покупка, чат.
Функциональная карта — это список всех функций и возможностей сайта или приложения. Она помогает понять, что именно должен уметь продукт: например, регистрация, поиск, покупка, чат.
Site Map
Site Map
Карта сайта — это схема, показывающая, какие страницы есть на сайте и как они связаны между собой. Она помогает представить структуру сайта до начала дизайна.
Карта сайта — это схема, показывающая, какие страницы есть на сайте и как они связаны между собой. Она помогает представить структуру сайта до начала дизайна.
Persona
Persona
Persona — это вымышленный портрет будущего пользователя. Она помогает лучше понять, для кого мы создаём продукт: его возраст, интересы, цели и потребности.
Persona — это вымышленный портрет будущего пользователя. Она помогает лучше понять, для кого мы создаём продукт: его возраст, интересы, цели и потребности.
Пользовательский сценарий
Пользовательский сценарий
Пользовательский сценарий — это короткое описание того, как человек будет использовать сайт или приложение, чтобы достичь своей цели.
Пользовательский сценарий — это короткое описание того, как человек будет использовать сайт или приложение, чтобы достичь своей цели.
Пример:
Анна прилетела в Париж. Она заходит на сайт аренды авто с телефона, выбирает машину с автоматической коробкой, вводит даты и бронирует авто на 5 дней с доставкой в аэропорт.
Пример:
Анна прилетела в Париж. Она заходит на сайт аренды авто с телефона, выбирает машину с автоматической коробкой, вводит даты и бронирует авто на 5 дней с доставкой в аэропорт.
Auto-layout
Auto-layout
Auto-layout — это функция в Figma, которая помогает автоматически выравнивать и размещать элементы, чтобы они не съезжали и легко подстраивались под разный контент.
Auto-layout — это функция в Figma, которая помогает автоматически выравнивать и размещать элементы, чтобы они не съезжали и легко подстраивались под разный контент.
UI-Kit
UI-Kit
UI-Kit — это набор готовых элементов дизайна: кнопки, иконки, поля ввода и прочее. Он помогает создавать интерфейсы быстрее и в едином стиле.
UI-Kit — это набор готовых элементов дизайна: кнопки, иконки, поля ввода и прочее. Он помогает создавать интерфейсы быстрее и в едином стиле.
Wireframe
Wireframe
Wireframe — это черновик будущего дизайна. В нём отображается структура страниц без цвета и деталей. Он нужен, чтобы понять, как всё будет работать.
Wireframe — это черновик будущего дизайна. В нём отображается структура страниц без цвета и деталей. Он нужен, чтобы понять, как всё будет работать.
Prototype
Prototype
Prototype — это интерактивная модель сайта или приложения. Его можно «потыкать», чтобы понять, как будет работать настоящий продукт, до начала разработки.
Prototype — это интерактивная модель сайта или приложения. Его можно «потыкать», чтобы понять, как будет работать настоящий продукт, до начала разработки.
Responsive Design
Responsive Design
Responsive Design — это подход к дизайну, при котором сайт или приложение одинаково удобно выглядят на компьютере, планшете и телефоне.
Responsive Design — это подход к дизайну, при котором сайт или приложение одинаково удобно выглядят на компьютере, планшете и телефоне.
CTA (Call to Action)
CTA (Call to Action)
CTA — это кнопка или фраза, которая побуждает человека сделать действие: «Купить», «Зарегистрироваться», «Попробовать бесплатно». CTA должен быть заметным и понятным.
CTA — это кнопка или фраза, которая побуждает человека сделать действие: «Купить», «Зарегистрироваться», «Попробовать бесплатно». CTA должен быть заметным и понятным.
04. Web и Mobile дизайн
04. Web и Mobile дизайн
Дизайн для веба и мобильных устройств отличается тем, как пользователи взаимодействуют с экраном и как много места доступно для информации.
Вы узнаете, чем отличается веб-дизайн от мобильного, и почему адаптация — ключевой навык:
Вы узнаете, чем отличается веб-дизайн от мобильного, и почему адаптация — ключевой навык:
Гайдлайны — это официальные рекомендации по оформлению и поведению интерфейсов. Они помогают дизайнерам делать понятные, удобные и единообразные приложения, особенно под конкретные платформы, например iOS или Android.
Гайдлайны — это официальные рекомендации по оформлению и поведению интерфейсов. Они помогают дизайнерам делать понятные, удобные и единообразные приложения, особенно под конкретные платформы, например iOS или Android.
05. Композиция в интерфейсах
05. Композиция в интерфейсах
Для того чтобы интерфейс выглядел гармонично и целостно, необходимо соблюдать определенные правила.
Научитесь располагать элементы
Научитесь располагать элементы
Хороший интерфейс — это порядок и ясность.
Освойте:
Хороший интерфейс — это порядок и ясность.
Освойте:
06. Типографика
06. Типографика
Типографика в дизайне: делает текст понятным, красивым и удобным для чтения
Научитесь располагать элементы
Научитесь располагать элементы
Текст — важнейший элемент интерфейса.
Разберитесь в:
Текст — важнейший элемент интерфейса.
Разберитесь в:
07. Колористика
07. Колористика
Колористика: создает настроение, акценты и помогает ориентироваться
