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

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

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

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

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

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

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

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

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

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

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

оптимальным размером статьи для веб-формата является 2000-3000 символов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Четыре правила оформления сайтов – создаем простую и понятную страницу сайта

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

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

Ясность и простота – вот красота!

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

Простота подачи информации – это главное правило оформления сайта.

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

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

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

Важен графический баланс

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

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

Удачный и не удачный пример оформления сайта

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

Контент – то, за чем пришел пользователь

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

Пункты, которые важно соблюдать:

• Цепляющий заголовок. Его роль состоит в завлечении пользователя. Хороший заголовок интригует и возбуждает внимание. Обязательно хочется узнать, что за ним скрывается.
• Подзаголовки, различные выделения текста, списки. Своеобразные полочки, на которых лежит материал. При просмотре страницы, пользователь обязательно обратит внимание на структурированную таким образом информацию.
• От меньшего к большему или «принцип пирамиды». Основная мысль статьи должна быть кратко изложена вначале. Далее идет ее объяснение и аргументирование.

Свободу попугаям!

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

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

ожидаемая навигация и цветовое оформление

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

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

• Как на выбор цвета для сайта могут отреагировать поисковые системы?
• Как посетители оценят удобство взаимодействия с UI?
• Не будет ли цвет оказывать негативный эффект на конверсию даже при топ 1 ранжировании поисковиками?

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

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

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

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

При хорошем дизайне и юзабилити сайта:

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

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

Key Art Designs показывает кликабельность изображений по максимуму и с пользой:

Hover опции: можно поставить лайк, увеличить, посмотреть детали и купить постер

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

Контраст цвета и читабельность

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

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

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

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

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

Избежать неправильной передачи оттенков, позволит использование «безопасных» цветов.

Вместо итога

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

Все вместе это улучшает опыт пользования сайтом (UX) и поведенческие сры, столь значимые сейчас для поисковых систем.

Правила хорошего сайта: основные тренды веб-дизайна 2017 года

Дорогие читатели!

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

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

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

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

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

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

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

Синемаграф – это статичная картинка с анимированной деталью, то есть, по сути, “живая фотография”

Яркость и динамичность оформления сохранились в трендах этого года. Джон Мур Уильямс, топ-менеджер компании Webflow, в своей статье “18 трендов веб-дизайна в 2017 году” выделяет среди них:

Сайт Chekhov — яркий пример анимационного оформления сайта

• и, главное – все внимание контенту.

 

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

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

• Отказ от скрытой навигации («гамбургер–меню»). Вы наверняка знаете эти “бутерброды” из гиперссылок в боковой панели. Специалисты уверены – «гамбургер-меню» трудно обнаружить с первого взгляда.
• Отказ от «карусели» на главной странице. Это действительно становится плохим тоном — слайдеры, на которых скачет калейдоскоп публикаций и создает сумятицу в голове пользователя.
• Размещение всего контента «выше линии сгиба» (попытка уместить весь важный контент на первом экране) – люди привыкли к прокрутке, им не сложно проматывать страницу.

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

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

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

Рекомендуем

10 правил идеальной типографики | Применение шрифтов в веб-дизайне

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

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

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

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

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

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

1. Крупный, мелкий или средний текст?

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

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

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

2. Выравнивание текста: по центру или по краю?

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

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

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

3. Какова оптимальная длина строк?

Здесь хорошо работает правило «золотой середины» — не должна быть слишком длинная (затрудняет понимание сути и забудешь, пока дочитаешь), но и не очень короткая. Оптимальная длинна строк в диапазоне от 55 до 65 символов (для декстопов) и от 30 до 40 символов (для мобильных)

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

4. Кавычки: лапки или елочки?

Вот как могут выглядеть  кавычки в тексте: «кавычки» или «кавычки», немецкие „лапки“, ‘одинарные кавычки’, “двойные кавычки”. В русском языке предпочтение отдается елочкам – так уж сложилось. Лапки применяются, когда необходимо поставить одни кавычки внутри других кавычек.

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

5. Как оформить стили заголовков?

Стили заголовков делаются по принципу пирамиды. Н1 — основной заголовок – самым крупным шрифтом, Н2 — подзаголовок второго уровня – поменьше, и так далее. Основной текст – меньше заголовка последнего уровня.

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

Не пропустите нашу новую публикацию, она поможет вам глубже изучить вопрос SEO оптимизации: Как использовать теги заголовков «h2, Н2, Н3…»

