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

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

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. Сайт юридической компании с хорошо проработанным дизайном главной страницы. Также отлично выдержана верстка страницы по экранам. Хорошо составлен контента, но недостаток главной в том, что на ней нет заголовка и УТП.

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

Правила оформления сайтов — Лукьяненко

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

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

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

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

Расположение текста.

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

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

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

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

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

Акцентирование внимания пользователя на ключевых моментах статьи.

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

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

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

Графический материал

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

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

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

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

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

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

Заголовки и мета

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

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

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

Тег
«Title» — название мы уже рассмотрели. Тег «description» располагает в
себе краткое описание информации, представленной на странице, с его
помощью кратко характеризуется содержание. «Description» вмещает в себя
не более двухсот символов, которые отображаются рядом с названием сайта в
поисковых системах. Стоит отметить, что далеко не все поисковые машины
отображают эти данные, некоторые их просто игнорируют. Но все равно,
стоит позаботиться о наполнении «description», ведь с ним работает такой
поисковик как Яндекс, который используют более половины всех
отечественных пользователей сети.

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

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

Использование тегов выделения текста и форматирования.

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

Для
выделения текста можно использовать такие парные теги, как «I» —
курсив, «B» — жирный шрифт, «big»- увеличение размера шрифта, «small»-
уменьшение размера шрифта, «tt»- тип печатная машинка и так далее.
Область, которую необходимо выделить, придав ей свойства этих тегов,
помещают в контейнер из двух парных тегов.

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

Ключевые слова

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

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

Как правильно оформлять свой сайт ?

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

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

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

Но, вернемся в дизайну сайтов. Что нужно, чтобы привлечь посетителей на Ваш сайт? Давайте порассуждаем:

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

Как правильно оформить сайт-визитку?

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

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

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

Не повторяйте ошибки

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

Чего быть НЕ должно:

• Большого количества страниц. Это визитка, а не монография.

• Элементов, не выполняющих полезные функции. Зачем на визитке календарь или виджет погоды?

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

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

Просто и привлекательно

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

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

• Сделайте на сайте несколько разделов – О нас, Услуги, Преимущества, Цены, Контакты. Необязательно создавать для каждого раздела отдельную страницу. Визитку можно сделать одностраничной: пользователь будет прокручивать страницу вниз, открывая новые разделы;

• Обязательно добавьте фотографии. Проведите строгий отбор материалов – только лучшее, показательное, привлекательное, ничего лишнего;

• Убедитесь, что контактные данные указаны так, что посетителям не придется их искать;

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

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

Источник: uGuide.ru

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

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

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

Зачем нужна домашняя страница

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

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

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

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

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

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

• о компании
• чем она занимается
• что предлагает
• почему стоит купить именно здесь
• куда двигаться дальше

О компании

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

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

hostiq.ua

Чем занимается компания

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

zagariya-design.com.ua

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

Что вы предлагаете

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

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

nutsking.com.ua

Пробуйте качественный хостинг с рейтингом 9,7 из 10 баллов
на основе 1900 отзывов клиентов!

Почему стоит купить именно здесь

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

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

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

vps.ua

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

Куда двигаться дальше

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

hostiq.ua

Требования к главной странице сайта 

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

Заголовок и торговое предложение

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

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

nutsking.com.ua

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

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

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

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

shmed.com.ua

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

Нужен сайт?
Сделать сайт самому для бизнеса или хобби с нашими готовыми решениями легко как раз-два-три. Бесплатный тест 30 дней!

Подписка

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

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

foxtrot.com.ua

Контактные данные

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

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

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

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

spellchocolate.com

Хедер и футер

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

privatbank.ua

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

comfy.ua

Навигация

Навигация по сайту включает два основных пункта:

• меню навигации;
• расположение основных элементов на сайте.

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

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

french-shop.com.ua

Больше о навигации на сайте можно почитать в Бюро Горбунова.

Изображения

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

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

svetoteh.com

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

Поиск по сайту

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

rozetka.com.ua

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

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

• интернет-магазин
• сайт услуг
• инфопортал

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

Интернет-магазин

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

Исходя из этих задач, в структуре главной страницы интернет-магазина есть:

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

Сайт услуг

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

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

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

upgrade-yourself.com.uaupgrade-yourself.com.ua

Информационный портал

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

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

edition.cnn.com

Любите продавать?
Держите хостинг для интернет-магазина с гарантированным аптаймом и +30% экономии при годичной оплате

Дизайн главной страницы сайта

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

Кроссбраузерность и удобство пользования 

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

Цветовое решение

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

Одна мысль на одном экране

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

tesla.com

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

Информационное единство

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

doctor.kharkov.ua

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

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

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

spellchocolate.com

Школа искусств St.Art

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

starts.com.ua

Конный клуб Пассаж

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

passage.kh.ua

Шпаргалка: как правильно создать главную страницу сайта

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

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

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

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

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

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

Какой должна быть главная страница

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

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

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

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

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

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

Как правильно оформить главную страницу сайта? – Веб-студия LANCIO

Автор LANCIO Рубрика Блог Дата 31 октября, 2016

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

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

Любой интернет-маркетолог скажет, что оно должно быть информативным, полезным, с удобной навигацией и интересным дизайном. Но в этом предложении нет конкретного ответа на наш вопрос. Рассмотрим основные факторы грамотного формирования главной страницы подробнее.
Главная страница – это страница обо всем, но с максимально удобной подачей. Даже при попадании нового пользователя из поиска на посадочную страницу, он с большой вероятностью перейдет на главную, где ему нужно кратко и ёмко рассказать о вашей компании, предложить основные услуги и/или товары.

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

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

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

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

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

Шапка сайта и главное меню

В данном элементе структуры главной страницы все просто: небольшой логотип (одновременно являющийся ссылкой на главную) и основное меню со ссылками на страницы сайта. Не надо ничего изобретать, классическое вертикальное или горизонтальное расположение максимально эффективно и удобно для пользователя. При использовании меню с иконками, позаботьтесь о кратком текстовом описании его пунктов. Раздел «Контакты» стоит размещать либо справа, либо снизу, в зависимости от расположения типа меню.
Верхушка (top bar – располагается над header или является его составным элементом) должна содержать основную контактную информацию: телефон, почту и при необходимости адрес.

Информационные блоки

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

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

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

Подвал страницы

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

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

1. Не размещайте слишком много информации

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

