Как сделать правила на сайте

Добавил пользователь Алексей Ф.
Обновлено: 04.10.2024

Нелегко создать работающий и красивый дизайн веб-сайта. На самом деле это не так.

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

Знаете ли вы, что когда посетитель заходит на ваш сайт, у вас есть около пяти секунд (или меньше), чтобы привлечь его внимание и удержать на сайте? Это не так уж много времени, чтобы произвести на кого-то впечатление. Если время загрузки сайта составляет больше 3 секунд или навигация на вашем сайте сделана не удобно, то вы можете попрощаться со своими посетителями.

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

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

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

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

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

1. Убедитесь, что ваш сайт имеет адаптивный дизайн

Как улучшить дизайн сайта? - Адаптивный дизайн современного веб-сайта

Как улучшить дизайн сайта? — Адаптивный дизайн современного веб-сайта (проект на Behance)

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

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

2. Упростите навигацию на сайте

 Your browser does not support HTML5 video.

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

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

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

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

3. Улучшите скорость загрузки страницы для более низкого показателя отказов и более длительных сеансов

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

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

4. Тщательно продумайте расположение и размер элементов на сайте

Как улучшить дизайн сайта

Закон Фиттса, фундаментальный принцип взаимодействия человека с компьютером, гласит:

Время обнаружения цели зависит от расстояния до цели и ее размера.

Другими словами: чем ближе и / или крупнее цель, тем быстрее вы можете навести на нее курсор (или палец).

Вот несколько советов:

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

5. Используйте свободное пространство для создания визуальной иерархии

Как улучшить дизайн сайта

Использование свободного пространства в современном дизайне сайтов (пост на Dribble)

White space — именно так дизайнеры называют свободное пространство в современном дизайне сайтов. Вообще оно не обязательно должно быть белым. 🙂 Свободное пространство имеет решающее значение для макета пользовательского интерфейса веб-сайта. Загроможденный пользовательский интерфейс — это веб-эквивалент белого шума: ничего не выделяется.

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

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

6. Добавьте больше фотографий на сайт

Как улучшить дизайн сайта

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

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

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

7. Применяйте теорию цвета

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

Как улучшить дизайн сайта — Цвета в современном веб-дизайне (Dribble)

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

8. Не используйте слишком много цветов в цветовой схеме

Как улучшить дизайн сайта? - Минималистичная цветовая схема в современном дизайне сайта

Минималистичная цветовая схема в современном дизайне сайта

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

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

9. Сохраняйте единообразие типографики

 Your browser does not support HTML5 video.

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

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

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

Книги по типографике:

10. Сделайте дизайн простым

Как улучшить дизайн сайта? - Простота в современном дизайне сайта

Простота в современном дизайне сайта (Dribble)

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

11. Отображайте скелетный блок при загрузке

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

 Your browser does not support HTML5 video.

12. Добавьте анимацию

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

13. Добавьте темную тему сайта

Рост сторонников темной стороны, вероятно, продолжится и в этом году. Выглядит элегантно, стильно и современно. Темный режим играет жизненно важную роль, поскольку мы стали проводить больше времени со смартфонами и ноутбуками в вечернее время. Но темный режим — это не просто белые тексты на темном фоне. У него есть еще пара преимуществ. Темный режим экономит заряд батареи, если в устройстве используется OLED или AMOLED экран. Это влияет на уменьшение нагрузки на глаза при использовании устройства в ночное время, а также уменьшает блики на экране и сводит к минимуму синий свет.

14. Иконки добавят информативности

Иконки в современном дизайне сайтов

Как улучшить дизайн сайта? — Иконки в современном дизайне сайтов

Иконки в блоке оффера

Как улучшить дизайн сайта? — Иконки в блоке оффера (Dribble)

  • привлечь внимание
  • лучше понять смысл блока
  • перемещаться по интерфейсу
  • сэкономить визуальное пространство
  • установить связь с пользователем

15. Убедитесь, что на сайте есть страница 404

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

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

Вот почему страница 404 чрезвычайно важна.

Рассмотрим несколько примеров страниц 404 в современном дизайне.

Заключение

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

Верстка сайта: инструкция для начинающих

Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается. Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.

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

Что включает в себя верстка сайта

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

Выделяется два типа разработчиков сайтов:

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

Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.

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

С чего начинается разработка сайта? Правильно, с внешнего оформления или дизайна. Дизайн – это то, что в первую очередь видит посетитель, когда заходит на сайт. Поэтому дизайну при его разработке следует уделить особое внимание.

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

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

Правила дизайна сайта

Техническое задание (ТЗ)

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

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

Макет

Уважаемый дизайнер! Если у вас стоит тридцатидюймовый дорогущий монитор, то это вовсе не означает, что вы должны рисовать макет в 3000 px по ширине. Вы должны понимать – вы пока в меньшинстве. У львиной доли посетителей, пришедших на сайт, разрешение экрана будет 1024 – 1920px. Правда сегодня рынок девайсов пользователей интернета завоевывают мобильные устройства, их уже перевалило за 50%. Здесь существуют некоторые правила и стандарты.

Ширина макета указывается в пикселях и должна быть с точностью до одного пикселя, т.е. круглые цифры и никаких там 899 px или 955 px, к примеру. Также это касается всех блоков, которые у нас будут присутствовать в макете: левая, правая колонки, форма авторизации, различные модуля и т.д.

