#1 Урок. Базовый курс WDi
Как начать дизайнить
Привет! Это первое письмо базового курса WDI. Рады, что ты с нами :)

Поговорим о том, что такое дизайн, как создавать хорошие сайты и быстро учиться.

Что такое дизайн

Дизайн — это решение задачи пользователя, с помощью визуального оформления и проработки пользовательского сценария. Это выглядит так:

  1. У человека появляется задача: «я сонный, хочу взбодриться».

2. Человек видит решение (визуальное оформление):
3. Использует его (пользовательский сценарий):
4. Человек взбодрился (решил задачу):
Таким образом, нам нужно показать человеку этикетку и придумать, как использовать продукт. Вот что такое дизайн.

— А что такое веб-дизайн?

Веб-дизайн — это тоже самое, только в интернете.

Когда нужно продать компьютер, человек заходит на авито:

Есть визуальное оформление (как выглядит) и прописан пользовательский сценарий (как использовать, чтобы решить задачу)
Когда нужен билет на Бали, ищет его на Авиасэйлс:
Дизайн и веб-дизайн — решение задач пользователя в оффлайн и онлайн среде
В этой рассылке, мы будем заниматься графическим дизайном в вебе. А именно…

Сделаем лендинг

Лендинг — это одностраничный сайт. Он продает услуги, товары и рассылки. Страница приносит прибыль заказчику, а пользователю помогает решать задачи, с помощью продукта.

Лендинг нужен всем компаниям и его легко сделать. В рассылке мы создадим прототип, проработаем визуальную коммуникацию и соберем дизайн-макет. Готовый макет проверит тренер WDI, а ты положишь проект в портфель.

Согласен? Тогда — к делу.

С чего начать

Ключ к быстрому росту в графическом дизайне — регулярный просмотр и копирование работ.

Когда смотрим — запоминаем. Мозг загружает эстетичные примеры в память, а во время работы выгружает. Ты понимаешь, как создать нужную композицию, подобрать гармоничные цвета и выбрать фотографии.

Работа выпускницы WDI Анны Питомец
Когда копируем — набиваем руку. Тут включается механическая память. Ты интуитивно понимаешь, как делать работу хорошо. Важно рисовать самому, а не копиписатить :)
Работа выпускницы WDI
Что копировать. Понятно, что слабые работы перерисовывать не нужно, но есть ещё средненькие, они тоже не годятся. Чтобы отличать хорошие работы от плохих и средних, мы придумали «уровень нормы».

Уровень нормы

Уровень нормы — планка, которая помогает понять — нормальная работа или нет. Норма для каждого своя, а у школы высокая.

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

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

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

Что с этим делать. Каждый день изучать работы уровня нормы, не меньше 15 минут. Самые интересные копировать в графическом редакторе.

Как изучать

Все просто. Открываешь сайт, определяешь тематику и находишь все что сделано хорошо.

Вот сайт выпускника Интенсива Алексея Скиллова про клуб единоборств «Стрелка». Наша задача, оценить визуал и решение задачи.

Шрифты. Подходят они к теме сайта или нет? Почему?


Фотографии и изображения. Раскрывают ли изображения суть? Какие эмоции передают? Качественные фотографии или нет?
Цвет. Есть ли гармония в цветах? Есть ли цвета, которые притягивают внимание? Какой цвет сайта основной и почему?

Композиция. Как расположены элементы на сайте? Какие привлекают внимание больше? Почему? Где они размещены?

Геометрия и формы. Какие фигуры и линии преобладают на сайте? Где используются? Какие эмоции вызывают? Почему?

Сначала на все вопросы ответить будет сложно. Не надо пугаться, это нормально. Просто выписывай себе все хорошее, что смог найти. Когда сделаешь это упражнение десять раз, научишься видеть не просто хорошее, но и слабое, которое можно улучшить.

Как копировать


Когда нашел интересную работу, попробуй ее скопировать. Это практика.

  1. Выбери сайт из уровня нормы
  2. Изучи его
  3. Создай копию первых двух экранов/блоков или страницы целиком в графическом редакторе.
  4. Копию делай на глаз, никаких копипастов. Можно копировать фотографии, но лучше найти замену, похожую по композиции и сути.
Польза этого алгоритма в том, что тебе придется изучить все детали до одной, иначе ты не сможешь воссоздать точную копию. Это сильное упражнение обеспечит быстрый прогресс в графическом дизайне. Все новые идеи закрепятся на практике.

Что мы узнали

  1. Дизайн — это решение задачи пользователя.
  2. В дизайне есть визуальное оформление и пользовательский сценарий.
  3. Уровень нормы помогает создавать качественный графический дизайн. В него входят три критерия: визуальная коммуникация, верстка, решение задачи.
  4. Ключ к быстрому росту в графическом дизайне — регулярный просмотр хороших работ и их копирование.

Задания


Тренируй насмотренность. Заходи каждый день на один из 6 агрегаторов и разбирай работы уровня нормы, не меньше 15 минут:

https://www.behance.net/galleries/8/Interaction
http://httpster.net/
http://onepagelove.com/
http://www.siteinspire.com/
http://bestwebsite.gallery/
http://www.awwwards.com/

Набивай руку. Копируй экраны понравившихся сайтов в графическом редакторе. Мы рекомендуем делать это в Фигме. Простой интерфейс, помогает создавать макеты быстро. Ничего не нужно скачивать. Фигма работает в браузере.

У нас есть 3 урока, которые ты можешь проходить вместе с рассылкой. Они помогут быстро освоить интерфейс редактора. На практике: ты скопируешь шот с дриббл, сделаешь экраны сайта и мобильного приложения.

Мы продаем уроки за 390 рублей, но для читателей рассылки делаем скидку. Твоя цена — 190. Тебе открыть доступ?

На этом все.
До скорых встреч!

WDI