2. Делайте акцент на спецпредложения

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

3. Используйте иконки, инфографику и изображения

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

4. Не преувеличивайте

Не стоит лгать и вводить в заблуждение, достаточно грамотно описать свои преимущества и услуги без лишних эпитетов.

5. Ищите варианты, не стойте на месте

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

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

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

Вывод

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

7 основных принципов создания визуально привлекательных веб-сайтов

Как создать красивый веб-сайт

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

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

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

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

1. Сохраняйте сбалансированность вашего дизайна.

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

Посмотрите на собаку на изображении в заголовке веб-сайта Khoi Vinh’s Subtraction ниже.Я взял этот пример из книги Джейсона Байрда «Принципы красивого веб-дизайна». Джейсон указывает, как крест справа компенсирует добавленный визуальный вес , который собака обеспечивает слева. Это небольшая, но немаловажная деталь. Убедитесь сами, прикрыв крест рукой.

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

Вот еще один пример симметричных весов от The First Twenty.Хотя изображение заголовка асимметрично сбалансировано (вы можете заметить, как это сделано?), Остальная часть дизайна внизу имеет симметричные столбцы. Асимметричный баланс сложнее добиться, но он делает дизайн более игривым.

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

2. Разделите свой дизайн на части, используя сетки.

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

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

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

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

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

Что, если вы измените базовый красный цвет на веб-сайте The First Twenty (выше) на салатовый? Было бы хорошо смотреться? Скорее всего, нет. Потому что он не принадлежит к той же цветовой палитре (и, конечно, салатовый цвет — не самый простой цвет для работы). Такие сайты, как ColourLovers, существуют не просто так.Вы не можете просто выбирать цвета в стиле Рэмбо, стреляя из оружия. Некоторые цвета хорошо сочетаются, другие — нет. Существует множество теорий о цветах и ​​их комбинациях, включая соглашения о монохромных и контрастных схемах, но многое сводится к здравому смыслу и наличию для этого .

Узнайте, что работает вместе. Используйте как можно больше дизайнов веб-сайтов, например, представленных на любом из множества веб-сайтов-витрин CSS (например, Best Web Gallery), чтобы почувствовать, как цвета взаимодействуют друг с другом. Выберите максимум два или три основных цвета для вашего дизайна, а затем используйте оттенки (более светлые, смешанные с белым) и оттенки (более темные, смешанные с черным) этих основных цветов, чтобы при необходимости расширить палитру.

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

Веб-сайт

Bence Kucsan имеет собственную цветовую схему. В основном это монохроматический (оттенки и оттенки одного цвета) и ахроматический (черный и белый) с выделением цвета (красный):

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

Говоря о цвете, WebDesigner Wall от Ника Ла — это настоящее блаженство:

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

4.Постарайтесь, чтобы графика хорошо сочеталась.

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

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

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

Rogie King’s Komodo Media намного более насыщен графикой, отлично выполнен как с технической, так и с тематической точки зрения.

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

5. Улучшите типографику своего сайта.

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

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

Стеки шрифтов

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

Стеки шрифтов — это просто базовый CSS. Они позволяют вам определять порядок, в котором должны отображаться шрифты. Если быть точным, мы говорим здесь о гарнитурах, а не о шрифтах. Чтобы получить хорошее резюме по этому поводу, обратитесь к шрифту Джона Тана! = Шрифт.

body {font-family: "Helvetica Neue", Helvetica, Arial, без засечек; }

Указанное выше свойство придаст основной копии шрифт «Helvetica Neue». Однако для этого необходимо, чтобы на компьютере пользователя был установлен именно этот шрифт.В настоящее время Mac поставляется с предустановленной Helvetica (Neue), но на большинстве компьютеров с Windows ее нет.

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

Wilson Miner использует стек шрифтов, который мы цитировали выше. Helvetica Neue — это усовершенствованная версия Helvetica. И хотя Arial установлен почти на каждом компьютере (по крайней мере, на компьютерах с Windows и Mac) и поэтому является популярным выбором для Интернета, большинство дизайнеров предпочитают Helvetica Arial. Таким образом, вы получите лучшее из обоих миров: Helvetica для тех, у кого она есть, и Arial на случай, если Helvetica недоступна.

Джон Тан использует еще один интересный набор шрифтов для своих заголовков:

body {семейство шрифтов: baskerville, 'palatino linotype', 'times new roman', serif; }

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

Измерение и ведение

Мера — это длина , строк, интерлиньяж — это высота , (или вертикальный интервал) строк. В CSS мерой можно управлять, задав ширину содержащего поля (например, элемента абзаца). Оба влияют на читаемость .Если строки слишком короткие или слишком длинные, пользователям будет неудобно читать контент; эту проблему часто можно встретить с гибкими макетами. Идеально от 40 до 80 символов в строке.

Интерлиньяж можно увеличить (или уменьшить, если вы действительно хотите), определив свойство line-height CSS. Как правило, для абзацев лучше всего подходит высота строки 1,5. Это означает, что при размере текста 12 пунктов высота строки становится 18 пунктов (12 × 1,5), что дает тексту некоторую передышку .

Висячие цитаты и пули

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

Тим ван Дамм использует подвесные пули для своей последней модификации Max Voltar:

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

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

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

Правила печати, которые не применяются

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

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

Несколько слов о замене изображений

А как насчет замены изображений (техники замены шрифтов изображениями)? Мы говорили о наборах шрифтов, но разве они не уступают замене изображений? Ну, это зависит от того, что вы считаете более важным: возможность отображать именно тот шрифт, который вам нужен, или наличие динамического, доступного и оптимизированного для SEO контента? Некоторые методы замены изображений стали довольно продвинутыми, но они все еще не так гибки, как обычный текст.Замена изображений хорошо подходит для заголовков и отрывков, но вряд ли является решением для основного текста.

6. Выделите элементы, добавив вокруг них пустое пространство.

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

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

Полагаю, пришло время бесстыдной розетки. На скриншоте выше изображен мой собственный сайт Shift (px). Дизайн сильно зависит от типографики и пустого пространства. Белое пространство, вероятно, занимает около 50% страницы. Пустое пространство — один из самых простых (потому что вы на самом деле ничего не добавляете, не так ли?) И самых эффективных способов создать визуально приятный и читаемый дизайн.

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

Еще один хороший пример большого количества белого пространства:

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

