как сделать красивый сайт

Вебсайт — принципы веб-гармонии, рекомендации по созданию качественного ресурса

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

Учитывайте концепцию бизнеса и вкусы его аудитории

Роскошь – вопрос интерпретации. Роскошь должна соотвествовать концепции продукта и вызывать отклик его целевой аудитории. Например, ваш сайт продает классические автомобили Rolls Royce и Aston Martin – легендарная изощренность этих автомобильных брендов будет поддерживаться консервативными шрифтами с засечками (Serif) – они ассоциируются с печатными изданиями и старыми деньгами. Напротив, если онлайн-магазин продает спортивные автомобили нового поколения – рубленые шрифты (Sans) будут выглядеть легче и динамичнее, ассоциируясь с минималистичной роскошью в современном прочтении.

Держите в фокусе роль шрифтов

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

  1. Определите для каждого шрифта его функцию на сайте и придерживайтесь их назначения. Например, один шрифт  используется в заголовках, второй – для написания основного текста, третий – в тегах. Не рекомендуется использовать более 3 гарнитур.
  2. Используйте шрифты разных категорий, чтобы создать контраст и исключить спор между схожими чертами шрифтов. Helvetica + Univers – один из примеров неудачного сочетания рубленых шрифтов. Clarendon + Rockwell – пример неудачного сочетания шрифтов с засечками.
  3. Комбинировать два шрифта с засечками и два шрифта без засечек можно только в случае, если они радикально отличаются друг от друга.
  4. Не пренебрегайте возможностью сочетать шрифты из одного семейства. Удачный пример – Helvetica Black для заголовка + Helvetica normal для основного текста.
  5. Сочетайте шрифты из одного исторического периода. Например готические, церковнославянские, греческие шрифты эффектно сочетаются внутри своего класса.
  6. Шрифты, принадлежащие одному дизайнеру также будут нести отпечаток авторского стиля и скорее всего удачно сочетаться между собой.
  7. Не сочетайте моноширинные и пропорциональные шрифты: PT Serif (моноширинный) + Arial (пропорциональный) плохо смотрятся рядом.
  8. Шрифты из различных семейств с одинаковой высотой и шириной глифов смотрятся логично рядом. Напротив, шрифты из разных семейств с разной высотой и шириной спорят друг с другом — например, Futura + Times New Roman. Чтобы определить сходства и отличия исследуйте букву «О» в верхнем и нижнем регистре. Убедитесь, что круглые и овальные «О» противоречат друг другу.
  9. Обратите внимание на начертание шрифтов: оно должно быть разным. Пример неудачного сочетания – Didot + Rockwell. Используйте контраст выразительных и нейтральных шрифтов. Если один шрифт обладает выразительным характером (например, жирным начертанием), сочетайте его с нейтральным шрифтом.
  10. Для создания динамичности страницы рекомендуется использовать разную цветность шрифтов, но не более 2-3 цветов. Простой способ проверить цветность – посмотреть на страницу, прищурившись. Если она выглядит одним пятном, в котором глазу не за что зацепиться, – тест не пройден.
    В случае, если выбранные шрифты по остальным параметрам логично сочетаются, но не прошли тест на цветность, рекомендуется поиграть с кеглем (размером шрифта), изменением начертания, межстрочными интервалами или кернингом (дистанцией между букв в одном слове).
  11. Выбрав шрифт, проверьте курсивное начертание каждой гарнитуры. В последствии может оказаться, что при курсивном форматировании шрифты не сочетаются.
  12. Подводные камни бесплатных шрифтов обнаруживаются, когда выясняется, что дизайнер не адаптировал важный символ к этой гарнитуре, например, «@».
  13. Каждый шрифт обладает настроением. Не следует их смешивать. Например, беззаботный Gill Sans не смотрится не к месту рядом с деловым Didot. Сочетайте шрифты с одинаковым или похожим настроением.
  14. Протестируйте страницу на предмет удобочитаемости. Тексту можен не доставать контрастности, может быть нарушена визуальная иерархия или роли, которые были назначены разным шрифтам, не будут ясны.

Таблица сочетаемости кириллических шрифтов от Pomelnikov.com

сочетаемые шрифты

Учитывайте принципы качественной верстки

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

Избегайте стоковых фотографий

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

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

Не усложняйте дизайн

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

Тщательно выбирайте цветовую схему сайта

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

Избегайте встроенных видео окон со сторонних ресурсов

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

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

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

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

logo

Экспресс-доступ к этой статье
на 24 часа за ₽250 после быстрой регистрации!

Экспресс-доступ

____________

Доступ ко всему контенту онлайн-энциклопедии на 365 дней за ₽5000 после быстрой регистрации. Никаких скрытых платежей!

Оплатить на год

____________

[footer]