Оформление главной страницы сайта: Как правильно оформить главную страницу сайта. Примеры лучших сайтов

Как оформить главную страницу сайта?

1. Почему к заполнению главной страницы сайта нужно относиться максимально ответственно?
2. Какие есть правила эффективной главной страницы?
3. Что учитывать для сайта по продаже товаров?
4. Какие основные правила при создании главной странице на сайте, предлагающем какие-либо услуги?

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

• Какое впечатление сложится у посетителя.
• Будет ли человек побужден перейти на другие разделы сайта.
• Воспользуется ли потенциальный клиент вашим предложением.

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

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

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

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

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

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

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

• Заголовок.
• Шапка сайта.
• Навигация.
• УТП.
• Конверсионная форма.
• Футер.

Давайте остановимся и подробно разберем правила и рекомендации для каждого из блоков.

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

1. заголовок-вопрос;
2. заголовок-лозунг;
3. заголовок-заявление;
4. информационный заголовок;
5. креативный заголовок;
6. заголовок-цитата.

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

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

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

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

Трендом является использование в шапке сайта слайд шоу и тематических меняющихся картинок или даже размещение коротких видео роликов. Пример такого решения представлен на скрине ниже.

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

• Одноуровневая.
• Двухуровневая.

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

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

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

1. Проведите аудит конкурентов, подчеркивая для себя сильные и слабые стороны использующегося ими УТП.
2. Выпишите максимально большое количество преимуществ для клиента от сотрудничества именно с вами.
3. Определите свою целевую категорию, которая потенциально может воспользоваться вашим предложением.
4. Выпишите вопросы, которые пользователь сможет решить благодаря вашему продукту.
5. Составьте и отредактируйте текст УТП.

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

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

• Позвонить менеджеру.
• Подписаться на рассылку.
• Купить товар.
• Заказать услугу и пр.

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

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

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

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

1. Какой должна быть главная страница интернет магазина.
2. Что учитывать при разработке главной страницы сайта, на котором предлагаются какие-либо услуги.

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

• Скидки/акции.
• Блок новинки.
• Популярные товары.

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

Такая часть страницы может быть представлена в виде хорошо разработанного банера.

 

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

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

Благодаря данной категории в интернет-магазине, можно регулировать спрос на те или другие группы товаров или их отдельные модели. Благодаря данному блоку, вызывается доверие посетителей, которые могут рассуждать: раз этот товар активно покупают – предложение действительно выгодное, стоит купить и себе. В «Лидерах продаж» стоит размещать только действительно выгодные предложение, и данный блок лучше постараться разместить на странице повыше – в 3-4 экране.

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

• Отзывов, вызывающих доверие.

  Сравнения товаров, позволяющем определиться с наиболее подходящими моделями.

·Просмотренных товаров и многого другого.

Недаром говорят, что «лучше один раз увидеть, чем…». Мы с вами обсудили теоретически, какой должна быть главная страница интернет-магазина. Давайте обратим внимание на несколько удачных примеров.

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

2. Parfums. Дизайн главной страницы этого интернет-магазина достаточно сдержан, благодаря чему, все внимание посетителей сразу обращается на предлагаемый товар. На  сайте представлено достаточно много позиций, но благодаря фильтрам перемещаться по ним не сложно.

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

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

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

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

1. Каталог услуг.
2. Портфолио.
3. Отзывы.

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

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

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

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

1. Promex. Отличный пример главной страницы. На данном сайте хорошо расположены все ключевые блоки: динамичная картинка, перечень услуг, возможность просмотреть видео о компании пр. Хорошо, что дизайн сайта не шаблонный, а такой, который запоминается.

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

3.Sharplaw.ru. Сайт юридической компании с хорошо проработанным дизайном главной страницы. Также отлично выдержана верстка страницы по экранам. Хорошо составлен контента, но недостаток главной в том, что на ней нет заголовка и УТП.

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

50 примеров лучших главных страниц сайтов — Plerdy

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

Мы уже писали о рейтинге лучших студий 2018 года по версии ресурса. Очередь пришла к дизайну Главных страниц — примеров особо интересных решений от разработчиков со всего мира. Ниже мы составили рейтинг лучших Домашних страниц, которым компетентное жюри Awwwards присвоило награду “Сайт дня”. На примере этих сайтов можно оценить, сложен ли в реализации проект, способный получить признание лидеров отрасли.

1. Главная страница Welly

Перейти на главную страницу https://www.getwelly.com/

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

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

2. Главная страница Ricky Michiels, 2019

Перейти на главную страницу https://www.rickymichiels.com/

Наиболее поражающие воображение тенденции предоставляют сайты из сферы шоу-бизнеса. Особое место занимают сайты деятелей и агентств из мира высокой моды. Одним из таких стало портфолио для кастинг-студии Ricky Michiels. Идеи для этого проекта фрилансер-разработчик Jason Bradley почерпнул у глянцевых журналов моды, поместив на главную страницу красочные фешн-фото.

В 2013 году тенденцию дизайна сайтов Веб 2.0 сменила портальная (журнальная) верстка. Круглые линии, реалистичные градиенты и объемные иконки уступили место острым углам, плоскому дизайну, минимализму и чистоте изображения. Истина “все гениальное — просто”, определяющая смысл журнальной верстки, не теряет актуальности и в 2019 году.

3. Главная страница Jomor Design

Перейти на главную страницу https://www.jomor.design/

“Лучшее портфолио — собственный сайт” — так решили специалисты канадской студии Jomor Design из Монреаля, и разработали простую веб-страницу, на первый взгляд. Обычные и всем понятные шрифты, обычные фото. Но все дело — в анимации и Parallax-эффекте. Сайт реагирует на каждое действие пользователя, то отзываясь на движение мышки, то реагируя на скролл, то привлекая внимания к ключевым моментам. Гармоничное воплощение возможностей простых эффектов — этим специалисты студии и привлекли внимание жюри Awwwards.

4. Главная страница Precision Run

Перейти на главную страницу https://precisionrun.com/

От моды — к спорту, в котором одного взгляда на первый экран должно быть достаточно, чтобы почувствовать мотивацию к рекорду. Все это — о проекте Precision Run, объединяющего поклонников бега в турнирные таблицы и сообщества. Парижская студия Area 17, занимавшаяся разработкой сайта, решила вдохновиться спортивной рекламой и оживить рекламные постеры на сайте в видеороликах.

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

5. Главная страница Max Colt

Перейти на главную страницу https://maxcolt.com/

Украинская студия Adwanced.team поделилась с публикой Awwwards результатом работы над портфолио для отмеченного престижными наградами разработчика визуальных эффектов Max Colt, работавшего с Lil Wayne, Coldplay, Nicky Minaj, Kanye West, Imagine Dragons.

Тема портфолио задала тон фишкам сайта: анимация шрифтов и изображений была дополнена интерактивом. Чтобы запустить работу сайта стоило всего лишь кликнуть и удержать левую клавишу мышки. Этим создавалась интрига, вовлекающая посетителя. Дальнейшую работу делали работы автора, производя тот необходимый wow-эффект.

6. Главная страница True Ventures

Перейти на главную страницу https://trueventures.com/

Студия Ueno уже была в ТОП-25 студий по версии Awwwards-2018, уже имеет 29 наград ресурса, 13 из них — в номинации “Сайт дня”.

Студия представила новую работу, которую оценили жюри — ресурс для платформы для венчурных предпринимателей True Ventures.

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

7. Главная страница Animal

Перейти на главную страницу https://animal.cc/

Еще один корпоративный сайт для дизайн-студии Animal (Стокгольм).  Не мудрствуя лукаво, специалисты студии использовали прозрачный белый фон и простые шрифты. Но волшебство начинается во время взаимодействия: распадающиеся слоганы на первом экране при наведении мышкой, листающееся портфолио во время кликов, меняющиеся надписи раздела features. Простой с виду сайт превращается в увлекательную “залипалку”, в которой пользователь вовлекается в игру с интерактивными элементами страницы. Надолго.

8. Главная страница Ferro

Перейти на главную страницу https://ferro.pt/en/

Еще одна студия, участвовавшая в рейтинге лучших разработчиков 2018 года по версси Awwards — Bürocratik из португальского города Coimbra разработала корпоративный сайт для компании Ferro — международного производителя продукции из углеродистой стали.

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

9. Главная страница Planetary

Перейти на главную страницу http://planetary.co/