Определяемся с шириной макета основного блока (контейнера) сайта. Обычно ширину макета подстраивают под самое распространенное разрешение экрана. В последнее время я прошу дизайнера, чтобы он рисовал дизайн по модульной сетке фреймворка twitter bootstrap, шириной 1170px. Когда дизайн нарисован строго по сетке это значительно упрощает верстку.

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

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

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

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

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

Задний фон сайта

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

Если в качестве заднего фона используется текстура, то обязательно сохраните один повторяющийся фрагмент для верстальщика отдельным файлом в формате jpg, png или gif.

Текст

Веб-дизайнер при подборе шрифтов для сайта должен учитывать следующее: существуют стандартные шрифты и нестандартные шрифты. Что значит стандартные и нестандартные?

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

Нестандартные шрифты — это шрифты, которые не установлены в операционной системе. Обычно нестандартные шрифты подгружаются в шаблоне сайте посредством правила font-face. Следует иметь ввиду, что использование нескольких нестандартных шрифтов — нежелательно, т.к. нестандартные шрифты увеличивают время загрузки веб-страницы (документа). Весить они могут намного тяжелее стандартных шрифтов. Здесь еще зависит от того, какие начертания шрифтов использует дизайнер — чем больше начертаний, тем тяжелее шрифт. Желательно не использовать платные шрифты, т.к. потом возникают проблемы с их преобразованием для WEB. Для поиска шрифта вполне можно обойтись бесплатными Гугл шрифтами.

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

Размеры шрифта (кегль) обязательно указываем целыми числами, размеры типа 19,82 px и тому подобное не допустимы. Без необходимости не используйте всякие трансформации и издевательства над шрифтами. Добавите немного головной боли верстальщику.

Желательно не заливать цвет шрифта градиентом. Можно, но только без фанатизма. Лучше все же указать однотонным цветом.

И последнее, что касается шрифтов – никогда не РАСТРИРУЙТЕ текстовые блоки. За данное деяние вам точно оторвут голову, не в буквальном смысле конечно.

О цветовой гамме

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

Активные элементы

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

Резюмируем все выше сказанное

  • Тщательно изучите тех. задание;
  • Ширина основного контейнера сайта минимум 1000 px. Не важно сайт резиновый или фиксированный. Сегодня большую популярность получила модульная сетка Twitter Bootstrap — 1170px, используйте ее в своем дизайне;
  • Фиксированному сайту не забываем указать задний фон;
  • Все слои в макете должны быть сгруппированы;
  • Не ленитесь отрисовывать каждый элемент, будь то форма авторизации или форма поиска;
  • Желательно использовать только стандартные шрифты. Нестандартные в умеренных масштабах;
  • Качественно пройдитесь по макету и доработайте все недостающие элементы. Если это сделает верстальщик, то скорее всего сломает весь макет;
  • Дизайнер должен тщательно организовать свою работу, не забывая о том, что после него будут работать другие люди;
  • Подготовить макет для сдачи верстальщику – сохранить макет в формате PSD и скриншот в формате JPEG. Также, следует нарисовать иконку сайта favicon и watermark для фото;
  • Не отключать и не удалять направляющие, т.к. с ними будет работать еще верстальщик;
  • Все блоки на сайте должны быть выравнены строго по пикселям, т.е. полпикселя недопустимо;
  • Чем качественнее нарисован макет, тем качественнее он будет сверстан верстальщиком;
  • Помните, что на ряду с красотой макет должен быть легким, т.е. сверстанный сайт должен быстро загружаться

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

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

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

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

Какое яблоко вы хотите съесть?

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

Или одно из этих?

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

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

Вы же хотите, чтобы тексты на вашем сайте читали?

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

10 советов, чтобы сайт созрел

1. Правильный размер шрифта повышает читабельность текста. Пользователи не хотят настраивать шрифт на вашем сайте самостоятельно. Позаботьтесь о них заранее. Слишком маленький шрифт их отпугнет, слишком большой напряжёт. Выбрав стандартные размеры (12,13,14 кегль), вы не ошибётесь.

2. Пространство сайта не должно быть заполнено на 100 %. Это только утомит читателя, он никогда не просмотрит такую страницу целиком. Оставляйте пустые пространства, играйте с отступами. Текст должен быть окружён пустотой. Это сотворит чудо: контент начнут читать. Происходит это потому, что пользователь сразу поймёт, где начало текста, а где конец. Читательский глаз не устанет, ваш сайт будет только радовать.

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

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

5. Хороший заголовок – половина успеха статьи. Размер хорошего заголовка – дополнительная треть успеха. Самые популярные размеры заголовков находятся в диапазоне от 18 до 29 пикселей. Если название совсем короткое (одно-два слова), можно использовать более крупный кегль.

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

7. Акцентируйте внимание на словах с помощью разных размеров шрифтов, стилей текста (капслок, курсивное и полужирное начертание). Хороший вариант – сочетать шрифты с засечками и без. Раньше все старались пользоваться шрифтами без засечек в заголовках, основной текст писать с засечками. Сегодня тенденция изменилась в сторону микса.

8. Размеры строк имеют значение. Ширина строки во весь экран понравится только фанатиками вашего сайта и его тематики, другой человек прекратит чтение. Слишком узкая колонка тоже не подойдет, так как глаза устанут прыгать от строчки к строчке. Самая приятная для человека строка содержит от 55 до 75 символов. Помимо размера, для восприятия важно расстояние между абзацами и строками.

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

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

Эти основные правила легко запомнить и применить. Присмотритесь к своему сайту – вдруг он нуждается в доработке?

Читайте также: