Идеальный дизайна сайта: чек-лист по основным элементам

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

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

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

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

  • Как создать совершенный лендинг пейдж с высокой конверсией?

Безлюдное пространство

«Безлюдное пространство» (white space) свидетельствует промежутки между графическими элементами, колонками, изображениями, текстом, другими блоками и полями контента.Идеальный дизайна сайта: чек-лист по основным элементам Это один из наиболее значимых инструментов дизайна, потому, что такие пространства определяют порядок чтения и структуру страницы.

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

Сайт компании Teamwork, создателя ПО для работ клиентской помощи, воображает весьма успешный пример действенного применения безлюдных пространств:

Безлюдные пространства широко применяются на сайте

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

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

  • 6 способов достигнуть «ясности» лендинга и повысить конверсию

Несложная навигация

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

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

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

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

Минималистично организованная навигация с несколькими возможностью доступа и основными блоками ко всем страницам через гамбургер-мен

  • Проектирование пользовательского опыта: мега-экскурсовод по навигации сайта

«О нас»

Страница «О нас» (about us page) входит в пятерку необходимых элементов для любого сайта. У вас имеется всего пара мгновений чтобы завоевать размещение пользователей, и включение для того чтобы раздела — один из лучших способов добиться этого.

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

Страница «О нас» производителя ПО Orchid Software содержит много разнообразных привлекательных картин, частично показывающие дружелюбные отношения в компании, и это формирует у визитёра чувство причастности тому, что в другом случае имело возможность бы показаться неинтересным и скучным.

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

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

  • 8 хороших и нехороших примеров страницы «О компании»

Призывы к действию

Призывы к действию (Calls-to-Action, CTA) создаются чтобы побудить визитёров совершить воздействие, к примеру, загрузить электронную версию книги, подписаться на вебинар, учавствовать в неком событии и т. д.

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

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

Примеры кнопок CTA на сайте компании IMPACT

  • 4 уловки увеличения эффективности призывов к действию

Визуальное высококачественное оформление

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

Для сайта аренды жилья, для того чтобы как Homeaway, верный подбор изображений решает очень многое. Фоновое видео, размещенное компанией в хедере собственной интернациональной домашней страницы, оказывает помощь задать тон совершенного отпуска. Расположенные ниже фотографии владений, дешёвых для аренды, трудятся на создание того же результата. Они демонстрируют все разнообразие вероятных видов жилья, каковые пользователи смогут отыскать для съема:

Видеозаставка на домашней странице ресурса Homeaway задает настроение отпуска, что желал бы иметь любой

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

Неповторимое торговое предложение

Неповторимое торговое предложение (либо ценностное предложение, value proposition) — это первый элемент, что видит потенциальный клиент, в то время, когда заходит на вашу страницу. Обычно как раз оно определяет, станет ли пользователь просматривать ваш сайт либо надавит кнопку «Назад» и возвратится к поиску.

УТП должно растолковывать, как ваш продукт решает проблему клиента, усиливает его обстановку, какие конкретно пользы приносит, и из-за чего он обязан выбрать как раз вас, а не соперника.

Компания Stripe разместила собственный УТП так, что в первый раз зашедшие на сайт пользователи сходу знают, чем занимается компания:

Надпись на сайте: «Сервис онлайн- и мобильных платежей, создан специально для разработчиков сайтов»

  • Визитёры уходят с лендинга, поскольку не знают ваше УТП

Советы клиентов

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

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

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

Invision добавила к отзывам фото рекомендателей, и логотипы компаний, каковые они воображают

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

Flash

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

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

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

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

  • 14 современных трендов в веб-мобильных интерфейсах и дизайне

Бесплатные фотобанки

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

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

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

Высоких вам конверсий!

По данным: impactbnd.comimage source karenilagan

Случайные статьи:

Расположение элементов веб сайта. Правило «Внутреннее и внешнее»


Подборка похожих статей:

riasevastopol