6. Спец. термины типорфики: кегль, кернинг, интерлиньяж

Это термины верстальщиков, но их следует знать. Кегль – это высота букв. Кернинг – это интервалы между буквами. Важно! Между разными буквами кернинг может быть различным. Это делается для лучшей читабельности.  Интерлиньяж – это расстояние между строчками.

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

7. Общий стиль для одинаковых элементов

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

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

Если вам важно не рассеивать внимание пользователей, а напротив, сконцентрировать его, – тогда оформляйте однотипные элементы одинаково!

8. Какой выбрать шрифт с засечками или без?

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

Однако большинство пользователей привыкли к шрифтам без засечек, и они могут раздражать для мелкого шрифта. Разумно использовать шрифты с засечками в заголовках. Наиболее популярными и читабельными шрифтами без засечек принято считать: Rockwell, Helvetica, Futura, Garamond, Bodoni, Frutiger, Trajan, Myriad. Эти шрифты наиболее часто используются при разработке веб сайтов.

9. Какой цвет текста использовать?

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

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

Особенности восприятия цвета в веб-дизайне. Как зацепить клиента

10. В приоритете читабельность текстов

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

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

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

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

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

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

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

18.07.2021

← Поделиться с друзьями !

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

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

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

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

Кроме того, при разработке сайтов нужно продумать тег title. Большинство разработчиков совершают большую ошибку, начиная его со слов Welcome или The. Такой сайт попадает в каталог под буквами T или W, а вам нужно, чтобы он отображался под буквой, с которой начинается название компании. Поэтому и начинать данный тег нужно именно с названия.

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

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

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

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

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

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

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

Логотип

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

Навигация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12 правил веб-дизайна

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

Во-первых, что нужно делать

1. Поддерживайте единообразие интерфейса

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

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

2. Разработайте удобную навигацию

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

Практические советы:

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

3. Изменение цвета посещенных ссылок

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

Do. Визуально различать посещенные ссылки.

4. Упростите сканирование ваших страниц

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

Практические советы:

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

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

Do. Mailchimp выделяет самую важную информацию на странице ━ кнопки с призывом к действию ━.

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

Do. Используйте макет сетки при разработке веб-интерфейса.

5. Серьезно относитесь к контенту

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

Практические советы:

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

6. Проверьте свой веб-сайт на наличие ошибок

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

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

7. Минимизируйте количество вариантов выбора

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

Do. Facebook использует пошаговый процесс при запросе личной информации.

8. Привлекайте пользователей к прокрутке

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

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

9. Обозначьте кнопки в соответствии с тем, что они делают

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

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

10. Сделайте так, чтобы вещи выглядели так, как будто они работают

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

Не надо. Оранжевая рамка в верхнем левом углу экрана — это кнопка? Нет, но форма и метка делают элемент похожим на единое целое.

11. Сделайте свой веб-сайт адаптивным

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

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

Практические советы:

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

12. Протестируйте свой дизайн

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

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

Теперь не надо

1. Не заставляйте пользователей ждать загрузки контента

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

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

Практические советы:

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

2. Не открывайте внутреннюю ссылку в новых вкладках

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

3. Не используйте слишком много шрифтов

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

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

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

4. Не используйте слишком много цветов на своем веб-сайте

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

Не надо. Используйте в дизайне слишком много цветов. Изображение Pine-Sol.

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

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

5. Не показывать автоматические всплывающие окна слишком рано

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

Не надо. Первое, что видят люди, заходя на сайт The New York Times, — это всплывающее окно с промо-рекламой.

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

6. Не используйте обычные фотографии людей

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

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

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

7. Не позволяйте рекламе красть шоу

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

Не надо. Реклама может отвлекать посетителей от основного контента и подрывать дизайн.

8. Не включайте фоновую музыку и не воспроизводите видео с музыкой автоматически.

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

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

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

Do. Видео в Facebook настроено на автовоспроизведение, но звук не будет воспроизводиться, если пользователи не покажут, что смотрят видео, т. Е.взаимодействуя с видео.

9. Не угоняйте прокрутку

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

Не надо. На странице регистрации Tumblr используется захват прокрутки.

10. Не используйте горизонтальную прокрутку

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

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

11. Не жертвуйте удобством использования ради красоты

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

Не надо. Низкоконтрастный текст — всегда плохая идея.

