/ Создаем прототип сайта в Axure

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

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

Определение основной задачи дизайна

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

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

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

Соблюдение стандартных размеров рабочей области

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

Дизайн составляющих частей первого окна

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

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

Информация об основных выгодах, не указанная в заголовке, может быть отображена в виде списка или триггера.

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

Правила выравнивания заголовков и текстов

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

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

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

Текстовая информация и графические элементы: оптимальное размещение на странице

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

Приведем некоторые примеры.

 

1. Кейсы

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

 

2. Блок с информацией о выгодах

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

Оставление свободного пространства

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

Важно не переусердствовать со свободным пространством.
 

Делаем выводы

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

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