Программа курса:
"WEB - дизайн"

Необходимые знания:
уверенный пользователь ПК

Тема 1

Введение

  • Краткий экскурс в историю графической рекламы. Основные отличия современного веб-дизайна от всех остальных видов рекламы. Смысл создания хорошего дизайна для сайта.
  • Предварительная работа с заявкой. ЦА, конкуренты, отстраивание, бриф, цели и задачи.
  • Основные тренды современного дизайна, креативная концепция. Разнообразные способы генерации идей - мозговой штурм, мэп-майнды, скетчинг, прототипирование.
  • Практическая часть: Выясняем что именно нужно для того, чтобы начать работу дизайнеру, выбираем идеи и референсы, знакомимся с общими понятиями дизайна.
  • Домашнее задание: Выбрать тему сайта, который мы будем оформлять. Подготовить тексты и необходимую информацию по нему.

Тема 2

Начало работы с визуализацией

  • Обзорная лекция по фотошопу для дизайнеров: что важно, что не важно, учимся делать простые вещи.
  • Основной инструментарий, горячие клавиши.
  • Принципы построения модульных сеток, различные варианты.
  • Практическая часть: Рисуем прототип будущего сайта на бумаге, учимся работать с фотошопом, разбираем основные методы и приемы работы в программе.
  • Домашнее задание: Практика в фотошопе. Подготовить бумажный прототип.

Тема 3

Продолжаем работу с визуализацией

  • Примитивное прототипирование в фотошопе. Обзор программ и приложений для прототипирования.
  • Основы текстовой композиции, размещения элементов.
  • Юзер-интерфейсы и юзабилити.
  • Практическая часть: Начинаем работу в фотошопе. Делаем простой прототип по итогу предыдущего урока. Узнаем, как дизайн и удобство сайтов влияет на продвижение, конверсию и СЕО. Учимся устанавливать шрифты и выбирать шрифты для работы.
  • Домашнее задание: Закончить прототип в фотошопе.

Тема 4

Продолжаем работу с визуализацией

  • Логотипы, брендбуки и фирменный стиль.
  • Разбор примеров, полезные ресурсы и книги.
  • Скетчинг, отрисовка в фотошопе.
  • Практическая часть: Изучаем референсы фирменного стиля, узнаем, как он влияет на дизайн. Разбираем, что именно входит в фирменный стиль, рисуем скетч логотипа и отрисовываем его в фотошопе, чтобы можно было использовать в дальнейшей работе.
  • Домашнее задание: Закончить логотип, выбрать цвета и фирменный стиль.

Тема 5

Дизайн-макет

  • Принципы работы с цветами, композиция, формы.
  • Референсы, полезные ресурсы и источники вдохновения.
  • Изучаем примеры хорошего дизайна.
  • Начинаем рисовать свои макеты.
  • Практическая часть: Приступаем к отрисовке дизайна страницы. Разбираем основные элементы — что такое шапка, зачем нужны баннеры и слайдеры, работаем с референсами и источниками.
  • Домашнее задание: Закончить отрисовку первых блоков сайта.

Тема 6

Шрифты и кое-что еще

  • Основы типографики и верстки.
  • Веб-шрифты и особенности экранной типографики.
  • Принципы оформления различных блоков текста, списки рабочих шрифтов.
  • Примеры интересного оформления текста.
  • Практическая часть: Говорим о текстах и их важности для конверсии и СЕО. Учимся составлять план текстов, оформлять текстовые блоки и использовать простую инфографику для оформления и верстки. На этом этапе мы верстаем текстовую часть сайта.
  • Домашнее задание: Закончить верстку текстовой части сайта, подобрать необходимые элементы оформления.

Тема 7

Продолжаем отрисовывать макет

  • Различные примеры UI, кнопки, меню, слайдеры, баннеры.
  • Красивые эффекты при верстке.
  • Обратная связь, карты.
  • Практическая часть: Продолжаем разбирать, из чего состоит страница сайта, как элементы являются важными для конверсии и СЕО. Оформляем «тело» страницы, разбираем примеры типовых элементов. Учимся работать с UI-наборами, и различным лайфхакам и секретам, которые позволяют дизайнерам облегчить работу и сократить время на разработку.
  • Домашнее задание: Самостоятельно ознакомиться с различными UI-наборами, закончить оформление этой части.

Тема 8

Продолжаем отрисовывать макет

  • Доделываем то, что не доделано в макете.
  • Подвал, социальные сети, общий взгляд на макет.
  • Разница в отображении сайта на разных устройствах, адаптивный дизайн.
  • Практическая часть: Продолжаем оформлять различные блоки на сайте, такие как подвал, контакты, разбираем, как эффектнее их подать и смотрим референсы интересной верстки. На этом этапе мы заканчиваем отрисовку страницы, и получаем полностью готовый к верстке дизайн-макет главной страницы сайта/лендинга.
  • Домашнее задание: Завершить дизайн страницы, подготовить к верстке.

Тема 9

Эффектная презентация

  • Что такое мокапы и с чем их едят.
  • Что такое портфолио и как его заполнить.
  • Защита своего макета.
  • Совместный анализ получившихся макетов, выявление плюсов и минусов.
  • Практическая часть: Оформляем портфолио, выбираем различные примеры оформления. Учимся представлять свою работу клиенту, обсуждаем работы одноклассников.
Загрузка. Пожалуйста, подождите...

Адреса и телефоны


М "Пл.Восстания"

(ул.Восстания, 4)
тел. +7 (812) 336-40-96

М "Пр.Просвещения"

(пр.Просвещения, 21)
тел. +7 (812) 592-16-16

М "Пр.Ветеранов"

(Дачный пр., 2, к.1)
тел. +7 (812) 364-65-98

Заявка на обучение





543

© Учебный Центр «СТАТУС», 1997-2017

Лицензия Комитета по образованию г. Санкт-Петербурга на право осуществления
образовательной деятельности - 78Л01 №0001126, регистрационный номер 1102 от 07 августа 2014г.


Информация на сайте не является публичной офертой


Перепечатка материалов запрещена