Мы не удивляемся, когда архитектор рисует чертеж, прежде чем построить дом. Та же логика актуальна и для создания сайта: любой веб-ресурс начинается с макета. Расскажем, что представляет из себя такой предварительный план и как дизайнеры его разрабатывают. Поговорим о плюсах и минусах разных способов создания макета и разберем типовые ошибки.
Что такое макет и для чего его разрабатывают
Когда дизайнеру нужно создать сайт, первое, что он делает — ищет референсы. Так называют примеры работ: иллюстрации, фото, другие веб-ресурсы и прочие источники. Во-первых, это помогает проанализировать актуальные тренды, во-вторых, составить для себя представление о структуре будущего проекта. После в специальной программе дизайнер визуализирует задумки и создает предварительный набросок сайта. Это и есть макет.
Такой «чертеж» не только показывает, каким получится сайт. Макет дает представление о том, как с ресурсом будут взаимодействовать пользователи. А еще предварительный план сочетает все пожелания заказчика и позволяет оценить финальную версию проекта.
Работа над макетом подобна строительству дома. Без чертежа с точными замерами вы не будете знать, где нужно расположить окна или установить дверь, да еще и проемы сделаете такими, что в них не войдет мебель.
Так же и без макета. Если не знать заранее структуру сайта, создать качественный продукт будет очень трудно. Поэтому когда дизайнер продумал всю логику расположения элементов и визуализировал каждую страницу, вы легко и быстро запустите ресурс. А если понадобится — сможете в любой момент доработать функционал. Стоит лишь проанализировать карту кликов и изучить результаты опросов пользователей.
О том, как должен выглядеть макет, единого мнения не существует. Кто-то из дизайнеров считает, что это готовый прототип. Для других макет — схема из квадратов и кружков. Учитывайте этот аспект, когда читаете статьи или проходите курсы по данной теме.
Этапы разработки макета
Чтобы макет получился качественным, нужно все делать постепенно и придерживаться определенных шагов. Расскажем о каждом этапе детальнее:
-
Композиционный набросок. На первой стадии дизайнеры схематично рисуют расположение будущих элементов сайта. Для этого используют линии и геометрические фигуры: квадраты и прямоугольники. Набросок позволяет сформулировать общую идею, в которой дизайнер учитывает все пожелания заказчика.
-
Вайрфрейм. Так называют схематичный план сайта. Он нужен для того, чтобы понять логику распределения элементов по разным экранам. Когда дизайнер работает над вайрфреймом, он видит, в каком месте будет меню, лого или кнопка.
Этот пункт еще шуточно называют этапом «пяти секунд и пары баксов». Если дизайнер пропустит разработку вайрфрейма, он может перейти на пока еще ненужные нюансы: скругления, тени и подобные детали объектов. Однако прорисовывать визуал, когда нет четкой структуры каждого экрана — непродуктивная идея.
После того, как дизайнер продумал логику расположения элементов, можно переходить к построению сетки. Так называют прорисовку вертикальных и горизонтальных линий, которые разделят всю страницу на прямоугольные блоки. Сетка нужна для того, чтобы указать, в каком месте будут заголовки, тексты или изображения. Здесь же дизайнер начинает постепенно дорабатывать детали. Благодаря этому вайрфрейм становится максимально информативным и понятным.
Таким образом план экранов сайта представляет собой основу, на которую опираются все последующие этапы работы.
-
Макет. Его также называют мокапом. Это оформленный UI-дизайн. Макет показывает, как будет выглядеть сайт на экранах разных устройств: компьютеров, смартфонов и прочих гаджетов. Специалист должен подготовить такой мокап, в котором легко сможет разобраться любой пользователь — даже если он никак не связан с дизайном.
Для отрисовки макета нужна сетка. Она поможет дизайнеру соблюдать системность блоков и элементов. Также без сетки не обойтись и разработчику: из нее он берет все значения, которые необходимы для верстки.
Важно, чтобы дизайнер продумал четкую систему отступов и ввел базовые единицы для разных параметров. В противном случае на этапе верстки разработчик будет постоянно уточнять детали. А опытные фронтендеры могут вообще не разбираться и сделать по-своему. Тогда дизайнеру будет очень сложно что-то исправить.
Макет делает работу понятной и предсказуемой для всех участников реализации проекта. В хорошем мокапе есть и типографика, и палитра изображений, и четкая логика экранов.
-
Прототип. Его считают финальной стадией разработки макета. На этом этапе дизайнер предоставляет детально проработанный план с четкой структурой страниц и логикой взаимодействия пользователя с элементами сайта.
В прототипах указывают кликабельность кнопок и меню.
Подпишитесь на нас в Telegram
Получайте свежие статьи об интернет-маркетинге и актуальные новости о наших готовых решениях
Как правильно создать макет
Если вы хотите, чтобы макет сайта получился понятным и функциональным, предлагаем придерживаться следующих правил:
-
Подготовьте техническое задание. ТЗ — документ, в котором прописаны все важные аспекты работ. Прежде всего там указана цель. К примеру, заказчику нужно, чтобы через сайт на его мастер-классы регистрировалось как можно больше пользователей. Также в техзадании прописывают результаты исследований целевой аудитории, примерную структуру страниц и их количество.
А еще в хорошем ТЗ отражены пользовательские сценарии. Чтобы их составить, для начала нужно выяснить, что привлекает и удерживает людей именно из вашей целевой аудитории. Сценарий также должен объяснять, как пользователи через ваш сайт будут решать свои задачи, что им может в этом помочь или помешать.
-
Создайте макет точно по вайрфрейму. Прежде всего, определите, где будут располагаться хедер и футер — верхняя и нижняя часть сайта. Выберите места для основных блоков контента и создайте некоторые базовые элементы, например кнопки.
После этого можно приступить к отрисовке интерактивных элементов. В том числе показать, как они будут выглядеть в разных состояниях. Например, если вы задумали, что при наведении на слово шрифт будет увеличиваться — это следует продемонстрировать. И еще обязательно сделайте описание макета. Это необходимо для разработчика: он должен знать, на какие характеристики ему опираться во время верстки.
Следующий обязательный шаг — прописать в макете параметры сетки и базовую единицу. Это также облегчит задачу верстальщику. Например, чтобы наглядно объяснить систему отступов, некоторые дизайнеры используют набор прямоугольников разного размера: 8 рх, 16 рх, 24 рх, 32 рх и так далее. Также стоит подробно рассказать о шрифтах, которые вы используете: об их стилях, контексте применения, кегле и межстрочном интервале.
Не забудьте описать в макете поведение элементов. Например, если у вас есть раскрывающееся меню, укажите, как оно выглядит в свернутом и открытом состоянии. То же касается поведения кнопок, инпутов и используемых цветов.
-
Определитесь с цветовой гаммой и шрифтами. Последний шаг — выбор палитры. Обычно дизайнеры используют несколько базовых цветов для фона и столько же для шрифтов. При выборе лучше ориентироваться на фирменный стиль компании или на гайдлайн — так называют документ, в котором заказчик прописывает все параметры оформления: стандарты, правила, примеры и рекомендации. А еще можно использовать бесплатные онлайн-сервисы: Adobe Color, ColrD или ColorHunter.
В макете дизайнеры часто применяют сразу несколько шрифтов. Однако многие из них нельзя использовать без разрешения. Так что если вы не хотите, чтобы потом у сайта были проблемы из-за нарушения авторских прав, лучше купить лицензию или выбрать что-то из бесплатных вариантов. Шрифты для свободного использования можно найти на Google Fonts, Font Space и 1001 free fonts.
Онлайн-сервисы или десктопные программы: где лучше создавать макеты
Для подготовки макета дизайнеры используют специальные программы или сервисы. Сегодня многие популярные инструменты ввели ограничения для пользователей из нашей страны. И все равно самыми востребованными решениями на рынке дизайна остаются Figma, Adobe Photoshop и Illustrator, а также Sketch. Разберем плюсы и минусы каждого из них.
Figma
Этот удобный онлайн-сервис специалисты используют, чтобы создавать прототипы или разрабатывать интерфейсы. Здесь можно рисовать вайрфреймы, а также заниматься версткой макетов. Figma приостановила работу корпоративных аккаунтов в России с марта 2022 года. Однако дизайнеры все еще могут использовать ее в личных целях.
Плюсы
-
Сервис предлагает как облачную, так и десктопную версии. Так что если хотите опробовать функционал Figma, вам не нужно ее скачивать.
-
Дизайнеры, которые планируют использовать сервис в личных целях, могут работать в нем бесплатно.
Минусы
Sketch
Графический редактор для создания дизайна в векторе. Программа разработана под устройства на macOS. Sketch не предлагает инструменты для анимации, редактирования фото или создания 3D-графики. Однако для подготовки дизайнов интерфейсов — это отличное решение.
Плюсы
-
Редактор обладает понятной панелью инструментов и предлагает большое разнообразие плагинов.
-
Для его установки понадобится совсем немного места: всего 38MB. Для сравнения: популярный Photoshop весит 2GB.
-
Сервис предлагает пресеты для iOS-устройств и адаптивного веб-дизайна.
-
В Sketch есть инструмент Layout Grid. Он нужен для создания дизайна интерфейса pixel perfect. Инструмент позволяет легко настраивать ширину колонок.
Минусы
Adobe Photoshop и Illustrator
Adobe Creative Cloud — межплатформенные ПО для создания растровой и векторной графики. В них можно редактировать фото и видео, а также заниматься веб-разработкой.
Плюсы
-
Представляют собой полноценные графические редакторы. Чтобы использовать их инструменты, вам не нужно подключать никакие дополнительные сервисы.
-
Если оформите подписку на Creative Cloud, вы получите доступ к разным пакетам Adobe. Так пользователь может выбрать именно тот редактор, который необходим для его работы.
Минусы
Основные ошибки при создании макета сайта
В любой работе могут возникнуть недочеты. Разберем самые популярные ошибки при составлении макета веб-ресурса. Чаще всего дизайнеры:
-
Составляют примитивные схемы
Порой мокапы получаются слишком простыми: буквально круг, прямоугольник и еще несколько фигур. Это случается из-за того, что дизайнер не разобрался в задаче и попросту не понял, для кого и с какой целью разрабатывает макет.
Важно предложить такую схему, которая будет понятна без дополнительных объяснений. Элементы мокапа не должны вызывать у членов команды недоумение и вопросы по поводу предназначения того или иного блока.
-
Увлекаются деталями
Другая крайность — перегруженность элементами. Бывает, что дизайнер увлекается и вставляет в макет кучу геометрических фигур, цветов или шрифтов. Не стоит забывать, что главная цель макета — это объединить все пожелания заказчика в одну логичную структуру. И только после согласования мокапа переходить к доработкам и украшению.
-
Не продумывают путь пользователя
Когда структура сайта никак не учитывает пользовательский опыт, дизайн можно признать нерабочим. Приятные визуальные решения — это, конечно, хорошо, но одной лишь красивой картинки будет недостаточно. Очень важно учитывать привычный путь пользователя и его потребности. Лучше, если дизайнер поймет это еще на этапе разработки макета.
-
Забывают об адаптивности и функциональности
На сайты заходят не только с компьютеров и смартфонов. Чтобы посетить веб-ресурс пользователи также используют планшеты, ноутбуки и даже телевизоры. Дизайнер должен учесть такие возможности и уже в начале работ продумать, как будет выглядеть сайт на разных устройствах. От этого будет зависеть и выбор цветовой палитры, и логика организации элементов.
Заключение
Создание макета — важный этап подготовки всего сайта. Хороший план поможет не только воплотить качественный ресурс, но и сделать работу над проектом понятной и комфортной для всей команды. Грамотно составленный макет — это залог успешного запуска сайта. Такой ресурс понравится посетителям и быстро привлечет целевую аудиторию. А владелец получит хорошую прибыль от своего проекта.
RU