7. Подключите все элементы.

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

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

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

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

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

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

Дополнительные ресурсы

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

Заключение

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

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

Эта статья изначально опубликована 15 октября 2009 г. и обновлена ​​11 мая 2021 г.

Как создать веб-сайт в 2021 году: пошаговое руководство

Этот пост последний раз обновлялся 18 марта 2021 года.

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

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

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

Как создать веб-сайт

1. Установите цель

2. Выберите конструктор веб-сайтов

3. Определите свой макет

4. Заявите о своем доменном имени

5. Соберите свой контент

6. Добавьте нужные страницы

7. Создайте элементы своего веб-сайта

8. Выберите необходимые профессиональные инструменты

9. Сделайте его доступным для всех

10. Оптимизация для мобильных устройств

11. Усильте свой SEO

12. Взаимодействуйте с посетителями

13. Спрашивайте отзывы

14. Опубликовать и обновить

01.Установите цель

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

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

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

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

02. Выберите конструктор веб-сайтов

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

На рынке доступны десятки платформ. Не знаете, какой из них использовать? Wix.com занял первое место среди лучших разработчиков веб-сайтов в мире, и не зря. Вот несколько преимуществ Wix:

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

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

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

Новичкам также может понравиться Wix ADI (Artificial Design Intelligence), первая платформа искусственного интеллекта, которая создает для вас веб-сайты. Это отличное решение для быстрого создания веб-сайта — ответив на несколько вопросов, вы получите готовый веб-сайт, который впоследствии можно будет настроить.

В то же время опытные создатели могут изучить Velo by Wix, который позволяет вам погрузиться в движок вашего сайта для создания сложных приложений, API-интерфейсов и баз данных.Таким образом, вы обязательно получите уникальный результат, который идеально подходит вашему бренду и не похож ни на один другой веб-сайт в мире.

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

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

Служба поддержки клиентов: Вы не одиноки в своем путешествии по разработке веб-сайта. Если вам понадобится помощь, вам всегда будет с кем поговорить благодаря круглосуточной службе поддержки Wix и страницам в социальных сетях.Если вы хотите прочитать советы по веб-дизайну, найти руководства по веб-дизайну и получить вдохновение, вы также найдете множество полезных материалов, доступных в Интернете. Чтобы расширить свои знания в области веб-дизайна, интернет-маркетинга, поисковой оптимизации и т. Д., Загляните в Блог Wix (искренне ваш) и Справочный центр.

Готовы создать сайт? Вот как начать:

1. Перейдите на Wix.com со своего компьютера или мобильного телефона.

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

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

03. Определите свой макет

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

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

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

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

04. Заявите о своем доменном имени

Проще говоря, ваше доменное имя — это ваш адрес в Интернете. Это то, что ваши посетители увидят на панели своего браузера сразу после www.”

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

Если доменное имя выбрано с умом, оно также помогает поисковым системам (таким как Google и Bing) понять, о чем ваш веб-сайт. Это важно, потому что помогает привлечь больше трафика на ваш сайт.

Итак, как выбрать доменное имя для своего бренда? Чтобы сделать его запоминающимся, сохраните его:

• Краткое: Чем он длиннее, тем выше вероятность того, что посетители его неправильно написали.

• Простой: Избегайте символов, специальных символов и цифр.

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

• Вызывающий: Подсказка о том, что вы делаете в своем доменном имени, путем включения слов, имеющих отношение к вашему бизнесу.

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

Совет от профессионала : Выбор доменного имени также означает использование правильного расширения домена. От .org до .com и .net вы можете выбрать одно из 45 расширений домена верхнего уровня. Лучше всего использовать тот, который подходит вашему типу бизнеса и географическому положению.

05. Соберите свой контент

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

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

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

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

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

06. Добавьте нужные страницы

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

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

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

Страница «О нас»: Расскажите свою историю и поделитесь своими ценностями, методами и любой другой информацией, которая определяет ваш бренд, на странице «О нас». Приветствуйте новых посетителей, используя первое лицо («Я» или «Мы»), так как это добавляет дружескую нотку дружелюбия и тепла. Также не забудьте включить фотографию себя или членов своей команды, поскольку клиентам всегда нравится видеть лицо, стоящее за бизнесом. Если вы ищете вдохновения, то на этих 21 лучших страницах о нас вы узнаете, как устроена эта страница.

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

Дополнительно (но настоятельно рекомендуется):

Страница вашего продукта или услуги : Страница продукта (или страница услуги, в зависимости от вашей отрасли) — это то место, где ваши посетители узнают, что вы предлагаете, и могут ли они Убедившись, достаньте кредитную карту и сделайте покупку.

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

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

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

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

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

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

07. Создайте элементы своего веб-сайта

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

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

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

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

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

Цвета: Психология цвета доказывает, что разные оттенки по-разному влияют на поведение человека, что делает их таким важным аспектом дизайна веб-сайтов. При выборе цветовой схемы своего веб-сайта, как правило, ограничивайтесь тремя оттенками: одним основным цветом (60% смеси), одним второстепенным цветом (30%) и одним цветом акцента (10%). Конечно, если вы уже использовали фирменные цвета для себя или своего бизнеса, их следует включить.

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

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

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

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

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

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

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

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

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

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

Пустое пространство: Это область вашего веб-сайта, в которой ничего нет. Боитесь всего этого пустого места? Не будет. Мало того, что все большее использование белого пространства является модным (минимализм, он должен остаться), белые пространства также дают вашим посетителям возможность «дышать» между изображениями или фрагментами контента, что способствует гораздо лучшему взаимодействию с пользователем.

Совет от профессионала: Что художники вроде Леонардо да Винчи сказали бы о том, как создавать веб-сайт? Мы полагаем, что много. Некоторые из тех же правил, которые веками управляли искусством и дизайном, применимы и к Интернету. От баланса до симметрии: узнайте, как 7 фундаментальных принципов дизайна могут быть применены к веб-сайтам.

08. Выберите профессиональные инструменты, которые вам нужны.

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

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

Программное обеспечение для планирования: Если вы управляете сервисным бизнесом, ваш веб-сайт должен иметь возможность получать онлайн-бронирования и платежи 24/7.Программное обеспечение Wix для планирования именно это и делает. Он включает в себя самые изощренные возможности на рынке, от предоставления клиентам возможности записываться на прием через Интернет до возможности управлять календарями ваших сотрудников.