Практический совет : Проверьте коэффициент контрастности . Коэффициенты контрастности показывают, насколько один цвет отличается от другого цвета. Такие инструменты, как Color Contrast Checker, помогут вам всего за несколько кликов проверить, достаточно ли у вас цветовой контраст.

12. Используйте мигающий текст и рекламу

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

Заключение

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

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

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

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

1. Избегайте проблем с разборчивостью

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

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

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

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

2. Применить

визуальную иерархию

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

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

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

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

3. Не сходите с ума по шрифтам

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

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

4. Иметь очевидный призыв к действию

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

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

5. Укажите свою контактную информацию

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

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

• Ваш номер телефона
• Служебный адрес вашей компании
• Почтовый адрес вашей компании, если он отличается от служебного адреса
• Адреса электронной почты основных контактов (или хотя бы общий адрес электронной почты)

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

6. Не отвлекайте автовоспроизведение

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

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

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

7. Корректура, корректура, корректура

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

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

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

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

Хотите узнать больше?

Если вас интересует пересечение UX и UI-дизайна, подумайте о том, чтобы пройти онлайн-курс UI Design Patterns for Successful Software или альтернативно Design Thinking: The Beginner’s Guide.Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи в вашем познавательном путешествии!

(Изображение: Depositphotos)

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 ближе к концу.Согласно первому закону Бема, ошибки наиболее часты при разработке требований и при проектировании и тем дороже, чем позже они устраняются.
Тестирование
• — это итерационный процесс . Это означает, что вы что-то проектируете, тестируете, исправляете, а затем снова тестируете. Могут быть проблемы, которые не были обнаружены во время первого раунда, поскольку пользователи были практически заблокированы другими проблемами.
• юзабилити-тесты всегда дают полезные результаты . Либо вам укажут на проблемы, которые у вас есть, либо укажут на отсутствие серьезных недостатков в дизайне, что в обоих случаях является полезным пониманием для вашего проекта.
• согласно закону Вайнберга, разработчик не подходит для тестирования своего кода . Это касается и дизайнеров. Проработав несколько недель над сайтом, вы больше не можете смотреть на него с новой точки зрения. Вы знаете, как он устроен, и поэтому точно знаете, как это работает — у вас есть мудрость, которой не хватило бы независимым тестировщикам и посетителям вашего сайта.

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

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. Призывы к действию
10. Пробел

1.Верхний и нижний колонтитулы

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

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

2. Навигация по меню

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

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

3. Панель поиска

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

4. Брендинг

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

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

5. Цветовая палитра

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

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

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

6. Заголовки

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

7. Clear Labels

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

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

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

8. Визуальные материалы и средства массовой информации

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

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

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

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

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

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

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

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

10. Пробел

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

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

Дизайн, ориентированный на пользователя

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

По данным Amazon Web Services, 88% посетителей веб-сайтов с меньшей вероятностью вернутся на веб-сайт после неудовлетворительного опыта. И как вы могли их винить? Мы все наверняка там были.

Итак, последний кусочек юзабилити / UX-мудрости, начните больше заботиться! Представьте себя на месте (или, точнее, в окнах браузера) ваших посетителей и помните о них на каждом этапе процесса проектирования.

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

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

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

Что должно включать в себя отличная домашняя страница?

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

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

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

• Элементы фирменного стиля и другие вспомогательные элементы:

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

• Будущие цели сайта:

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

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

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

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

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

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

Использовать визуальную иерархию:

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

Не добавляйте слишком много текста:

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

Не будьте слишком изобретательны:

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

Поймите свою аудиторию:

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

Сделайте дизайн простым и понятным:

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

Используйте отрицательный пробел (или пробел):

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

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

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

Взять под контроль:

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

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

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

10 Золотых правил для начинающих

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

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

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

---

10 правил разработки работающих макетов веб-сайтов

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

Правило №1: Избегайте беспорядка

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

Чистый и простой дизайн веб-сайта от Not Another Fold.

Правило № 2: отдавайте предпочтение дизайну выше сгиба

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

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

Правило № 3: помните о законе Хика

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

Правило №4: Поощряйте прокрутку, а не нажимайте

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

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

Правило № 5: Сохраняйте аутентичность и естественность фотографий

Знаете ли вы, что посетители Интернета «отключают» искусственные фотографии? Чрезмерно поставленные кадры модельных бизнес-команд могут показаться подходящими для корпоративного сайта, но более аутентичные изображения вас или членов вашей команды понравятся зрителям.Естественные стоковые изображения — отличная альтернатива. Фактически, мы уже выбрали лучшие категории стоковых изображений для вашего веб-сайта, чтобы вы могли легко выбрать внешний вид, соответствующий вашему бренду.

Изображение предоставлено Джомасом.

Правило № 6: Используйте визуальные подсказки

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

Правило № 7: Сначала шрифт должен быть разборчивым, а вторым — стильным.

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

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

Простая, разборчивая типографика определяет макет веб-сайта цифрового агентства ouiwill.

Правило № 8: Цвет — психологический

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

Правило № 9: Дизайн для мобильных устройств в первую очередь

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

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

Макет веб-сайта для нескольких устройств, разработанный для сайта портфолио Wolf & Whale.

Правило № 10: Дизайн для всех

Всемирная организация здравоохранения (ВОЗ) определяет, что по меньшей мере 2,2 миллиарда человек во всем мире страдают нарушениями зрения или слепотой, что означает, что 28,5% населения мира имеют ту или иную форму нарушения зрения. Улучшение цветового контраста в макете, например сочетание черного текста с белым фоном и выбор крупномасштабных шрифтов без засечек — два простых способа сделать дизайн вашего сайта максимально доступным и инклюзивным.

---

Как создать веб-сайт: практическое руководство для начинающих

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

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

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

Шаг 1. Установление личности вашего сайта

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

Эффективный идентификатор сайта включает в себя следующее:

• Значок сайта
• Логотип
• Типографика
• Цветовая схема

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

Значок сайта

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

Иконки сайта имеют квадратную форму, не менее 512 на 512 пикселей, и обычно сохраняются как файлы PNG, GIF или ICO . Фавиконы могут быть меньше, но они должны быть не менее 196 на 196 пикселей для спецификаций высокого разрешения, используемых Chrome на устройствах Android.

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

Логотип

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

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

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

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

Пример логотипа с гибким шрифтом из нашего руководства.

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

Веб-шрифты и типографика

Как и в случае с полиграфическим дизайном, типографика для веб-сайтов следует многим из тех же руководящих принципов. Важно установить иерархию типов на вашем веб-сайте, и они будут определяться H-тегами . «H» означает «Заголовок», где h2 определяет самый важный и самый большой стиль текста, h3 — следующий по величине и самый важный стиль, и продолжается вниз по шкале до H6.

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

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

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

Образец сочетания шрифтов из нашей подборки лучших шрифтов для веб-сайтов.

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

Цвет

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

Для веб-сайтов цвета определены как HEX-коды . Шестнадцатеричные коды представляют собой закодированную версию цвета RGB в формате #RRGGBB (#RedRedGreenGreenBlueBlue). (Если вам действительно интересно, узнайте, как работают цвета HEX.) Не знаете, как преобразовать образцы CMYK или RGB в HEX? Цветовые коды HTML позволяют легко находить и преобразовывать цветовые коды с помощью онлайн-палитры цветов и инструментов цветовой диаграммы.

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

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

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

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

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

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

Шаг 2. Создайте домашнюю страницу своего сайта

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

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

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

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

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

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

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

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

Шаг 3. Создание шаблонов для других страниц

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

• О странице
• Контактная страница
• Страницы категорий (страницы, которые содержат сообщения из определенной категории, например.грамм. «Мужская одежда» на сайте электронной торговли одеждой)
• Страницы услуг (для корпоративных сайтов)
• Страницы проектов (для блогов и портфолио)
• Страницы продуктов (для сайтов электронной торговли)
• Страница новостей или Страница сообщения в блоге

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

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

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

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

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

После того, как вы выбрали и отредактировали изображения, вам также нужно будет изменить их размер для использования в Интернете.В Adobe Photoshop перейдите в Файл> Экспорт> Сохранить для Интернета , чтобы сохранить изображения с определенными размерами пикселей в формате JPEG , GIF или PNG . Бесплатная онлайн-функция массового изменения размера фотографий также представляет собой удобный инструмент для изменения размера и сжатия пакетов изображений, если у вас нет доступа к программному обеспечению для редактирования фотографий.

---

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

Изображение на обложке через nelelena, taniascamera, venimo и PippiLongstocking

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

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

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

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

Карл Гилис

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

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

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

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

Упражнение. Расположите кружки в порядке важности:

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

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

Если в меню вашего сайта 10 пунктов, все ли они одинаково важны? Где вы хотите, чтобы пользователь щелкнул? Сделайте важные ссылки более заметными.

