Веб-дизайн: от «шапки» до «подвала»

Автор: Дарья Попова, Лада Трифонова Просмотров: 260

В СПбГУ прошёл мастер-класс веб-дизайнера Алисы Погарской. Как удержать аудиторию на сайте, что такое Moodboard и почему это помогает поймать вдохновение?

От брифа к SEO – как создаются проекты?

– Сначала к вам приходит заказчик и говорит: «Давай мне сайт». Тут обязательно нужно уточнить тематику и пожелания к дизайну. Если вы не узнаете всех подробностей, то будете на ощупь создавать проект, который потом, скорее всего, не примут, – рассказала Алиса Погарская.

Следующая стадия – анализ полученных данных, далее – формирование концепта, идеи. Создаётся прототип будущего проекта, всё закрепляется в договоре с клиентом, чтобы избежать дальнейшего недопонимания. И наконец – дизайн макетов, в первую очередь главной страницы, «шапки» и «подвала» сайта. «Так называемый футер, подвал – это блок в нижней части страницы, куда размещается нужная, но не первостепенная информация», – объясняет спикер.

Следом идёт верстка макетов с помощью HTML (даёт «скелет» сайту) и CSS (отвечает за визуальную часть).

– Всё ставится на движок типа WordPress или всеми любимого Битрикс, – поясняет Алиса. – А дальше идёт программирование, копирайтеры наполняют сайт контентом, делается проверка на баги, потом всё это публикуется, подтверждается и начинается развитие и продвижение сайта – SEO.

Кто наша целевая аудитория?

– Нужно знать аудиторию в лицо, её цели и задачи. Создайте портрет среднестатистического посетителя вашего сайта. Опишите этого человека. Сколько ему лет, какое у него семейное положение? Где он живёт, чем занимается? Есть ли у него хобби? Какое? Ориентируйтесь на получившийся образ.

Важно понять, с каким состоянием пользователь приходит на сайт, с каким он должен уйти и что для этого нужно сделать. Например, если вы – дизайнер, ищущий работу, а человек заходит на ваш сайт, чтобы найти себе дизайнера, он первым делом должен увидеть ваше резюме. Его нужно разместить так, чтобы пользователь мгновенно считал всю необходимую информацию.

Метод 10+10 и Moodboard: как поймать музу и выпросить гениальную идею?

– Все знают эту схему – на пересечении двух чужих идей рождается ваша собственная. Есть такой сервис Behance.net – на нём много хороших макетов работ, некоторые дизайнеры туда заходят, выбирают понравившиеся и берут за основу своего проекта. Однако это не всегда результативно. Свои идеи ценнее, – предупреждает Алиса.

Пять этапов созревания идеи:

1. погружение в предмет исследования;
2. переваривание (изучение информации под разными углами);

3. вынашивание;

4. инсайт («Всё лучшее часто создается в команде»);

5. оценка адекватности идеи.

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

– Концепция Moodboard для многих – сложный этап, но часто эффективный. На листе вы располагаете картинки, фотографии, рисунки и графики – ваши ассоциации с проектом. В итоге у вас получится картина, вызывающая эмоции. Иногда, чтобы возникла хорошая идея, достаточно визуализировать мысли.

Четыре кита дизайна

  1. погружение в предмет исследования;
  2. переваривание (изучение информации под разными углами);
  3. вынашивание;
  4. инсайт («Всё лучшее часто создается в команде»);
  5. оценка адекватности идеи.

На шрифт и цвет

Важно правильно подобрать шрифтовую пару. «Беспроигрышный вариант», по словам Алисы Погарской, – использовать шрифт с засечками для заголовка и без засечек для основного текста. Или наоборот. Подобрать идеальный размер и ширину текстового блока можно на сайте pearsonified.com

У каждого веб-дизайнера – свой любимый шрифт. У Алисы это OpenSans, Proxima Nova и Helvetica. «Про него даже фильм снят», – с гордостью рассказывает она.

– Чтобы подобрать цветовую гамму, можно использовать Adobe Color CC. Только, мой вам совет, избегайте сочетания зелёного и красного, иначе люди, страдающие дальтонизмом, просто не увидят, на чём вы хотите сделать акцент. Ещё важно правильно композиционно расположить цвета. Их должно быть всего четыре: фоновый, основной, дополнительный и акцентный. Акценты должны сразу же зацепить глаза, поэтому нельзя с ними перебарщивать.

Всем, кому интересен веб-дизайн, Алиса посоветовала прочитать «Дизайн. Книга для Недизайнеров» Робина Уильямса. Проконсультироваться можно и у самой Алисы: она не против личных сообщений во «ВКонтакте».

Ещё больше о веб-дизайне в презентации Алисы, прикрепляем к посту.

Текст: Дарья Попова
Фото: Лада Трифонова