Интернет-магазин: Хотите продавать свои товары в Интернете и получать постоянный доход? Интернет-магазин — это то, что вам нужно. От отслеживания заказов до использования Wix Payments для удобного получения платежей — вы сможете управлять всем из одного места.

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

Music: Wix Music — это передовая платформа для музыкантов, которые хотят расширить свою аудиторию, сохраняя при этом полную свободу творчества. Это позволяет вам продавать музыку прямо на вашем веб-сайте и получать 100% прибыли. Одновременно он распространяет ваши мелодии в более чем 120 цифровых магазинах.

Video Maker: Знаете ли вы, что видео могут увеличить органический поисковый трафик на ваш сайт на 157%? С помощью Wix Video Maker вы можете улучшить дизайн своего веб-сайта с помощью настраиваемых видео, чтобы привлечь внимание своей аудитории и улучшить посещаемость.Их можно использовать для продвижения ваших продуктов или услуг, обмена интересными обновлениями и многого другого.

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

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

09. Сделайте его доступным для всех

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

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

10. Оптимизация для мобильных устройств

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

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

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

11. Усильте свой SEO

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

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

• Проведите исследование ключевых слов : Исследование ключевых слов поможет вам найти ключевые слова, наиболее релевантные для вашего сайта. Как только они у вас появятся, выберите одно основное ключевое слово и пару второстепенных — но не более того.Разместите ключевые слова в стратегических местах вашего сайта (заголовок и описание для SEO, домашняя страница и т. Д.), Но не переусердствуйте. Поисковые системы наказывают сайты, которые неестественно «вбивают» ключевые слова в свой контент.

• Включить на странице SEO: Речь идет о том, чтобы сообщить поисковым системам, что содержат ваши страницы. На каждой странице конструктор вашего сайта попросит вас ввести метаданные. Сюда входит URL, SEO-заголовок (синяя ссылка, которую вы видите на странице результатов Google) и описание.Хотя посетители могут не замечать эти элементы, они важны для ранжирования.

• Добавьте замещающий текст: Альтернативный текст относится к описаниям, которые вы даете своим изображениям. Они не будут видны вашим посетителям, но дают Google четкое указание на то, о чем идет речь в СМИ. У Google много знаний, но он не может «видеть» фотографии или GIF-файлы (пока!). Альтернативный текст поможет вашему визуальному содержанию отображаться на страницах результатов Google. Кроме того, написание альтернативного текста, оптимизированного для поисковых систем, для ваших изображений также является важной практикой в ​​улучшении доступности вашего сайта.

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

12. Взаимодействие с посетителями

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

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

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

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

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

13. Запросите отзыв

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

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

14. Публикация и обновление

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

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

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

Джонатан Ситбон

Эксперт по писательству в Wix

Дженна Романо

Эксперт и писатель по веб-дизайну

10 принципов хорошего веб-дизайна — Smashing Magazine

Краткое резюме ↬

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

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

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

Обратите внимание, что вас могут заинтересовать статьи по юзабилити, которые мы публиковали ранее:

Принципы хорошего веб-дизайна и рекомендации по эффективному веб-дизайну

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

Как думают пользователи?

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

Большинство пользователей ищут что-нибудь интересное (или полезное) и интерактивное; как только будут найдены перспективные кандидаты, пользователи щелкнут.Если новая страница не соответствует ожиданиям пользователей, нажимается кнопка «Назад» и поиск продолжается.

• Пользователи ценят качество и надежность. Если страница предоставляет пользователям высококачественный контент, они готовы скомпрометировать контент с помощью рекламы и дизайна сайта. Это причина того, почему не очень хорошо спроектированные веб-сайты с высококачественным контентом с годами набирают много трафика. Контент важнее дизайна, который его поддерживает.
• Пользователи не читают, они сканируют. Анализируя веб-страницу, пользователи ищут какие-то фиксированные точки или якоря, которые будут вести их по содержимому страницы.
  Пользователи не читают, они сканируют. Обратите внимание на то, как «горячие» области резко переходят в середину предложений. Это типично для процесса сканирования.
• Интернет-пользователи нетерпеливы и настаивают на немедленном вознаграждении. Очень простой принцип: если веб-сайт не может удовлетворить ожидания пользователей, значит, дизайнер не справился со своей работой, и компания теряет деньги.Чем выше когнитивная нагрузка и чем менее интуитивно понятна навигация, тем больше пользователи готовы покинуть веб-сайт и искать альтернативы. [JN / DWU]
• Пользователи не делают оптимального выбора. Пользователи не ищут самый быстрый способ найти нужную информацию. Они также не сканируют веб-страницу линейно, последовательно переходя от одного раздела сайта к другому. Вместо этого пользователи удовлетворены; они выбирают первый разумный вариант. Как только они находят ссылку, которая, как кажется, может привести к цели, очень высока вероятность того, что по ней сразу же нажмут.Оптимизация сложна и занимает много времени. Удовлетворение более эффективно. [видео]
  Последовательное чтение не работает в Интернете. Правый снимок экрана на изображении внизу описывает путь сканирования данной страницы.
• Пользователи следуют своей интуиции. В большинстве случаев вместо того, чтобы читать информацию, предоставленную дизайнером, пользователи бредут. По словам Стива Круга, основная причина этого в том, что пользователям все равно. «Если мы находим что-то, что работает, мы придерживаемся этого.Для нас не имеет значения, понимаем ли мы, как все работает, если мы можем их использовать. Если ваша аудитория будет вести себя так, как будто вы разрабатываете рекламный щит, тогда создавайте отличные рекламные щиты ».
• Пользователи хотят иметь контроль. Пользователи хотят иметь возможность управлять своим браузером и полагаться на единообразное представление данных на всем сайте. Например. они не хотят, чтобы новые окна открывались неожиданно, и они хотят иметь возможность вернуться с помощью кнопки «Назад» на сайт, на котором они были раньше: поэтому рекомендуется, чтобы никогда не открывал ссылки в новых окнах браузера. .

1. Не заставляйте пользователей думать

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

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

Рассмотрим пример. Beyondis.co.uk утверждает, что находится «за пределами каналов, продуктов, распространения». Что значит , значит ? Поскольку пользователи обычно исследуют веб-сайты в соответствии с шаблоном «F», эти три утверждения будут первыми элементами, которые пользователи увидят на странице после ее загрузки.

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

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

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