“Нужен яркий сайт, мы же дизайном занимаемся” — решили специалисты студии Planetary из США, сделав первый экран своего корпоративного ресурс похожим на клубничную жевательную резинку. Позитивный розовый вписывается как в рамки жизнерадостного настроения и успешно сочетается с бодрой анимацией взаимодействий со страницей и flat-стилем иконок и кнопок страницы. За счет этого внимание к каждому горячему объекту автоматически возрастает. А темный задний фон не выглядит скучным, давая дорогу нужным, целевым действиям.

10. Главная страница LARGO Inc. Rebranding

Перейти на главную страницу https://largo.studio/

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

11. Главная страница EvaGher Makeup

Перейти на главную страницу https://evagher.com/en

Хотите увидеть испанский подход к веб-дизайну? Со всей страстью и увлеченностью специалисты Burundanga Studio подошли к разработке веб-портфолио для визажиста EvaGher. Использование насыщенности и контрастов в фешн-фотографиях, меганадписей в духе глянцевых журналов, как будто сделанных страстной кистью испанского художника — эти приемы смогли стать достойным аргументом для жюри Awwwards и принести проекту титул “Сайт дня”.

12. Главная страница SIROPPE

Перейти на главную страницу https://siroppe.com/

Обычная практика, когда в дизайне сайта используется три цвета. Но разработчики испанской студии Siroppe в своем корпоративном сайте сумели ограничиться двумя. Остальное сделала типографика, забавная анимация и краткая, но нескучная текстовая часть. Например, на странице портфолио вместо заезженного названия в тайтл разработчики поставили крылатую фразу Гэндальфа “Бегите, глупцы!”, что уже вызывает улыбку, еще до загрузки страницы. Минимум фото для проектов и портфолио, и максимум молодежной анимации — и рецепт вкусного веб-сиропа по-испански готов!

13. Главная страница Union

Перейти на главную страницу http://www.union.co/

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

14. Главная страница Vincent Saïsset — Portfolio

Перейти на главную страницу https://www.vincentsaisset.com/

Французский разработчик интерактивных элементов Vincent Saïsset (Париж) совместно с дизайнером Ludmilla Maury разработал сайт, который должен был стать его портфолио. В проекте разработчики использовали силу современной типографики, умноженной на креативные интерактивные взаимодействия мыши, кликов и переходов.

15. Главная страница Kühl&Han

Перейти на главную страницу https://kuhlandhan.com/

Датская дизайн-студия анимации Kühl&Han заказала разработку корпоративного сайта агентству Norgram, и это проект тоже попал в номинацию “Сайт дня”. В дизайне разработчики использовали всю красоту макросъемки и 3D-визуализации, поставив анимированные 3D-ролики на первый экран. Что характерно — страница состоит из одного экрана, при этом, содержит всю информацию, которая может понадобиться — контакты, ссылка на портфолио и описание студии. Все это обыграно современной типографикой, расположено в “горячих” местах, не перетягивая на себя все внимание посетителя, но и не теряясь на динамичном фоне.

16. Главная страница Few and Far

Перейти на главную страницу https://www.few-far.co/

При первом взгляде на сайт британской студии дизайна и разработки Few and Far кажется, будто у ресурса проблемы с версткой, но это — лишь крючок, который заставляет промотать сайт дальше. А с продвижением вниз блоки страницы оживают, меняют размер и лишняя темная полоса в правой части экрана оказывается блоком портфолио. Такой тонкий подход говорит о нестандартном подходе к вовлечению пользователя. Вместе с тем, это свидетельствует о высоком профессионализме и опыте понимания пользовательского опыта. Сайт работает без лишних wow-эффектов, используя только психологию веб-серфинга и немного удобной типографики.

17. Главная страница Finding Ctrl

Перейти на главную страницу https://findingctrl.nesta.org.uk/

Креативный проект от манчестерской студии ToyFight (Великобритания) предлагает поразмышлять над историей интернета, которому в октябре 2019 года исполнится 50 лет. Студия уже в шестой раз попадает в рейтинг Awwwards в номинацию “Сайт дня”.

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

18. Главная страница Angle2 Agency

Перейти на главную страницу https://angle2.agency/

Украинская студия дизайна и разработки Angle2 из Киева реализовала свой корпоративный сайт, удачно обыграв собственное название. “Посмотрите на свой продукт под разными углами” — призывает слоган на главной странице. Если повести в сторону курсором мышки, то слоган последует следом, изменяя угол отображения текста. Давая, тем самым, пользователю реально прочувствовать смысл фразы. Этого игровой элемент — еще один способ вовлечь пользователя во взаимодействие, не требующий сложных технических решений. Только немного фантазии и кода.

19. Главная страница Anoukia—in Pink

Перейти на главную страницу https://www.pink.anoukiaperrey.com/

Американская студия Saint Roman совместно с 3D-дизайнером Anoukia Perrey разработали ее портфолио, в котором поместили летний сет ее работ, объединив в коллекцию “Anoukia in Pink”.

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

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

20. Главная страница Fabio Fantolino

Перейти на главную страницу https://www.fabiofantolino.com/en

Дизайн-агенство Adoratorio из Бресции (Италия) — еще один номинант в рейтинге на звание “Студия года-2018” по версии Awwwards на этот раз представила сайт дня — портфолио туринского архитектора Фабио Фантолино. Проект представляет собой постепенно набирающую популярность одноэкранную версию главной страницу, с которой можно быстро перейти в другие важные разделы — услуги, об авторе, контакты и т.д. Функцию создания wow-эффекта берет на себя анимация и фото проектов архитектора, дополненные типографикой в духе глянцевых журналов.

21. Главная страница Design in Motion Festival

Перейти на главную страницу https://demofestival.com/

Использовать рекламные афиши и проспекты в качестве источника вдохновения для веб-дизайна — ход беспрецедентно смелый. Но в разработке оформления сайтов тех же мероприятий смелый шаг приобретает оттенки оптимистичного вопроса “Почему бы и нет?”

Именно интернет-афишей и представляется веб-ресурс DEMO Festival (Нидерланды), разработанный агентством Dept (Амстердам). Яркость и насыщенность цветов, вычурность и гипермасштабность типографики прицельно показывают тематику ресурса — реклама массового мероприятия. Иногда и такой ход позволяет позиционировать мероприятие с первого взгляда. Если это произойдет — дальше только дело за техникой и информативным контентом.

22. Главная страница MST—We create digital stories

Перейти на главную страницу https://mst.agency/

Яркий сайт, напоминающий россыпь сладких леденцов — именно такие ассоциации возникают при взаимодествии с корпортаивным ресурсом и портфолио московского агентства MST. Специалисты студии решили объединить две тенденции — объемность Веб 2.0, наложенную на цветовую схему и требования Material Design. Все, что есть на сайте, сделано в строгом минимализме и единстве стилей. На сайте нет фото — есть иллюстрации, любовно нарисованные под каждый проект. Жюри Awwwards оценили серьезность подхода к самопрезентации и присудили проекту заслуженный титул “Сайт дня”.

23. Главная страница Oui Will Agency

Перейти на главную страницу http://www.ouiwill.com/

Еще одно знакомое по рейтингу-2018 дизайн-студий — агентство Oui Will из сан-Диего (США). На этот раз студия представила обновленный собственный сайт, сделав ставку на Parallax-эффект, эффектные презентационные ролики и тонкую, гладкую типографику. Все разделено по экранам, для каждого слогана, ролика или новости — свой экран, никакого соседства. Сайт щедро сдобрен уместной анимацией и, где это возможно, интерактивным взаимодействием с пользователями, при этом, оставляя дух минимализма и сдержанности. Умение сочетать противоположности в очередной раз принесло студии место в рейтингах Awwwards.

24. Главная страница Alacran Group

Перейти на главную страницу https://alacrangroup.com/

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

Из дизайн-элементов на сайте представлены минималистичная иконографика, инфографика, необычная горизонтальная развертка страниц и material-цвета.

25. Главная страница Studio P2MV

Перейти на главную страницу https://p2mv.studio/

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

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

26. Главная страница Getz

Перейти на главную страницу https://www.mariodragicevic.com/

Студия Bornfight из Загреба (Хорватия) разработала онлайн-портфолио для фотографа Mario Dragicevic. В таких проектах главное, чтобы ресурс не затмевал талант самого художника, но выгодно подчеркивал его. И в этом разработчики преуспели, создав сайт с чистым черным дизайном, журнальной типографикой и ненавязчивой анимацией работ фотографа.

27. Главная страница NourishEats by Joanna L.

Перейти на главную страницу https://nourisheats.co/

