Макет сайта: для чего нужен макет, как макет превратить в реальный сайт

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

Что такое макет сайта

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

Как может выглядеть макет сайта, нарисованный от руки на первом этапе

Макет помогает собрать в единое целое ожидания клиента: внешний вид и функциональность предопределяются до начала верстки. Его можно сравнить с 3D-визуализацией, которая широко используется в интерьерном оформлении: дизайнер переносит будущий ремонт в цифровой формат, расставляет мебель и аксессуары, а заказчик сможет понять, как будет выглядеть квартира после завершения работ. Является нечто средним между прототипом и обычной блочной схемой, при создании макета сайта особое внимание уделяется следующим деталям:

• схематичный набросок. Простейший вариант из блоков и линий, которые указывают на расположение элементов сайта и их размер;
• вайрфрейминг. Дизайнер осуществляет визуализацию и определяет схему компонентов. Результат позволяет понять, как элементы будут взаимодействовать друг с другом и есть ли проблемы в области UX. План составляется для всех экранов, указывает, где будут находиться логотип, формы обратной связи, карусели и другие объекты, прорисовывается сетка, выделяются зоны под контент;
• мокап. Это 3D-модель, необходимая для демонстрации дизайна до воплощения в жизнь. Например, с ее помощью можно показать, как будущий сайт выглядит на разных устройствах, а также увидеть, что на одном экране логотип смотрится хорошо, на другом – размыто;
• прототип. Финишная версия макета с выстроенной логикой взаимодействия, зафиксированным расположением элементов – полностью готова к следующему этапу.

Одобренный макет направляют верстальщику и программисту, которые «переносят» сайт в интернет. По ходу выполнения задачи могут привлекаться дизайнеры пользовательских интерфейсов, копирайтеры, backend-разработчики и другие специалисты, необходимые для реализации проекта.

Такой вид макет приобретает на финишной стадии, сопровожден технической документацией

Зачем создавать макет сайта

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

1. Визуализация внешнего вида ресурса. Клиент оценивает задумку дизайнера, есть возможность внести все необходимые коррективы до дорогостоящей стадии прототипирования и верстки.
2. Предугадывание желаний. Требовательным заказчикам предлагают несколько вариантов макетов, чтобы они получили выбор. Некоторые задумки клиентов живут в их голове, но в реализации либо сложные, либо будут оказывать негативное влияние, например, на пользовательский опыт или скорость загрузки страниц. Макет позволяет проработать эти моменты, сгладить все споры.
3. Определение недочетов. Проводится работа над ошибками без солидных финансовых, временных и трудовых затрат.
4. Оценка бюджета и поиск инвесторов. Макет дает представление о том, сколько будет стоить разработка конкретного проекта, где можно сэкономить и что добавить для достижения wow-эффекта. Это удобно для клиентов, которые стремятся разделить финансовую нагрузку с партнерами или инвесторами, а также занимаются расчетом рентабельности каждого шага.

Какие требования выдвигаются к готовому макету сайта

Симметричность

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

Пример направляющих в Фотошопе

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

UI/UX-дизайн

Макет сайта – это не только о красоте, нужно позаботиться о UI/UX-дизайне (пользовательский интерфейс и опыт соответственно). При взаимодействии с ресурсом посетитель не должен долго искать меню или способ возврата в понравившуюся товарную карточку, не понимать, где находится корзина – приоритетны интуитивность и простота.

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

Что такое UI/UX-дизайн

Основной ориентир – привычные для пользователей факторы. Например, корзина товаров чаще всего располагается в верхнем правом углу экрана, а светло-серая серая CTA-кнопка может восприниматься как неактивная/требующая дополнительных действий (например, соглашения на обработку персональных данных). Форма на 5-6 полей принесет мало заявок и контактных данных – ее банально поленятся заполнять.

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

Структура

Существуют базовые правила, которые используют верстальщики и веб-дизайнеры для обеспечения привычной для пользователей структуры. Начнем с основы – стандартного построения:

• шапка сайта с меню (header). Выполняет преимущественно навигационную функцию, может быть дополнена слайдерами, баннерами, настройками (язык, переключение на версию для слабовидящих). Используются элементы айдентики, контактная информация, приглашение оформить подписку/пройти регистрацию + кнопка обратного звонка, поле для выбора города, поиск по сайту, для интернет-магазинов – корзина;
• информационный раздел (body, тело). Сюда выносятся основные сведения о компании и товарах/услугах, дисконтных предложениях, примерах работ;
• футер (footer или подвал). Добавляется все, что невозможно разместить в шапке и body – это карта сайта, контакты, блок с иконками социальных сетей, знак копирайта (©) для защиты авторских прав, иногда – формы для подписки на новостную рассылку.

Классическая структура страницы сайта

Опытный специалист хорошо осведомлен о том, какие элементы и где размещать, а также как сократить объем используемого пространства. Популярный прием – реализация гамбургер-меню: в правом или левом верхнем углу экрана отображается знак с тремя полосками, после нажатия на которые открывается основное меню. Метод обеспечивает экономию места, поэтому появляется возможность интегрировать дополнительные полезные объекты, подходит для минималистичного дизайна и мобильных версий.

Как сэкономить место, используя гамбургер-меню

Композиция

При взаимодействии с композицией в веб-дизайне нужно обращать внимание на дополнительные детали:

• направление взгляда. Выстраивая композицию, UI-дизайнеры используют два направления взгляда. Z-образный вариант предполагает, что считывание информации будет осуществляться слева-направо и по диагонали, что соответствует форме латинской буквы Z. F-образное направление считывается слева-направо вертикально, после чего по горизонтали взгляд перемещается к новой строке. Первые прочитанные элементы в F-паттерне отлично запоминаются, следующие – хуже. Направление просчитано с помощью изучения тепловых карт, если правильно размещать контент – можно существенно повысить удобство ресурса. Паттерны могут быть объединены в рамках одного сайта в зависимости от содержания и структуры блока;
• якорные элементы для создания точки фокусировки. Дизайнер должен использовать якорные компоненты, чтобы привлекать внимание пользователей и без лишних слов вести их в нужном направлении. Например, оформляется главный экран, есть две кнопки для выполнения целевого действия с идентичным дизайном и размером – это провал. Дело в том, что одинаковые элементы сливаются, а пользователь не понимает, что нажать для выполнения целевого действия. Обязательно формирование главных и второстепенных кнопок для каждого блока и страницы: необходимы элементы, которые будут буквально кричать «На меня нужно кликнуть в первую очередь!»;

Пример однотипных и невыразительных кнопок

• цветовые решения. Играют не последнюю роль в вопросе композиции, задавая настроение дизайну. Яркие сочетания вызывают ощущение радости, монохромные и градиентные решения – умиротворяют и выглядят респектабельно. Оттенки могут использоваться при создании якорных объектов, они помогают управлять внимание посетителей и выражать конкретные эмоции. Рекомендуется использовать основы психологии цвета в веб-дизайне, чтобы реализовать эффективную палитру.

При построении композиции тоже учитывается симметричность и тепловые карты, применяется правило третей: экран разделяется на 9 равных частей (потребуются 2 вертикальные и горизонтальные линии). Пересечение линий – точки, на которых взгляд пользователя фокусируется в первую очередь. Точки и периметр линий – лучшее место для размещения ключевых элементов.

Адаптивность

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

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

Пример параметров экранов для адаптивной верстки

При составлении технического задания (ТЗ) для дизайнера и верстальщика, необходимо ориентироваться на стандартные параметры экранов: 1600 пикселей – компьютеры, 1024 – ноутбуки, 769-960 – планшеты, 375 – смартфоны (значения вариативные). Количество версий макетов определяется на этапе обсуждения и обязательно фиксируется в ТЗ.

Этапы создания макета сайта

Составление технического задания

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

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

Фрагмент из ТЗ

Структура технического задания вариативная, но она должна быть понятна и приемлема для всех сторон. Чем подробнее и точнее ТЗ, тем меньше разногласий возникнет. Можно составить самостоятельно, заказать в стороннем агентстве или доверить подрядчику, который будет заниматься созданием макета.

Разработка первичного прототипа

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

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

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

Цветовая палитра и шрифты