Больше после прыжка! Продолжить чтение ниже ↓

2. Не теряйте терпение пользователей

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

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

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

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

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

3. Умейте сосредоточить внимание пользователей

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

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

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

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

4. Стремление к раскрытию особенностей

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

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

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

5. Используйте эффективное письмо

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

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

Eleven2.com сразу переходит к делу. Никаких милых словечек, никаких преувеличенных заявлений. Вместо этого цена: именно то, что ищут посетители.

Оптимальное решение для эффективного письма —

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

6.Стремитесь к простоте

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

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

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

7. Не бойтесь белого пространства

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

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

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

8. Эффективное общение с помощью «видимого языка»

В своих статьях об эффективной визуальной коммуникации Аарон Маркус излагает три фундаментальных принципа, связанных с использованием так называемого «видимого языка» . — контент, который пользователи видят на экране.

• Организуйте : предоставьте пользователю ясную и последовательную концептуальную структуру.Последовательность, компоновка экрана, взаимосвязи и возможность навигации — важные концепции организации. Ко всем элементам следует применять одни и те же соглашения и правила.
• Экономьте : делайте максимум с наименьшим количеством подсказок и визуальных элементов. Следует учитывать четыре основных момента: простота, ясность, различимость и акцент. Простота включает только самые важные для общения элементы. Ясность : все компоненты должны быть спроектированы таким образом, чтобы их значение не было неоднозначным. Самобытность : важные свойства необходимых элементов должны быть различимы. Акцент : самые важные элементы должны быть легко различимы.
• Общайтесь : сопоставьте презентацию с возможностями пользователя. Пользовательский интерфейс должен сохранять баланс разборчивости, удобочитаемости, типографики, символики, нескольких представлений, а также цвета или текстуры для успешного взаимодействия. Используйте макс. 3 шрифта максимум 3 кеглем — максимум 18 слов или 50-80 символов в строке текста.

9. Конвенции — наши друзья

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

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

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

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

10. Тестируйте раньше, тестируйте часто

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

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

Следует иметь в виду несколько важных моментов:

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

Итог: если вам нужен отличный сайт, вам нужно его протестировать.

Получите идеальный макет веб-сайта за 27 шагов

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

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

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

Начало работы

01. Определите, что означает успех

Добраться до сути цели вашего дизайна

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

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

02. Понять текущий сайт

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

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

03. Обменивайтесь дизайном с клиентами на ранней стадии

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

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

Рабочий процесс проектирования

04. Сначала займитесь макетом

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

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

05. Начните рисовать каркас верхнего уровня

Базовый каркас поможет вам структурировать макет (щелкните значок в правом верхнем углу, чтобы увеличить)

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

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

06. Добавьте сетку

Пример сетки 978 с базовой линией 10 пикселей

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

Чтобы узнать, как это сделать, ознакомьтесь с этим руководством по созданию сетки, которая адаптируется ко всем размерам экрана.

07. Выберите типографику

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

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

08. Выберите свою цветовую тему

Инструменты, такие как Color Hunt, разработаны, чтобы помочь вам выбрать палитру.

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

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

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

09. Упростите макет

Простые макеты, как правило, легче ориентироваться

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

На самом деле на странице не должно быть слишком много призывов к действию — все должно вести к финалу: «Что я могу здесь сделать?»

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

10. Усовершенствуйте каждый компонент

Клаудио Гульери работал над дизайном пользовательского интерфейса в Microsoft Music.

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

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

11. Ознакомьте клиентов с вашими решениями

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

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

12. Думайте в движении

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

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

13. Прототип, прототип, прототип

Прототипирование — лучший способ тестирования взаимодействий.

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

Следующая страница: Дизайн и упаковка

24 вещи, которые следует учитывать при проектировании и разработке веб-сайта

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

1. Выбор домена и хоста

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

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

2. Серверные службы (CMS «Система управления контентом» / Программное обеспечение)

Невозможно разработать отличный веб-сайт без функциональной программы, которая заботится о серверной части. Если вы думаете о своем веб-сайте как об автомобиле, вы поймете, почему. Когда друзья видят ваш блестящий новый спортивный автомобиль, они смотрят на гладкую окраску, блестящие шины и роскошные кожаные сиденья. В мире веб-сайтов это приравнивается к той части вашего сайта, с которой пользователь напрямую взаимодействует. Так же, как мощный двигатель в вашем спортивном автомобиле, на бэкэнде вашего веб-сайта действительно происходит волшебный .Без мощных серверных служб ваш сайт не сможет «удивить» ваших гостей. Точно так же спортивный автомобиль без двигателя становится бесполезным. Один из лучших «движков» для сайтов электронной коммерции — Magento, а WordPress — это настраиваемая CMS, идеально подходящая для информационных сайтов.

3. Чистый дизайн

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

4. Эффективная цветовая схема

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

5. Брендинг

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

6. Функциональность

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

7. Навигация

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

8. Удобство использования

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

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

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

10. Короткое время загрузки

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

11. Активный блог

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

12. Чистый, удобный для SEO код

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

13. Совместимость с несколькими браузерами

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

14. Мобильные сайты и адаптивные сайты

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

15. Интеграция с социальными сетями

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

16. Тесты Captcha

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

17. Эффективная безопасность

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

18. Внешние обзоры

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

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

19. Отзывы клиентов

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

20. Подтверждение автора Google+

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

21. Отслеживание

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

22. Полная карта сайта

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

23. Исходное содержание

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

24. Стоковые Изображения

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

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

Дизайн веб-страниц: подробное руководство

Иллюстрировано Прабхатом Махапатрой

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

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

Проектирование пользовательских потоков

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

Информационная архитектура

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

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

Сортировка карточек — это простой метод, который позволяет практикам UX понять, как пользователи группируют и организовывают контент.Имиджевый кредитный опыт ux.

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

Древовидное тестирование — это надежный метод определения того, могут ли пользователи работать с предложенной структурой меню. Изображение предоставлено Nielsen Norman Group.

Глобальная навигация

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

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

При разработке навигации учитывайте несколько моментов:

