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

Оформление текста

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

Гротеск против Антиквы

Гротеск — шрифт без засечек. Основоположником современных типографских универсальных гротесков считается шрифт Акциденц Гротеск, разработанный в 1896 году неизвестным художником фирмы Berthold. Антиква — класс типографских наборных шрифтов с засечками, появившийся в эпоху Возрождения в Западной Европе. Основой для разработчиков первых гуманистических, или ренессансных антикв служил рукописный книжный почерк — гуманистический минускул. На диаграмме ниже можно увидеть, что наибольшей популярностью у веб-дизайнеров пользуется гротеск.
Присутствие на веб-странице шрифт с засечеками (антиквы) придает дизайну некую элегантность. Когда же дизайнер применяет шрифт без засечек (гротеск), то его дизайн обретает современный вид. Однако, оба эти шрифта не могут быть использованы одновременно. Их смешивание меняет вид сайта не в лучшую сторону.

Количество шрифтов

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

Недостаток контраста

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

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

Поля, отступы, границы

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

Таким образом, необходимо потратить много времени на то, чтобы определить поля, отступы и границы с целью улучшить эстетичность дизайна. Взять, например, сайт компании Apple [http://apple.com].

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

Пропорции и размер

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

Вы наверняка слышали о таком понятии, как «Золотое сечение». Не все дизайны обязаны подчиняться этому принципу, но большинство из них стремятся к нему. Золотое сечение (1:1.62) представляет собой своеобразный регулятор баланса. Благодаря ему веб-сайт может стать более удачным и более приятным для глаза пользователя (или тебя, дорогой друг).