Оставить комментарий
В статье рассказывается:
- Какое значение имеет правильное оформление сайта?
- Какой функционал выбрать для оформления страниц сайта?
- 3 главных ошибки в оформлении функционала сайта
- Оформление главной страницы в зависимости от направления сайта
- Какие элементы включить в оформление главной страницы любого сайта?
- 7 важных принципов оформления главной страницы сайта
- Еще несколько рекомендаций по оформлению главной страницы сайта
- Чего нельзя делать при оформлении главной страницы сайта?
- Грамотное оформление внутренних страниц сайта
- 12 правил оформления текста сайта
- Гениальное оформление сайта: примеры, которые не оставят вас равнодушным
-
Чек-лист: Как добиваться своих целей в переговорах с клиентамиСкачать бесплатно
На сегодняшний день существует множество сайтов, соревнующихся друг с другом в поисковой выдаче и показателях посещаемости. Интернет-пользователи постоянно нуждаются в новой информации и новых услугах. Огромный поток предложений дает им возможность посещать исключительно те площадки, которые вызывают интерес. Что такое грамотное оформление сайта, и как успешно решить эту задачу, выделив ресурс среди множества конкурентов? Об этом читайте в нашей статье.
Какое значение имеет правильное оформление сайта?
Источник: shutterstock.com
Правильное оформление интернет-сайта предполагает не только красивый визуальный ряд. Одним из обязательных условий является удобная навигация. Лишь при его соблюдении посетитель будет возвращаться и положительно воспринимать ресурс.
А главное — сайт начнет выходить в топ по результатам анализа Яндекс и Google, и, следовательно, при ранжировании в выдаче. Давайте поговорим, от чего зависят такие результаты, и как их достичь.
Главную роль здесь играют поведенческие факторы. Если вы разбираетесь в теме, то, наверняка, знаете о них. Но сейчас хотелось бы рассмотреть моменты, затрагивающие оформление сайта, идеи, которые можно взять на вооружение.
Если на интернет-сайте:
грамотно подана информация;
выделены ключевые элементы статьи;
есть дополнительные тематические ссылки;
цвета не «давят» на глаза;
ярко выделены главные преимущества.
То:
пользователь дольше задержится на сайте;
просмотрит дополнительные страницы;
зарегистрируется;
прокомментирует;
добавит сайт в закладки или социальные сети;
вернется снова.
Соответственно:
Ранжирование сайта в поисковой выдаче лучше.
Поисковые системы уважают интернет-площадку.
Сайт получит еще больше целевых пользователей.
Зная все это, вы начнете больше внимания уделять оформлению сайта. А рекомендации в нашей статье вам обязательно пригодятся.
Какой функционал выбрать для оформления страниц сайта?
Функционал сайта — это разные функции в совокупности, решающие задачи посетителя и необходимые для более удобного просмотра сайта.
Пользователи — это не только простые посетители, но и администраторы, авторы, модераторы и так далее. Им также нужны определенные функции, чтобы удобно работать в административной панели сайта.
Разработчик CMS определяет базовый набор функций. В нем есть все основные возможности, которыми должен располагать каждый сайт.
Источник: shutterstock.com
Для простых пользователей — это:
меню;
сайдбары;
постраничная навигация;
формы обратной связи;
подписка на RSS-ленту;
лента записей;
смайлы;
поиск по сайту и так далее.
Для администраторов и пользователей, имеющих доступ к ресурсу по логину:
возможность зарегистрироваться и войти в административную панель;
удобный текстовый редактор с типовым набором функций (выделение текста, вставка символов, цитат, подзаголовков, ссылок и так далее);
простые настройки профиля (логин, пароль, аватар);
предоставление стандартных видов записей (рубрики, теги, страницы, публикации);
настройка URL;
возможность обновлять и добавлять модули, плагины, темы;
работа с мультимедиа (фото и видео);
определенная базовая статистика по площадке (количество размещенных публикаций, комментариев) и так далее.
В основу расширенного функционала положены разные дополнения, увеличивающие базовые возможности интернет-площадки и CMS. Для расширения чаще всего используют отдельные скрипты, плагины и аддоны.
Для простых пользователей — это:
галерея, слайдеры, аккордеоны, вкладки;
меню и сайдбары с расширенными возможностями;
содержание публикаций;
возможность рассказать друзьям или подписаться в социальных сетях;
расширенные возможности комментирования (можете добавлять фото, видео, подписываться на уведомления и прочее);
система рейтинга постов и комментаторов;
форум, интернет-магазин;
онлайн-чат, калькулятор, счетчик, календарь;
карта сайта;
опросы и викторины;
онлайн-консультант и так далее.
Для администраторов и пользователей, имеющих доступ по логину:
расширенная статистика (объем входящего трафика, его источники, ключевые запросы, нагрузка на ресурс и так далее);
расширенный редактор (добавление шорткодов, таблиц и так далее);
улучшение коммуникаций среди пользователей (календарь событий или работ на сайте, распределение ролей, подписка на уведомления и прочее);
защита сайта (файервол, ограничение роли пользователя, формирование бэкапов и так далее);
редактирование метаданных записей в простом удобном формате (прямо в панели администратора можно указать title, description, данные для микроразметки);
добавление типов записей пользователей и так далее.
Многим может быть непонятно, какой функционал нужно использовать. Все определяется типом вашей интернет-площадки. Если это одностраничный сайт, форму поиска на него устанавливать не надо.
Источник: shutterstock.com
Если у вас интернет-магазин, форум или информационный сайт, то использовать нужно все базовые функции в комплексе. При их отсутствии пользователям неудобно будет работать. А уже после добавления соответствующего функционала вы вписываете дополнительные задачи, которые будет решать ресурс.
Каким должно быть оформление интернет-сайта? Для решения этой задачи рекомендуем применить метод мозгового штурма. Определите сами, какой именно расширенный функционал нужен проекту. Поищите в интернете что-то похожее, и вы увидите, как реализован полезный функционал там.
Также можете поинтересоваться у пользователей, какие функции им были бы полезны. Создайте опрос и разместите его в боковом сайдбаре. Если есть сообщества в социальных медиа, формируйте опросы прямо в них.
Также можете сделать e-mail-рассылку и попросить подписчиков предложить собственные варианты.
Но помните, функции должны быть не только полезными. Они непременно должны использоваться. Если аналитика показывает, что пользователи редко применяют ту или иную функцию, то ее вообще стоит исключить.
После того как вы четко поставили задачи, начинайте разрабатывать функционал. Каким должно быть оформление сайта? Уже готовые CMS (системы управления сайтом) упрощают задачу. Улучшить функционал помогают готовые плагины и модули. Это все облегчает оформление сайта. Шаблоны существуют как платные, так и бесплатные. Например, для WordPress насчитывается свыше 40 тысяч бесплатных плагинов.
При наличии самописанной CMS все намного труднее. Прежде всего, вам придется оплачивать разработку нового функционала. Кроме того, надо будет обращаться именно к разработчику данной CMS.
Проблема в том, что расширение чужой самописанной CMS под силу не каждому специалисту. Поэтому для серьезных проектов советуем пользоваться только готовыми вариантами, такими, как WordPress, Joomla, Drupal и так далее.
Для определенных категорий интернет-площадок есть отдельные специализированные CMS с абсолютно разным функционалом. Например, какие-то позволяют создать серьезный интернет-магазин со всем необходимым набором функций.
При этом другие CMS способны предоставить вам не все возможности. Так, WordPress с плагином WooCommerce больше подходит для разработки простого интернет-магазина.
Этим вариантом можно пользоваться, только если вы серьезно настроены на элементарный (базовый) функционал сайта. Плагином также можете воспользоваться, если точно не станете ничего расширять. Если вы еще думаете над этим, или уже решили, что будете серьезно расширять функционал, то простая CMS с отдельным плагином не подойдет. Лучше пользоваться только готовыми коробочными решениями, к примеру, 1С-Битрикс.
Внимание! Если основной сайт вы хотите дополнить интернет-магазином, форумом, социальной сетью, делайте все это самостоятельными проектами.
То есть, ставьте плагины или CMS на отдельные домены или поддомены, чтобы обеспечить безопасность. Ведь даже простые форумы или интернет-магазины обладают широким функционалом, что создает риск взлома. В связи с этим подобные проекты всегда следует изолировать друг от друга.
3 главных ошибки в оформлении функционала сайта
Несовместимость функций.
Проблемы с поиском на сайте.
Отслеживание ошибок в веб-аналитике.
Занимаясь оформлением сайта, помните, любой полезный функционал может работать некорректно. Часто случается так, что в одной части площадки что-то оптимизировали, в другом случился сбой.
Это сразу может быть даже незаметно и непонятно. Поэтому, внедрив новый функционал, всегда анализируйте удобство пользования сайтом. Проверяйте, все ли работает бесперебойно.
Например, вы установили или обновили модуль, защищающий от спама. Но из-за конфликта скриптов у пользователей пропала возможность комментирования.
Или случается так, что после обновления отдельных модулей и плагинов десктопная версия сайта работает корректно. Но в мобильной версии случаются перебои, и даже корзина может барахлить. В результате ваши деньги уходят!
Непременно оснащайте сайт только теми функциями, которые у вас работают. Если где-то случаются сбои, некорректные действия, от такой функции лучше избавиться.
Случаются и неочевидные ошибки, возникающие в нестандартных ситуациях. Рекомендуем постоянно следить за тем, какие функции применяют пользователи. Также важно анализировать, есть ли разница в конверсии среди тех, кто использовал этот функционал, а кто нет.
Отслеживайте изменение динамики конверсии, чтобы сразу выявлять возможные ошибки.
Например, у использовавших поиск на сайте показатель конверсии вдвое был ниже, чем у тех, кто не применял данную функцию. Это означает, что с поиском какие-то проблемы.
Очень часто бывает так, что человек попадает на сайт с неработающим функционалом. При этом на данном сайте представлен нужный ему продукт. Пользователь хочет найти его через поиск, но ничего не получается.
Допустим, ищет продукт западного производителя и набирает «багажник Монблан». На самом деле это слово пишется так «MontBlanc». Человек набрал запрос, как сумел, но поиск не сработал, и не удалось ничего найти.
В случае неудачного поиска пользователь ведь не будет звонить производителю и интересоваться продуктом. Он просто покинет сайт. Также пользователи могут искать товары, применяя жаргонизмы или особые термины, принятые в вашей целевой аудитории. Возьмем, например, запрос «кран Ивановец». Поисковая система ничего не находит.
Пользователь не находит продукт на сайте, но он есть. Просто называется иначе, и поиск не видит его.
Если функция поиска работает некорректно, воспользуйтесь поиском Яндекса (он сработает лучше).
Если на сайте всплывают сообщения об ошибках (при неправильном введении пользователем данных, номера телефона не в том формате, отсутствия информации в том или ином поле и так далее), непременно отражайте это в веб-аналитике.
Наверняка, вам знакома ситуация, когда при наборе каких-либо данных вы получаете сообщение об ошибке в виде неверного формата введенной информации. Почти никто не обращает внимания на то, какой процент посетителей видит эти сообщения об ошибках.
Необходимо настроить аналитику для отслеживания. Допустим, нужно снять эту проверку или придумать иное название этому полю, или еще как-то дать пользователям понять, что именно нужно вводить.
При совершении пользователем какого-либо ошибочного действия вы говорите ему, что так делать нельзя, и также отражаете это в веб-аналитике. Современные аналитические системы позволяют любые явления (будь то всплытие какого-то окна и нажатие не той кнопки) прописывать как отдельную цель. Иными словами, вы должны знать об этих событиях.
Выбирайте только качественные продукты. Например, одна и та же функция может быть реализована при помощи разных скриптов и плагинов. Но сложность в том, что такие дополнения могут работать по-разному и нагружать сайт. Поэтому всегда анализируйте свою площадку.
Оформление главной страницы в зависимости от направления сайта
Оформление главной страницы определяется направленностью сайта (реализация продукции, оказание услуг, раскрутка бренда, блог, информационный контент и т. д.). Следовательно, главные страницы существуют разные. Остановимся на основных видах:
Главная страница интернет-магазина
Источник: shutterstock.com
Оформление сайта интернет-магазина обычно предполагает наличие свыше 10 страниц и сложной структуры.
Если главная страница оформлена правильно, то включает в себя такие информационные блоки:
каталог продукции (где товары можно фильтровать по цене, бренду, материалу, сезону и прочим параметрам);
сами продукты (как правило, представляются ТОП-продукты или ТОП-объявления по несколько представителей из каждого блока);
акции (скидки, товар с уценкой, несколько изделий по цене одного и так далее);
контакты для заказа и покупки (ссылка на бланк заказа и телефонные номера);
адрес (как правило, указывают адрес главного офиса).
Такие сайты отличаются тем, что здесь есть программные модули, призванные автоматизировать воронку продаж. Полезно также будет дополнить главную страницу интернет-магазина услугой «Помощь специалиста» и «Задайте вопрос».
Главная страница сайта услуг
Источник: shutterstock.com
Второе место по популярности занимают сайты услуг. Основная их задача — презентовать список услуг и всевозможные преимущества продавца.
На главной странице обязательно размещают следующие разделы:
каталог услуг с перелинковкой на страницы, где о них рассказано подробнее (при наличии одной услуги ее необходимо как можно подробнее описывать на основной странице);
прайс (самые выгодные цены и предложения размещены на главной, а полной перечень расценок на услуги может быть приведен на другой странице, куда пользователь может попасть по кнопке «Прайс»);
портфолио (фото работ продавца всегда вызывают лояльность потенциальных клиентов);
преимущества (ваша задача при оформлении сайта — донести до пользователя, что он не найдет фирму лучше. Здесь можете указать сроки выполнения работ, применение качественного уникального оборудования, профессиональный уровень работников, их фото, образование и так далее);
адрес (необходимо обозначить адрес главного офиса, поскольку фирма без офиса способна вызывать недоверие у клиентов).
Помимо этого, многочисленные сайты выделяют на основной странице «Применяемые инструменты» или «В работе мы пользуемся такими-то инструментами». Допустим, если вы режете металл, то указываете марку станков, с какой мощностью и скоростью они работают и прочие параметры.
Главная страница сайта продукта
Источник: shutterstock.com
Рассмотрим создание сайта, оформление, посвященного отдельному товару или услуге. Каким он должен быть?
Цель такого интернет-ресурса — заинтересовать клиентов, подтолкнуть их к целевому действию: сделать заказ, звонок, заполнить бланк с контактной информацией.
На главной странице такого сайта должны присутствовать следующие информационные разделы:
подробное описание товара;
информация о компании (если сайт товара представляет собой самостоятельный проект полноценного магазина, необходимо сослаться на главную площадку);
прайс основного сайта;
контактная информация;
четко выделенный призыв к действию «Купить» или «Заказать»;
несколько фото товара;
видеообзор продукта;
отзывы о продукции;
акции.
Какие элементы включить в оформление главной страницы любого сайта?
Если оценивать все с позиции веб-разработки, то на основной странице должны присутствовать определенные элементы (на большинстве сайтов их нужно применять обязательно, однако с учетом сферы деятельности и вида сайта оформление главной страницы может быть несколько иным).
Шапка сайта (или хедер).Самый верхний элемент, где расположен логотип и наименование организации (справа вверху). В этой части указывают часы работы, номера телефонов компании, кнопку обратной связи, e-mail-адрес, кнопки социальных сетей — все определяется вашими целями.
Меню.Горизонтальное, вертикальное, комбинированное — меню может быть разным. Главное, чтобы оно было понятным. Человек должен сразу представлять, как перейти к другим разделам. Сегодня разработчики часто прячут меню под значком-гамбургером или в боковой панели.
Баннер или слайдер.Здесь размещают фото работ, рассказывают об услугах или преимуществах сотрудничества с организацией. Слайдер предназначен для привлечения внимания покупателя.
Блоки контента. Обычно этоодин или несколько блоков. На главной странице размещают текст, где описано, что это за интернет-площадка, что на ней представлено. Кроме того, здесь размещают УТП, примеры работ, список услуг, фото работы или команды.
Виджеты и кнопки социальных сетей.Виджет покажет, насколько активна ваша группа в социальной сети, позволит перейти к нему и подписаться. С помощью кнопок вы также можете перенаправлять пользователя на официальные страницы.
Призыв к действию или форма обратной связи. Это дает пользователю возможность сразу выйти с вами на связь. Подобный призыв к действию должен быть на всех страницах сайта, чтобы направлять клиента туда, куда вам нужно.
Подвал сайта, или футер.Заключительный раздел страницы, чаще всего с полезными ссылками (к примеру, на пользовательское соглашение), текстовым контентом, нередко — картой проезда и контактной информацией, филиалами компании и так далее.
Всегда важно помнить: красивое оформление сайта не должно идти в ущерб его функциональности. Если пользователи не будут понимать, как использовать многофункциональное меню, лучше остановитесь на классическом варианте.
При оформлении сайта обязательно размещайте все эти элементы. Учитывайте, прежде всего, свои цели. В каждом элементе должно быть что-то полезное.
Некоторые составляющие могут оказаться ненужными. Или, напротив, вы захотите что-то дополнить от себя. Для одного сайта достаточно минимум разделов, для других элементов должно быть максимально много, чтобы он вызывал доверие. Все определяется сферой деятельности и товаром, который вы предлагаете.
7 важных принципов оформления главной страницы сайта
Потенциальный покупатель формирует первое впечатление о вас по главной странице. Именно поэтому ее оформлению стоит уделить особое внимание. Кроме того, именно главная страница служит своего рода навигатором для клиента, помогает ему найти нужную ему информацию. Помимо этого, главная страница должна иметь определенный базовый функционал, например, обеспечивать возможность регистрироваться и входить в учетную запись, заказывать обратный звонок, быстро покупать топ-продукт, подписываться на рассылку и прочее.
У безупречной главной страницы следующие характеристики:
Первое впечатление/визитная карточка.
Резонанс с целевой аудиторией.
Социальные доказательства.
Привлекающий внимание заголовок.
Сосредоточен на удобстве пользователя.
Подает пример остальным.
Не нагроможден синтаксическими конструкциями, емок и информативен.
Отражает конкурентные преимущества (выгоду для клиента), а не рассказывает, какая компания замечательная.
Выглядит как конкретный план — предложение, в котором указаны реальные сроки.
Внушает доверие пользователю на уровне подсознания, что само по себе продающий триггер.
Напрямую или косвенно напоминает об ограниченности времени действия предложения/количества товара.
Интересно составлен: в нем есть переформулировки, цепляющие прилагательные, глаголы, побуждающие к действию.
Провоцирует, интригует, позволяет трактовать себя по-новому, неожиданно.
Удобство пользования.
Главная страница должна содержать призыв к действию.
Должна освещать актуальные проблемы пользователя.
Оформление главной страницы должно четко показывать, кто вы, что предлагаете клиенту, какие действия он может здесь выполнить. Если вы представитель известной торговой марки, например, Coca-Cola, то можете и не писать, кто вы и чем занимаетесь. Но большая часть организаций должна об этом рассказывать, чтобы каждый пользователь понимал, где он находится. Если клиенты в первые несколько секунд не будут понимать, кто вы, и что предлагаете, то уйдут с сайта.
На главной странице вы должны общаться со своими покупателями на их языке. При оформлении сайта опирайтесь на удачные примеры успешных компаний, которые избегают канцеляризмов и корпоративной лексики, концентрируясь на главном.
Польза для общества — это мерка для оценки торгового предложения.
Изначально большинство пользователей настроены скептически. Этому способствуют негативные отзывы на просторах интернета, и неоднократно видевший их человек вряд ли сам отработает свои возражения в отношении вас. Если будете молчать и не приводить социальные доказательства, то лишь подтвердите его страхи, связанные с отсутствием гарантий и безопасностью. Главная страница как раз и предназначена для отработки возражений клиента, опередив их появление. Убеждайте пользователей в том, что сотрудничать с вами выгодно и безопасно.
Сила социального подтверждения очень сильно воздействует на аудиторию. Люди привыкли опираться на мнение большинства, а потому рациональности собственного выбора не придают важного значения.
В качестве социальных доказательств приводят партнерства и упоминания об известных интернет-площадках. Рекомендуется соблюдать лаконичное оформление сайта. Правила здесь именно такие:
Можете использовать анимированные набегающие числа, статистику: проектов, довольных покупателей, коэффициент удержания и другие данные.
Aitoc.com – качественно оформленные social-prouf всегда кстати.
Цепляющий заголовок вызывает у посетителя интерес, стимулирует остановиться и получить больше информации.
Качественный заголовок:
Некачественный заголовок:
- Не стимулирует читателя узнать больше.
- Не приносит быстрой и качественной конверсии.
Есть ли смысл перекладывать на заголовок решение задач, снижающих его эффективность? Уточнять УТП можно в подзаголовке, который используется в паре и усиливает действие на пользователя.
Качественный заголовок состоит из 6 слов (3+3): в поисковой выдаче при беглом просмотре затрагиваются 3 слова (с начала или конца). Оптимальная длина Title — от 57 до 59 знаков.
Эффективный заголовок обладает следующими характеристиками:
Что можно сказать о заголовке, который не цепляет? Он банален, в нем много пустых слов и малозначимых фраз (так называемые стоп-слова), шаблонных выражений, обобщений, он не раскрывает выгоду для клиента.
Разработка, оформление сайта — процесс, в котором особое внимание необходимо уделять дизайну. Все варианты дизайна должны быть удобными, чтобы пользователь мог ориентироваться на них, не отвлекаясь на «кричащие» элементы такие, как флэш-баннеры, анимации, всплывающие окна или очень сложные объекты. В современном мире, где практически каждый пользуется гаджетами, сайты непременно нужно оптимизировать под мобильные устройства.
На главной странице необходимо разместить ценное предложение, отвечающее требованиям и проблемам клиента. Если информация на первой странице изложена четко, и человек понимает, что вы знаете его проблемы, то автоматически хочет совершить целевое действие. Удержать его внимание помогает удобная навигация по сайту.
Заполнить поля формы, совершить непосредственно СТА-действие — стрессовая ситуация для клиента. Справиться с ней он захочет лишь в том случае, если предложение его заинтересует, а не благодаря кнопкам «Купить» или «Оформить подписку». Не будьте категоричны и немногословны, предлагая свой товар или услугу: «Узнать больше», «Посмотреть презентацию». Краткое описание точно не повредит, а человеку поможет лучше сориентироваться. Сайт перестанет быть веб-каталогом, превращаясь в продающую и лидогенерирующую площадку.
При оформлении сайта помните, главная страница предназначена для удержания пользователей и проведения их до конца к воронке продаж. СТА-элемент ориентирует к дальнейшим действиям, чтобы клиенты не чувствовали потрясений и не терялись. Что еще важнее, СТА-элемент делает главную страницу сайта продающей и привлекательной для потенциальных покупателей.
Главные страницы, которые можно привести в пример, не всегда статичны. Некоторые, например, WhiteHouse.gov, все время меняются в зависимости от потребностей, проблем и вопросов клиентов.
Тщательно продуманное оформление сайта — гарантия успешного выстраивания доверительных отношений аудитории с компанией. Правильный подход к оформлению позволяет качественно настроить связь с целевой аудиторией и обеспечивает продвижение в воронке конверсии. Правильно оформленные главные страницы эффективно размещают СТА-элементы, пробелы, цвета, шрифты и другие вспомогательные детали.
Еще несколько рекомендаций по оформлению главной страницы сайта
Структура.
Изображения.
Цвета и фон.
Кнопки.
Текст.
Основными характеристиками главной страницы должна быть простота и отсутствие лишних элементов. Не грузите посетителей обилием информации и визуального контента. Лучше сделайте акцент на своем профессионализме и организованности, аккуратно оформив сайт.
Определитесь со структурой. Она должна быть легкой и простой в использовании. Самый важный контент разместите в верхней части страницы, куда будет смотреть пользователь. Настоятельно советуем использовать 3 элемента: логотип, наименование бренда (или ваше имя) и род занятий (тип оказываемых вами услуг).
Вот как выглядит элементарная структура сайта небольшого магазина:
То есть, вы получаете прекрасную структуру для интернет-магазина, где четко разложены по своим местам все страницы на сайте (статьи, товары, форма доставки).
На вашей главной странице не должно быть слишком много картинок, иконок, клипартов, баннеров и текста. Не перегружайте ее. Пользователь не должен тратить много времени на поиск нужных сведений.
Качественный снимок лучше страницы текста. Особенно, если мы говорим о главной странице. Фото расскажет вашим клиентам о вас и вашем бизнесе. Если качественными снимками вы не располагаете, можете выбрать что-то на сайте Pinterest, где собраны исключительно профессиональные фото. Еще вариант — использовать фотосток.
Высокое качество фото — обязательное условие при оформлении сайта. Именно они стимулируют посетителей узнать о компании больше. Ничто не говорит о непрофессионализме так красноречиво, чем плохие фотографии.
Совершенно необязательно выкладывать все снимки, которые у вас есть. Хватит нескольких качественных снимков.
Элементарные, но при этом важные детали задают тональность главной странице и всему сайту в целом. С учетом этого нужно тщательно подумать над их выбором. Благодаря качественному редактору сайта решить задачу проще. Вы сможете выбрать подходящий фон и цветовую палитру, опробовать каждую и оценить, что больше подходит для вашего сайта, или сформировать свое цветовое сочетание. Также можете загрузить свое изображение и сделать его фоном для сайта.
Пользуйтесь цветовой схемой и фоном, отлично работающими в тандеме, для укрепления своего бренда.
Цветовая психология — очень интересное и востребованное сегодня направление. Зная ее азы, вы будете уверены, что цвета на сайте отражают бренд.
Немного остановимся на самых распространенных цветовых ассоциациях:
Запомните эти цветовые ассоциации и то, как бренды с их помощью могут выражать себя:
- Зеленый символизирует природу. Белый ассоциируется с простотой и чистотой. Оранжевые кнопки прекрасно дополняют это сочетание, мотивируя пользователя к целевому действию.
- Желтый и белый фон в сочетании со светло-серым меню выглядит стильно и изысканно, передавая позитивную энергетику.
- Синий — надежность и уверенность. Эту ассоциацию часто используют сайты технологической направленности.
- Фон бежевого цвета и пастельные тона создают очень приятное сочетание на уровне подсознания, что довольно привлекательно для пользователей.
Рекомендация. В идеале цвета должны хорошо сочетаться друг с другом, соответствовать структуре и иерархии контента на сайте. Дизайнер цветовых сочетаний Paletton – бесплатный сайт, на котором можете легко выбрать палитру к выбранному вами основному цвету.
Не используйте очень много разных цветов, а также фон, который перетягивал бы на себя внимание с главных изображений и текста.
Не на каждой главной странице нужно предусматривать кнопки при оформлении сайта. Но если вы планируете их применять, делайте это качественно. Кнопки, призывающие к действию, ведут к другим страницам, сайтам, промоакциям, каталогам с продукцией. Если ваша цель — подвести посетителей к тому, чтобы они кликнули по кнопке и совершили переход, то нужно научиться вызывать у них этот стимул.
На кнопке должен быть короткий и четкий текст. Постарайтесь выразить свою мысль в двух словах.
При оформлении сайта старайтесь делать призыв к действию заметным. Если хотите, чтобы посетители нажимали на кнопки, тщательно продумайте их расположение на странице.
Оформление сайта предполагает создание текста. Главное здесь — сделать так, чтобы посетители сразу понимали, в чем суть вашей площадки. Но помните, что более подробно рассказывать о себе вы сможете на других страницах, а потому не пишите целую поэму на первой. Например, нет смысла подробно расписывать историю компании на основной странице, если есть глава «О нас». Не увлекайтесь текстом — иначе ваши посетители устанут читать.
Текст на основной странице нужно постоянно обновлять. Так посетители будут знать, что сведения актуальны и достоверны.
Не переборщите с текстом при оформлении сайта. Никому не нужна площадка для долгого чтения. Цените время своих посетителей и не перегружайте их ненужной или повторяющейся информацией.
Чего нельзя делать при оформлении главной страницы сайта?
Стремясь улучшить основную страницу на сайте, действуйте аккуратно и умеренно. В противном случае получите обратный эффект — не поток новых клиентов, а больше отказов.
Источник: shutterstock.com
Что отталкивает пользователей, снижает их активность и негативно сказывается на позициях сайта в поисковой выдаче?
При оформлении первой страницы не используйте следующие элементы:
Музыка и посторонние звуки. Резко звучащая музыка, громкие неожиданные звуки и призывы к покупке стимулируют клиентов лишь к одному — как можно скорее найти кнопку и отключить назойливый аудиоряд. Как правило, это кнопка для выхода с сайта.
Назойливая реклама посторонних сайтов. Во-первых, рекламные баннеры серьезно снижают доверие к интернет-ресурсу. Кроме того, ваш потенциальный клиент забывает о конечном целевом действии — купить/заказать продукт у вас на сайте. Такая реклама может отпугнуть вашего покупателя и заставить его покинуть ресурс.
Требование обязательно зарегистрироваться. Никому не интересно тратить ценное время на регистрацию. Исключение: регистрация для получения серьезной скидки.
Грамматические ошибки. Если на основной странице есть опечатки, ошибки, нарушена пунктуация, посетитель вряд ли будет доверять вам.
Маленькие шрифты или очень сильный контраст. Клиенту должно быть визуально приятно смотреть на сайт. Пусть его глаз не режет высокий контраст или мелкий шрифт. Никто не покинет сайт только по этой причине. Но при наличии прочих недостатков в оформлении и форматировании вы вполне можете потерять клиента.
Длительная загрузка страницы. Красивое оформление сайта картинками, фото, графикой — лучшее решение. Но помните: прежде чем разместить графику, вес сайта нужно уменьшить, чтобы он легче загружался. Пользователи не будут ждать полной загрузки страницы. Как бы красива она ни была, ее никто не заметит.
Ненужные элементы в виде часов, облаков тегов, виджетов погоды и прочих подобных вариантов в оформлении перегружают основную страницу, отвлекая от основного содержания. Не используйте движущиеся, мигающие элементы, анимацию, бегущие строки. Периферическое зрение у людей развито лучше, чем центральное, а потому подобные детали отвлекают внимание. Воспринимать другие информационные разделы становится сложнее.
Отсутствие адаптивной верстки. Все больше пользователей посещают сайты через планшеты и смартфоны. Если вы не адаптируете площадку к разным устройствам, то упустите огромное количество потенциальных покупателей.
Оформление главной страницы — это процедура почти бесконечная. Если вам кажется, что достаточно один раз приложить максимум усилий и забыть об интернет-площадке, это не так. Главную страницу нужно все время развивать и улучшать. Чтобы вы были востребованы, и покупатели не уходили, будьте в курсе тенденций всех важных направлений. Мы имеем в виду и копирайтинг, и юзабилити, и SEO. Пользуйтесь Вебвизором, чтобы лучше понимать, чего хочет целевая аудитория, какие у нее проблемы. Оценивайте популярность разных инфоблоков, используя инструменты Яндекс.Метрики, удаляйте некликабельные элементы, заменяя их на другие материалы.
Грамотное оформление внутренних страниц сайта
Итак, что такое правильное оформление внутренних страниц сайта? Чаще всего они целевые, то есть, там оформляют заказы, переходят по рекламным объявлениям или попадают на партнерские сайты. Развивать их в ваших интересах, поскольку чем грамотнее оформлена страница, тем больше вы зарабатываете.
В главной части страницы (в центре) необходимо размещать тот контент, который нужен пользователю (статью, видеоролик, фото и описание продукта).
Второе место по степени важности отдано рекламе (чтобы по ней кликали) или кнопке, или форме для заказа. Такой элемент нужен для удержания клиента. Пусть это немного навязчиво, но если действовать умеренно (использовать рекламу дозировано и не делать очень большую кнопку/форму), все будет хорошо. Подобные элементы размещают в конце статьи, справа или слева, максимально высоко.
Третье место по важности у навигации по сайту. Здесь мы говорим о меню, похожих товарах/статьях и прочих полезных интересных ссылках. Эти ссылки вбиваем в оставшееся пустое место, но важно не переборщить.
Обратите внимание на комментарии и отзывы о продукте/статье. Люди сейчас подкованы и знают, что нужно читать не только поданный автором материал, но и знакомиться с отзывами других людей. Это полезно и зачастую даже интереснее основного материала. Поэтому подумайте над дизайном комментариев. Основными характеристиками должны стать привлекательный вид, лаконичность и удобство чтения.
12 правил оформления текста сайта
Основной элемент вашего сайта — информация. Именно из-за нее пользователи заходят к вам. От того, насколько она качественна, зависит численность аудитории. Платное или бесплатное оформление сайта — не имеет значения по какому пути вы пошли. Чтобы люди легко воспринимали информацию, она должна быть качественной и оформленной должным образом.
-
Оптимальная ширина текста
-
Короткие предложения.
-
Короткие абзацы.
-
Контраст текста.
-
Выравнивание текста.
-
Правильный шрифт.
Шрифты без засечек (sans-serif).
Шрифты с засечками (serif).
Машинописные (monospace).
Декоративные (fantasy).
Курсивные (cursive).
Arial.
Verdana.
Tahoma.
Trebuchet MS.
Geneva.
-
Размер шрифта.
-
Выделение текста.
-
Заголовки и подзаголовки.
-
Использование перечней (вопросов, преимуществ).
Отражают в себе ключевые моменты всего текста.
Быстро и легко читаются.
Заметные и запоминающиеся.
Не перегружают пользователя.
-
Заметные ссылки.
-
Границы и отступы.
Чтение очень длинных строк отнимает силы. Это неудобно, человек сбивается, теряет смысл, глаза больше напрягаются. Те же чувства мы испытываем, когда текст очень узкий. Такой формат воспринимается как некая инструкция, на чтение которой не хочется тратить время. Оптимальная ширина текста — от 500 до 600 пикселей.
Всегда используйте короткие предложения, которые легко читать. Как в беседе, где мы используем короткие фразы, а не конструкции из 30 слов. Нам сложно их составлять, а собеседникам — слушать. Как правило, это 5-10 слов. Когда мы используем короткие предложения, то создаем удобный для читателя текст. Учитывайте это при оформлении сайта, заботьтесь о посетителях.
Большие абзацы пользователям читать неудобно. Это сразу формирует у них негативное восприятие. Они заходят в интернет для получения необходимой им информации. Крупные абзацы визуально настраивают на длительное чтение.
Абзацы должны проскакивать один за другим, легко. Если в тексте больше 5 абзацев, много строк, и он не художественный, а технический, легко можно упустить суть изложения. Потребуется перечитывать, а это пользователи не любят.
В самых удобных абзацах 2-3 строчки и 1-3 коротких предложения.
Если у вашего текста резкий цветовой контраст, его очень сложно читать. При оформлении сайта помните, что текст должен быть легким в визуальном восприятии. Это очень важно!
Самый приятный контраст — это черно-белый. То есть, черный текст на белом фоне.
Текст, расположенный в центре страницы или выравненный по правому краю, пользователи воспринимают хуже. В книгах текст всегда выровнен по двум сторонам, и это лучший вариант. В крайнем случае, ровняйте его по левому краю.
Шрифты бывают нескольких типов:
Шрифты с засечками наиболее удобны для чтения в газетах и книгах. Но на мониторах более удобны для зрительного восприятия и читаются проще всего шрифты без засечек.
Вот какие виды шрифтов без засечек мы советуем использовать при оформлении сайта:
Реже можно пользоваться шрифтом Georgia (но он с засечками). Результаты тестов показывают, что самый легкочитаемый шрифт — Verdana.
Если вы пользуетесь шрифтом очень большого размера, помните, при чтении он неудобен. Маленький шрифт напрягает и давит на глаза. И первый, и второй вариант для чтения неприемлемы. Средний размер — вот оптимальное решение. Рекомендуем использовать 12-14 размеры, иногда подходит 15. Все определяется самим шрифтом. При этом некоторые приходится делать больше.
При оформлении сайта что-либо в тексте выделяют намеренно (жирным шрифтом, курсивом или подчеркиванием) для привлечения внимания пользователей. Если вы выделите жирным весь текст, или сделаете очень много различных выделений, пользователь устанет его читать и покинет сайт.
Выделяйте лишь ту часть текста, которая действительно достойна внимания, чтобы читатель обращал на нее внимание.
Оформление текстового содержания сайта — процесс, при котором очень важное значение следует придавать заголовку. Именно от него зависит, будет ли пользователь читать весь текст. Интересный, цепляющий заголовок, обещающий помочь пользователю, может решить его проблему.
Также рекомендуем выделять каждый участок текста подзаголовком, чтобы привлекать внимание читателя. Для выделения заголовков и подзаголовков используйте крупный шрифт, чтобы отделить от основного текста.
Преимущества использования:
В статьях пользуйтесь списками и перечислениями. Клиенты любят читать перечисления. Так им проще воспринимать информацию, и текст не кажется однообразным.
Цветовое оформление ссылок в идеале должно гармонировать с дизайном сайта. Не копируйте сайт у конкурентов. Необходимо, чтобы ссылки были заметными. Однако не стоит делать на них основной акцент. Ваши пользователи должны интуитивно понимать, что тот или иной фрагмент текста — ссылка, без подсказок с вашей стороны.
Ваш текст должен быть четко отделен от сайдбара, шапки сайта и подвала. Саму контекстную часть необходимо делить на разделы. Дизайн должен быть таким, чтобы начало новой статьи отлично просматривалось, и было ясно, что это новый материал. Пользователь, попадая на сайт, должен сразу понимать, где на сайте основная информация, и легко зрительно отделять один материал от другого.
Гениальное оформление сайта: примеры, которые не оставят вас равнодушным
Airbnb
Это лучшее оформление сайта, поскольку:
Прямо в центре главной страницы находится форма поиска. В ней видно место назначения и дата прибытия/отбытия, которую большая часть пользователей ищет. Так посетители понимают, что делать дальше.
Форма поиска «умная»: она в автоматическом режиме отображает последний просмотренный вариант посетителя, если он зарегистрирован на сайте.
Главный призыв к действию («Поиск») контрастирует с фоном и выделяется. Прекрасное оформление сайта компании.
Whitehouse.gov
Создать сайт — интернет-лицо всей нации — довольно трудно. Whitehouse.gov все время меняется, отражая актуальные трудности и приоритетные вопросы. Для достижения высококлассного дизайна домашней страницы нужно постоянно тестировать и оптимизировать ресурс.
Особенно радует в Whitehouse.gov то, что он отличается от большинства сайтов, имеющих отношение к правительству. У него красивый чистый дизайн и он помогает развивать сообщество.
Предусмотрена удобная система навигации. Найти то, что вам нужно, не составляет труда. Если не можете сразу найти то, что хотите, всегда можете воспользоваться удобным полем для поиска.
4 Rivers Smokehouse
Сочетание большой картинки и заголовка «ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия» выглядит очень привлекательно. Очень грамотное оформление сайта организации.
Прокрутив параллакс, пользователь увидит краткую презентацию услуг, меню и покажет людей, которые отлично проводят свое время. Прекрасный вариант использования популярного дизайнерского решения.
Jill Konrath
Простое оформление сайта, подводящее пользователя прямо к сути. Заголовок и подзаголовок сразу же дают понять род деятельности Джилл Конрэт и как она может посодействовать в развитии вашего бизнеса.
Предоставляется простой доступ к аналитическим материалам автора. Это необходимо для создания ее правильного имиджа как главного докладчика.
Простая подписка на рассылку на новости и установление контакта — два ее главных призыва к действию.
Состоит из логотипов каналов новостей и отзывов как социальных доказательств. Оформление веб-сайта выполнено по всем правилам.
Aweber: пример хорошей текстовой страницы
Страница с текстом и сильным заголовком «7 причин подписаться на рассылку бесплатных рекомендаций по e-mail-маркетингу» сообщает пользователю о многочисленных бонусах и предоставляет общественные доказательства.
Благодаря этой странице процент подписок на рассылку увеличился на 321 %.