Дизайн от канадского дизайнера Kin Hui-Lo (Торонто) для кулинарного проекта Nourisheats поражает умением разработчика сочетать фото, типографику, иконографику и parallax-эффект. Специалист использовал всего понемногу в нужный пропорциях, чтобы не сделать блог слишком тяжелым и насыщенным. Использование натуральных неброских цветов позволяет избежать информационной перегрузки. А ненавязчивая анимация курсора и элементов меню позволяет сделать сайт интерактивным и вовлекает во взаимодействие.

28. Главная страница Versett

Перейти на главную страницу https://versett.com/

Агентство Versett из Калгари (Канада) представили публике Awwwards свой корпоративный сайт, и получили награду “Сайт дня” от жюри ресурса.

За wow-эффект отвечает видеопрезентация студии на первом экране Главной. Созданное настроение поддерживает анимация, строгая типографика, и интерактив для функциональных зон.

29. Главная страница Temporary Measures

Перейти на главную страницу https://www.craftedbygc.com/

Студия разработки Green Chameleon из Бристоля (Великобритания) ответственно подошла даже к такому ресурсу, как временный сайт-заглушка, который будет отображаться посетителям пока полный корпоративный сайт  будет на переработке. Простой замысел — чистый черный фон, на котором эффектно смотрится цветная композиция с эффектом растекшейся акварельной краски и слоган сайта.

30. Главная страница Lundqvist&Dallyn

Перейти на главную страницу https://www.lundqvistdallyn.studio/

Белый фон, parallax-эффект, играющий черно-белыми информационными блоками, расположенными в шахматном порядке на странице — пожалуй, проще дизайн придумать сложно, однако, именно простота замысла и цепляет в оформлении сайта дизайн-студии Lundqvist&Dallyn, разработанном дизайнерами оксфордской студии Sam&Sara (Великобритания).

31. Главная страница Mogney

Перейти на главную страницу https://mogney.com/

В СССР существовал мультик “Пластилиновая ворона”, в котором животные превращались друг в друга под веселую песенку. Разработчики из отмеченной номинацией “Студия года-2018” воронежской студии Red Collar (Россия) определенно вдохновлялись этим мультиком. Проект Mogney — сайт новой платежной системы по QR-коду поражает впечатление сначала ярким цветовым сочетанием, а потом — анимациями, сменяющими друг друга при скроллинге. На выходе получилась динамичная картинка, которая поднимает настроение и желание воспользоваться сервисом.

32. Главная страница White Square

Перейти на главную страницу https://whitesquarecapital.com/

White Square — сайт инвестиционной фирмы, разработанный уже встречавшейся в нашем рейтинге итальянской студии Adoratorio. Оформление главной страниц — на грани искусства, поскольку реализовано с помощью одного лишь белого и теней. Красивые текстуры, сменяющие друг друга в одном цвете, плоский дизайн, гладкие шрифты, легкая сетка разметки страницы и ненавязчивая типографика, порционно выдающая информацию. Ресурс располагает к взаимодействию. удобством и уютом.

33. Главная страница This Is Sleep

Перейти на главную страницу https://thisissleep.co.uk/pages/your-sleep-solution

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

34. Главная страница Jorik

Перейти на главную страницу https://jorik.askphill.com/

Простой parallax позволяет сделать сайт играбельным, если прикрепить точку просмотра главного экрана к курсору мышки. Решение авторства студии Ask Phiil из Амстердама (Нидерланды) добавило сайт нового бренда Lil’ Kleine: Jorik в рейтинг Awwwards и заслужило симпатии жюри. Чтобы не осталось сомнений, достаточно посмотреть на чистый и гладкий дизайн страницы, интерактивное взаимодействие на клики пользователя и “доезжающий” скролл, оставляющий приятное впечатление и заставляющие повторить опыт взаимодействия с ресурсом если не сразу, то хотя бы через время.

35. Главная страница Baunfire

Перейти на главную страницу https://www.baunfire.com/

Свежий взгляд на дизайн от резидентов Силиконовой долины Baunfire (Сан-Хосе, США). В нем нет масштабных фотографий или претенциозных рекламных роликов. Здесь царит дизайн с использованием простых символов, напоминающих ASCII Art — рисование символами — доведенный до уровня профессионализма. Добавить красивое цветовое сочетание, интерактивное взаимодействие с пользователем и мягкие анимационные эффекты функциональных объектов и элементов дизайна — и получим сайт-номинант на события дня.

36. Главная страница Graphit Type

Перейти на главную страницу https://www.graphit-type.com/

Если есть желание выделиться из потока презентационных сайтов, то можно попробовать красиво нарушить абсолютно все рамки моды на веб-дизайн. Именно так и сделали LitDesignStudio для презентации своего шрифта Graphit, использовав его формы в дизайне сайта. Так они убили двух зайцев одним махом — и продукт показали во всех возможных вариациях, и запоминающийся дизайн, достойный титула “Сайт дня” создали.

37. Главная страница LOOP

Перейти на главную страницу http://www.agentur-loop.com/

Если есть желание выделиться, то можно еще попробовать привлечь внимание деталями. Например, плотно посидеть над дизайном футера, поиграв с типографикой и доведя соотношение шрифтов до уровня шедевра. Именно так поступили разработчики студии LOOP со своим сайтом, вдобавок к чистому дизайну основных разделов, которыми уже, возможно, даже и не удивить искушенное жюри Awwwards. А вот вниманием к деталям — вполне.

38. Главная страница Olivier Ouendeno — Portfolio

Перейти на главную страницу http://www.olouen.com/

Красивые фото анимацией и интерактивом не испортишь. Арт-директор Olivier Ouendeno (Париж, Франция) для своего портфолио подобрал фото, которые зашил под чистую подложку. Чтобы их увидеть, достаточно поводить курсором, а для полного просмотра — зайти в портфолио через креативное меню. Отдельного внимания заслуживает винтажно оформленная типографика.

39. Главная страница Auberive

Перейти на главную страницу https://auberivemusic.com/

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

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

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

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

40. Главная страница 2018: Year in Review

Перейти на главную страницу https://2018.craftedbygc.com/

Дизайн-агентство Green Chameleon из Великобритании решило использовать parallax-эффект, чтобы создать просто на главной странице обзорного ресурса за 2018 год эффект VR. Смысл был именно в том, чтобы погрузить посетителя в события прошедшего года. Разработчики использовали современные технологии, чтобы дать прочувствовать именно идею погружения, позволяющей стать участником действия и творцом истории.

41. Главная страница Won Hundred

Перейти на главную страницу https://wonhundred.com/

Есть тут кто-то, соскучившийся по табличной верстке нулевых? Разработчики SPRING/SUMMER удивили жюри Awwwards, предложив на суд беспрецедентный проект сайта для капсульной коллекции одежды Won Hundred. В этой странице есть все из дизайна девяностых-нулевых: белый фон, однопиксельные границы табличек, в которые вписано главное меню, форма рассылки и карточки товаров. Дополнительный флер гениальности вносят стандартные цвета и типографика, и даже бегущая строка заголовков. Вишенкой на торте выступают рекламные баннеры в лучших традициях WordArt. Нельзя упрекнуть датских разработчиков в хорошем чувстве юмора.

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

42. Главная страница Bruegel – Once in a Lifetime

Перейти на главную страницу https://www.bruegel2018.at/

Разработчики студии Wild Вены (Австрия) для сайта выставки Питера Брейгеля в Венском Музее Искусств не стали изобретать велосипед, а воспользовались работами самого мастера. Их они доработали с помощью анимации, оживив многочисленных персонажей картин художника. Этого оказалось достаточно для wow-эффекта на первом экране.

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

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

43. Главная страница RALLY

Перейти на главную страницу http://rallyinteractive.com/

От фантазийных нарушений правил — к традиционному их соблюдению. Разработчики студии Rally из США доказали на примере своего нового корпоративного, что гайдлайны Google относительно дизайна — очень даже полезная вещь. Простое соблюдение правил типографики, правил “чистого” дизайна и белой подложки, добавить немного анимированных геометрических форм и интерактива в виде изменения размера надписей и смены цветов подложки — и можно получить гладкий дизайн, достойный звания “Сайт дня”.

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

44. Главная страница Dapper Fundation

Перейти на главную страницу https://www.dapper.fr/

Рецепт удачного дизайна от креативной студии VIENS-LÀ (Франция) на примере сайта для культурного Фонда Даппера:

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

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

45. Главная страница Pelizzari Studio

Перейти на главную страницу https://pelizzari.com/en/

Еще один “Сайт дня” от итальянской студии Adoratorio — портфолио студии дизайна интерьеров для отелей, вилл и ресторанов Pelizzari Studio. Дизайнеры агентства используют традиционные для своих ресурсов приемы: качественные профессиональные фото, античные шрифты, анимирование элементов в духе Material Design.

46. Главная страница Lasse Pedersen

Перейти на главную страницу http://lassepedersen.biz/

Датчане уверенно нацелились перенять пальму первенства по части креатива у французов. Дизайнеры KASPER LAIGAARD STUDIO представили публике и жюри Awwwards свой проект — портфолио парикмахера и стилиста Lasse Pedersen.

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

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

47. Главная страница Google Store

Перейти на главную страницу http://store.google.com/

Сложно ожидать от сайта Google Store дизайн, не соответствующий строгим гайдлайнам самой поисковой сети. Неизвестно, как студия BASIC (США) подходила к его разработке — сначала поработав над соответствием требованиям Material Design, а потом добавляя креатив, или наоборот? Итогом оказался магазин, наполненный качественными фото, вызывающими восторг — будь то изображение товара или рекламного атмосферное фото.

Изображения оттеняют функциональные элементы простых форм, стандартные Google-шрифты и фирменный логотип из буквы G то тут, то там. Просто чтобы ненавязчиво напомнить пользователю, на чьем (!) сайте он находится. Это поддержит интеграция с Google-аккаунтом. Даже не надо входить — все уже готово к покупкам!

48. Главная страница Goldkant Interior

Перейти на главную страницу https://goldkant.de/

Привычный parallax-эффект может творить чудеса в руках прагматичных немейких дизайнеров. Разработчики из студии HUMANS&MACHINES (Берлин, Германия) предложили для своего проекта — сайта студии интерьеров Goldkant предельно простую структуру и сдержанный дизайн с минимумом цветовых акцентов.

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

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

49. Главная страница Heller Designstudio

Перейти на главную страницу https://heller.tv/

Еще один проект итальянцы Adoratorio разработали для немецкой студии дизайна Heller. Сайт рискует стать “залипалкой” с первого экрана. Посетитель может надолго задержаться, играя с картинками презентации, которые будут гуськом следовать за курсором мышки. А чтобы время проходило с пользой, поверх презентации бегущей строкой будет идти описание студии.

Интересен эффект наложения надписи на изображения: когда текст “наезжает” на картинку, то цвета надписи инвертируются в соответствии с картинкой. Так достигается удобство чтения.

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

50. Главная страница My 360° Mirror

Перейти на главную страницу https://www.my360mirror.com/

Как удачно продать дизайнерское зеркало? Дизайнер Stella Petkova (Болгария)  нашла способ, предложив свое видение, каким должен быть дизайн для торгового марки My 360° Mirror, чтобы идея бренда пришлась посетителю по вкусу.

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

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

Выводы

Если проследить тенденции, царящие в мире современного веб-дизайна, то вырисовывается следующая картина:

• намечается тенденция перехода от лонгридов к одноэкранным сайтам с переходами через клик или скролл, которые были популярны в нулевых. Отличает лишь современную версию Веб 2.0 сокращение контентной части до предельного минимума, и действительно до одного экрана, без скролла вниз — эта функция уже занята под переходы;
• parallax-эффект все так же не сдает позиций, являясь классикой для создания wow-эффекта. Разница — в реализации. Не всегда это — простой скролл полотен текста, разделенного окошками с визуальными элементами (видео, фото). Теперь эффект становится основой для 3D-презентации или полигональной развертки, выступая способом управлять картинкой и углом ее обзора;
• музыка и видео все еще добавляются на сайты — где это важно. Иногда наличие такого оформления может замедлять скорость загрузки ресурса. На этот случай дизайнеры придумывают креативную заглушку с элементами интерактива, чтобы пользователь не скучал;
• интерактив может стать и способом развлечь посетителя на сайте. Забавные игровые элементы могут присутствовать практически на любом ресурсе — даже на сайте респектабельного дизайнерского бюро, лишь бы приподнятое и веселое настроение, которое они вызывают, было уместным и не входило с в противоречие с тематикой ресурса;
• дизайн, достойный наград, может быть выполнен и без особо сложных эффектов. При должном усилии, сайт, разработанный фрилансером, может привлечь внимание жюри. “Вывезти” веб-ресурс может просто следование гайдлайнам Google, без покушения на игру с нормами, какую могут себе позволить маститые дизайн-агентства;
• покушение на нормы — при должном уровне мастерства (или смелости) можно нарушить абсолютно все нормы, и попасть в рейтинг. Если знать, какие нарушения придутся публике по душе. в этом поможет глубокое исследование вкусов целевой аудитории и рынка в целом.

Как правильно оформить главную страницу сайта: требования и примеры оформления

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

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

Где я или Общая информация о бизнесе

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

Вот пример главной страницы сайта строительной компании. Вверху есть общее указание сферы и контакты. Под баннером размещены основные направления деятельности.

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

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

Самое важное – наверху

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

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

Чуть ниже должны идти преимущества компании и отличия от конкурентов. Если это интернет-магазин, на втором-третьем экране размещаются популярные и акционные товары, новинки, информация о доставке и оплате.

Текстовое сопровождение

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

Также важно, чтобы материал был:

• Актуальным: старые записи не вызывают интереса ни у читателей, ни у поисковиков.
• Структурированным: содержал заголовки, изображения, списки.
• Интересным: необходимо писать то, что действительно важно для ЦА.

Для SEO-продвижения в текст можно вписывать ключи. В условиях ограниченности материала это сделать тяжело. Ключи можно вписать в заголовки, в описания услуг и преимущества.

Оформление футера

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

Вам интересны интернет-маркетинг и продвижение бизнеса в интернете? Подписывайтесь на наш Telegram-канал!

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

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

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

Оформление главной интернет-магазинов

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

Стартовая страничка интернет-магазина обычно содержит в себе:

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

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

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

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

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

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

Как правильно оформить главную страницу сайта услуг

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

• Баннер с оффером, акцией и CTA в первом экране.
• Перечисление всех услуг со ссылкой на отдельные страницы (если услуга одна, то она раскрывается максимально детально).
• Основные преимущества компании.
• Прайс.
• Портфолио, фотографии офиса/салона, видеопрезентация.
• Контактные данные.

Если на сайте есть меню, лучше его закрепить, чтобы оно не исчезало при скроллинге. Так посетители смогут быстро перейти на интересующий раздел, а не листать вверх (что делают далеко не все – многие предпочитают просто закрыть сайт).

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

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

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

Главная корпоративного сайта 

Задачи корпоративного сайта:

• Презентовать компанию: обозначить, чем она занимается, где работает, какие ее цель и миссия и пр.
• Создавать имидж.
• Привлекать новых клиентов, сотрудников.
• Продвигать услуги.
• Рассказывать о последних новостях и достижениях.
• Осуществлять взаимодействие с клиентами с помощью специальных сервисов (онлайн-заявка, расчет стоимости и др.)

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

На главной страничке корпоративного сайта обычно присутствуют флагманские продукты, новинки, основные услуги, краткое описание компании и ее преимущества. Иногда она может состоять всего из одной картинки и меню, например, как у сайта архитектурной компании Pelli Clarke Pelli Architects.

Еще один пример минимализма в оформлении главной можно найти у Apple. Компания может позволить ничего не рассказывать о себе, а просто предлагать ознакомиться и приобрести последние новинки. Упор идет на изображения. Они действительно качественные, подчеркивают статусность продукта и вызывают желание купить.

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

Оформление главной страницы информационного сайта

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

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

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

Общие правила оформления главной страницы

Понятная навигация

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

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

Быстрая загрузка

Какой бы красивой ни была страница, ее мало кто увидит, если она будет грузиться дольше 5 секунд.

Привлекательный дизайн

Именно по нему посетители оценивают сайт. Если дизайн будет некрасивым, отталкивающим, пользователи быстро уйдут.

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

Адаптивность к мобильной версии

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

Качественные изображения

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

Наличие видео-контента

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

Чего не должно быть на главной

О юзабилити написано много статей, но до сих пор встречаются сайты, которые совершают одни и те же ошибки. Например, такие:

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

В создании страниц важно придерживаться меры. Не стоит использовать заезженные шаблоны и стоковые изображения, но и экспериментировать с креативными вариантами нужно аккуратно.

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

Подпишитесь на рассылку FireSEO

и получайте подборки статей, полезных сервисов, анонсы и бонусы. Присоединяйтесь!

Что должно быть на главной странице сайта? Требования для правильного оформления

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

Зачем нужна главная страница

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

1. Информативность
2. Отвечать запросу целевой аудитории
3. Функциональность и удобная навигация
4. Содержать призывы к действию
5. Быть визуально привлекательной

