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

Курс повышения квалификации или освоения программы с нуля по направлению Основы веб-дизайна от онлайн-университета GeekBrains. Курсы, созданные практикующими экспертами компаний-партнеров. Индивидуальный график – вы сами выбирайте, когда и во сколько проходить программу обучения. После прохождения курса выдается сертификат и возможность пройти стажировку в лучших IT компаниях России. У каждого студента есть возможность пообщаться с преподавателем в режиме онлайн или задать вопрос в чат. Университет имеет государственную лицензию №040485 на право оказывать образовательные услуги.

Программа курса

Урок 1. Вводная лекция. Знакомство с графическим и веб-дизайном

• • Мы познакомимся.
  • Расскажу, чтонужно знать для начинающего дизайнера.
  • Определим цель.
  • Обсудим работу, которую вы должны будете сделать по итогу этого курса. (Лендинг)
  • Что такое лендинг
  • Определим этапы работы. С чего начать (с задачи)
  • Покажу на практике, как работать с задачей

Урок 2. Навигация и структура

• • Повторим , как нужно работать с задачей. На примерах ваших домашних работ.
  • Еще раз повторим, что такое лендинг, для чего и для кого он вообще нужен?
  • Определим этапы создания лендинга
  • Поговорим о том, в чем заключаются основные принципы дизайна лендинга
  • Разберем анатомию лендинга. Его структуру.
  • Как работать с брифом и как стоить по нему структуру лендинга.
  • Практическое задание. (Разберем похожий пример на лекции)

Урок 3. Тренды, подготовка, мудборды

• • Эволюция веб-сайтов
  • Тренды 2019-2020
  • Предпроектная работа. Зачем нужент мудборд. И как его составлять.
  • Рассмотрим практический пример работы с референсами.

Урок 4. Прототипирование

• • Прототипы. Зачем они нужны
  • Как собирать прототип
  • Какие есть требования к прототипам
  • Как собрать макет по референсам.
  • Версионность прототипа (Насколько прототип может отличаться от дизайн-макета и какие изменения стоит вносить на этапе прототипирования)

Урок 5. Видеоурок. Контент и UI редактура

• Видеоурок

Урок 6. Композиция

• • Познакомимся с основами композиции
  • Узнаем для чего нужна композиция в веб-дизайне
  • Ознакомимся с основными принципами веб-дизайна
  • Рассмотримвизуальную иерархию веб-сайта
  • Узнаем об основных приемах расположения контента

Урок 7. Принцип близости и правило внутреннего и внешнего

• • Принцип близости.
  • Правило внутреннего и внешнего
  • Модульность
  • Практическая работа

Урок 8. Модульные сетки

• • Что такое модульная сетка и для чего она нужна.
  • Принципы построения модульной сетки
  • Практический пример

Урок 9. Практикум

Урок 10. Основы типографики

• • Что такое типографика
  • Анатомия шрифтов
  • Принципы подбора шрифтов
  • Практический пример

Урок 11. Типографика в веб-дизайне

• • Ресурсы для поиска шрифта
  • Тенденции
  • Принципы совмещения шрифтов
  • Принципы верстки текста на веб-сайтах
  • Style-guide проекта
  • Полезные советы и разбор частых ошибок начинающих дизайнеров

Урок 12. Колористика

• • Цвет. Свойства цвета
  • Цветовой круг. Типы цвета
  • Как подобрать цвет? Психология, цветовая иерархия, техники подбора, сервисы
  • Style-guide проекта
  • Полезные советы и разбор частых ошибок начинающих дизайнеров

Урок 13. Разбор частых ошибок

• Разбор частых ошибок, которые студенты совершили за время прохождения курса

Урок 14. Адаптивный дизайн

• • Что значит адаптивный дизайн? Зачем он нужен?
  • Отличие адаптивного дизайна от мобильного приложения
  • Типы адаптивных макетов
  • Ключевые рекомендации
  • Практический пример

Урок 15. Как оформить работу в портфолио

• • Путь портфолио в агентстве
  • Резюме. Как его оформить и заполнить.
  • Портфолио. Для чего оно так нужно?
  • Почему важно оформлять проекты в кейсы. Основные рекомендации по оформлению кейсов.
  • Где можно сделать самому сайт-портфолио?
  • Ключевые рекомендации

Урок 16. Итоговая работа

• Создание адаптивного лендинга. (по заданному брифу) + сопутствующие материалы (гайдлайны, дополнительные экраны).
  Макет собирается в Figma. Форматы артбордов: 1440рх, 768рх, 320рх. Работа индивидуальная. Собирается лендинг поэтапно в течении всего курса.