Иерархия зависит не только от размера. Amazon делает кнопки призыва к действию «Добавить в корзину» и «Купить сейчас» более заметными, используя цвет:

Какие кнопки бросаются в глаза? Цвет может помочь выделить элементы веб-страницы.

Начните с бизнес-цели

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

Вот пример. Это скриншот, который я сделал с веб-сайта Williams-Sonoma.Они хотят продавать уличную посуду.

Визуальная иерархия необходима для эффективного веб-дизайна.

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

Это визуальная иерархия — вневременной принцип веб-дизайна — хорошо сделана.

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

2. Божественные пропорции

Строчная греческая буква фи используется для золотого сечения.

Золотое сечение — это магическое число 1,618 (φ). Считается, что дизайны, в которых используются пропорции, определяемые золотым сечением, эстетичны.

Тогда есть последовательность Фибоначчи.Каждый член представляет собой сумму двух предыдущих членов: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так далее. Интересно то, что две, казалось бы, не связанные между собой темы дают одно и то же число.

Вот как выглядит золотое сечение:

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

.

Может ли золотое сечение работать в веб-дизайне? Вы делаете ставку. Вот твиттер:

Вот комментарий креативного директора Twitter Дуга Боумена, сделанный много лет назад.Выбор дизайна был выбран не случайно:

Итак, если ширина вашего макета составляет 960 пикселей, разделите его на 1,618 (= 593 пикселей). Вы знаете, что ширина области содержимого должна быть 593 пикселей, а ширина боковой панели — 367 пикселей. Если высота веб-сайта составляет 760 пикселей, вы можете разделить его на блоки по 470 и 290 пикселей (760 / 1,618 = ~ 470).

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

3. Закон Хика

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

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

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

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

С фильтрами справляются хорошо:

4. Закон Фитта

Закон

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

Spotify упрощает нажатие «Play», чем другие кнопки:

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

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

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

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

Давайте представим, что есть форма, которую вы хотите, чтобы люди заполнили.В конце формы есть две кнопки: «Отправить» и «Сбросить» (очистить поля).

99,9999% хотят нажать «Отправить». Следовательно, кнопка должна быть намного больше, чем «сброс».

5. Правило третей

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

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

Ниже посмотрите, насколько картинка справа интереснее? Это правило третей в действии.

Правило третей — это простой принцип построения изображений. (Источник изображения)

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

6. Законы о гештальт-дизайне

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

Вот что я имею в виду:

Обратите внимание, как вы могли видеть собаку, не обращая внимания на каждое черное пятно, из которого состоит собака? Основатель гештальтизма Курт Коффка объяснил это так: «Целое существует независимо от частей».

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

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

1. Закон близости

Люди группируют предметы, которые находятся близко друг к другу в пространстве. Они становятся единым воспринимаемым объектом.

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

Закон близости показывает, как разум естественным образом группирует (или отделяет) предметы в зависимости от их расстояния друг от друга.

Craigslist использует этот закон, чтобы легко понять, какие подкатегории подпадают под категорию «для продажи»:

2. Закон подобия

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

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

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

3. Закон закрытия

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

Без закона замыкания мы бы просто увидели разные линии разной длины.Но закон замыкания объединяет линии в цельные формы.

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

4. Закон симметрии

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

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

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

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

5. Закон общей судьбы

Мы склонны воспринимать объекты как линии, движущиеся по пути. Мы группируем вместе объекты, которые имеют одинаковую тенденцию движения и, следовательно, находятся на одном пути.

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

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

6.Закон непрерывности

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

Fixel использует это для подключения лиц к BIOS:

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

7. Белое пространство и чистый дизайн

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

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

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

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

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

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

Узнайте больше о пустом пространстве и простоте.

8. Бритва Оккама

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

В сообщении об опыте работы с Angelpad команда Pipedrive пишет:

Команда Angelpad и наставники поставили перед нами разные задачи. «У вас слишком много информации на вашей домашней странице» — это то, с чем мы сначала не согласились, но мы будем рады проверить. И оказалось, что мы действительно ошибались. Мы удалили 80% контента и оставили одну кнопку регистрации и одну ссылку «Узнать больше» на главной странице.Конверсия на регистрацию увеличилась на 300%.

Дело не только в внешнем виде, но и в том, как это работает. Некоторые компании, например 37Signals, превратили «простую» в бизнес-модель. Вот цитата из книги Rework, , написанной основателями Джейсоном Фридом:

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

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

Заключение

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

No related posts.