Логотип

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

Навигация

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

Подвал на сайте

Подвал, или footer — это блок в самом низу сайта, который обычно дублирует навигационные кнопки верхнего меню сайта, а также содержит дополнительную информацию технического характера. Обычно в футере находятся данные об ОГРН и ИНН компании, копирайты, логотип студии разработчика, ссылки на политики конфиденциальности и другие документы. Многие считают, что на данный момент наличие футера на сайте является атавизмом. Мы считаем, что пренебрегать этим классическим элементом нельзя.

Каким должен быть оффер

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

Приоритет на целевом действии

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

Применение изображений

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

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

Главная страница интернет-магазина

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

• товарный каталог с фильтрацией по ценам, популярности и брендам
• «плитки» нескольких товаров из различных категорий (например, бестселлеры или товары со скидками)
• информация об акциях
• ссылки на личный кабинет и корзину
• адрес и контактная информация

Будет не лишним добавить на главную форму связи со специалистом или онлайн-чат. Это облегчит коммуникацию пользователя с вашим бизнесом.

Главная страница сайта с услугами

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

• преимущества работы с вашей компанией
• перечень оказываемых услуг с кратким описанием
• цены на основные виды услуг
• портфолио с выполненными работами и отзывами от ваших клиентов
• форма заявки и контактная информация

Главная страница «продуктового» сайта

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

• подробное описание вашего продукта
• фотографии продукта
• преимущества продукта перед конкурентами
• отзывы и обзоры на продукт
• информацию о вашей компании
• один или несколько блоков с призывом купить

Главная страница сайта компании

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

• описание основных продуктов (для каждого из продуктов можно выделить отдельную «продуктовую» страницу)
• преимущества работы с вашей компанией
• миссию и историю компании

Что не должна содержать главная страница сайта

Наряду с обязательными блоками на главной странице есть «фишки», которых стоит избегать или проводить тесты перед внедрением. Итак, разберем ошибки:

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

Главная страница сайта: как сделать и оформить — лучшие примеры

Главная страница сайта – это витрина, «парадный вход», на котором посетители:

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

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

Получайте до 18% от расходов на контекст и таргет!

Рекомендуем: Click.ru – маркетплейс рекламных платформ:

• Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
• Подключиться можно самому за 1 день.
• Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
• Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
• У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Попробовать бесплатно >> Реклама

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

Читайте также: Разработка структуры сайта в виде схемы

Элементы главной страницы

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

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

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

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

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

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

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

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

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

Это интересно: Создание сайта на WordPress — пошаговая инструкция

Что должно быть на главной странице сайта с точки зрения маркетинга

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

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

Вот здесь кратко и просто указали в одном предложении все выгоды от использования сервиса (бесплатно и просто).

2. Текст или другой контент, который понятно разъясняет:

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

Если пользователю все это будет не понятно, он просто закроет ваш сайт.

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

3. Призыв к действию (CTA). Это может быть лид-форма, кнопка CTA, отправляющая на страницу с более подробной информацией, и т.п. Самая главная цель этой страницы – удержать посетителя и провести его до следующего этапа воронки продаж. На главной странице лучше всего размещать не один, а два призыва к действию – первичный и вторичный. Например, для уже зарегистрированных пользователей – кнопка «Войти», которая не так ясно выделяется; для тех, кто зашел впервые – кнопка «Регистрация».

У Дропбокс на главной странице два призыва к действию – войти или попробовать решение для бизнеса.

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

Это можно оформить по-разному: слайдером; отдельными блоками; списком. Главное – чтобы это было легко заметить и просто прочесть.

Хороший пример – страница Evernote. Тут очень хороший заголовок, но и перечисление выгод очень хорошо оформлено. Завершает это все четкий призыв к действию.

5. Демонстрация продукта или лучшие работы. Это могут быть фото, или видео, или фотогалерея. Покажите, что вы делаете, убедите не словом, а делом. Картинка (а тем более видео) стоит тысячи слов.

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

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

Очень хорошо работает размещение сканов благодарственных писем, на которых эти отзывы были размещены изначально. Это доказывает, что отзыв – подлинный, настоящий. Чтобы читать было удобнее, его можно  набрать простым текстом (тем более, он будет индексироваться). Как здесь:

Читайте также: Как получить отзыв клиента прямо сейчас

7. Новости компании или статьи из блога. Это еще один элемент, который приглашает посетителя в путешествие по сайту. А еще – показывает, что сайт живой, что компания живет и тут происходит много интересного. Для этого публикации в блоге или в разделе новостей должны быть регулярными.

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

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

Вот пример вывода такой статистики:

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

Сделайте это обязательно: Техническое задание на сайт

Примеры главных страниц под разные цели

Текстовая информационная страница

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

Главная страница-лендинг

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

Статья в тему: Продающая страница лендинга

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

Голос бренда и эмоциональный настрой

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

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

Читайте также: Лучший хостинг для сайта

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

Как оформить главную страницу сайта: теория и примеры

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

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

Подпишись на рассылку и получи книгу в подарок!

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

Каким должно быть оформление главной страницы сайта?

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

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

На главной стоит обязательно указать:

• Кто вы и чем занимаетесь.
• Что вы предлагаете.
• Почему стоит выбрать вас, а не любую другую компанию

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

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

Как оформить главную страницу сайта: разбираем подробно

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

Шапка и навигация

Здесь все просто: тут размещается логотип (он же ссылка на главную), меню со ссылками на страницы. Здесь не стоит оригинальничать, потому что отступив от классической вертикальной или горизонтальной планировки вы рискуете запутать пользователя. Если делаете меню с иконками, снабдите их текстовым пояснением. «Контакты» размещайте либо справа, либо снизу, зависимость от типа меню.

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

Хороший пример оформления шапки главной страницы сайта – «Сбербанка». Все просто и правильно – под каждую услугу отдельный блок, контакты интегрированы в шапку.

Блоки с информацией

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

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

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

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

Оформление главной страницы сайта должно решает две задачи: привлекает внимание пользователя к нужным вещам и плавно подводит его к покупке. Поэтому важно в подходящий момент подтолкнуть пользователя к нужному решению. С этим всегда справлялся грамотный «Call-to-acton» – «призыв к действию».

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

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

Пример – сайт «Семантики». Призыв к действию один для всех услуг, поэтому внимание пользователя не рассеивается.

Подвал

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

Советы

Не перегружайте

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

Выделяйте выгодные предложения

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

Так сделал «Связной» – акция на виду и привлекает внимание.

Используйте изображения

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

Не перехваливайте себя

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

Постоянно редактируйте страницу

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

Как оформить главную страницу сайта с точки зрения SEO-оптимизации

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

Итоги

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

В статье используются изображения Дмитрия Миролюбова.

8 требований для главной страницы сайта. Советы. Примеры

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

1. Что мне предлагают на сайте?
2. В чем моя выгода?
3. Поможет ли это решить мою проблему?
4. Чем предложение на этом сайте лучше других?
5. Сколько это стоит?
6. Почему мне нужно заказать сейчас?
7. Могу ли я доверять этой компании?
8. Как я могу связаться с продавцом?

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

Что нужно поменять на главной странице сайта

Первый шаг к «выздоровлению» — это признание того, что начальная страница вашего сайта не в порядке.

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

Сайт до (слева) и после (справа) обновления.

1. Что мне предлагают на сайте?

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

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

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

С первого взгляда понятно, что компания предлагает.

На первом экране выделены сразу 3 цепляющих элемента:

• Торговое предложение.
• Призыв к действию.
• Кнопка действия.

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

2. В чем моя выгода?

Емко опишите, какую выгоду получит клиент, воспользовавшись вашим предложением. Пример ниже.

Выгода должна быть существенной, а не призрачной.

3. Поможет ли это решить мою проблему?

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

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

>Дайте клиенту реальное решение проблемы.

4. Чем предложение на этом сайте лучше других?

Кратко опишите выгоды от вашего предложения. Без лишних слов и размытостей. Получилось скучно и однообразно? Подсмотрите, что пишут ваши конкуренты. Оцените, насколько полезны их «подарки» за заказы. Мы уверены, у вас найдутся выгоды получше.

Выгоды клиента за покупку на этом сайте.

5. Сколько это стоит?

Существует прекрасный метод работы с ценой: скрыть цену, чтобы клиент позвонил и услышал ее. Затем зацепить торговым предложением в «живом» разговоре по телефону.

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

Наглядный пример, когда показать цену лучше, чем скрыть.

6. Почему мне нужно заказать сейчас?

