Бесплатная помощь в подборе профессии
Бесплатная помощь в подборе курса
Бесплатная помощь в подборе профессии
Бесплатная помощь в подборе курса
Бесплатная помощь в подборе профессии
Бесплатная помощь в подборе курса
- 1• Знакомство с учениками • Мир веб-дизайна и специфика работы (зоны ответственности веб-дизайнера, этапы работы) • Что нужно знать начинающему дизайнеру. Какими навыками он должен обладать. • Определение цели курса • Как будем достигать этой цели. Что будет на курсе. Этапы работы. В чем заключается итоговая работа • Организационные моменты (Как проходят лекции: формат / длительность. Как сдавать домашнюю работу: формат, сроки, прочие ответы на вопросы • Начало работы над задачей. БрифУрок 1. Знакомство с веб-дизайном и бриф
- 2• Сайты. Основные типы • Что такое лендинг? В чем его специфика. Когда его используют. Примеры лендингов. Их специфика и назначение. • Структура лендинга. Принципы дизайна. Этапы создания лендинга. • Предпроектная работа: анализ аудитории, конкурентов. • Создание структуры • Практический примерУрок 2. Структура
- 3• Эволюция веб-сайтов • Стили в веб-дизайне • Тренды 2020-2021 • Мудборд: для чего он нужен и как его собирать • Референсы: где искатьУрок 3. Предпроектная работа: мудборд и референсы
- 4• Скетч, вайрфрейм, прототип, мокап • Прототипы. Зачем они нужны • Где можно создавать прототип • Как собирать прототип. Основные правила создания прототипов • Ошибки в проектировании прототипов • Версионность прототипа (Насколько прототип может отличаться от дизайн-макета и какие изменения стоит вносить на этапе прототипирования)Урок 4. Прототипирование
- 5• Что входит в понятие контента (визуальный, текстовый) • Как формируется контент на сайтах? Кто должен его предоставлять: заказчик или самостоятельный поиск и написание • Что такое Lorem Ipsum и рыбный текст. Когда применять, а когда не стоит • Как дизайнеру работать с текстом. Советы по копирайтингу • Правила оформления визуального контента на сайт. (иконки, изображения, фото, видео, иллюстрации, графика) • Специфика контента и аудитории • Обзор ресурсов для поиска контентаУрок 5. Контент и редактура
- 6• Что такое юзабилити • Принципы юзабилити • UX-дизайн меню • Кнопки в интерфейсах • Дизайн эффективных форм • Визуальные подсказки • Микроанимация и состояния интерактивных элементовУрок 6. Юзабилити. UX и UI
- 7На этой лекции разбираются работы студентов. Рассматриваются частые ошибки. Преподаватель отвечает на все возникшие вопросы студентов.Урок 7. Разбор работ
- 8• Элементы композиции • Основные законы композиции • Композиция в интерфейсе (для чего нужна композиция в веб-дизайне и основные приемы расположения контента) • Принцип близости • Расстояния и принцип внутреннего и внешнего • Система отступовУрок 8. Композиция Принцип близости и правило внутреннего и внешнего
- 9• Что такое модульная сетка, и для чего она нужна • Разновидности сеток • Принципы построения модульной сетки • Когда можно не придерживаться сетки • Особенности построения модульных сеток для разных разрешений: десктопной версии, планшетной, мобильной • Практический пример (подсчет колонок и работа с модулями)Урок 9. Модульные сетки
- 10• Почему веб-дизайнер изучает типографику • Шрифты (анатомия, основные термины в типографике) • Редактура шрифта (начертание, размер кегля, интерлиньяж, кернинг и трекинг) • Типы шрифтов: моноширный и пропорциональный (их приминение) • Виды гарнитур (антиква, гротеск, рукописная и декоративная/акцидентная) • Где искать шрифты? • Принципы подбора шрифтов • Составление шрифтовых пар. Сервисы • Практические заданияУрок 10. Основы типографики
- 11• Тренды в типографике (в веб-дизайне) • Принципы верстки текста на веб-сайтах. Шрифтовая иеррархия • Правильная работа с текстовыми полями • Style-guide с типографикой проекта • Полезные советы и разбор частых ошибок начинающих дизайнеров • Плагины на Figma и полезные сервисы для работы со шрифтамиУрок 11. Типографика в веб-дизайне
- 12• Цвет. Свойства цвета • Цветовые модели (RGB, HEX, CMYK, HSL, HSB) • Психология восприятия цвета, цветовые предпочтения и цветовое кодирование • Цветовой круг. Цветовые гармонии и сочетания • Техника подбора палитры и сервисы • Цветовая иерархия и контраст в интерфейсе • Style-guide с палитрой проекта • Плагины на Figma и полезные сервисы для работы с цветом • Объяснение домашнего задания • Ответы на оставшиеся вопросыУрок 12. Колористика
- 13• Чек-лист для проверки своего макета • Разбор работ студентов • Объяснение домашнего задания • Ответы на оставшиеся вопросыУрок 13. Разбор работ: частые ошибки
- 14• Макет глазами верстальщика (вкладка code) • Принципы developer-friendly макета. Размеры, отступы, сетка, текстовые поля • «Магическое число» и важность целых чисел • Культура написания имен для слоев, групп и элементов • Подготовка контента. Изображения, иконки, текст • Дизайн-система. выбор идеологии компонентов. Стили текста и элементов • Коммуникация. Кодирование готовности, гайды • Анимация. codrops, codepen, ховер эффектыУрок 14. Подготовка макета к вёрстке
- 15• Агентство, продукт или фриланс • Какой путь проходит ваше портфолио в агентстве • Что писать в резюме • Что ждет от вас работодатель • Как лучше оформлять свое портфолио • Стоит ли создавать свой сайт-портфолио • Кое-что об адаптивном дизайнеУрок 15. Оформление работы в портфолио
- 16• Разбор работ каждого студента • Ответы на оставшиеся вопросы • Пожелания студентамУрок 16. Итоговая работа
После обучения мы предлагаем всем выпускникам оценить программу курса и преподавателя, а также при желании оставить отзыв.
Все отзывы и оценки мы публикуем без изменений.