[Uprock] Евгений Кузьмин → Профессия UX/UI дизайнер (2021)
![Изображение [Uprock] Евгений Кузьмин → Профессия UX/UI дизайнер (2021)](https://s6.vkurse.info/attachments/1782791606125-png.76109/ "Картинка [Uprock] Евгений Кузьмин → Профессия UX/UI дизайнер (2021)")
Станьте высокооплачиваемым веб‑дизайнером, получайте международные награды и трудоустраивайтесь в лучшие компании!
Uprock – самая награждаемая школа на Behance!
Кому подойдет:
Как начинающим дизайнерам, чтобы разобраться в теме дизайна, так и опытным специалистам в этой сфере, чтобы систематизировать свои знания и повысить профессиональный уровень.
Вы пройдете все этапы создания дизайна сайта совместно с опытным куратором.
Качественные проекты и полученные в Uprock навыки помогают трудоустраиваться в ведущие компании, а также быть успешными фрилансерами.
Теория
Задачи и навыки UX/UI дизайнера
В этом уроке вы получите представление о том, в чем разница между UX и UI, а также почему они неразрывно связаны между собой. Вы поймете, какие навыки и личные качества вам предстоит развивать в процессе обучения. Мы обсудим, что такое интерфейс и затронем тему классификации дизайна и сайтов. В заключение вы узнаете, какими принципами и в каком порядке важно руководствоваться в процессе проектирования.
Психология пользователя
Визуальный дизайн (UI)
Работа с Figma (начало)
В этом уроке вы узнаете о том, что представляет собой графический редактор Figma, в котором вам предстоит проектировать, и какие у нее есть возможности. Мы изучим все аспекты работы в Figma, начиная от всех тонкостей регистрации и изучения ее интерфейса и заканчивая применением ее основных инструментов, которые позволят вам начать работу в редакторе. В заключение мы закрепим теорию на практике и нарисуем тестовый макет.
В этом уроке вы узнаете, что такое UI Kit и для чего он нужен. Мы подробно разберем состав UI Kit и алгоритм его создания в Figma в процессе работы над проектом.
В этом уроке вы поймете, что из себя представляет базовый стиль Uprock и для каких случаев он подходит. Мы разберем его основные аспекты, такие как цвет, шрифтовая схема, интерактивные элементы и сетка. Также вы изучите основные компоненты сайта, в том числе на практических примерах. В заключение вы узнаете, как настроить базовый стиль Uprock под себя.
Вы получите знания о принципах адаптивности. Узнаете, почему возникла потребность в создании адаптивного дизайна. Разберетесь в типах экранов устройств и на практике закрепите навыки рисования дизайна во всех версиях. Изучите главные особенности дизайна для сенсорных экранов. В заключение вы узнаете, что такое брейкпоинты и изучите самые основные из них.
Вы получите представление о том, что такое визуальная логика и почему она необходима при проектировании. Узнаете, что у человека есть рабочая память и что ее возможности весьма ограничены. Мы поговорим о том, как дизайнер с помощью выстраивания визуальной логики облегчает для пользователя сканирование контента и запоминание. Вы подробно изучите ее основные принципы: группировка, декомпозиция, иерархия, переиспользование, познакомитесь с понятием "дизайн-система" и ее правилами. В заключение на практическом примере вы научитесь анализировать дизайн-системы проектов.
Вы узнаете, на каких сайтах искать вдохновение, а также познакомитесь с алгоритмом поиска самых лучших референсов. Поймете, как развивать насмотренность с помощью простой поэтапной схемы анализа и систематизации визуальных решений. В заключение научитесь формировать и вести базу знаний.
В этом уроке вы получите представление о том, что такое веб-анимация, какие функции она выполняет в дизайне интерфейсов и в каких случаях используется. Вы узнаете, какие два основных типа анимаций используются на сайтах в реальной жизни. Отдельно поговорим о "фишках сайта" с помощью анимации и параллакс-эффекте. Обсудим минусы креативной анимации. В заключение вы узнаете, какие еще существуют программы для создания анимации, кроме After Effects, и чем они могут быть полезны.
Элементы интерфейса / Компоненты сайта
Вы узнаете, что такое элементы интерфейса и почему важно не нарушать их привычное поведение на сайте. Изучите такие ключевые элементы, как кнопка, ссылка, текстовое поле и пагинация; их функции и правила рисования. Мы разберемся в основных функциональных блоках сайта и их предназначении. В заключение вы будете знать все основные элементы сайта и закрепите свои знания на практике.
В этом уроке вы изучите основные типы страниц сайта. Более подробно мы остановимся на контентных страницах, потому что они самые интересные для реализации творческих решений. Разберем типы контентных страниц и их принципиальные отличия. В результате вы поймете, что включает в себя контент, и узнаете, как правильно располагать его на сайте.
Вы узнаете, что основная задача дизайнера заключается в том, чтобы правильно донести нужную информацию до пользователя. Разберем логические блоки сценария повествования. Вы поймете, в какой последовательности следует его выстраивать, чтобы подвести пользователей к совершению целевого действия. На примере проектирования лендинг-пейджа вы увидите алгоритм создания сценария. Поговорим об основных ошибках, которые часто совершают дизайнеры. В заключение вы научитесь тому, как работать с текстом, что поможет вам в работе над своими проектами.
В этом уроке вы изучите структуру лендинга. Вы узнаете, в каком порядке следует располагать блоки сайта, а затем изучите информационное наполнение каждого из них. Вы получите представление о том, что такое функциональный прототип и для каких целей он нужен. В итоге вы сможете самостоятельно создать прототип своего лендинга.
Вы познакомитесь с понятием «информационный запах» и узнаете, как он определяет принципы работы навигации. Изучите общие закономерности использования поиска по сайту и навигации пользователями. В результате вы будете понимать, насколько важно продумать навигацию, чтобы человек мог быстро сориентироваться в интерфейсе и найти то, что ему нужно.
Вы узнаете основные принципы создания качественной навигации и поймете, что в ее основе лежат паттерны поведения пользователей на сайте. Вы познакомитесь с классическими примерами навигации. В заключение вы научитесь создавать интуитивно понятную навигацию, будете разбираться в том, когда уместно использовать стандартную навигацию, а когда можно добавить к ней креативные решения.
В этом уроке вы получите понимание важности исследований в дизайне. Вы изучите их основные типы и будете знать алгоритм работы с ними. Поймете, где искать и как анализировать клиентские и открытые данные, где брать информацию о продукте и что именно нужно выяснить в отношении него. Далее вы научитесь анализировать аудиторию. В итоге вы сможете самостоятельно проводить исследования во время работы над проектом.
Подробно разберем последовательность создания дизайна. Вы изучите основные этапы проектирования сайтов, а также поймете, насколько важен UX в дизайне. Вы узнаете, что такое тайминг проекта, зачем его вести и наглядно увидите, что из себя представляет этот документ. В итоге вы скачаете таблицу тайминга. Ее заполнение позволит вам собирать статистику времени, которое вы тратите на работу над проектом, видеть полную картину его реализации и проблемные этапы.
В этом уроке вы изучите алгоритм действий на этапе брифинга. Вы узнаете основные нюансы его проведения. Подробно разберем все разделы брифа. Отдельно остановимся на его завершающем этапе. Вы научитесь деловой переписке и правильному общению с клиентом. В итоге вы сможете самостоятельно брифовать и максимально детально собирать всю необходимую для проекта информацию.
Вы поймете, как правильно искать конкурентов. Получите сводную таблицу, в которую будете вносить критерии оценки конкурентов, данные о них и о продукте клиента, а также выводы из анализа. На реальном примере вы проведете конкурентный анализ. В итоге вы сможете погрузиться в индустрию клиента и разобраться в особенностях продукта, который продает он и его конкуренты.
В этом уроке вы узнаете, как выстраивать структуру лендинга и разрабатывать прототип будущего сайта. В итоге вы сами создадите реальный прототип на базе вашего проекта.
Мы разберем, как проводить визуальный анализ индустрии, к которой относится проект. Вы узнаете, как выбирать объекты для анализа, как его проводить, и то, какие задачи в итоге он решает. На реальном примере вы увидите, как следует работать с референсами. Мы рассмотрим, как правильно расставить приоритеты при создании концепции. В заключение вы узнаете все нюансы презентации своей концепции клиенту, чтобы она ему понравилась и он с ней согласился.
Мы подробно разберем, как и какие элементы UI Kit необходимо описать для целей передачи макета в верстку. Вы узнаете, почему важно группировать и чистить слои. Мы подробно расскажем вам, как создавать комментарии и что в них писать, чтобы у разработчика не осталось никаких вопросов. Вы получите представление о том, как экспортировать фотографии и векторные объекты, а также поймете алгоритм передачи файла разработчику. Мы остановимся на том, что такое авторский контроль и почему он нужен. В заключение вы научитесь готовить макеты для передачи в разработку таким образом, чтобы после верстки получить идеальный цифровой продукт.
Лендинг
Мы разберем, что такое лендинг и чем он отличается от других типов сайтов. Вы нарисуете его по алгоритмам, которые мы применяем у себя в студии. На практике вы узнаете: как проводить брифинг, собирать информацию для сайта, для чего нужен конкурентный анализ, как разработать прототип. Мы расскажем про свой подход к выборе визуальной концепции. В итоге вы нарисуете десктопные и адаптивные версии лендинга.
Вы узнаете, какие бывают виды интернет-магазинов: бутик, масс-маркет, маркетплейс. Поймете, что такое сущности, спроектируете и нарисуете набор страниц, необходимый для любого интернет-магазина: главная, каталог, карточка товара, корзина, контакты, процесс покупки, доставка, возврат. Помимо десктопных версий, вы создадите адаптивные и оформите кейс на Behance.
Вы изучите особенности одного из самых распространенных типов сайтов — корпоративный. Поймете, какие задачи он решает. Научитесь составлять структуру и логику корпоративного сайта. Узнаете порядок отрисовки страниц. По итогу вы создадите свой проект, нарисуете адаптивы и упакуете его в кейс на Behance.
На реальном примере подробно разберем структуру новостных сайтов, изучим набор обязательных типов страниц и набор блоков, из которых он состоит. В результате вы создадите собственный новостной сайт и опубликуете его на Behance.
Узнаете, для чего нужен сайт портфолио и как он может помочь в построении карьеры и на фрилансе. Изучите необходимые типы страниц и то, какие задачи они решают. Мы разберем обязательный набор блоков для каждой страницы. Вы нарисуете десктопные и адаптивные версии, а также оформите их в кейс на Behance.
Самый интересный и творческий тип сайтов. Вы узнаете, для чего агентствам сайты, какие цели и задачи они решают. Поймете, какую ценность получает клиент при посещении сайта агентства. Мы рассмотрим порядок проектирования и отрисовки страниц для таких типов сайтов. В результате у вас будет свой проект, который вы выложите на Behance.
Верстка на Webflow (первые шаги)
Познакомитесь с возможностями и назначениями бесплатного и платных тарифов Webflow. Вы узнаете, как построить работу над проектом от анализа до запуска. Как создавать полноценные, адаптированные под разные устройства сайты с эффектной анимацией без знания кода. Как спланировать и систематизировать весь процесс разработки от подготовки до запуска проекта. Как создавать плавные последовательные анимации.
Продажник:
Скачать:
Станьте высокооплачиваемым веб‑дизайнером, получайте международные награды и трудоустраивайтесь в лучшие компании!
Uprock – самая награждаемая школа на Behance!
Кому подойдет:
Как начинающим дизайнерам, чтобы разобраться в теме дизайна, так и опытным специалистам в этой сфере, чтобы систематизировать свои знания и повысить профессиональный уровень.
- Начинающим UX/UI дизайнерам
- Фронтендерам
- Менеджерам проектов
- Графическим дизайнерам
- Тем, кто меняет сферу деятельности
- Тем, кто хочет стать фрилансером
Вы пройдете все этапы создания дизайна сайта совместно с опытным куратором.
- 01 Онлайн‑стажировка под руководством арт‑директоров с видеоуроками и обратной связью.
- 02 Вы сделаете все типы сайтов: Лонгрид, Лендинг, Интернет‑магазин, Новостной сайт, Корпоративный сайт, Портфолио, Сайт агентства.
- 03 Подходит как начинающим, так и опытным дизайнерам, которые хотят улучшить свои навыки.
- С нашей помощью вы сможете создавать проекты, которые отвечают высоким требованиям юзабилити (UX) и визуала (UI). Это помогает достигать высоких результатов как при трудоустройстве, так и при самостоятельном поиске клиентов.
- Видеолекции
Курс разбит на последовательные и логические этапы реальной разработки проекта. Таким образом вы легко усвоите материал и научитесь систематизировать свои рабочие процессы. - Практика, приближенная к стажировке в студии
Курс на 80% состоит из практики, максимально приближенной к работе над реальным проектом в дизайн-студии. Это позволит вам быстро адаптироваться при трудоустройстве в компанию.
- Лонгрид
- Лендинг
- Интернет‑магазин
- Новостной сайт
- Корпоративный сайт
- Портфолио
- Сайт агентства
Качественные проекты и полученные в Uprock навыки помогают трудоустраиваться в ведущие компании, а также быть успешными фрилансерами.
- Setters
- Landau
- Creative people
- Zephyr lab
- Everest
- Сибирикс
- M-a-x
- 2gis
- Ozon
- Obys
- Uplab
- Wrike
- Сбер
- Clay
Теория
Задачи и навыки UX/UI дизайнера
В этом уроке вы получите представление о том, в чем разница между UX и UI, а также почему они неразрывно связаны между собой. Вы поймете, какие навыки и личные качества вам предстоит развивать в процессе обучения. Мы обсудим, что такое интерфейс и затронем тему классификации дизайна и сайтов. В заключение вы узнаете, какими принципами и в каком порядке важно руководствоваться в процессе проектирования.
- О профессии UX/UI дизайнера
- Навыки UX/UI дизайнера
- Какие задачи решает дизайн
- Интерфейс и классификация сайтов
Психология пользователя
Визуальный дизайн (UI)
Работа с Figma (начало)
В этом уроке вы узнаете о том, что представляет собой графический редактор Figma, в котором вам предстоит проектировать, и какие у нее есть возможности. Мы изучим все аспекты работы в Figma, начиная от всех тонкостей регистрации и изучения ее интерфейса и заканчивая применением ее основных инструментов, которые позволят вам начать работу в редакторе. В заключение мы закрепим теорию на практике и нарисуем тестовый макет.
- Работа в Figma (начало)
- Интерфейс программы / основы работы в Figma
- Основные инструменты Figma и настройки
- Дополнительные инструменты
- Рисуем тестовый макет
В этом уроке вы узнаете, что такое UI Kit и для чего он нужен. Мы подробно разберем состав UI Kit и алгоритм его создания в Figma в процессе работы над проектом.
- Что такое UI Kit
- Для чего нужен UI Kit
- Состав UI Kit
- Стили, компоненты, автолейауты и варианты Figma
- Почему важно сразу создавать стили в Figma
В этом уроке вы поймете, что из себя представляет базовый стиль Uprock и для каких случаев он подходит. Мы разберем его основные аспекты, такие как цвет, шрифтовая схема, интерактивные элементы и сетка. Также вы изучите основные компоненты сайта, в том числе на практических примерах. В заключение вы узнаете, как настроить базовый стиль Uprock под себя.
- О базовом стиле Uprock
- Когда подойдет базовый стиль Uprock
- Анатомия стиля (цвет, типографика, сетка)
- Наборы блоков
- Как настроить стиль под себя
Вы получите знания о принципах адаптивности. Узнаете, почему возникла потребность в создании адаптивного дизайна. Разберетесь в типах экранов устройств и на практике закрепите навыки рисования дизайна во всех версиях. Изучите главные особенности дизайна для сенсорных экранов. В заключение вы узнаете, что такое брейкпоинты и изучите самые основные из них.
- Историческая справка
- Типы экранов и колонки
- Десктопные устройства
- Планшеты
- Мобильные устройства
- Резюме
- Определение брейкпойнтов
- Основные брейкпоинты
- Резюме
Вы получите представление о том, что такое визуальная логика и почему она необходима при проектировании. Узнаете, что у человека есть рабочая память и что ее возможности весьма ограничены. Мы поговорим о том, как дизайнер с помощью выстраивания визуальной логики облегчает для пользователя сканирование контента и запоминание. Вы подробно изучите ее основные принципы: группировка, декомпозиция, иерархия, переиспользование, познакомитесь с понятием "дизайн-система" и ее правилами. В заключение на практическом примере вы научитесь анализировать дизайн-системы проектов.
- Основные принципы визуальной логики
- Гештальтпсихология
- Декомпозиция
- Иерархия
- Дизайн-система
Вы узнаете, на каких сайтах искать вдохновение, а также познакомитесь с алгоритмом поиска самых лучших референсов. Поймете, как развивать насмотренность с помощью простой поэтапной схемы анализа и систематизации визуальных решений. В заключение научитесь формировать и вести базу знаний.
- Где искать вдохновение?
- Как прокачивать насмотренность?
- Алгоритм ваших действий
- База знаний визуальных решений
В этом уроке вы получите представление о том, что такое веб-анимация, какие функции она выполняет в дизайне интерфейсов и в каких случаях используется. Вы узнаете, какие два основных типа анимаций используются на сайтах в реальной жизни. Отдельно поговорим о "фишках сайта" с помощью анимации и параллакс-эффекте. Обсудим минусы креативной анимации. В заключение вы узнаете, какие еще существуют программы для создания анимации, кроме After Effects, и чем они могут быть полезны.
- Введение в веб-анимацию
- Теория
- Установка программ
- Интерфейс и настройка After Effects
- Анимация появления
Элементы интерфейса / Компоненты сайта
Вы узнаете, что такое элементы интерфейса и почему важно не нарушать их привычное поведение на сайте. Изучите такие ключевые элементы, как кнопка, ссылка, текстовое поле и пагинация; их функции и правила рисования. Мы разберемся в основных функциональных блоках сайта и их предназначении. В заключение вы будете знать все основные элементы сайта и закрепите свои знания на практике.
- Элементы интерфейса
- Кнопка (функция, состояния, правила отрисовки)
- Ссылка (функция, состояния, правила отрисовки)
- Текстовое поле (состав, форма, функции, состояния, правила отрисовки)
- Пагинация
- Функциональные блоки
- Контентные блоки
- Слайдер
- Карточки
- Список
- Таблица
- Карта
- Контакты / обратная связь
- Формы
- Фильтры / сортировка
- Видеоплеер
- Поп-ап
- Футер
В этом уроке вы изучите основные типы страниц сайта. Более подробно мы остановимся на контентных страницах, потому что они самые интересные для реализации творческих решений. Разберем типы контентных страниц и их принципиальные отличия. В результате вы поймете, что включает в себя контент, и узнаете, как правильно располагать его на сайте.
- Основные типы страниц
- Контентные страницы
- Презентация
- Статья
Вы узнаете, что основная задача дизайнера заключается в том, чтобы правильно донести нужную информацию до пользователя. Разберем логические блоки сценария повествования. Вы поймете, в какой последовательности следует его выстраивать, чтобы подвести пользователей к совершению целевого действия. На примере проектирования лендинг-пейджа вы увидите алгоритм создания сценария. Поговорим об основных ошибках, которые часто совершают дизайнеры. В заключение вы научитесь тому, как работать с текстом, что поможет вам в работе над своими проектами.
- Повествование в дизайне
- Разработка повествования
- UX копирайтинг
- Конкретика формулировок
- Основной заголовок
- Подзаголовок
- Основное предложение
- Заголовки и подзаголовки блоков
- Тезисы / цифры
- Отзывы
- Названия кнопок
- Призыв к действию
В этом уроке вы изучите структуру лендинга. Вы узнаете, в каком порядке следует располагать блоки сайта, а затем изучите информационное наполнение каждого из них. Вы получите представление о том, что такое функциональный прототип и для каких целей он нужен. В итоге вы сможете самостоятельно создать прототип своего лендинга.
- Формирование повествования
- Первый уровень: общее повествование
- Второй уровень: состав блоков
- Функциональный прототип
- Вайрфреймы
- Типовая структура лендинга
- Первый экран
- Хедер
- Обложка
- Выгода от продукта
- Целевое действие
- Дополнительные блоки
Вы познакомитесь с понятием «информационный запах» и узнаете, как он определяет принципы работы навигации. Изучите общие закономерности использования поиска по сайту и навигации пользователями. В результате вы будете понимать, насколько важно продумать навигацию, чтобы человек мог быстро сориентироваться в интерфейсе и найти то, что ему нужно.
- Веб-интерфейс
- Теория «информационного запаха»
- Навигация vs поиск
Вы узнаете основные принципы создания качественной навигации и поймете, что в ее основе лежат паттерны поведения пользователей на сайте. Вы познакомитесь с классическими примерами навигации. В заключение вы научитесь создавать интуитивно понятную навигацию, будете разбираться в том, когда уместно использовать стандартную навигацию, а когда можно добавить к ней креативные решения.
- Горизонтальное меню
- Открытое меню
- Оптимальное количество пунктов в меню
- Резюме
- Логотип – слева, пункты меню – справа
- Логотип – по центру, пункты меню – слева и справа
- Слева логотип + двухуровневое меню
- Меню, спрятанное в гамбургер
- Вертикальное меню
В этом уроке вы получите понимание важности исследований в дизайне. Вы изучите их основные типы и будете знать алгоритм работы с ними. Поймете, где искать и как анализировать клиентские и открытые данные, где брать информацию о продукте и что именно нужно выяснить в отношении него. Далее вы научитесь анализировать аудиторию. В итоге вы сможете самостоятельно проводить исследования во время работы над проектом.
- Важность исследований в веб-дизайне
- Типы исследований и аналитика
- Анализ аудитории
- Характеристика и оценка аудитории
Подробно разберем последовательность создания дизайна. Вы изучите основные этапы проектирования сайтов, а также поймете, насколько важен UX в дизайне. Вы узнаете, что такое тайминг проекта, зачем его вести и наглядно увидите, что из себя представляет этот документ. В итоге вы скачаете таблицу тайминга. Ее заполнение позволит вам собирать статистику времени, которое вы тратите на работу над проектом, видеть полную картину его реализации и проблемные этапы.
- Общий алгоритм
- Тайминг проекта
- Зачем нужно вести тайминг
- Бесконечные проекты
- Проблемные точки
- Сбор статистики
- Прогнозирование
В этом уроке вы изучите алгоритм действий на этапе брифинга. Вы узнаете основные нюансы его проведения. Подробно разберем все разделы брифа. Отдельно остановимся на его завершающем этапе. Вы научитесь деловой переписке и правильному общению с клиентом. В итоге вы сможете самостоятельно брифовать и максимально детально собирать всю необходимую для проекта информацию.
- Алгоритм действий
- Важные нюансы
- Первая страница
- Контактная информация
- О компании
- Пользователь
- Сайт
Вы поймете, как правильно искать конкурентов. Получите сводную таблицу, в которую будете вносить критерии оценки конкурентов, данные о них и о продукте клиента, а также выводы из анализа. На реальном примере вы проведете конкурентный анализ. В итоге вы сможете погрузиться в индустрию клиента и разобраться в особенностях продукта, который продает он и его конкуренты.
- Для чего нужен конкурентный анализ
- Как искать конкурентов клиента
- По каким параметрам проводить аналитику
- Выводы из конкурентного анализа
В этом уроке вы узнаете, как выстраивать структуру лендинга и разрабатывать прототип будущего сайта. В итоге вы сами создадите реальный прототип на базе вашего проекта.
- На основании чего строится прототип
- Создаем прототип для своего проекта
- В итоге вы получите будущую структуру сайта
Мы разберем, как проводить визуальный анализ индустрии, к которой относится проект. Вы узнаете, как выбирать объекты для анализа, как его проводить, и то, какие задачи в итоге он решает. На реальном примере вы увидите, как следует работать с референсами. Мы рассмотрим, как правильно расставить приоритеты при создании концепции. В заключение вы узнаете все нюансы презентации своей концепции клиенту, чтобы она ему понравилась и он с ней согласился.
- Что определяет стиль?
- Анализ индустрии
- Работа с референсами
- Поиск визуальной концепции
- Система оценки дизайна
- Презентация визуальной концепции
Мы подробно разберем, как и какие элементы UI Kit необходимо описать для целей передачи макета в верстку. Вы узнаете, почему важно группировать и чистить слои. Мы подробно расскажем вам, как создавать комментарии и что в них писать, чтобы у разработчика не осталось никаких вопросов. Вы получите представление о том, как экспортировать фотографии и векторные объекты, а также поймете алгоритм передачи файла разработчику. Мы остановимся на том, что такое авторский контроль и почему он нужен. В заключение вы научитесь готовить макеты для передачи в разработку таким образом, чтобы после верстки получить идеальный цифровой продукт.
- Общее, определение и состав UI Kit
- Пример UI Kit
- Подготовка макета к разработке
Лендинг
Мы разберем, что такое лендинг и чем он отличается от других типов сайтов. Вы нарисуете его по алгоритмам, которые мы применяем у себя в студии. На практике вы узнаете: как проводить брифинг, собирать информацию для сайта, для чего нужен конкурентный анализ, как разработать прототип. Мы расскажем про свой подход к выборе визуальной концепции. В итоге вы нарисуете десктопные и адаптивные версии лендинга.
- Технологический процесс
- Первый этап: брифинг / сбор информации
- Второй этап: конкурентный анализ
- Третий этап: прототипирование
- Четвертый этап: визуальная концепция
- Пятый этап: передача макетов разработчикам
Вы узнаете, какие бывают виды интернет-магазинов: бутик, масс-маркет, маркетплейс. Поймете, что такое сущности, спроектируете и нарисуете набор страниц, необходимый для любого интернет-магазина: главная, каталог, карточка товара, корзина, контакты, процесс покупки, доставка, возврат. Помимо десктопных версий, вы создадите адаптивные и оформите кейс на Behance.
- Технологический процесс
- Первый этап: брифинг / сбор информации
- Второй этап: конкурентный анализ
- Третий этап: прототипирование
- Четвертый этап: визуальная концепция
- Пятый этап: передача макетов разработчикам
Вы изучите особенности одного из самых распространенных типов сайтов — корпоративный. Поймете, какие задачи он решает. Научитесь составлять структуру и логику корпоративного сайта. Узнаете порядок отрисовки страниц. По итогу вы создадите свой проект, нарисуете адаптивы и упакуете его в кейс на Behance.
- Технологический процесс
- Первый этап: брифинг / сбор информации
- Второй этап: конкурентный анализ
- Третий этап: прототипирование
- Четвертый этап: визуальная концепция
- Пятый этап: передача макетов разработчикам
На реальном примере подробно разберем структуру новостных сайтов, изучим набор обязательных типов страниц и набор блоков, из которых он состоит. В результате вы создадите собственный новостной сайт и опубликуете его на Behance.
- Технологический процесс
- Первый этап: брифинг / сбор информации
- Второй этап: конкурентный анализ
- Третий этап: прототипирование
- Четвертый этап: визуальная концепция
- Пятый этап: передача макетов разработчикам
Узнаете, для чего нужен сайт портфолио и как он может помочь в построении карьеры и на фрилансе. Изучите необходимые типы страниц и то, какие задачи они решают. Мы разберем обязательный набор блоков для каждой страницы. Вы нарисуете десктопные и адаптивные версии, а также оформите их в кейс на Behance.
- Технологический процесс
- Первый этап: брифинг / сбор информации
- Второй этап: конкурентный анализ
- Третий этап: прототипирование
- Четвертый этап: визуальная концепция
- Пятый этап: передача макетов разработчикам
Самый интересный и творческий тип сайтов. Вы узнаете, для чего агентствам сайты, какие цели и задачи они решают. Поймете, какую ценность получает клиент при посещении сайта агентства. Мы рассмотрим порядок проектирования и отрисовки страниц для таких типов сайтов. В результате у вас будет свой проект, который вы выложите на Behance.
- Технологический процесс
- Первый этап: брифинг / сбор информации
- Второй этап: конкурентный анализ
- Третий этап: прототипирование
- Четвертый этап: визуальная концепция
- Пятый этап: передача макетов разработчикам
Верстка на Webflow (первые шаги)
Познакомитесь с возможностями и назначениями бесплатного и платных тарифов Webflow. Вы узнаете, как построить работу над проектом от анализа до запуска. Как создавать полноценные, адаптированные под разные устройства сайты с эффектной анимацией без знания кода. Как спланировать и систематизировать весь процесс разработки от подготовки до запуска проекта. Как создавать плавные последовательные анимации.
- Планы и тарифы
- Обзор и анализ макета
- Чек-лист приемки макета
- План работы
- Подготовка макета к верстке
- Экспорт и оптимизация изображений
- Подготовка других файлов
- Блочная верстка и основы HTML и CSS
- Иерархия элементов сайта
- Панель навигатор
- Регистрация и создание проекта
- Публикация сайта
- Настройки проекта
- Добавление элементов
- Обзор основных элементов
Продажник:
Скачать:
