Основы веб-дизайна: обучающий мини-курс

О

Представляю вам мини-курс по основам веб-дизайна. Курс записывался на youtube в течение двух лет. Разумеется, это не исчерпывающий курс по веб-дизайну, и он не заменит полноценного обучения.

Тем не менее, после этого курса вы сможете стартовать в профессии (постоянно углубляя свои знания и навыки). Здесь разобраны самые необходимые для старта темы (на чем строится веб-дизайн, как общаться с заказчиком, и как именно работать в фотошопе).

Курс построен следующим образом: сначала дается вводная теоретическая информация (модульные сетки, бриф, прототипирование, коммуникация с заказчиком), затем сразу приступаем к практике (создание главной и внутренней страниц с адаптивными версиями). Вся информация привязана к конкретному проекту, т.е. это не абстрактные рассуждения и не дизайн абстрактной страницы в вакууме.

Вы можете посмотреть, что получилось по итогам курса на behance странице проекта

1. Основы веб дизайна #1 — модульные сетки (Grid Systems)

Знакомимся с понятием модуля и модульной сетки. Для чего нужна сетка, и как она работает (на конкретных примерах)? Какие модульные сетки бывают? Где взять готовые, и как создать свою? В этом модуле мы разберем эти и многие другие вопросы.

Сайты с сетками, которые упоминались в уроке:

Сайты для создания модульных сеток:

2. Основы веб дизайна #2 — Постановка задачи, работа с заказчиком, бриф, тз

Второй модуль курса. Здесь разбираемся с ключевыми для любого дизайнера темами: пониманием задач бизнеса, коммуникацией с заказчиком, составлением брифа и технического задания (тз). Во втором видео составляем бриф для проекта, над которым мы будем работать на протяжении этого курса.

Ссылки на документы, упомянутые в видео:

3. Основы веб дизайна #3 — Прототипирование (Prototype — Photoshop, Muse, Axure, Online services)

Третий модуль курса — введение в тему прототипирования. Рассмотрим основные понятия, сервисы и программы для создания прототипов. Поговорим в каких случаях прототипы незаменимы, а в каких могут оказаться откровенно вредны.

Сервисы:

Упомянутые программы:

  • Photoshop
  • Axure
  • Muse

4. Основы веб дизайна #4 — Создание главной страницы

В четвертом модуле от теории переходим к практике — создаем главную страницу. Это самый объёмный модуль курса. Помимо демонстрации рабочего процесса в фотошопе мы поговорим о необходимых инструментах и рассмотрим базовые принципы дизайна.

5. Основы веб дизайна #5 — Страница категории

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

6. Основы веб дизайна #6 — Мобильная (адаптивная) версия

Завершающий, шестой модуль курса познакомит вас с процессом создания адаптивной версии сайта. Здесь вы узнаете только о самых базовых вещах, т.к. тема адаптивного дизайна (и тем более дизайна мобильных приложений) заслуживает отдельного курса (и даже не одного).

На этом всё. Буду рад, если вы напишете в комментариях свои впечатления от курса.

Добавить комментарий