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

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

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

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

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

Видеозаписи всех онлайн-занятий
Методички и практические задания
Общение с одногруппниками
Сертификат об окончании обучения
  • 1
    Урок 1. Вводная лекция. Знакомство с графическим и веб-дизайном
    • Мы познакомимся. • Расскажу, чтонужно знать для начинающего дизайнера. • Определим цель. • Обсудим работу, которую вы должны будете сделать по итогу этого курса. (Лендинг) • Что такое лендинг • Определим этапы работы. С чего начать (с задачи) • Покажу на практике, как работать с задачей
  • 2
    Урок 2. Навигация и структура
    • Повторим , как нужно работать с задачей. На примерах ваших домашних работ. • Еще раз повторим, что такое лендинг, для чего и для кого он вообще нужен? • Определим этапы создания лендинга • Поговорим о том, в чем заключаются основные принципы дизайна лендинга • Разберем анатомию лендинга. Его структуру. • Как работать с брифом и как стоить по нему структуру лендинга. • Практическое задание. (Разберем похожий пример на лекции)
  • 3
    Урок 3. Тренды, подготовка, мудборды
    • Эволюция веб-сайтов • Тренды 2019-2020 • Предпроектная работа. Зачем нужент мудборд. И как его составлять. • Рассмотрим практический пример работы с референсами.
  • 4
    Урок 4. Прототипирование
    • Прототипы. Зачем они нужны • Как собирать прототип • Какие есть требования к прототипам • Как собрать макет по референсам. • Версионность прототипа (Насколько прототип может отличаться от дизайн-макета и какие изменения стоит вносить на этапе прототипирования)
  • 5
    Урок 5. Видеоурок. Контент и UI редактура
    Видеоурок
  • 6
    Урок 6. Композиция
    • Познакомимся с основами композиции • Узнаем для чего нужна композиция в веб-дизайне • Ознакомимся с основными принципами веб-дизайна • Рассмотримвизуальную иерархию веб-сайта • Узнаем об основных приемах расположения контента
  • 7
    Урок 7. Принцип близости и правило внутреннего и внешнего
    • Принцип близости. • Правило внутреннего и внешнего • Модульность • Практическая работа
  • 8
    Урок 8. Модульные сетки
    • Что такое модульная сетка и для чего она нужна. • Принципы построения модульной сетки • Практический пример
  • 9
    Урок 9. Основы типографики
    • Что такое типографика • Анатомия шрифтов • Принципы подбора шрифтов • Практический пример
  • 10
    Урок 10. Типографика в веб-дизайне
    • Ресурсы для поиска шрифта • Тенденции • Принципы совмещения шрифтов • Принципы верстки текста на веб-сайтах • Style-guide проекта • Полезные советы и разбор частых ошибок начинающих дизайнеров
  • 11
    Урок 11. Колористика
    • Цвет. Свойства цвета • Цветовой круг. Типы цвета • Как подобрать цвет? Психология, цветовая иерархия, техники подбора, сервисы • Style-guide проекта • Полезные советы и разбор частых ошибок начинающих дизайнеров
  • 12
    Урок 12. Видеоурок. Дизайн для людей с ограниченными возможностями
  • 13
    Урок 13. Разбор частых ошибок
    Разбор частых ошибок, которые студенты совершили за время прохождения курса
  • 14
    Урок 14. Адаптивный дизайн
    • Что значит адаптивный дизайн? Зачем он нужен? • Отличие адаптивного дизайна от мобильного приложения • Типы адаптивных макетов • Ключевые рекомендации • Практический пример
  • 15
    Урок 15. Как оформить работу в портфолио
    • Путь портфолио в агентстве • Резюме. Как его оформить и заполнить. • Портфолио. Для чего оно так нужно? • Почему важно оформлять проекты в кейсы. Основные рекомендации по оформлению кейсов. • Где можно сделать самому сайт-портфолио? • Ключевые рекомендации
  • 16
    Урок 16. Итоговая работа
    Создание адаптивного лендинга. (по заданному брифу) + сопутствующие материалы (гайдлайны, дополнительные экраны). Макет собирается в Figma. Форматы артбордов: 1440рх, 768рх, 320рх. Работа индивидуальная. Собирается лендинг поэтапно в течении всего курса.
  • Нажимая на кнопку "Добавить в корзину", Вы принимаете условия договора оферты.

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