Пользователи любят подумать, нежели быстро действовать.

Чтобы ускорить этот процесс, покажите, что у вашего предложения ограничены: срок действия, количество мест или партии. Объясните, почему есть ограничение и предложите действовать сейчас.

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

Используйте акции разумно.

7. Могу ли я доверять этой компании?

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

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

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

Хороший пример.

8. Как я могу связаться с продавцом?

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

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

Пример хорошей формы обратной связи.

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

Что включить (и примеры для подражания)

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

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

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

Вопросы, которые следует задать при создании домашней страницы

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

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

• Насколько легко им было попасть на вашу домашнюю страницу и есть ли у вас фирменный домен? У нас есть бесплатные инструменты, которые помогут найти доменное имя.
• Что вы хотите, чтобы посетитель сделал? (например, совершите покупку, присоединитесь к списку рассылки и т. д.)
• Насколько просто вы даете им это сделать?
• Сколько шагов нужно для достижения вашей цели?
• Сколько информации им нужно, чтобы перейти к следующему шагу?
• Есть ли шаги, которые можно устранить?

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

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

Бесплатный список для чтения: советы по дизайну интернет-магазина

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

Получите бесплатный список чтения

Получите наш список чтения «Дизайн магазина» прямо на ваш почтовый ящик.

Почти готово: введите адрес электронной почты ниже, чтобы получить мгновенный доступ.

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

Спасибо за подписку. Скоро вы начнете получать бесплатные советы и ресурсы. А пока начните создавать свой магазин с бесплатной 14-дневной пробной версией Shopify.

Начать

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

В среднем посетители проводят на вашей домашней странице 10-20 секунд.С точки зрения дизайна это означает, что вам нужно сделать навигационный поток понятным, чтобы посетители могли быстро выбрать лучший путь для себя (и для вашего бизнеса).

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

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

Для этого вам необходимо понимать роль самого ценного объекта недвижимости на вашем веб-сайте.

1. Контент, который побуждает к действию «в верхней части страницы»

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

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

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

На этой домашней странице пользователь может принять два быстрых решения:

1. Сделать покупку
2. Или прокрутите вниз, чтобы получить дополнительную информацию ниже сгиба — обзоры, видео и информацию об ингредиентах продукта.

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

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

Нужны визуальные эффекты для заголовка?

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

Просмотрите Burst сейчас

2. Очистить навигацию

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

Навигация по заголовку должна быть максимально простой, отдавая приоритет тем путям, которые наиболее важны для большинства посетителей.Энди Крестодина, стратегический директор Orbit Media Studios, рекомендует не более семи навигационных ссылок на вашей домашней странице.

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

Чем меньше «фрагментов», тем легче становится сохранение памяти. В влиятельной статье, опубликованной в 1956 году, профессор психологии Джордж Миллер пришел к выводу, что наша кратковременная память обычно способна удерживать только семь элементов одновременно.

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

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

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

Например, на главной странице

UNCONDITIONAL минимальная навигация и обширный инвентарь сочетаются с хорошо организованным раскрывающимся меню.

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

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

3. Привлекающие внимание образы

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

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

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

Изображение с наложенным текстом

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

Слайд-шоу

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

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

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

Видео

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

Возьмите, к примеру, домашнюю страницу Bottle Cutting Inc. Многие посетители, скорее всего, еще не знают, что им нужен продукт, поэтому домашняя страница создает вокруг себя ажиотаж с помощью демонстрации видео — естественного первого шага в процессе конверсии.

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

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

4. Прямой призыв к действию

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

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

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

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

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

Подробнее: Сможем ли вы справиться со всеми проблемами электронной коммерции с помощью нашего конструктора веб-сайтов? От красивой витрины интернет-магазина до мощной системы управления контентом — позвольте нам с легкостью создать и запустить ваш веб-сайт.

5. Удобная тележка для покупок

Корзина является неотъемлемой частью домашней страницы большинства веб-сайтов электронной коммерции.

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

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

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

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

6. Строка поиска (для больших коллекций товаров)

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

Например,

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

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

Нанять экспертов с проверенными навыками работы с Shopify

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

Нанять квалифицированную помощь сегодня

Не только: другие элементы домашней страницы, которые следует учитывать

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

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

1. Блоги, видео и другой контент

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

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

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

Например,

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

2. Социальное доказательство: отзывы, отзывы клиентов и пресса

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

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

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

3. Низкий приоритет и дополнительные продукты

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

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

Например,

LIV Watches, естественно, ориентирован на часы, но рекламирует свои дополнительные продукты премиум-класса, такие как ремешки, в нижней части своей домашней страницы.

4. Страницы с более низким приоритетом

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

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

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

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

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

Принимая во внимание дизайн домашней страницы для мобильных устройств

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

Упрощение домашней страницы для направления пользователей к определенному набору действий становится еще более важным для мобильных пользователей.

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

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

Улучшение дизайна домашней страницы с течением времени

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

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

Как структурировать контент для улучшения домашней страницы

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

Подумайте, как вы выбираете новую книгу. Сначала вы посмотрите на обложку. Это бросается в глаза? Затем вы смотрите на слоган. Звучит ли книга интригующе? Если вас заинтриговал слоган, вы читаете резюме на обратной стороне книги. Наконец, вы открываете книгу и погружаетесь в историю. Вы можете структурировать свой веб-сайт, чтобы имитировать этот процесс, используя так называемый принцип конуса .

Эти 2 графика помогут вам составить представление о структуре вашего сайта.

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

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

Почему работает принцип конуса?

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

Согласно сообщению Hubspot, 46,1% людей считают, что дизайн веб-сайта является критерием номер один для определения доверия к компании, и 40% людей будут лучше реагировать на визуальную информацию, чем на простой текст.Принцип конуса работает, потому что он помогает решить оба этих критерия. Это заставляет ваш веб-сайт сильно загружать визуальные эффекты, в то же время обеспечивая ценную информацию, которая в первую очередь приводит кого-то на ваш сайт.

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

Как структурировать свой сайт как профессионал

На сайте компании по производству очков Warby Parker есть отличный пример «конуса» в действии. Я расскажу об этом здесь, чтобы показать, как они это сделали.

1. Начните с жирного изображения, заголовка и логотипа

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

В верхней части сайта разместите свой логотип и самые важные вкладки на панели навигации. Лучше всего сократить их, чтобы все они были видны на одной строке. Цель панели навигации — направлять посетителя. Чем больше вариантов вы предоставите, тем сложнее им будет узнать, куда идти, и тем выше вероятность того, что они сдадутся и уйдут в другое место.

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

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

2. Выделите основной продукт, услугу или достопримечательность своего сайта

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

3. Следующий уровень вашей домашней страницы побуждает посетителя к действию

Это как задняя обложка книги. Это момент, когда вы привлекаете посетителя — слушает ли он музыку вашей группы, назначает встречу, просматривает ваши продажи или подписывается на услугу.

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

Посмотрите, как Warby Parker предлагает посетителям опробовать их продукт и начать просматривать свой ассортимент очков. Они предоставляют пользователям прямое действие («начать работу»), чтобы перейти к следующему шагу.

4. Предоставьте краткое описание любого другого важного содержания вашего сайта

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

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

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

Подходит ли принцип конуса для вашего веб-сайта?

Цель вашего веб-сайта — побудить посетителей провести время, читая о вас или вашем бизнесе, узнавая о ваших услугах, взаимодействуя с вашим контентом или совершая покупки.Один из способов узнать, успешен ли он, — это посмотреть на показатель отказов. Это что? Проще говоря, это означает процент посетителей, которые приходят на ваш сайт и уходят, не посещая другие страницы. Обычно они заходят на ваш сайт и очень быстро решают перейти на другое место. Вы можете отслеживать это с помощью Google Analytics.

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

Какие еще стратегии вы используете при создании лучшей домашней страницы? Поделитесь ими с нами в комментариях ниже!

Изначально эта статья была написана для Jimdo Мелиссой Майерс. Благодаря простому, интуитивно понятному интерфейсу Jimdo позволяет любому создать уникальный веб-сайт с блогом и интернет-магазином.

12 важнейших элементов, которые должна иметь каждая домашняя страница веб-сайта [Инфографика]

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

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

Чтобы повысить производительность вашей домашней страницы, обратите внимание на эти элементы, которые должны быть на каждой домашней странице.

12 важнейших элементов на каждой домашней странице веб-сайта

Сохранить

Сохранить

Поделитесь этим изображением на своем сайте

Включите в это изображение ссылку на http://blog.hubspot.com.

Что следует включить в дизайн главной страницы вашего веб-сайта

1. Заголовок

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

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

Сделайте заголовок ясным и простым. Заголовок Dropbox — отличный пример: «Все, что вам нужно для работы, в одном месте». Это просто, но эффективно — не нужно расшифровывать жаргон, чтобы понять, что на самом деле делает Dropbox.

2. Подзаголовок

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

Вот пример отличного подзаголовка от Mirror: «Прячась у всех на виду». Он подчеркивает главный аргумент зеркального тренажерного зала: это полноценный домашний тренажерный зал, персональный тренер и план тренировок, не выходя из дома, не занимая драгоценные квадратные метры оборудованием.

Чтобы оптимизировать заголовки для мобильных устройств, используйте более крупные шрифты, чтобы посетителям было удобнее.Мелкие шрифты могут заставить мобильных посетителей сжимать и масштабировать, чтобы читать и взаимодействовать с контентом на вашем сайте. Наш совет? Используйте параметры заголовка в редакторе страницы. Заголовки h2 идеально подходят для заголовков страниц — на странице должен быть только один h2. Подзаголовки должны следовать порядку иерархии: h3, h4 … H6 и так далее. У вас может быть несколько таких заголовков, просто убедитесь, что они в порядке. Например, вы не захотите прыгать с h2 на h4 — вместо этого выберите h3.

3.Основной призыв к действию

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

Эти призывы к действию должны быть яркими визуально, в идеале — цвета, контрастирующего с цветовой схемой вашей домашней страницы, но при этом подходить к общему дизайну. Сделайте текст кратким — не более пяти слов — и ориентированным на действия, чтобы он заставлял посетителей нажимать на то, что вы предлагаете.Примеры CTA-копии: «Зарегистрироваться», «Назначить встречу» или «Попробовать бесплатно».

На веб-сайте

Afterschool HQ есть два призыва к действию, оба ориентированы на руководителей программ, которые заинтересованы в продвижении своих внешкольных программ среди семей на сайте. Примечание под более длинным призывом к действию «Создать свой бесплатный профиль» дает посетителям толчок, необходимый им для создания учетной записи — первый шаг к тому, чтобы стать поставщиком штаб-квартиры Afterschool.

4. Вспомогательный образ

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

Чтобы оптимизировать изображения для мобильных пользователей, используйте высококачественные изображения с уменьшенным размером файла. (Клиентам HubSpot не нужно об этом беспокоиться, поскольку изображения, загруженные в программное обеспечение HubSpot, автоматически сжимаются. В противном случае инструменты, такие как TinyPNG, помогут.) Кроме того, всегда добавляйте замещающий текст к вашим изображениям, чтобы сделать их более доступными для посетителей, которые используйте программы чтения с экрана и поднимите свои SEO-усилия на ступеньку выше.

Домашняя страница 4 Rivers Smokehouse — отличный пример эмоциональных образов: на ней представлена ​​серия коротких аппетитных видеороликов с высоким разрешением, которые воспроизводятся в цикле за простым заголовком, подзаголовком и основным CTA:

5. Преимущества

Важно не только описать то, что вы делаете, но и почему то, что вы делаете, имеет значение. Потенциальные клиенты хотят знать о преимуществах покупки у вас, потому что это заставит их остаться.

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

6. Социальное доказательство

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

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

7. Навигация

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

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

Вот пример четкого, хорошо структурированного дизайна навигации с домашней страницы Slim & Husky’s Pizza Beeria:

8. Предложение содержания

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

9. Дополнительный призыв к действию

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

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

10.Возможности

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

11. Ресурсы

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

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

12. Показатели успеха

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

На домашней странице Calendly, например, вы найдете названия известных организаций, которые их признали, например Gartner и Dropbox.

Домашняя страница, которую стоит посетить

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

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

Примечание редактора: этот пост был первоначально опубликован в январе 2012 года и был обновлен для обеспечения свежести, точности и полноты.

5 различных структур дизайна веб-страниц | Small Business

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

Заголовок страницы

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

Инструменты навигации

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

Столбцы боковой панели

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

Основное содержимое

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

Нижний колонтитул страницы

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

Ссылки

Биография писателя

Ирэн А. Блейк, проживающая в Южной Пенсильвании, уже более десяти лет пишет по широкому кругу тем. Ее работы появлялись в проектах The National Network for Artist Placement, the-phone-book Limited и GateHouse Media. Она имеет степень бакалавра искусств по английскому языку в Шиппенсбургском университете.

16 основных типов веб-страниц

Для большинства людей сегодня уже трудно представить жизнь вне Интернета.Различные веб-сайты помогают нам с повседневными задачами, такими как приготовление пищи или покупки, поддерживают наше образование с помощью огромного количества данных, быстро информируют нас обилием новостей, помогают нам управлять, рассчитывать, работать и общаться. По данным Internet Live Stats, на август 2020 года это почти 1,8 миллиарда веб-сайтов. Таким образом, разнообразие веб-сайтов требует все больше и больше различных дизайнерских подходов и решений. Тем не менее, какими бы разнообразными ни были веб-сайты, есть несколько основных страниц, типичных для большинства структур веб-сайтов. В этой статье мы предлагаем вам рассмотреть 16 основных типов веб-страниц, с которыми вы можете встретиться в Интернете.

Веб-страницы для веб-сайта музея Люмен

Домашняя страница

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

Домашняя страница

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

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

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

Дизайн домашней страницы сайта по экотуризму

Домашняя страница Credenately, услуги по найму в сфере здравоохранения

Прочтите о передовых методах проектирования домашних страниц

Страница подачи

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

Страница меню

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

Страница интерактивного меню

Страница поиска

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

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

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

О странице

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

О странице сайта GNO blankets

О странице для сайта компании, оказывающей клининговые услуги

Страница регистрации

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

404 Стр.

404 страницы можно найти на любом веб-сайте. Технически 404 или Not Found — это сообщение об ошибке в коде ответа HTTP (протокол передачи гипертекста): оно отправляется в случае, если пользователь успешно подключился к серверу, но по какой-то причине не может получить запрошенный контент.Это может произойти, например, когда пользователи нажимают ссылку на страницу, которая была удалена, мертва или если сама ссылка не работает; в этой ситуации сервер веб-сайта формирует и отправляет 404 веб-страницы, чтобы сообщить пользователю, что контент не может быть найден.

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

Пользовательская иллюстрация для ошибки 404, созданная для Moonworkers

Дизайн страницы 404 для веб-сайта электронной коммерции

Игривый дизайн страницы 404 для сайта ShipDaddy

Страница блога

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

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

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

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

Рецепты десертов страница блога

Артикул Страница

Эта веб-страница показывает посетителям полную статью в блоге, новостной платформе, образовательном веб-сайте или любом текстовом веб-сайте.На странице статьи представлена ​​конкретная статья, новость или отчет. Крайне важно разработать его в соответствии с типичными схемами отслеживания взгляда, чтобы можно было легко пролистывать большой объем текста. Кроме того, прочная и хорошо продуманная визуальная иерархия помогает посетителям быстро расставлять приоритеты для контента: например, заголовок должен быть самой заметной текстовой частью на странице, а заголовки h2 и h3 должны быть легко заметны. выдающийся. Нередко в конце страницы статьи можно найти блоки связанного контента, которые помогают вовлечь читателя в дальнейшее взаимодействие с сайтом.Еще один важный аспект, который следует учитывать, — это достаточное количество белого пространства, которое разделяет текстовые блоки, что делает их более удобными для сканирования и усвоения. И подумайте об использовании изображений, которые не только проиллюстрируют статью, но и сделают страницу более приятной для глаз, добавят эмоциональной привлекательности, а также облегчат восприятие текста.

Страница статьи для веб-сайта Credenately

Страница статьи с интервью в онлайн-журнале

Портфолио Страница

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

Страница портфолио для личного сайта фотографа

Портфолио модных моделей стр.

Сервисная страница

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

Страница продукта

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

Страница продукта на сайте GNO

Страница продукта на веб-сайте, посвященном безотходной жизни

Взаимодействие со страницей продукта и меню для веб-сайта моно-электронной коммерции в стиле брутализма

Страница тележки

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

Взаимодействие со страницей продукта и страницей корзины для веб-сайта магазина ошибок

Страница статистики

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

Страница панели управления блога с различной статистикой

Контакты Страница

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

Посадочная страница

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

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

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

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

Дизайн целевой страницы для продвижения приложения Vertt

Целевая страница услуги мобильного банкинга

Концепция целевой страницы, предназначенная для презентации и продвижения инновационного зарядного устройства

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

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

Рекомендуемые материалы

Вот подборка статей для тех, кто хотел бы продолжить изучение темы:

Большой путеводитель по различным типам веб-сайтов

Take My Money: практика пользовательского интерфейса в дизайне страницы продукта

Дизайн мобильного интерфейса: 15 основных типов экранов

Большое руководство по типам мобильных приложений

Как сделать веб-интерфейс для сканирования

Лучшие практики для дизайна заголовков веб-сайтов

5 основных типов изображений для веб-контента

Как сделать пользовательский интерфейс читабельным

Основные типы кнопок в пользовательских интерфейсах

9 эффективных советов по визуальной иерархии

---

Добро пожаловать, чтобы увидеть проекты Tubik Studio на Dribbble и Behance

Дизайн веб-страниц

Что такое дизайн?

Проектирование — это процесс создания плана и начала разработки конкретного продукта.После того, как продукт разработан, его дизайн используется для запуска производства. Дизайн часто относится к созданию прототипа продукта. В большинстве случаев значение «дизайн продукта» относится только к внешнему виду продукта, а не к его конструкции, архитектуре и техническим характеристикам.

Дизайн веб-страниц

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

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

Как создать веб-страницу

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

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

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

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

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

8 принципов веб-дизайна, которые будут работать в 2020 году

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

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

Бесплатный курс UX и юзабилити

Карл Гилис

Переходите от принципов к практике. Посмотрите бесплатные курсы по UX и юзабилити.

Вот 8 эффективных принципов веб-дизайна , которые вы должны знать и следовать.

1. Визуальная иерархия

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

Упражнение. Расположите кружки в порядке важности:

Не зная ничего об этих кругах, вы могли легко ранжировать их
. Это визуальная иерархия.

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

Если в меню вашего сайта 10 пунктов, все ли они одинаково важны? Где вы хотите, чтобы пользователь щелкнул? Сделайте важные ссылки более заметными.

Иерархия зависит не только от размера. Amazon делает кнопки призыва к действию «Добавить в корзину» и «Купить сейчас» более заметными, используя цвет:

Какие кнопки бросаются в глаза? Цвет может помочь выделить элементы веб-страницы.

Начните с бизнес-цели

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

Вот пример. Это скриншот, который я сделал с веб-сайта Williams-Sonoma. Они хотят продавать уличную посуду.

Визуальная иерархия необходима для эффективного веб-дизайна.

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

Это визуальная иерархия — вневременной принцип веб-дизайна — хорошо сделана.

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

2. Божественные пропорции

Строчная греческая буква фи используется для золотого сечения.

Золотое сечение — это магическое число 1,618 (φ). Считается, что дизайны, в которых используются пропорции, определяемые золотым сечением, эстетичны.

Тогда есть последовательность Фибоначчи. Каждый член представляет собой сумму двух предыдущих членов: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так далее. Интересно то, что две, казалось бы, не связанные между собой темы дают одно и то же число.

Вот как выглядит золотое сечение:

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

.

Может ли золотое сечение работать в веб-дизайне? Вы делаете ставку. Вот твиттер:

Вот комментарий креативного директора Twitter Дуга Боумена, сделанный много лет назад. Выбор дизайна был выбран не случайно:

Итак, если ширина вашего макета составляет 960 пикселей, разделите его на 1,618 (= 593 пикселей). Вы знаете, что ширина области содержимого должна быть 593 пикселей, а ширина боковой панели — 367 пикселей. Если высота веб-сайта составляет 760 пикселей, вы можете разделить его на блоки по 470 и 290 пикселей (760/1.618 = ~ 470).

Если вы хотите узнать больше, прочтите эту статью о том, как применить золотое сечение к типографике.

3. Закон Хика

Закон Хика гласит, что с каждым дополнительным выбором увеличивается время, необходимое для принятия решения.

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

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

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

С фильтрами справляются хорошо:

4.Закон Фитта

Закон

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

Spotify упрощает нажатие «Play», чем другие кнопки:

В приложении для мобильного телефона они также помещают кнопку воспроизведения в удобное для нажатия место.

Больше не всегда лучше.Кнопка, занимающая половину экрана, — не лучшая идея, и нам не нужны математические исследования, чтобы сказать нам об этом. Даже в этом случае закон Фитта представляет собой двоичный логарифм. Это означает, что прогнозируемые результаты использования объекта проходят по кривой, а не по прямой.

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

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

Давайте представим, что есть форма, которую вы хотите, чтобы люди заполнили. В конце формы есть две кнопки: «Отправить» и «Сбросить» (очистить поля).

99,9999% хотят нажать «Отправить». Следовательно, кнопка должна быть намного больше, чем «сброс».

5. Правило третей

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

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

Ниже посмотрите, насколько картинка справа интереснее? Это правило третей в действии.

Правило третей — это простой принцип создания изображений.the (Источник изображения)

Использование красивых больших изображений способствует хорошему веб-дизайну. Если ваши изображения более интересны, ваш сайт будет более привлекательным.

6. Законы о гештальт-дизайне

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

Вот что я имею в виду:

Обратите внимание, как вы могли видеть собаку, не обращая внимания на каждое черное пятно, из которого состоит собака? Основоположник гештальтизма Курт Коффка объяснил это так: «Целое существует независимо от частей.”

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

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

1. Закон близости

Люди группируют предметы, которые находятся близко друг к другу в пространстве. Они становятся единым воспринимаемым объектом.

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

Закон близости показывает, как разум естественным образом группирует (или отделяет) предметы в зависимости от их расстояния друг от друга.

Craigslist использует этот закон, чтобы легко понять, какие подкатегории подпадают под категорию «для продажи»:

2. Закон подобия

Мы группируем похожие вещи вместе. Это сходство может проявляться в форме, цвете, оттенке или других качествах.

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

Как это выглядит применительно к веб-дизайну? Mixpanel использует аналогичный дизайн для ссылок на тематические исследования, поэтому мы рассматриваем их как единую группу, каждая из которых усиливает другую:

3. Закон закрытия

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

Без закона замыкания мы бы просто увидели разные линии разной длины. Но закон замыкания объединяет линии в цельные формы.

Использование закона закрытия может сделать логотипы или элементы дизайна более интересными. Хорошим примером является логотип Всемирного фонда дикой природы, который был разработан сэром Питером Скоттом в 1961 году:

4. Закон симметрии

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

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

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

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

5.Закон общей судьбы

Мы склонны воспринимать объекты как линии, движущиеся по пути. Мы группируем вместе объекты, которые имеют одинаковую тенденцию движения и, следовательно, находятся на одном пути.

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

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

6. Закон непрерывности

Люди склонны воспринимать линию как продолжение установленного направления. Когда есть пересечение между объектами (например, линиями), мы склонны воспринимать две линии как две отдельные непрерывные сущности. Стимулы остаются отчетливыми даже при наложении.

Fixel использует это для подключения лиц к BIOS:

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

7. Белое пространство и чистый дизайн

Пустое пространство (также называемое «отрицательным пространством») — это часть веб-страницы, которая остается «пустой». Это пространство между графикой, полями, промежутками, промежутком между столбцами, промежутком между строками текста или визуальными элементами.

Это не просто «пустое пространство» — это важный элемент веб-дизайна. Это позволяет объектам внутри него существовать. Белое пространство — это использование иерархии для информации, типографики, цвета или изображений.

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

Правильное количество белого пространства делает веб-сайт «чистым». Хотя чистый дизайн имеет решающее значение для передачи четкого сообщения, он не означает, что на меньше контента.

Чистый дизайн наилучшим образом использует пространство, в котором он находится. Чтобы создать чистый дизайн сайта, вам нужно знать, как четко общаться, разумно используя пустое пространство.Made.com хорошо использует пустое пространство:

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

Узнайте больше о пустом пространстве и простоте.

8. Бритва Оккама

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

В сообщении об опыте работы с Angelpad команда Pipedrive пишет:

Команда и наставники Angelpad поставили перед нами разные задачи. «У вас слишком много информации на вашей домашней странице» — это то, с чем мы сначала не согласились, но мы счастливы протестировать. И оказалось, что мы действительно ошибались. Мы удалили 80% контента и оставили одну кнопку регистрации и одну ссылку «Узнать больше» на главной странице.Конверсия на регистрацию увеличилась на 300%.

Дело не только в внешнем виде, но и в том, как это работает. Некоторые компании, например 37Signals, превратили «простую» в бизнес-модель. Вот цитата из книги Rework, , написанной основателями Джейсоном Фридом:

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

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

Заключение

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

No related posts.