• Выберите шаблон навигации в соответствии с потребностями пользователя. Навигация должна соответствовать потребностям большинства посетителей вашего сайта. Например, лучше избегать навигации по гамбургер-меню, если большинство ваших пользователей не знакомы со значением самого значка.
• Расставьте приоритеты для параметров навигации. Хорошая команда дизайнеров расставит приоритеты для вариантов навигации в соответствии с общими задачами пользователя, учитывая как приоритетность, так и частоту выполнения задач.
• Сделать видимым. Сведите к минимуму когнитивную нагрузку на пользователя, сделав постоянно видимыми важные параметры навигации. Когда мы скрываем параметры навигации, мы рискуем, что посетители не смогут их найти.
• Сообщите текущее местоположение. Неспособность указать местонахождение текущего посетителя — распространенная проблема на многих веб-сайтах. Если посетители спрашивают: «Где я?», Это явный признак того, что с навигацией нужно поработать. Для крупных веб-сайтов предлагайте индикаторы местоположения, такие как панировочные сухари.

Визуальный и функциональный дизайн веб-ссылок

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

• Признайте разницу между внутренними и внешними ссылками. Пользователи ожидают разного поведения для внутренних и внешних ссылок. Все внутренние ссылки должны открываться на одной вкладке, чтобы посетители могли использовать кнопку «назад».
• Изменить цвет посещенных ссылок. Когда посещенные ссылки не меняют цвет, пользователи могут непреднамеренно повторно посещать одни и те же страницы несколько раз.
• Еще раз проверьте все ссылки. Очень неприятно попасть на страницу с ошибкой 404. Используйте такие инструменты, как Dead Link Checker, чтобы найти неработающие ссылки на вашем сайте.

Кнопка «Назад» в браузере

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

«Панировочные сухари»

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

Хотя этот элемент не требует подробного объяснения, стоит упомянуть несколько вещей:

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

На веб-сайте Best Buy хлебные крошки поддерживают основную навигацию. Имиджевый кредит Best Buy.

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

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

Поиск

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

При разработке окна поиска примите во внимание эти несколько основных правил:

• Разместите окно поиска там, где пользователи ожидают его найти. Приведенная ниже диаграмма, основанная на исследовании A. Dawn Shaikh и Keisi Lenz, показывает ожидаемое местоположение поля поиска согласно опросу 142 участников. Исследование показало, что наиболее удобное место — это верхний левый или верхний правый угол каждой страницы веб-сайта.

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

• Используйте значок увеличительного стекла, чтобы привлечь внимание к области. Значок увеличительного стекла имеет универсальное значение — оно знакомо большинству пользователей. Nielsen Norman Group рекомендует использовать схематический значок, простейшую версию увеличительного стекла.

Чтобы привлечь внимание к строке поиска, используйте значок, например увеличительное стекло. Имиджевые кредитные иконки 8.

• Подберите размер поля ввода. Распространенная ошибка — сделать поле ввода слишком коротким.Конечно, пользователи могут ввести длинный запрос в короткое поле, но одновременно будет видна только часть текста, что не очень удобно. Фактически, когда окно поиска слишком короткое, посетители, как правило, используют короткие неточные запросы, потому что более длинные запросы могут быть трудными и неудобными для чтения. Поле ввода из 27 символов соответствует 90% запросов.

Большое поле ввода Amazon позволяет посетителям видеть весь поисковый запрос. Изображение предоставлено Amazon.

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

Разработка отдельных страниц

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

Контентная стратегия

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

Вот несколько практических советов при рассмотрении своей контент-стратегии:

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

Пример пошагового процесса оформления заказа. Изображение предоставлено Виттеей.

• Избегайте жаргона и отраслевых терминов. Каждый неизвестный термин или фраза, появляющиеся на странице, значительно усложнят посетителям понимание информации. Безопасный вариант — писать для всех уровней чтения и выбирать слова, которые ясно и легко понятны каждому.
• Сведите к минимуму длинные предложения. Пишите маленькими сегментами, которые можно сканировать. Согласно книге Роберта Ганнинга «Как избавиться от тумана в деловой переписке», предложения должны состоять из 20 слов или меньше.
• Избегайте использования заглавных букв. Заглавные буквы подходят для аббревиатур и логотипов. Но лучше избегать использования заглавных букв для абзацев, меток форм, ошибок и уведомлений. В своей книге «Разборчивость печати» Майлз Тинкер упоминает, что использование заглавных букв резко снижает скорость чтения.

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

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

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

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

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

Визуальная иерархия

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

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

Пример F-образного узора на сайте CNN. Изображение предоставлено CNN.
Пример шаблона Z-сканирования на сайте Basecamp. Изображение предоставлено Basecamp.

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

Призыв к действию «Выберите план» выделяется в этом примере. Изображение предоставлено MailChimp.

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

Пример высококачественного мокапа, созданного в Adobe XD. Изображение предоставлено Coursetro.

Поведение при прокрутке

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

Зная это, вы можете улучшить взаимодействие с пользователем с помощью следующих советов:

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

В этом примере Tesla использует мощные изображения, чтобы показать преимущества и особенности Model X. Изображение предоставлено Tesla.

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

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

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

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

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

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

Загрузка содержимого

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

• Убедитесь, что регулярная загрузка не занимает много времени. Наша естественная продолжительность концентрации внимания очень мала.Согласно исследованию Nielsen Norman Group, 10 секунд — это предел! Когда посетителям приходится ждать загрузки веб-сайта, они могут расстроиться и уйти. Даже с самым красивым индикатором загрузки пользователи все равно уйдут, если это займет слишком много времени.
• Использовать скелетные экраны во время загрузки. Многие веб-сайты используют индикаторы прогресса, чтобы показать, что данные загружаются. Хотя цель индикатора прогресса хороша, поскольку он обеспечивает визуальную обратную связь, результат может быть отрицательным.Как отмечает Люк Вроблевски: «Индикаторы прогресса по определению обращают внимание на то, что кому-то нужно подождать. Это как смотреть, как тикают часы — когда вы это делаете, кажется, что время идет медленнее ».

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

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

Кнопки

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

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

Хорошее руководство по дизайну веб-сайта должно быть четким с текстом кнопки, чтобы пользователи понимали, что делает элемент интерфейса. Изображение предоставлено UX Matters.

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

При разработке кнопок единообразие приводит к лучшему удобству использования. Изображение предоставлено Ником Бабичем.

Картинка

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

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

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

Изображения, не относящиеся к теме, запутают посетителей. Имиджевый кредит Lloyds Bank.

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

Неаутентичные стоковые изображения могут произвести плохое впечатление на посетителей. Изображение предоставлено Adobe Stock.

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

