Макет сайта

Одним кликом открывая и закрывая десятки сайтов, пользователь за 2 секунды решает, хочет ли читать очередную страницу. Что он успевает оценить? Цветовую гамму, качество изображения, легкость поиска и чтения информации — те моменты, за которые отвечает дизайн.

Создание макета сайта: важные моменты

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

В рамках выбранной цели ресурс может решать несколько видов задач:

• привлечение целевой аудитории;

• сбор и обработка заявок от клиентов;

• повышение узнаваемости компании;

• предоставление востребованной пользователями информации в разных форматах, в том числе с возможностью скачивания.

Макет сайта — его статическая графическая схема. Он дает возможность наглядно презентовать дизайнерские решения и найти вероятные слабые места. 

Вот пять основных факторов, которые закладывают основы макета:

1. Типографика. Стандартная рекомендация — использовать два вида шрифтов: один для графического выделения значимых частей текста, один — для основного контента.

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

3. Юзабилити. Интерфейс ресурса и навигация по нему должны быть понятными и удобными пользователю. При этом — эффективно решать задачи ресурса.

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

5. Контент. Люди предпочитают видеть и слушать, а если читать — то отлично структурированный текст. Поэтому макет сайта может предусматривать фото, 3D-демонстрации, видеообзоры и влоги, анимацию, подкасты.  

Значимость каждого из перечисленных пунктов определяется сферой, к которой относится сайт, и его задачами.

С чего начинается разработка

Документ о том, как создать макет сайта, — техническое задание. Вот что должно быть в нем указано:

1. Бизнес клиента: география, сфера деятельности, целевая аудитория.
2. Задача, которую должен решать ресурс.
3. Тип и структура сайта.
4. Пожелания по дизайну: с примерами за и против и обоснованием, что нравится, а чего быть не должно.
5. Какие сервисы будут реализованы. Возможные сценарии использования ресурса.
6. Система управления: разные CMS имеют свои требования к структуре информационных блоков.
7. Виды контента, который будет размещаться.
8. Прототипы основных разделов.
9. Нужна ли адаптивная версия. Она, как правило, вертикально ориентирована, а это предполагает другие размеры макета сайта и другое расположение структурных блоков.
10. В каких браузерах должен поддерживаться сайт (кроссбраузерность).

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

Каким должен быть PSD-макет сайта

Adobe Photoshop — многофункциональный графический редактор, в котором предпочитают работать многие веб-дизайнеры.
Ключевые критерии для качественного PSD-макета сайта:

1. Для каждого элемента дизайна предусмотрен отдельный слой. Так их можно редактировать по отдельности.
2. Изображение сохраняется в формате .psd или .tiff.
3. Соблюдение вложенности, то есть группировка слоев согласно их принадлежности к определенному элементу структуры сайта (меню, футер, сайдбар и др.).
4. Обоснованное использование фоновых изображений и нестандартного форматирования. Когда их много, увеличивается скорость загрузки страницы. В то же время фон и игра с форматами — способы создания оригинального дизайна.
5. Использование направляющих.
6. Приоритет стандартным шрифтам. Это делает сайт удобочитаемым. С другой стороны, типографика сейчас активно используется как художественный прием. Если шрифт редкий или даже авторский, файл с ним прилагается к макету.
7. Оптимальные размеры — ширина PSD-шаблона для сайта не может быть меньше 1000 пикселей.

Соблюдение всех этих требований делает макет сайта готовым для продуктивной работы верстальщика и программиста.

Возможности в цвете

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

1. Монохроматическая. Берется один основной цвет, остальные — его оттенки, полученные с помощью изменения насыщенности и светосилы. 

2. Комплементарная. Выбираются два контрастных тона и дополняются несколькими их оттенками.  

3. Сплит. Отличается от предыдущей схемы тем, что вместо одного контрастного цвета берутся два подобных из соседних сегментов круга.

4. Аналоговая. В данной схеме 3 цвета из соседних сегментов: один основной и два дополнительных.

5. Триада. Цветовая палитра составляется из трех равноудаленных цветов. 

6.  Прямоугольник. В этой схеме 4 тона — две контрастных пары.

7. Квадрат. Используются 4 равноудаленных цвета. 

Ориентироваться относительно влияния цветов и связанных с ними ассоциаций поможет таблица. 

Это все инструменты. Их применение в дизайне макета для сайта зависит от трех базовых аспектов:

1. Тематика. Для разных сфер деятельности традиционно используются цвета соответствующего значения. Аптеки предпочитают бело-зеленую цветовую гамму, детские сайты редко обходятся без солнечно-желтого и оранжевого, а сайты о путешествиях — без оттенков голубого. 
2. Целевые посетители. Сайты, ориентированные на женщин, чтобы быть привлекательными, разрабатываются в ярких или пастельных тонах. Сайты для мужской аудитории обычно лаконичны, используют нейтральную или монохромную палитру. 
3. Фирменный стиль. Если у компании уже существуют логотип и фирменные цвета, они должны присутствовать в дизайне сайта. Возможно, дополненные своими оттенками или другими цветами. 
4. Легко заметить, что эти три характеристики уже взаимосвязаны. Что облегчает выбор оптимальной цветовой схемы.

Красота или удобство 

Каждый заказчик хочет видеть свой сайт современным. В числе трендов веб-дизайна в 2020 году:

• неоновые цвета;
•  градиенты;
• сложная типографика;
• минимализм и много свободного пространства;
• упрощение навигации;
• нестандартная верстка;
• 3D-графика;
• скетчи;
• параллакс, gif и синемаграфы (изображения с частичной анимацией);
• сочетание фото, видео и рисованных изображений;
• наслоение изображений.

Очевидно, что не все эти тренды подходят для сайтов любой тематики. Некоторые дизайнерские фишки плохо совместимы с удобочитаемостью, и почти все много «весят», а значит, замедляют загрузку страниц. 
Поэтому самые впечатляющие и сложные сайты создаются с прицелом на участие в профессиональных номинациях. А еще — для различных компаний из творческих сфер деятельности. Например, анимационных студий, как NKI Studio: сайт насыщен фотографиями и мультимедиа-эффектами. 


Разработка сайтов в свежем трендовом дизайне, который не повредит функциональности и удобству использования — настоящее искусство. Поэтому важно внимательно выбирать студию, которой вы сможете доверить такую задачу.