Основы веб-дизайна

Шрифты, типографика, колористика, композиция, модульные сетки

Чему Вы научитесь

  • Общие знания об истории и развитии графического дизайна
  • Колористика и композиция: умение объяснить разницу между правилами классической и веб-композиции
  • Понимание и применение правил веб-композиции
  • Навык работы с цветом: составление цветой схемы
  • Навык работы с композицией: умение обосновать расположение объектов на макете
  • Умение строить композиции в веб и адаптивных версиях
  • Работа со шрифтом: применение различных шрифтов в проектах и обоснование
  • Модульные сетки: умение выстраивать графические модульные сетки

Что Вы получите

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

После обучения мы предлагаем всем выпускникам оценить программу курса и преподавателя, а также при желании оставить отзыв.
Все отзывы и оценки мы публикуем без изменений.