Пример пиксельного изображения плохого размера (слева) по сравнению с изображением правильного размера (справа). Изображение предоставлено Adobe.

Видео

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

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

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

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

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

Согласно исследованиям, пользователи предпочитают более короткие видеоролики более длинным. Изображение предоставлено D-MAK Productions.

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

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

Кнопки с призывом к действию (CTA)

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

• «Начать пробную версию»
• «Загрузить книгу»
• «Подпишитесь на обновления»
• «Получить консультацию»

Примите во внимание несколько моментов при разработке кнопок CTA :

• Размер. Ваш CTA должен быть достаточно большим, чтобы привлекать внимание. Быстрый пятисекундный тест поможет вам определить правильный размер. Просмотрите веб-страницу в течение пяти секунд, а затем перечислите элементы, которые вы помните. Если CTA входит в число элементов, то поздравляю! У него подходящий размер.
• Визуальная заметность. Вы можете выделить определенные кнопки, сделав их более заметными. Контрастные цвета лучше всего подходят для призывов к действию и делают кнопки яркими.

Зеленый цвет кнопки CTA здесь спрыгивает со страницы и привлекает внимание посетителя.Изображение предоставлено Mozilla.

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

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

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

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

Совет: Используйте «тест размытия», чтобы проверить свой призыв к действию. Тест размытия — это быстрый способ определить, направится ли взгляд пользователя туда, куда вы хотите. Сделайте снимок экрана своей страницы и примените эффект размытия в Adobe XD (см. Пример на Charity Water ниже).Какие элементы выделяются при взгляде на размытую версию вашей страницы? Если вам не нравится то, что вы видите, исправьте.

Тест размытия — это метод выявления фокуса дизайна и визуальной иерархии. Изображение предоставлено Charity Water.

Веб-формы

Заполнение форм — один из наиболее важных типов взаимодействия пользователей в сети. Пользователи должны иметь возможность заполнять формы быстро и без путаницы.

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

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

Для удобства заполнения форм сгруппируйте связанные поля вместе. Изображение предоставлено Nielsen Norman Group.

Анимация

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

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

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

Анимация может помочь пользователям понять проблемы, например, если они ввели неправильный пароль. Изображение предоставлено The Kinetic UI.

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

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

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

Пример перехода между состояниями на корпоративном сайте. Изображение предоставлено Ramotion.

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

Фирменная анимация может создать поистине незабываемые впечатления. Изображение предоставлено Heco.

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

Сегодня почти 50% пользователей выходят в Интернет с мобильных устройств. Что это значит для нас, веб-дизайнеров? Это означает, что у нас должна быть мобильная стратегия для каждого веб-сайта, который мы разрабатываем.

Адаптивный дизайн

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

• Стремитесь к макету с одним столбцом. Одноколоночный макет обычно лучше всего работает на мобильных экранах, потому что он хорошо масштабируется между различными разрешениями устройств и между «портретным» и «ландшафтным» режимами.
• Используйте шаблон «Приоритет +» для определения приоритета навигации по точкам останова. Priority + — это термин, придуманный Майклом Шарнаглом для описания навигации, которая раскрывает наиболее важные элементы и скрывает менее важные элементы за кнопкой «больше».Этот тип навигации использует доступное пространство экрана; по мере увеличения пространства количество доступных вариантов навигации также увеличивается, что приводит к лучшей видимости и большему взаимодействию.

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

В этом примере Guardian использует шаблон Priority + для навигации по разделам. Изображение предоставлено Брэдом Фростом.

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

От щелчка к нажатию

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

• Сенсорные мишени правильного размера. Все интерактивные элементы (например, ссылки, кнопки и меню) должны быть доступны для нажатия и должны быть немного больше. Обратитесь к исследованию MIT Touch Lab, чтобы выбрать подходящий размер для ваших кнопок. Исследование показало, что минимальный размер мишени для касания составляет 10 × 10 миллиметров.Это правило работает как для разработки приложений, так и для веб-сайтов.

Меньшие сенсорные мишени труднее нажимать, чем большие, поэтому убедитесь, что размер ваших кнопок выбран правильно. Изображение предоставлено Apple.

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

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

Доступность

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

Пользователи с плохим зрением

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

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

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

Наиболее важной характеристикой текста и других жизненно важных элементов на веб-сайте является удобочитаемость, которая требует достаточного контраста между текстом и фоном.Чтобы текст был удобочитаемым для людей с нарушениями зрения, W3C’s Guideibility Web Content Accessibility Guidelines (WCAG) включает рекомендации по соотношению контрастности. Они рекомендуют следующие коэффициенты контрастности для основного текста и текста изображения:

• Мелкий текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к его фону. Предпочтительно соотношение 7: 1.
• Крупный текст (14 пунктов полужирного и 18 пунктов обычного и выше) должен иметь коэффициент контрастности не менее 3: 1 по отношению к его фону.

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

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

WebAIM сообщит вам, соответствует ли ваш коэффициент контрастности стандартам WCAG.Изображение предоставлено WebAIM.

Пользователи с дальтонизмом и слабовидением

По оценкам, 4,5% мирового населения страдает дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают от слабовидения (1 из 30 человек) и 0,6 % слепые (1 из 188 человек).

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

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

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

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

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

Слепые пользователи

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

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

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

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

В этом примере страница электронной коммерции предоставляет большое количество деталей о продукте.Изображение предоставлено ASOS.

При создании альтернативного текста для изображений соблюдайте следующие рекомендации:

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

Удобство работы с клавиатурой

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

Вот самые основные правила навигации с помощью клавиатуры:

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

Подробные требования к взаимодействию с клавиатурой можно найти в разделе «Шаблоны проектирования и виджеты» документа W3C «Практика разработки WAI-ARIA».

Тестирование

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

Итеративное тестирование

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

Цикл обратной связи Эрика Райса «Построить-измерить-изучить» — важная часть процесса проектирования и тестирования. Изображение предоставлено Эриком Рисом.

Время загрузки тестовой страницы

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

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

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

Что обычно вызывает медленную загрузку?

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

Такие инструменты, как PageSpeed ​​Insights, помогут найти причины.

A / B-тестирование

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

A / B-тестирование поможет вам понять, какая версия вашего дизайна приводит к лучшим конверсиям. Изображение предоставлено VWO.

Передача дизайна

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

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

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

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

Заключение

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

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

