В ходе опроса, проведенного в апреле 2012 года исследовательским центром Pew Research Center, было установлено, что 82 процента американцев старше 18 лет имеют доступ в Интернет дома, а в категории от 18 до 29 лет статистика выросла до колоссальных 97 процентов. В наши дни так много людей онлайн, что наличие веб-сайта важнее, чем когда-либо. К счастью, научиться создавать веб-сайт не так уж сложно . Если вы готовы создать свой собственный сайт, важно знать и соблюдать основные правила веб-дизайна, которые упрощают навигацию по сайту и делают его визуально приятным.
Важные правила веб-дизайна
В мире веб-дизайна существуют правила, которым необходимо следовать, чтобы максимизировать визуальную привлекательность и избегать списков вроде WebPagesThatSuck.com . Эти правила могут включать что угодно, от цветовых схем и изображений до точек стиля дизайна.
Изображения веб-сайта
Графика, которую вы используете на своем веб-сайте, рассказывает историю. Вам понадобятся уникальные или стоковые изображения, которые связаны с темой вашего сайта. Думайте об этих изображениях как о витрине вашего веб-сайта. Веб-сайт с голыми стенами выглядит незавершенным для посетителей сайта. В то же время, сайт со слишком большим количеством изображений может медленно загружаться и раздражать пользователей, которые все еще подключены к Интернету. Некоторые правила, которым нужно следовать для изображений, включают в себя:
- Используйте изображения .JPG или .GIF, так как большинство компьютеров могут их отображать.
- Масштабируйте разрешение в соответствии с настройками графики веб-сайта для более быстрой загрузки. Вы можете сделать это с помощью практически любого графического редактора или через онлайн-сайты редактирования фотографий, такие как LunaPic или PicMonkey .
- Используйте изображения экономно, чтобы избежать беспорядка, сохраняя при этом визуальную привлекательность.
- Старайтесь не загружать страницы изображениями, использующими флэш-память или анимацию, поскольку они отрицательно влияют на скорость сайта и могут отвлекать внимание.
- Используйте Правило третей в фотографии чтобы создать визуально привлекательный вид. Правило состоит из воображаемой сетки, которая располагается поверх любого изображения и делит его поровну на три блока поперек и три по низу. Взгляд зрителя сначала притягивается к верхнему левому углу, а затем к трем средним блокам. Это правило может помочь вам поместить самую важную информацию там, где ее с наибольшей вероятностью увидят.
- Не загромождайте страницу изображениями, которые не важны для вашего веб-сайта, например, фотографией новой собаки вашего лучшего друга. Сосредоточьте изображения на теме веб-сайта.
- Не используйте фоновые изображения, если только вы не накладываете их в таблицу CSS и не размещаете их только вокруг границы, где нет текста. Полноэкранные фоновые изображения могут отвлекать.
Цветовая схема
Цвета, которые вы используете на своем сайте, очень важны для ощущения и стиля вашего сайта. Если вы используете изображения для обрамления своей страницы, то ваши цвета должны дополнять эти изображения, а не конфликтовать с ними. Правила, которых следует придерживаться при выборе цветов для вашего сайта, включают в себя:
- Используйте цветовой круг, чтобы помочь выбрать цвета. Этот тип инструмента скажет вам, какие цвета хорошо смотрятся вместе, а какие просто не будут работать.
- Избегайте слишком смелых или насыщенных цветов. Например, флуоресцентно-желтый цвет никогда не будет хорошей идеей, равно как и узоры, отвлекающие от содержимого сайта.
- Для максимального эффекта используйте темный текст на светлом фоне, например черный на белом.
- Не используйте белый текст на черном, за исключением очень редких случаев, потому что его трудно читать и он может напрягать глаза.
- Не используйте сочетания цветов, которые затруднят чтение текста, например красный текст на черном фоне или белый текст на желтом фоне.
- Избегайте использования комбинаций красного/зеленого и синего/зеленого из-за проблем, которые эти цветовые комбинации могут создать для посетителей сайта, страдающих дальтонизмом.
Шрифты
Хотя сложные шрифты могут выглядеть красиво, они не являются хорошим выбором для дизайна веб-сайта. Вместо этого выберите шрифт, который будет легко читать.
- Придерживайтесь распространенных шрифтов, таких как Arial, Times New Roman или Calibri.
- Не используйте рукописные шрифты, которые могут быть трудны для чтения читателями.
- Избегайте необычных шрифтов. Не каждый компьютер распознает нестандартные шрифты, что может помешать посетителям даже увидеть текст так, как вам хотелось бы.
- Не используйте крошечный размер шрифта. Как правило , избегайте использования шрифтов размером менее 9 пунктов Tahoma, хотя для некоторых сайтов и аудиторий лучше подходят большие размеры.
Навигация
Даже красиво оформленный сайт может отпугнуть посетителей, если на нем сложно ориентироваться. Многие веб-дизайнеры живут по правилу трех кликов , которое гласит, что пользователи должны иметь возможность найти любую информацию, которую они хотят, не более чем за три клика. На самом деле этого может быть трудно достичь. Тем не менее, желательно стремиться к трем кликам как к идеалу. Это обеспечит удобство навигации и использования вашего сайта. Следуйте нескольким простым правилам, чтобы людям было проще ориентироваться на вашем сайте.
- Как правило, ограничивайте основные навигационные ссылки пятью или шестью. Слишком много ссылок может сбить с толку. Вы всегда можете создать подссылки под каждой из основных ссылок, например, основную ссылку под названием «услуги» и дополнительные ссылки под названием «создание портфолио» и «пользовательский графический дизайн».
- Разместите навигационные ссылки на каждой странице вашего сайта. Если посетитель нажмет на статью, он сможет легко вернуться на страницу, с которой начал.
- Включите ссылку «Главная» в структуру навигации.
- Разместите наиболее важные функции в верхней части каждой страницы, чтобы пользователям не приходилось перемещаться, чтобы найти то, что они, скорее всего, ищут.
- Не отключайте кнопку «Назад» в браузере. Это очень раздражает посетителей сайта.
- Повторяйте навигационные ссылки внизу каждой страницы, а также на верхней или верхней боковой панели. Таким образом, если посетитель сайта прокручивает до конца статьи или более длинной страницы, он все равно может легко вернуться на домашнюю страницу или в другую основную область сайта.
- Попросите друзей и родственников протестировать навигацию по вашему сайту, чтобы узнать, легко ли ориентироваться в структуре сайта.
Время загрузки
Почти каждый человек, который провел какое-то время в Интернете, сталкивался с сайтом, который очень медленно загружается. Это расстраивает, и посетитель сайта обычно уходит и переходит на сайт, который загружается быстрее. По словам экспертов по веб-маркетингу из ClickZ , даже задержка загрузки на одну секунду может привести к снижению коэффициента конверсии на семь процентов. Не позволяйте этому случиться с посетителями вашего сайта. В ходе опроса пользователей мобильных устройств, проведенного Keynote Systems в 2012 году, пользователи планшетов сказали Keynote, что они ожидают, что сайт загрузится за четыре секунды или меньше, иначе они перейдут на другой сайт. Чтобы ускорить загрузку:
- Не добавляйте тяжелую графику, например кнопки с JavaScript или анимацией, загрузка которых может занять много времени.
- Будьте осторожны с добавлением видео или других мультимедийных функций, которые могут увеличить время загрузки.
- Не добавляйте фоновую музыку, которую посетитель не сможет отключить.
- Избегайте использования музыки вообще, кроме случаев, когда это действительно необходимо, так как это замедлит загрузку страниц.
- Избегайте использования flash или java, которые могут потребовать от пользователя загрузки программного обеспечения для полного доступа к вашей странице.
- Сжимайте изображения и используйте CSS для ускорения загрузки последующих страниц, на которые нажимает посетитель.
Будь проще
В конце концов, правило дня — умеренность. Сделайте сайт простым, чтобы он быстро загружался независимо от подключения посетителя. Также помните о размере монитора и используйте HTML-программы с возможностью предварительного просмотра, чтобы вы могли просматривать свой сайт в разных браузерах и в разных размерах. Это бесценный инструмент, который может помочь вам спроектировать свой сайт так, чтобы он всем нравился. Лучшие дизайны веб-сайтов — это те, которые просты, но способны адаптироваться и расти по мере роста вашего веб-сайта.