
Создание макета сайта: важные моменты
Для чего может понадобиться сайт? Для создания имиджа компании, продвижения бренда (включая личные), продажи товаров и услуг, общения и обмена информацией.
В рамках выбранной цели ресурс может решать несколько видов задач:
-
привлечение целевой аудитории;
-
сбор и обработка заявок от клиентов;
-
повышение узнаваемости компании;
-
предоставление востребованной пользователями информации в разных форматах, в том числе с возможностью скачивания.
Макет сайта — его статическая графическая схема. Он дает возможность наглядно презентовать дизайнерские решения и найти вероятные слабые места.
Вот пять основных факторов, которые закладывают основы макета:
-
Типографика. Стандартная рекомендация — использовать два вида шрифтов: один для графического выделения значимых частей текста, один — для основного контента.
-
Палитра цветов. Часто она диктуется фирменным стилем или выбранными заказчиком образцами. В рамках заданных тонов дизайнер может предлагать свои решения, чтобы полноценно выразить разные концепции. Подробнее о значениях цветов речь пойдет дальше.
-
Юзабилити. Интерфейс ресурса и навигация по нему должны быть понятными и удобными пользователю. При этом — эффективно решать задачи ресурса.
-
Интерактив. Все элементы, которые на онлайн-страницах должно реагировать на действия пользователя — иконки, ссылки, указатели курсора — должны быть прорисованы для всех состояний.
-
Контент. Люди предпочитают видеть и слушать, а если читать — то отлично структурированный текст. Поэтому макет сайта может предусматривать фото, 3D-демонстрации, видеообзоры и влоги, анимацию, подкасты.


Значимость каждого из перечисленных пунктов определяется сферой, к которой относится сайт, и его задачами.
С чего начинается разработка
Документ о том, как создать макет сайта, — техническое задание. Вот что должно быть в нем указано:
- Бизнес клиента: география, сфера деятельности, целевая аудитория.
- Задача, которую должен решать ресурс.
- Тип и структура сайта.
- Пожелания по дизайну: с примерами за и против и обоснованием, что нравится, а чего быть не должно.
- Какие сервисы будут реализованы. Возможные сценарии использования ресурса.
- Система управления: разные CMS имеют свои требования к структуре информационных блоков.
- Виды контента, который будет размещаться.
- Прототипы основных разделов.
- Нужна ли адаптивная версия. Она, как правило, вертикально ориентирована, а это предполагает другие размеры макета сайта и другое расположение структурных блоков.
- В каких браузерах должен поддерживаться сайт (кроссбраузерность).
Каким должен быть PSD-макет сайта
Adobe Photoshop — многофункциональный графический редактор, в котором предпочитают работать многие веб-дизайнеры.Ключевые критерии для качественного PSD-макета сайта:
- Для каждого элемента дизайна предусмотрен отдельный слой. Так их можно редактировать по отдельности.
- Изображение сохраняется в формате .psd или .tiff.
- Соблюдение вложенности, то есть группировка слоев согласно их принадлежности к определенному элементу структуры сайта (меню, футер, сайдбар и др.).
- Обоснованное использование фоновых изображений и нестандартного форматирования. Когда их много, увеличивается скорость загрузки страницы. В то же время фон и игра с форматами — способы создания оригинального дизайна.
- Использование направляющих.
- Приоритет стандартным шрифтам. Это делает сайт удобочитаемым. С другой стороны, типографика сейчас активно используется как художественный прием. Если шрифт редкий или даже авторский, файл с ним прилагается к макету.
- Оптимальные размеры — ширина PSD-шаблона для сайта не может быть меньше 1000 пикселей.
Возможности в цвете
Цвета ассоциируются у людей с событиями и эмоциями. Влияют на настроение, подталкивают к действию, создают впечатление. Это эффективный инструмент воздействия, и применять его в дизайн-макете сайта нужно с учетом психологии цветовосприятия и особенностей ресурса.Существуют семь цветовых схем, основанных на цветовом кольце Ньютона.

-
Монохроматическая. Берется один основной цвет, остальные — его оттенки, полученные с помощью изменения насыщенности и светосилы.
-
Комплементарная. Выбираются два контрастных тона и дополняются несколькими их оттенками.
-
Сплит. Отличается от предыдущей схемы тем, что вместо одного контрастного цвета берутся два подобных из соседних сегментов круга.
-
Аналоговая. В данной схеме 3 цвета из соседних сегментов: один основной и два дополнительных.
-
Триада. Цветовая палитра составляется из трех равноудаленных цветов.
-
Прямоугольник. В этой схеме 4 тона — две контрастных пары.
-
Квадрат. Используются 4 равноудаленных цвета.
Ориентироваться относительно влияния цветов и связанных с ними ассоциаций поможет таблица.
Это все инструменты. Их применение в дизайне макета для сайта зависит от трех базовых аспектов:
- Тематика. Для разных сфер деятельности традиционно используются цвета соответствующего значения. Аптеки предпочитают бело-зеленую цветовую гамму, детские сайты редко обходятся без солнечно-желтого и оранжевого, а сайты о путешествиях — без оттенков голубого.
- Целевые посетители. Сайты, ориентированные на женщин, чтобы быть привлекательными, разрабатываются в ярких или пастельных тонах. Сайты для мужской аудитории обычно лаконичны, используют нейтральную или монохромную палитру.
- Фирменный стиль. Если у компании уже существуют логотип и фирменные цвета, они должны присутствовать в дизайне сайта. Возможно, дополненные своими оттенками или другими цветами.
- Легко заметить, что эти три характеристики уже взаимосвязаны. Что облегчает выбор оптимальной цветовой схемы.
Красота или удобство
Каждый заказчик хочет видеть свой сайт современным. В числе трендов веб-дизайна в 2020 году:
- неоновые цвета;
- градиенты;
- сложная типографика;
- минимализм и много свободного пространства;
- упрощение навигации;
- нестандартная верстка;
- 3D-графика;
- скетчи;
- параллакс, gif и синемаграфы (изображения с частичной анимацией);
- сочетание фото, видео и рисованных изображений;
- наслоение изображений.
Поэтому самые впечатляющие и сложные сайты создаются с прицелом на участие в профессиональных номинациях. А еще — для различных компаний из творческих сфер деятельности. Например, анимационных студий, как NKI Studio: сайт насыщен фотографиями и мультимедиа-эффектами.


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