Дизайн сайта: хороший и плохой

О дизайне сайта часто говорят, оценивая его качество, что он плохой либо хороший. Однако понятия «хорошего» и «плохого» настолько субъективны для каждого из пользователей, что абсолютно точно определить ту границу, которая отделяет хороший дизайн сайтов от плохого, невозможно. Что такое хороший дизайн сайтов, а что такое плохой с объективной точки зрения? Следует разобраться. О том, насколько дизайн хорош, принято судить по нескольким критериям. Наиболее популярны такие критерии оценки: технологичность дизайна, его функциональность, оригинальность. Нередко дизайн сайтов оценивается, помимо указанных, еще и по критерию целесообразности. Технологичность дизайна сайта — так можно назвать параметр, отвечающий за корректное отображение дизайна сайта в любом браузере и на любом экране. Кроме того, технологичность дизайна сайта — это также и приемлемое время загрузки сайта, ведь зачастую именно «сверхтяжелый» дизайн вынуждает пользователей крайне долго ожидать полной загрузки страниц. Хороший дизайн сайта с функциональной точки зрения — это дизайн, который удобен для пользователей сайта. Так, шрифты хорошего функционального дизайна сайта удобно читаются благодаря оптимальному подбору цвета и гарнитуры, размеры элементов достаточны, а каждый из элементов расположен на своем месте. Плохой с функциональной точки зрения дизайн не позволяет посетителям свободно пользоваться сайтом и тем самым снижает общую эффективность сайта. Хороший функциональный дизайн сайтов — это также дизайн с тщательно продуманной навигацией. Если, к примеру, веб-дизайн предполагает использование выпадающего меню, то нельзя допустить, чтобы такое меню «перекрывалось» другими элементами дизайна, ведь в таком случае пользоваться сайтом сложно. Дизайн сайта с неудобной и непонятной навигацией можно смело назвать плохим. Хороший дизайн сайтов — это оригинальный дизайн. Причем оригинальность дизайна важна не только для репутации сайта, но также и для поискового продвижения. Дело в том, что за неуникальные шаблоны дизайна, как и за неуникальный контент, поисковые системы применяют к сайтам штрафные санкции и пессимизируют их в выдаче. Целесообразность дизайна сайта — таким понятием можно описать соответствие дизайна сайта ожиданиям пользователей . Например, на сайте металлургического завода, представляющего данное предприятие на международном уровне, совершенно неуместными могут оказаться яркие графические элементы, ведь целевая аудитория данного сайта — это высшее звено руководства промышленных предприятий. Следовательно, целесообразным в приведенном примере будет дизайн, выполненный в сдержанной цветовой гамме, в строгом стиле. Хороший по всем объективным критериям дизайн сайта Вы можете заказать в студии веб-дизайна WebStudio2U. У нас есть все необходимое для создания действительно хорошего дизайна: творческие умы и золотые руки наших дизайнеров, профессиональное программное и аппаратное обеспечение. С WebStudio2U дизайн Вашего сайта станет залогом его успешного существования. Закажите дизайн сайта от WebStudio2U прямо сейчас! Теги: дизайн сайта, дизайн сайтов, веб-дизайн

Чем отличается хороший сайт от плохого?

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

От качества оформления часто зависит посещаемость, а значит успешность созданного проекта.

Главная цель: создание качественного контента и дизайна.

Эстетичность – главный параметр хорошего сайта?

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

Достичь ее помогут следующие соблюдения:

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

Сайт, созданный любителем – средняя оценка качества!

Отличить любительский ресурс от настоящего, можно по таким критериям:

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

Профессиональные сайты

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

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

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

Разработать веб-дизайн достаточно сложно.

Рекомендуем пользоваться услугами профессиональных веб-мастеров.

Основные показатели плохого дизайна

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

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

Хороший проект отличить от плохого достаточно просто, иногда на это дело уходит несколько секунд!

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

7 критериев хорошего web дизайна сайта

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

Дизайн – не искусство

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

• зачем сайт нужен;
• как им пользоваться.

Главное в дизайне