Когда дело доходит до разработки или редизайна веб-сайта, легко зацикливаться на эстетике. Правильно ли выглядит этот оттенок синего? Должен ли логотип быть на правой стороне экрана или слева? Что, если мы поместим гигантский анимированный GIF посередине страницы?

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

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

Рекомендации по дизайну веб-сайтов

1. Простота
2. Визуальная иерархия
3. Судоходство
4. Согласованность
5. Ответственность
6. Доступность
7. Условные обозначения
8. Доверие
9. Ориентация на пользователя

1.Простота

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

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

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

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

Вот отличный пример простого, но эффективного дизайна домашней страницы от HERoines Inc:

Источник изображения

2.Визуальная иерархия

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

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

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

Источник изображения

3. Судоходство

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

Вот несколько советов по оптимизации навигации по вашему сайту:

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

Источник изображения

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

Это хорошо подводит нас к следующему принципу …

4. Согласованность

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

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

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

Источник изображения

5. Отзывчивость

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

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

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

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

Источник изображения

Помимо удобства для мобильных устройств, стоит потратить время на проверку кросс-браузерной совместимости вашего сайта. Скорее всего, вы просматривали свой сайт только в одном веб-браузере, будь то Google Chrome, Safari, Firefox или что-то еще.

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

6. Доступность

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

Как и отзывчивость, доступность распространяется на весь ваш сайт: структуру, формат страницы, визуальные элементы, а также письменный и визуальный контент. Руководство по обеспечению доступности веб-контента (WCAG), разработанное Инициативой веб-доступности и Консорциумом World Wide Web, устанавливает руководящие принципы доступности веб-ресурсов.В широком смысле эти рекомендации гласят, что веб-сайты должны быть:

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

Для более глубокого погружения в эту тему см. Наше полное руководство по веб-доступности.

7. Условность

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

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

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

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

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

8. Доверие

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

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

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

Вот пример эффективной страницы цен с веб-сайта Box:

Источник изображения

9.Ориентация на пользователя

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

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

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

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

• Website Grader : Наш бесплатный инструмент оценивает ваш сайт по нескольким факторам: мобильность, дизайн, производительность, SEO и безопасность. Затем он предлагает индивидуальные предложения по улучшению. Вы можете узнать больше о Website Grader в нашем специальном сообщении в блоге.
• Crazy Egg : Отслеживайте несколько доменов под одной учетной записью и получайте информацию о производительности вашего сайта с помощью четырех различных интеллектуальных инструментов — тепловой карты, карты прокрутки, наложения и конфетти.
• Loop11: Используйте этот инструмент, чтобы легко создавать тесты удобства использования, даже если у вас нет опыта работы с HTML.
• Пользователь пьян : Заплатите Ричарду Литтауэру, чтобы он напился и просмотрел ваш сайт. Не верите мне? Мы попробовали.

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

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

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

1. Выберите типографику, удобную для чтения и беглости.
2. Выберите цветовую схему, подходящую для вашего бренда.
3. Используйте пробел для разделения текста и других элементов.
4. Используйте текстуру, чтобы добавить индивидуальности и глубины.
5. Добавьте изображения, чтобы заинтересовать и информировать читателей.
6. Упростите навигацию.
7. Сделайте ваши призывы к действию особенными.
8. Оптимизация для мобильных устройств.
9. Ограничьте возможности, предоставляемые пользователям.

1. Выберите типографику, удобную для чтения и беглости.

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

В идеале вам нужен шрифт:

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

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

Источник изображения

2. Выберите цветовую схему, соответствующую вашему бренду.

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

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

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

Источник изображения

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

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

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

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

Источник изображения

4.Используйте текстуру, чтобы добавить индивидуальности и глубины.

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

Взгляните на текстуру на главной странице ресторана Mony’s Tacos в Санта-Барбаре ниже. Похоже, что нарисовали мелом на доске, не так ли? Не знаю, как вы, но я почти чувствую мел на пальцах, просто глядя на него.Это идеальный вид для ресторана, который стремится стать предпочтительным выбором для мексиканских деликатесов в фанк-зоне Калифорнии.

Источник изображения

5. Добавьте изображения, чтобы заинтересовать и проинформировать читателей.

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

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

Источник изображения

6. Упростите навигацию.

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

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

Возьмем, к примеру, панель навигации Blavity. Представленные разделы включают три категории контента — «Новости», «Комментарии» и «Образ жизни», а также ссылки на их страницу отправки и страницу регистрации. Это обеспечивает посетителям легкий доступ к страницам, которые они, вероятно, ищут.Другие элементы навигации размещены в раскрывающемся меню с надписью «Еще», поэтому их все еще легко найти, но они не загромождены навигацией верхнего уровня. Наконец, панель навигации липкая, поэтому посетителям не нужно будет прокручивать страницу вверх и вниз для просмотра сайта.

Источник изображения

7. Сделайте ваши призывы к действию особенными.

CTA

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

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

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

Источник изображения

8. Оптимизация для мобильных устройств.

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

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

Источник изображения

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

9. Ограничьте возможности, предоставляемые пользователям.

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

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

Источник изображения

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

Требования к дизайну веб-сайтов

1. Верхний и нижний колонтитулы
2. Навигация по меню
3. Панель поиска
4. Брендинг
5. Цветовая палитра
6. Заголовки
7. Прозрачные этикетки
8. Визуальные эффекты и медиа
9. Призывы к действию (CTA)
10. Пробел

1.Верхний и нижний колонтитулы

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

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

2. Навигация по меню

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

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

3. Панель поиска

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

4. Брендинг

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

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

5. Цветовая палитра

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

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

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

6. Заголовки

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

7. Очистить ярлыки

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

Например, кнопка, указывающая на страницу с ценами, должна просто читать «Цены» — все остальное (например, «Посмотреть наши цены», «Проверить страницу с ценами для сделки») излишне. Панель / кнопка поиска нуждаются только в значке окна поиска (🔍) и, возможно, также в слове «Поиск», чтобы обозначить ее назначение.

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

8. Визуальные эффекты и средства массовой информации

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

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

Источник изображения

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

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

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

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

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

10. Пробел

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

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

Дизайн, ориентированный на пользователя

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

По данным Amazon Web Services, 88% посетителей веб-сайтов с меньшей вероятностью вернутся на веб-сайт после неудовлетворительного опыта. И как вы могли их винить? Мы все наверняка там были.