ТЕОРИЯ
ПСИХОЛОГИЯ
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Введение
В этом уроке вы получите представление о том, в чем разница между UX и UI, а также почему они неразрывно связаны между собой. Мы обсудим, что такое интерфейс и затронем тему классификации дизайна и сайтов. Вы узнаете, какими принципами и в каком порядке важно руководствоваться в процессе проектирования, получите представление о том, как пользователи обрабатывают данные, изучите приемы управления их вниманием и эмоциями. Применение этих знаний позволит вам создавать удобные и интуитивно понятные интерфейсы. Научитесь работать в графическом редакторе Figma и пройдете первые этапы погружения в UX/UI-дизайн.
- Задачи и навыки UX/UI дизайнера
- Психология пользователя
- Работа с Figma (Начало)Работа с UI Kit
- Базовый стиль
- Адаптив
- Развитие насмотренности
- Веб‑анимация
- Элементы интерфейса / Компоненты сайта
- Логика интерфейса
- Принципы навигации
- Исследования
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Создание лендинга
Нарисуете лендинг по алгоритмам, которые мы применяем у себя в студии и которые вы сможете использовать на фрилансе.
- Технологический процесс
- Первый этап: Брифинг/ Сбор информации
- Второй этап: Конкурентный анализ
- Третий этап: Прототипирование
- Четвертый этап: Визуальная концепция
- Пятый этап: Передача макетов разработчикам
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Сетки, композиции, быстрые концепции
Часто в студиях нужно нарисовать готовый концепт за 1 день, этот модуль будет хорошей тренировкой вашей скорости.Вы узнаете, что такое визуальная логика, ее основные принципы, что такое визуальные вес, какое влияние он оказывает на композицию и о балансе визуального веса, что такое модульные сетки, направляющие, как правильно работать с цветом и типографикой, и закрепите эти знания на практике.
- Визуальная логика
- Композиция
- Модульные сетки
- Направляющие
- Типографика
- Основные правила работы со шрифтами в вебе
- Цвет
- Практический урок №1
- Практический урок №2
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Интернет-магазин
Вы узнаете, какие бывают виды интернет-магазинов, поймёте, как работать с каталогами товаров, спроектируете и нарисуете полноценный интернет-магазин, создадите адаптивные версии и пополните свое портфолио эффектным кейсом.
- Технологический процесс
- Первый этап: Брифинг/ Сбор информации
- Второй этап: Конкурентный анализ
- Третий этап: Прототипирование
- Четвертый этап: Визуальная концепция
- Пятый этап: Передача макетов разработчикам
- Оформление проекта в кейс на Behance
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Корпоративный сайт
Вы изучите особенности одного из самых распространенных типов сайтов — корпоративный. Поймете, какие задачи он решает. Научитесь составлять структуру и логику корпоративного сайта. Узнаете порядок отрисовки страниц. По итогу вы создадите свой проект и упакуете его в кейс на Behance.
- Технологический процесс
- Первый этап: Брифинг/ Сбор информации
- Второй этап: Конкурентный анализ
- Третий этап: Прототипирование
- Четвертый этап: Визуальная концепция
- Пятый этап: Передача макетов разработчикам
- Оформление проекта в кейс на Behance
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Новостной сайт
На реальном примере подробно разберем структуру новостных сайтов, изучим набор обязательных типов страниц и набор блоков, из которых он состоит. В результате вы создадите собственный новостной сайт и опубликуете его на Behance.
- Технологический процесс
- Первый этап: Брифинг/ Сбор информации
- Второй этап: Конкурентный анализ
- Третий этап: Прототипирование
- Четвертый этап: Визуальная концепция
- Пятый этап: Передача макетов разработчикам
- Оформление проекта в кейс на Behance
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Сайт студии
Самый интересный и творческий тип сайтов. Вы узнаете, для чего агентствам сайты, какие цели и задачи они решают. Поймете, какую ценность получает клиент при посещении сайта агентства. Мы рассмотрим порядок проектирования и отрисовки страниц для таких типов сайтов. В результате у вас будет свой проект, который вы выложите на Behance.
- Технологический процесс
- Первый этап: Брифинг/ Сбор информации
- Второй этап: Конкурентный анализ
- Третий этап: Прототипирование
- Четвертый этап: Визуальная концепция
- Пятый этап: Передача макетов разработчикам
- Оформление проекта в кейс на Behance
АНАЛИТИКА (UX)
ВИЗУАЛЬНЫЙ ДИЗАЙН (UI)
Сайт-портфолио
Узнаете, для чего нужен сайт портфолио и как он может помочь в построении карьеры и на фрилансе. Изучите необходимые типы страниц и то, какие задачи они решают. Мы разберем обязательный набор блоков для каждой страницы. Вы нарисуете десктопные и адаптивные версии, а также оформите их в кейс на Behance.
- Технологический процесс
- Первый этап: Брифинг/ Сбор информации
- Второй этап: Конкурентный анализ
- Третий этап: Прототипирование
- Четвертый этап: Визуальная концепция
- Пятый этап: Передача макетов разработчикам
- Оформление проекта в кейс на Behance