У каждого сайта есть какая-то цель: интернет магазины продают; сайты знакомств — знакомят; имиджевые – рассказывают. Дизайн – соединительное звено между  посетителем и набором функций сайта. Главная задача дизайнера — подать эти функции максимально  доступно. У посетителя сайта не должно возникать ощущения сложности управления и запутанности. Когда на сайте «всё под рукой» – это хороший web-дизайн .

Дизайн и красота

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

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

Дизайн и слово

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

Дизайн и стереотипы

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

Дизайн и банальность

А вот банальности бойтесь! Избитость – враг хорошего дизайна! В помойку шаблонные улыбки «заграничных» людей! Долой надерганные из фотобанков картинки!  Ура!

Дизайн и люди

Дизайнер не проститутка, а заказчик — не спонсор.
Дизайнер не должен выполнять все «хотелки» заказчика. Задача дизайнера вникнуть в суть дела и решить его.
С другой стороны, «босс» не обязан платить за метания дизайнера и помогать ему в поиске смысла жизни. Если он никак не может объяснить заказчику, «Что это за  штука и почему она лежит тута?», — ему не место в web-дизайне. Пусть идет в художники – им позволено говорить «я так вижу».

Вдохновение по мотивам липка.ру!

Как сделать хороший дизайн сайта? Дизайн на примере веб-платформы Falcon Space

В этой статье мы коснемся вопроса дизайна портала, и как мы его учитываем в платформе Falcon Space. 

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

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

Если  пользователь говорит: «ВАУ», — но не понимает, где он находится и что от него хотят — это плохой дизайн. 

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

Элементы дизайна сайта/программы. Ключевые моменты

Дизайн создает впечатление для пользователя сайта

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

Нужен ли уникальный дизайн веб-проекту? 

На мой взгляд, этот вопрос напрямую связан с брендированием. Если у вас сильный, узнаваемый бренд, то имеет смысл делать что-то свое уникальное. Если вы noname для потребителя(а в большинстве случаев это именно так), уникальность не играет никакой роли. Более того, своей уникальностью и оригинальностью вы можете оттолкнуть часть аудитории.
Делайте понятный, простой, ожидаемый дизайн и не гонитесь за уникальностью.  У нашего сайта неуникальный дизайн.  Ну и что с того вам, как посетителю сайта? Аналогично будет думать и ваш потребитель, посетив ваш проект. 

Главные требования к дизайну IT-продукта

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

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

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

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

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

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

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

Дизайн веб-платформы Falcon Space

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

Посмотреть готовые темы на демостенде Falcon Space 

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

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

Меньше кастомизации — меньше нестыковок, проще сопровождение и развитие, дешевле поддержка, меньше стоимость владения продуктом.

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

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

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

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

В плане дизайна важно сразу правильно построить ожидания. Вы можете посмотреть наши текущие решения на demo.web-automation.ru. Тем самым вы уже можете примерно представлять, как будет примерно выглядеть ваш проект. 

Ключевые блоки на странице

На скрине прописаны основные элементы страницы: 

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

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

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

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

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

Примеры внешнего вида отдельных элементов веб-платформы

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

Ограничения изменений по дизайну сайта в веб-платформе Falcon Space

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

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

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

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

Чем меньше технологий, тем проще и дешевле поддерживать проект в дальнейшем

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

Мы постоянно работаем над возможностью кастомизации отдельных элементов.

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

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

Заключение

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

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

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

P.S. Смотрите статью Как создать свой IT-продукт для лучшего понимания нюансов процесса становления продукта в сети.  

Bad VS Good design | WebElement

Здравствуйте! Меня зовут Юлия. Я web-дизайнер компании WEBELEMENT. Сегодня расскажу вам о функциональном дизайне: обозначу три важных правила, проиллюстрирую их примерами и покажу, как отличить хорошее оформление сайта от плохого. Поехали!

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

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

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

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

Вот так мы оформили сайт издательства «СНЕГ»:

Похожую цветовую схему взяли для ZOTYE:

Классический пример хорошего контраста — сайт компании BILLDEX:

В трёх других примерах мы сыграли на контрасте синего, белого и чёрного:

Ниже — сайт ещё одного нашего клиента:

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

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

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

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

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

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

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

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

Третий принцип — аналоги Говорит о сочетании трёх любых соседних цветов.

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

Здесь цвета сайта подобраны по принципу триады:

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

На сайте ниже цвета подобраны по принципу аналогов:

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

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

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

Картинки важно отделять от текста отступом.

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

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

Обратите внимание, как мы отделили разные элементы друг от друга в примерах ниже:

Теперь — антипримеры. Здесь названия товаров врезаются в описания, а некоторые кнопки выбиваются из общего ряда, создавая хаос. Непонятно, к верхним или к нижним товарам относятся кнопки:

Здесь картинки врезаются в текст, нарушая его «личное пространство», а «Контакты» и «Новости» — в фон текста об истории:

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

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

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

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

Хорошо На сайте ниже между текстом и фоном хороший контраст. У текстов одинаковое выравнивание и заметная структура. Логотипы над текстами отражают смысл написанного и привлекают внимание. Такие описания хочется читать.

Другие важные принципы типографики: CAPS LOCK подходит только для главного заголовка, чтобы обратить на него внимание посетителя сайта. То же касается увеличения межбуквенного расстояния. Не нужно растягивать и сжимать буквы где бы то ни было, в исходных шрифтах обычно соблюдены правильные пропорции. Нарушать их — плохой тон. Блок с текстом не следует располагать шириной на всю страницу (12 колонок). Оптимальная ширина одного блока — примерно полстраницы (6−8 колонок). Текст должен быть структурирован, а заголовки — выделены. В противном случае он превратится в сложночитаемое полотно. Выравнивание по левому краю упрощает чтение. Не рекомендуем использовать другие виды, тем более — смешивать их на одной странице. Исключением может стать главный заголовок страницы, для него также подойдёт выравнивание по центру.

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

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

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

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

Правило #5 Хорошая графика делает сайт живым «Живой» сайт не похож ни на один другой. В нём есть изюминка: реальные фотографии людей, которые работают в вашей компании или приобретают её услуги и товары, которые вы предлагаете. На хорошем сайте: Изображения имеют высокое разрешение и качество — никаких размытых линий и видимых пикселей, водяных знаков. На фотографиях нет неестественно счастливых людей, представленных в несуществующих ситуациях. Лучше всего показать контекст использования, как продукт решает проблему покупателя. Изображение должно иллюстрировать то, что вы предлагаете. Фон должен гармонировать с основным изображением, а не перетягивать внимание на себя. Векторные изображения (например, рисованных персонажей) нельзя сочетать с фотографиями, а плоские — с объёмными. Нет изображений, на использование которых у вас нет прав. Сайт становится «мёртвым», когда изображения убивают его уникальность, портят своим видом и лишают смысла. Помните: не каждая картинка с фотостока, отдалённо подходящая по тематике вашему сайту, сделает его лучше.

Так выглядят «живые» сайты с правильно подобранным визуальным рядом:

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

Так выглядят «мёртвые» сайты, на которых размещены не имеющие пользы картинки:

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

Понравилась статья? Поделитесь с коллегами, расшарьте в соцсетях и подпишитесь на нашу рассылку: с WEBELEMENT вы всегда будете в курсе трендов digital-маркетинга

А тех, кто хочет получить максимум полезных знаний о маркетинге, выстроить собственную систему привлечения клиентов и увеличить прибыль, мы приглашаем в «Школу маркетинга» Первый урок из курса «Маркетинг для прибыли» — БЕСПЛАТНО! Получить доступ к первому уроку

С уважением, Юлия Панасенко Digital-агентство WEBELEMENT +7 (905) 410-45-55 [email protected]

Хороший дизайн сайта: критерии и признаки

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

 

1. Цвет

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

 

2. Расположение элементов.

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

 

3. Шрифты.

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

 

4. Соответствие новым тенденциям в дизайне.

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

Примеры современного профессионального дизайна можно найти, например, на ресурсе: themeforest.net.

|  Категория: Статьи блога  |

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

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

6 признаков хорошего дизайна сайта

