Курс «Основы веб-дизайна» от GeekBrains

Описание

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

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

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

Урок 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рх. Работа индивидуальная. Собирается лендинг поэтапно в течении всего курса.