Создание макета сайта

Макет – фундамент любого сайта. Он определяет его внешний «облик» (цветовую гамму, типографику, расположение иконок) и логику взаимодействия пользователя с интерфейсом. Работа над макетом – процесс, безусловно, творческий. Но он должен подчиняться строгой внутренней структуре – отход по этапам чреват издержками.

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

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

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

1. Композиционный набросок

Композиционный набросок – это самый первый этап визуализации и дизайна сайта.

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

2. Вайрфрейм (он же каркас сайта)

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

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

3. Макет сайта (или же мокап)

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

Важно: Мокап – ни разу не просто красивая картинка. За ним стоит целостная система, заложенная на предыдущих этапах создания макета страницы сайта. Например, все та же «сетка» со стадии вайрфрейма.

4. Прототип

Последний этап проектирования макета веб-сайта – создание интерактивного прототипа. Это проработанная модель, демонстрирующая структуру проекта и логику поведения пользователя в динамике. В прототипе настраивается кликабельность следующих элементов:

• кнопок;
• ссылок;
• пунктов меню;
• иконок.

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

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

Требования к макету веб-сайта – как должен выглядеть реально хороший мокап

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

• Логика и предсказуемость – при первом взгляде на макет сайта пользователю должно быть очевидно, почему каждый элемент расположен именно в этой точке и какую конкретную функцию он выполняет.
• Ориентация на «пользовательский путь» (он же CJM, Customer Journey Map) – мало просто расположить элементы так, как подсказывает «чувство прекрасного». Если логика навигации на сайте будет кардинально отличаться от привычных для пользователей паттернов, то дизайн, при всем желании, назвать эффективным не выйдет.
• Адаптивность и кросс-платформенность – веб-трафик сам по себе крайне фрагментирован по типам устройств: это и смартфоны, и планшеты, и ноутбуки. Естественно, что и десктопные устройства. Так что действительно качественный макет должен «уметь» подстраиваться под любое разрешение и под любой экран.

Инструменты для создания макета страницы сайта

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

Решений же на рынке – много. Даже очень. Каждое из них имеет свои как сильные, так и слабые стороны. Ниже – три «классических» инструмента, которые уже очень прочно вошли в обиход многих компаний.

Figma

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

Плюсы Figma:

• Кроссплатформенность – поскольку основной режим работы у инструмента – онлайн (через браузер), редактировать макеты можно будет с ПК на любой ОС – Windows, macOS, Linux, даже ChromeOS. Все файлы сохраняются в облаке – на тот случай, если работу будет решено перенести на другую платформу.
• Возможность создания верстки сайта совместно и в онлайне – в Figma сразу несколько дизайнеров могут одновременно работать над одним и тем же файлом, оставлять комментарии и наблюдать за курсорами друг друга. Работает все это дело примерно как в Google Docs.
• Есть бесплатный тариф – Figma хорошо подойдет для оформления небольших сайтов, поскольку дает неограниченный доступ к базовому функционалу.
• Активное коммьюнити – огромная библиотека готовых UI-китов, пресетов, иконок, шаблонов и плагинов.

Минусы Figma:

• Вендор ушел с рынка РФ – с марта 2022 года российские корпоративные аккаунты в Figma не работают, однако с личными учетными записями все пока нормально. Новые аккаунты для проектирования макетов веб-сайтов создавать аналогично все еще можно.
• Стоимость – «базовая» Figma хоть и бесплатна, но ее часто попросту не хватает, чтобы сделать адекватный дизайн сайта. Особенно остро проблема ощущается для крупных компаний. А чтобы получить доступ к полному функционалу, придется платить. И платить немало – Figma дороже многих своих конкурентов (тарифы для команд стартуют от примерно $15 за человека месяц, что больше среднего по рынку). Да и из России сейчас наблюдаются проблемы с оплатой – из-за все того же ухода компании с рынка.

Sketch

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

Плюсы Sketch:

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

Минусы Sketch:

• Эксклюзивность для macOS – пожалуй, главный (и самый болезненный) недостаток редактора. Sketch невозможно установить ни на Windows, ни на Linux, ни на любую другую ОС. Да, расширение .sketch хоть и можно открыть в браузере (и даже сконвертировать его), но полноценно работать с ним получится только на девайсах от Apple.
• Стоимость – подписка составляет $12 в месяц или $120 в год (это на одного человека). Дешевле, чем у Figma, но все еще дорого. И опять же, из России оформить ее сейчас затруднительно, потому что компания тоже ушла с отечественного рынка.

Adobe XD

Adobe XD – программа отличается минималистичным интерфейсом и содержит только самые необходимые для веб-дизайнера функции. Есть приложение под iOS и Android, а еще Adobe XD умеет передавать «растр» в Фотошоп.

Плюсы Adobe XD:

• Удобное прототипирование макетов веб-сайта – Adobe XD предлагает наглядную «интерактивность» между экранами. В инструменте, например, есть режим предпросмотра, который позволяет «пролистывать» спроектированный макет веб-сайта, отслеживая плавность анимаций и импакт от кликов по иконкам.
• Интеграция с экосистемой Adobe – для привыкших к хоткеям и к логике работы в Photoshop/Illustrator, осваиваться в Adobe XD гораздо проще. Между приложениями вендора также предусмотрен импорт/экспорт файлов через Creative Cloud.

Минусы Adobe XD:

• Меньшее сообщество по сравнению с Figma – несмотря на известность Adobe как компании, количество шаблонов и готовых пресетов для создания макетов страниц сайта сильно уступает пользовательской библиотеке, что предлагает все та же Figma.
• Стоимость – снова заносим ценообразование в минус, но делаем это, опять же, небеспричинно. Adobe XD из всех трех рассмотренных инструментов самый дорогой. Местная подписка обойдется в $22 (это в месяц). Бесплатно пользоваться утилитой можно всего 7 дней – пробный период очень короткий.

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

Ниже – наиболее распространенные ошибки при создании макета сайта:

1. Примитивная разработка схем – минимализм при создании дизайна сайта – это хорошо, но не следует впадать в крайности. Макет веб-сайта из трех условных прямоугольников и одного круга – это плохой макет. Мокап должен быть простым, но при этом достаточно информативным, чтобы любой участник команды, взглянув на него, понял не только что расположено на странице, но и почему оно расположено именно так.
2. Перегруз макета веб-сайта деталями – ошибка, противоположная по своей сути предыдущей, но от того не менее частая. Заключается она в стремлении создать шедевр «с порога», переполнив макет декоративными элементами, сложной геометрией, обилием вычурных шрифтов. На этапе создания мокапа (и особенно на этапе вайрфрейма) избыточный визуал только вредит делу, отвлекая внимание от главного – структуры и функционала.
3. Плохо продуманный пользовательский путь – создание дизайна сайта без опоры на реальные поведенческие сценарии – это путь в никуда. В лучше случае – к созданию арт-объекта, но никак не коммерческого сайта. Если UX/UI-дизайн будет противоречить привычным пользовательским паттернам, посетитель как минимум покинет ресурс. Как максимум – уйдет к конкурентам, у которых проблем с дизайном сайта не наблюдается.

Подытожим

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

Мы готовы помочь с разработкой мокапа.

«Экспансия» возьмет на себя все вопросы проектирования – от анализа пользовательского пути до проработки интерактивного прототипа. Мы создадим для вас систему, нацеленную на рост бизнеса.