Главная страница – оформление по правилам продающего сайта
Пн, 9/01/17 – 17:44 | One Comment

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

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

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

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

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

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

Свой сайт

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

Главная » Дизайн

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

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

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

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

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

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

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

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

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

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

Применительно к изображениям, иконкам, кнопкам.. это может быть надпись «кликабельно», изображения лупы, затемнения или появление рамки, замещение одного изображения другим, сдвиг изображения, вплывающие подсказки – тултипы (реализуемые на CSS, jQuery и плагинами) и т.д…

Key Art Designs (http://keyartdesigns.com/) использует возможность индикации кликабельности изображений по максимуму и с пользой: можно поставить лайк, увеличить, посмотреть детали и купить постер.

Читайте также:  О цвете с самого начала — цветовой круг

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

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

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

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

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

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

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

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

Читайте также:  Главная страница – оформление по правилам продающего сайта