Цветовые сочетания выбираются на основе брендбука компании, обязательно использование корпоративных оттенков. Не рекомендуется внедрение более 4-5 цветов, иначе дизайн выглядит перегруженным. Например, по 2 оттенка могут применяться для фона и шрифтов, еще один – для CTA-элементов. Если макетирование выполняется самостоятельно и возникают проблемы с выбором цветовой схемы, то можно прибегнуть к специальным сервисам (будут полезны и для веб-дизайнеров), например, Adobe Color CC или ColrD.

Как выбрать цветовые сочетания в Adobe Color CC

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

Шрифты, как и тексты или изображения, могут быть защищены авторским правом. До начала использования необходимо уточнить этот вопрос, придется либо получить лицензию, либо использовать бесплатные варианты. Последние можно найти на Google Fonts или Font Space.

Шрифты в Google Fonts

Детализация и проработка

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

Подготовка описания для верстальщика

Без этого этапа макетирования можно обойтись, но для установления взаимопонимания верстальщика и дизайнера лучше подготовить детальное описание:

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

Основные компоненты по негласному правилу прописываются на английском языке, но указываются именно функциональные возможности, а не контент. Например, область для баннера лучше называть banner, а не flowers или car, намекая на визуал. Понятные и однозначные подписи объектов существенно упрощают работу, что особо актуально для крупных сайтов с тысячами разномастных элементов.

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

Макет сайтов в Фигма

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

Как выглядит редактор Фигма

Сервис имеет небольшой инструментарий для обработки изображений, поэтому эффективно использование в паре с Adobe Photoshop. Для расширения базовой функциональности доступны плагины Figma, позволяющие работать с фоном, картинками, мокапами, шрифтами. К основным плюсам стоит отнести:

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

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

Макет сайта в Adobe Photoshop и Adobe Illustrator

Программы Adobe Photoshop и Adobe Illustrator предназначены для графики (растровая, векторная), выполнения редактирования фото и видео, веб-разработки. Считаются классическими, поэтому дизайнеры отдают предпочтение им, а не более современным онлайн-платформам.

Интерфейс Adobe Illustrator

Программы универсальные: легко выполнить ретушь фото, создать логотип или осуществить макетирование, используя внутреннюю сетку и другие инструменты. По уровню функциональности существенно превосходят конкурентов, достаточно мощные, что выдвигает высокие технические требования к устройству пользователя. Можно прибегнуть к Creative Cloud на базе облачных технологий: после покупки подписки открывается доступ к 20+ программам компании, но бесплатного тарифа нет.

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

Макет сайтов в Sketch

Sketch – векторный графический редактор для разработки интерфейсов (лишен инструментов для обработки фото или создания анимации). Относительно новый, но уже достаточно популярный, из минусов – доступен только для macOS, на остальные операционки установку выполнить не удастся. Однако файлы, созданные в Sketch, можно открывать в Фигма и других графических редакторах.

Примеры прототипирования от Sketch

К плюсам стоит отнести максимально простую панель инструментов, что делает редактор хорошим решением для новичков (однако не лучше Фигмы), есть масса плагинов, а программа нетребовательна к ресурсам устройства пользователя (для сравнения: вес Photoshop в диапазоне 2 гигабайт, Sketch – до 40 мегабайт). Внедрен бесплатный тестовый период сроком около месяца.

Как из макета сайта сделать сайт

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

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

Например, конструктор сайтов Craftum предлагает 150 готовых шаблонов и 170 блоков, которые охватывают все интересные тематики. Создание сайта – бесплатное, выполняется с помощью графического редактора с дружелюбным интерфейсом. Стоимость подписки – от 159 рублей в месяц без ограничений для количества страниц, трафика и диска, если оплата вносится за год – домен в подарок. Есть хостинг, интеграции для подключения доставки, платежных методов, CRM и других возможностей, доступны создание блога и пошаговые инструкции. Фишка платформы – дизайн-блок, позволяющий реализовать нестандартные варианты оформления и выполнить перенос макета.

Примеры шаблонов конструктора Крафтум

Дополнительно – создание сайта с помощью нейросети за 3 минуты, в рамках которого будут сгенерированы тексты, подобраны изображения, сформирована оптимальная структура. Сайт можно изменять, стоимость подписки – как в стандартных тарифах Крафтум.

В заключение

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