1. Контакты

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

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

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

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

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

2. Доверие

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

• товары,
• услуги,
• курсы,
• уроки.

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

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

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

3. Удобство

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

Что значит удобство сайта?

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

Да, скорость к дизайну не относится, но это дружеский совет вам, читатели.

Как это всё в дизайне отразить:

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

Что ещё? Напишите по контактам на этом сайте, мы вам расскажем.

4. Фишка

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

Как выделиться среди всех остальных?

1. Персонажем
2. Логотипом
3. Анимацией
4. Баннером
5. Иллюстрациями
6. Правильно подобранными сочетающимися цветами, это касается и оформления текстов
7. Стилем. То есть единый стиль для всего сайта

5. Адаптивностью

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

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

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

6. Выделяющийся один из экранов

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

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

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

Это всё просто и не требует компьютерных знаний.

Как заказать дизайн сайта

А теперь проверьте ваш дизайн на соответствие всем 7 признакам. Всё сошлось? Если нет, заказывайте дизайн сайта у нас: студии графического дизайна «Логомания». Сделать это можно так.

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

Категория: дизайн сайта

8 принципов хорошего веб-дизайна

Краткое описание:

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

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

Итак, как создать хороший веб-сайт?

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

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

1. Простое — лучшее

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

2. Последовательность

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

3. Типографика и удобочитаемость

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

4. Мобильная совместимость

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

5. Цветовая палитра и изображения

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

6. Простая загрузка

Никто не любит веб-сайт, загрузка которого занимает слишком много времени.Так что позаботьтесь об этом, оптимизируя размеры изображений, объединяя код в центральный файл CSS или JavaScript, поскольку это уменьшает количество HTTP-запросов. Кроме того, сжимайте HTML, JavaScript и CSS для повышения скорости загрузки.

7. Простая навигация

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

8. Связь

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

Завершить

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

Это гостевая статья, предоставленная Элис Джексон.

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

Свяжитесь с ней в Twitter: @ jackson_alice1 🙂

Что делает хороший веб-сайт: краткое руководство по дизайну веб-сайтов

Интересный факт: сегодня в мире существует почти 2 миллиарда веб-сайтов.

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

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

Фон разработан Freepik

Что вообще отличает хороший веб-сайт?

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

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

И вам повезло.Потому что в этом посте, , я научу вас всему, что мы знаем о том, что делает веб-сайт отличным.

И вам даже не нужно быть дизайнером. Ура!

---

Индекс отличного веб-дизайна (нажмите для навигации)

Раздел 1: Визуальный дизайн веб-сайта (также известный как «Красивый»)

Раздел 2: Технический дизайн веб-сайтов (также известный как «Geeky Stuff»)

Раздел 3: Инструменты веб-сайта (также известные как «Полезные материалы для улучшения вашего веб-сайта»)

---

Хватит разговоров, давайте погрузимся в веб-дизайн 101.

Что делает хороший веб-сайт?

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

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

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

1. Назначение. Отличный дизайн начинается с поставленной цели.Спросите себя: «Чего я хочу достичь с помощью этой страницы?» Если у страницы нет четкой цели, подумайте о том, чтобы избавиться от нее.
2. Эстетично. Я подробнее расскажу об этом в первом разделе, посвященном визуальному дизайну, но ваш сайт должен хорошо выглядеть. Если ваш сайт выглядит так, как будто он был создан в 90-х годах, пора обновить.
3. Актуальное и оригинальное содержание. Ваш сайт должен показывать содержание, релевантное вашему целевому рынку и оригинальное. Плагиат является незаконным и карается Google.Кроме того, лучше быть первоклассной версией себя, чем второсортной версией кого-то другого.
4. Понятная навигация по сайту. Я расскажу об этом подробнее во втором разделе, посвященном техническим аспектам, но знаю, что навигация имеет значение. Любая страница вашего сайта должна находиться в пределах трех кликов от любой другой страницы вашего сайта. Ваша навигация должна быть интуитивно понятной и простой. Это помогает как Google в поисковой оптимизации, так и вашим посетителям в навигации.

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

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

