Макет сайта: для чего он нужен и как его создать

Что такое макет и для чего его разрабатывают

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

Такой «чертеж» не только показывает, каким получится сайт. Макет дает представление о том, как с ресурсом будут взаимодействовать пользователи. А еще предварительный план сочетает все пожелания заказчика и позволяет оценить финальную версию проекта. 

Работа над макетом подобна строительству дома. Без чертежа с точными замерами вы не будете знать, где нужно расположить окна или установить дверь, да еще и проемы сделаете такими, что в них не войдет мебель. 

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

О том, как должен выглядеть макет, единого мнения не существует. Кто-то из дизайнеров считает, что это готовый прототип. Для других макет — схема из квадратов и кружков. Учитывайте этот аспект, когда читаете статьи или проходите курсы по данной теме. 

Этапы разработки макета

Чтобы макет получился качественным, нужно все делать постепенно и придерживаться определенных шагов. Расскажем о каждом этапе детальнее:

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




2. Вайрфрейм. Так называют схематичный план сайта. Он нужен для того, чтобы понять логику распределения элементов по разным экранам. Когда дизайнер работает над вайрфреймом, он видит, в каком месте будет меню, лого или кнопка. 

   
   

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

   
   

   После того, как дизайнер продумал логику расположения элементов, можно переходить к построению сетки. Так называют прорисовку вертикальных и горизонтальных линий, которые разделят всю страницу на прямоугольные блоки. Сетка нужна для того, чтобы указать, в каком месте будут заголовки, тексты или изображения. Здесь же дизайнер начинает постепенно дорабатывать детали. Благодаря этому вайрфрейм становится максимально информативным и понятным.

   
   

   Таким образом план экранов сайта представляет собой основу, на которую опираются все последующие этапы работы.




3. Макет. Его также называют мокапом. Это оформленный UI-дизайн. Макет показывает, как будет выглядеть сайт на экранах разных устройств: компьютеров, смартфонов и прочих гаджетов. Специалист должен подготовить такой мокап, в котором легко сможет разобраться любой пользователь — даже если он никак не связан с дизайном.

   
   

   Для отрисовки макета нужна сетка. Она поможет дизайнеру соблюдать системность блоков и элементов. Также без сетки не обойтись и разработчику: из нее он берет все значения, которые необходимы для верстки.

   
   

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

   
   

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




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

   
   

   В прототипах указывают кликабельность кнопок и меню.

Как правильно создать макет

Если вы хотите, чтобы макет сайта получился понятным и функциональным, предлагаем придерживаться следующих правил: 

1. Подготовьте техническое задание. ТЗ — документ, в котором прописаны все важные аспекты работ. Прежде всего там указана цель. К примеру, заказчику нужно, чтобы через сайт на его мастер-классы регистрировалось как можно больше пользователей. Также в техзадании прописывают результаты исследований целевой аудитории, примерную структуру страниц и их количество.

   
   

   А еще в хорошем ТЗ отражены пользовательские сценарии. Чтобы их составить, для начала нужно выяснить, что привлекает и удерживает людей именно из вашей целевой аудитории. Сценарий также должен объяснять, как пользователи через ваш сайт будут решать свои задачи, что им может в этом помочь или помешать.




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

   
   

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

   
   

   Следующий обязательный шаг — прописать в макете параметры сетки и базовую единицу. Это также облегчит задачу верстальщику. Например, чтобы наглядно объяснить систему отступов, некоторые дизайнеры используют набор прямоугольников разного размера: 8 рх, 16 рх, 24 рх, 32 рх и так далее. Также стоит подробно рассказать о шрифтах, которые вы используете: об их стилях, контексте применения, кегле и межстрочном интервале.

   
   

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




3. Определитесь с цветовой гаммой и шрифтами. Последний шаг — выбор палитры. Обычно дизайнеры используют несколько базовых цветов для фона и столько же для шрифтов. При выборе лучше ориентироваться на фирменный стиль компании или на гайдлайн — так называют документ, в котором заказчик прописывает все параметры оформления: стандарты, правила, примеры и рекомендации. А еще можно использовать бесплатные онлайн-сервисы: Adobe Color, ColrD или ColorHunter.

В макете дизайнеры часто применяют сразу несколько шрифтов. Однако многие из них нельзя использовать без разрешения. Так что если вы не хотите, чтобы потом у сайта были проблемы из-за нарушения авторских прав, лучше купить лицензию или выбрать что-то из бесплатных вариантов. Шрифты для свободного использования можно найти на Google Fonts, Font Space и 1001 free fonts.

Онлайн-сервисы или десктопные программы: где лучше создавать макеты

Для подготовки макета дизайнеры используют специальные программы или сервисы. Сегодня многие популярные инструменты ввели ограничения для пользователей из нашей страны. И все равно самыми востребованными решениями на рынке дизайна остаются Figma, Adobe Photoshop и Illustrator, а также Sketch. Разберем плюсы и минусы каждого из них. 

Figma

Этот удобный онлайн-сервис специалисты используют, чтобы создавать прототипы или разрабатывать интерфейсы. Здесь можно рисовать вайрфреймы, а также заниматься версткой макетов. Figma приостановила работу корпоративных аккаунтов в России с марта 2022 года. Однако дизайнеры все еще могут использовать ее в личных целях. 

Плюсы

• Сервис предлагает как облачную, так и десктопную версии. Так что если хотите опробовать функционал Figma, вам не нужно ее скачивать.

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

Минусы

• в сервисе совсем немного инструментов для обработки фото; 

• у Figma нет мобильной версии. 

Sketch

Графический редактор для создания дизайна в векторе. Программа разработана под устройства на macOS. Sketch не предлагает инструменты для анимации, редактирования фото или создания 3D-графики. Однако для подготовки дизайнов интерфейсов — это отличное решение.

Плюсы

• Редактор обладает понятной панелью инструментов и предлагает большое разнообразие плагинов.

• Для его установки понадобится совсем немного места: всего 38MB. Для сравнения: популярный Photoshop весит 2GB.

• Сервис предлагает пресеты для iOS-устройств и адаптивного веб-дизайна.

• В Sketch есть инструмент Layout Grid. Он нужен для создания дизайна интерфейса pixel perfect. Инструмент позволяет легко настраивать ширину колонок.

Минусы

• Редактор не адаптирован ни под какие другие системы, кроме macOS.

Adobe Photoshop и Illustrator

Adobe Creative Cloud — межплатформенные ПО для создания растровой и векторной графики. В них можно редактировать фото и видео, а также заниматься веб-разработкой. 

Плюсы

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

• Если оформите подписку на Creative Cloud, вы получите доступ к разным пакетам Adobe. Так пользователь может выбрать именно тот редактор, который необходим для его работы.

Минусы

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

Основные ошибки при создании макета сайта

В любой работе могут возникнуть недочеты. Разберем самые популярные ошибки при составлении макета веб-ресурса. Чаще всего дизайнеры:

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

  
  

  Важно предложить такую схему, которая будет понятна без дополнительных объяснений. Элементы мокапа не должны вызывать у членов команды недоумение и вопросы по поводу предназначения того или иного блока.




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




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




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

Заключение

Создание макета — важный этап подготовки всего сайта. Хороший план поможет не только воплотить качественный ресурс, но и сделать работу над проектом понятной и комфортной для всей команды. Грамотно составленный макет — это залог успешного запуска сайта. Такой ресурс понравится посетителям и быстро привлечет целевую аудиторию. А владелец получит хорошую прибыль от своего проекта.