Ср, 3/05/17 – 1:15 | 4 комментария

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

Читать статью »
Веб маркетинг

О маркетинге в сети Интернет и web-эффективности

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » UX и Юзабилити, Дизайн

Правила хорошего сайта: ожидаемая навигация и цветовое оформление

14 ноября 2012 Нет комментариев

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

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

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

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

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

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

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

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

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

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

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

Кликабельные опции при наведении на картинку - лупа, лайки, детали, купить постер

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

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

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

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

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

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

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

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

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

Вместо итога

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

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

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