1. Визуальный дизайн веб-сайта (также известный как «Симпатичность»)

Представьте на мгновение сценарий.

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

Тогда вы видите это.

Ха-ха, нет. Ты ушел.

Это крайний пример? да.

Дизайн веб-сайтов все еще имеет огромное значение? Ага.

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

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

Итак, уравнение выглядит так:

Отличный дизайн сайта = больше доверия = больше конверсий

Отличный дизайн сайта = больше доверия = больше конверсий. Нажмите, чтобы написать в Твиттере

Как сделать так, чтобы ваш сайт выглядел великолепно? Начните со своего бренда.

Брендинг через дизайн сайта

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

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

Что вы хотите, чтобы люди думали, когда видят ваш сайт?

Острый, современный, сатирический, профессиональный, что-то еще?

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

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

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

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

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

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

Поиск, создание и использование изображений

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

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

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

Какие из этих цветов вы бы предпочли купить?

(Источник)

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

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

Помните принцип дизайна №1: Хороший дизайн имеет цель.

Любое изображение, не имеющее цели, считается плохим. Период.

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

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

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

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

• Диаграммы и графики точек данных
• Скриншоты
• Качественная стоковая фотография (выбирайте с умом)
• Индивидуальные дизайны и векторная графика
• Профессиональная (или, по крайней мере, хорошо сделанная) фотография

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

3 примера красивых сайтов

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

Вот несколько, которые мне нравятся:

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

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

Expedia: Visit Britain получила награду разработчика за свой дизайн.

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

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

Довольно о визуальных эффектах. Давай станем немного помешаннее.

2. Технический дизайн веб-сайта (также известный как «Geeky Stuff»)

Технический веб-дизайн включает в себя такие вещи, как:

• Адаптивный дизайн и мобильность
• Высокая скорость загрузки
• Поисковая оптимизация (SEO)
• SSL-шифрование
• Архитектура и навигация сайта

Не волнуйтесь, если что-то из вышеперечисленного заставило вас спросить: «Что?».Я объясню их все обычным языком.

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

Согласно сообщению журнала Smashing Magazine Адаптивный веб-дизайн: что это такое и как его использовать :

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

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

Если вам кажется, что это звучит сложно… это так.

Но это важно. Фактически, смартфоны сейчас составляют более 51% всего онлайн-трафика, а планшеты — чуть более 12%. И это число растет.

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

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

Так что же делать не дизайнеру?

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

Ура, мы оптимизированы для мобильных устройств!

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

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

Быстрая скорость загрузки веб-сайта

Согласно опросам, проведенным Akamai и Gomez.com, почти половина пользователей Интернета ожидают, что сайт загрузится за 2 секунды или меньше, и, как правило, покидают сайт, который не загружается в течение 3 секунд!

Это не дает вам много места для маневра. Но если вы все еще не уверены, получите это:

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

Другими словами, если у вашего сайта отстой, вы проиграете. Долгое время.

Так как же обеспечить высокую скорость загрузки? Попробуйте это:

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

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

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

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

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

Поисковая оптимизация (SEO)

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

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

Сделано плохо, ни одна душа не найдет тебя в гугле.

По словам Джона Рогнеруда, есть четыре шага к SEO. Вот несколько важных выводов Джона:

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

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

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

Защита вашего сайта с помощью SSL-шифрования

Вы, наверное, видели маленький зеленый замок в адресной строке рядом с веб-сайтом.

Это называется шифрованием SSL.

Google дает зашифрованным сайтам небольшое повышение SEO. Но, возможно, более важным является фактор доверия, который он дает вашим посетителям.

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

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

Архитектура сайта и навигация

Помните принцип дизайна №4: имейте четкую навигацию по сайту.

Навигация важна по двум основным причинам:

1. Лучшее SEO (потому что это облегчает Google индексирование вашего сайта).
2. Лучшее удобство использования (потому что посетителям легче ориентироваться).

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

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

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

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

3. Инструменты веб-сайта (также известные как «Полезные материалы для улучшения вашего веб-сайта»)

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

Вот несколько наших любимых инструментов:

Formilla Онлайн-чат

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

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

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

Восстановление после отказа тележки Conversio

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

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

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

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

Формы подписки на электронную почту MailChimp

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

Что ж, для этого мы используем MailChimp и премиальный плагин MailChimp WordPress.

Вот 60-секундное поясняющее видео:

Кнопки совместного доступа AddThis в соцсетях

Видите кнопки обмена слева от экрана? Они взяты из плагина AddThis.

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

Yoast SEO

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

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

W3 Общий кэш

Скорость загрузки критически важна для SEO и удобства использования. Один из способов увеличить скорость загрузки сайта — это кеширование браузера.W3 Total Cache упрощает кеширование.

Вот руководство, которое поможет вам его настроить.

Google Analytics

Что бесплатно, легко установить и очень выгодно? Гугл Аналитика.

Google Analytics может дать вам ТАКОЕ понимание того, откуда ваш трафик приходит, идет и останавливается. А поскольку это бесплатно, нет никаких оправданий, чтобы не использовать его.

Вот руководство по установке и использованию Google Analytics.

Мониторинг посетителей в реальном времени: часто задаваемые вопросы

Заключение

Мы подошли к концу нашего пути.Похлопайте себя по спине.

Итак, что мы узнали?

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

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

Plus, сильный веб-сайт привлекает трафик через Google, получает ссылки с авторитетных сайтов и публикуется чаще.

Мы находимся в 2020 году. Хороший веб-сайт больше не значит «иметь». Это абсолютно необходимо.

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

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

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

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

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

1. Цель закладывает основу.

Latinxs Who Design имеет очевидную миссию.

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

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

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

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

2. Содержимое придает смысл

Purple Mattress просто и оптимистично рассказывает о преимуществах своего бренда.

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

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

—Якоб Нильсен, «10 эвристик юзабилити для дизайна пользовательского интерфейса»

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

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

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

3. Визуальные эффекты привлекают внимание людей

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

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

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

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

4. Гармония заставляет дизайн петь.

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

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

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

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

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

5.Типографика формирует восприятие

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

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

— Беатрис Вард, «Хрустальный кубок»

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

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

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

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

6. Организация унифицирует упорядоченный дизайн сайта

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

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

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

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

7. Цвет задает тон

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

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

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

8. Белое пространство создает баланс.

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

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

9. Визуальная иерархия упрощает навигацию.

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

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

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

10. Подлинность укрепляет доверие

С момента своего основания до приобретения крупной корпорацией Ben & Jerry’s сохраняла верность своим ценностям.

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

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

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

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

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

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

В чем важность веб-дизайна для вашей аудитории?

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

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

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

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

Изображение бренда

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

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

Посмотрите, например, на снимок экрана главной страницы Coca Cola.

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

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

Цвет

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

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

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

Макет

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

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

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

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

Шрифты и типографика

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

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

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

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

Доступность веб-сайта

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

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

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

AccessiBe AI также сканирует и анализирует ваш веб-сайт, чтобы убедиться, что он соответствует всем законам, связанным с доступностью (ADA, WCAG, раздел 508), всего за 48 часов. Это поможет вам избежать судебных исков, связанных с доступностью (да, это так), и привлечь большее количество людей в вашу аудиторию.

Навигация по сайту

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

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

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

Например,

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

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

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

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

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

Заключение

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

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

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

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

Шейн Баркер — консультант по цифровому маркетингу, специализирующийся на маркетинге влияния, контент-маркетинге и SEO. Он является соучредителем Attrock, агентства цифрового маркетинга. Он консультировал компании из списка Fortune 500, влиятельных лиц с цифровыми продуктами и ряд знаменитостей из списка A-List.

Почему хороший веб-дизайн важен и зачем он вам нужен

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

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

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

Почему так важен дизайн веб-сайтов

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

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

75% пользователей судят о надежности компании только на основании визуального дизайна (

Источник )

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

94% первых впечатлений пользователей о веб-сайтах здравоохранения связаны с дизайном (

Источник )

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

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

Источник )

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

38% людей перестанут взаимодействовать с вашим сайтом, если ваш контент и макет непривлекательны (

Источник )

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

Что мы подразумеваем под «хорошим дизайном»

Вы, наверное, слышали фразу «красота в глазах смотрящего».

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

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

Источник: paper-leaf.com

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

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

Дополнительная литература: Руководство для владельцев бизнеса по созданию веб-сайта для вашего бизнеса

Зачем нужен хороший веб-дизайн

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

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

Design оказывает огромное влияние на то, насколько легко посетителям найти то, что они ищут, в дизайне вашего веб-сайта. Исследование показывает, что 86% посетителей вашего веб-сайта хотят видеть информацию о продуктах или услугах, 65% ищут контактную информацию, а 52% ищут страницу «О компании».

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

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

Навигация

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

По сути, закон

Хика гласит, что чем больше вариантов вы даете кому-то, тем больше времени у него / нее уходит на принятие решения. Его часто резюмируют так: «Держи это просто, глупо».

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

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

Преобразование

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

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

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

Трудно говорить о пустом пространстве без упоминания Apple. Они известны чистым дизайном и простыми яркими изображениями (например, этот iPhone), окруженными тонной белого пространства. Сообщение здесь очень ясное: они хотят, чтобы вы нажали на этот телефон — и поскольку на странице почти ничего не отвлекает вас, это почти сложно сделать , а не .

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

Профессионализм и доверие к бренду

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

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

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

Мобильность

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

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

SEO

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

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

Ваш дизайн веб-сайта оказывает правильное влияние?

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

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

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

Руководство для новичков по передовым методам проектирования веб-сайтов

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

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

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

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

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

Почему так важны передовые методы веб-дизайна

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

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

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

Просто взгляните на эту статистику:

• 75% пользователей судят о надежности компании только по визуальному дизайну.
• Посетителям требуется всего 0,05 секунды, чтобы сформировать первое впечатление о дизайне веб-сайта. Да, мы имеем в виду 50 миллисекунд .
• Около 38% людей перестанут взаимодействовать с веб-сайтом, если сочтут его контент и макет непривлекательными.

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

Для нас хороший дизайн предполагает две вещи:

• Форма , которая фокусируется на внешнем виде вашего веб-сайта.
• Функция , которая фокусируется на том, как ваш веб-сайт работает и конвертируется.

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

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

Лучшая навигация

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

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

Возьмите наш сайт Crazy Egg, например:

Мы разделили наши варианты на пять категорий: Features , Crazy Egg для , Resources , Legal и Social . Посетители могут просмотреть эти категории, прежде чем выбрать наиболее подходящий вариант. Это делает сайт более удобным для навигации, чем представление меню в одной строке без категорий.

Более высокая функциональность

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

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

Повышение доверия к бренду

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

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

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

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

Лучшее SEO

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

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

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

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

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

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

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

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

Возьмем, к примеру, Macy’s.

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

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

Сжать все изображения вашего веб-сайта

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

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

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

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

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

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

Оптимальное использование белого пространства

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

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

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

В Crazy Egg мы старались оставлять много белого пространства между элементами. Взгляните на этот пример:

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

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

Сделайте свой сайт адаптивным для мобильных устройств

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

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

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

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

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

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

Соответствие стандартам доступности

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

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

Следуйте этим советам, чтобы сделать ваш сайт более доступным:

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

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

Обеспечьте максимальную безопасность веб-сайтов

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

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

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

Выберите безопасный веб-хостинг

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

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

Храните свои учетные данные в безопасности

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

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

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

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

Регулярно обновляйте ядро ​​WordPress, плагины и темы

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

Wordfence, Sucuri и Defender как одни из лучших плагинов безопасности WordPress, которые могут обнаруживать вредоносные программы и обеспечивать безопасность вашего сайта.

Получить сертификат SSL

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

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

Стандарты передового опыта веб-дизайна

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

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

Изображения

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

Навигация

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

12 правил, которые можно и чего нельзя делать в веб-дизайне

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

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

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

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

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

2. Дизайн простой в использовании навигации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Используйте мигающий текст и рекламу.

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

Заключение

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

No related posts.