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

Приведём восемь распространённых ошибок в оформлении визуального сообщения и как их избежать.

1. Безупречная симметрия


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

2. Недостаточно белого пространства


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

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

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

3. Недостаточно повторяемости


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

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

4. Центрирование текста


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

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

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

5. Слишком много текста на одной строке


Чтение большого объёма текста, сформированного в множество длинных строк вызывает усталость глаз. Контент куда проще читать и усваивать, если он организован с соблюдением оптимальной длины строки. Последнее зависит от отступов, размеров и типа шрифта. Как правило человеку комфортно читать текст, длина строк которого 10 сантиметров, что равно 45-70 символам, включая пробелы, при размере шрифта 11-13 пикселей.

6. Неудачный кернинг


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

7. Перебор со шрифтами и цветом


Контраст — это важное и веское правило в дизайне для поддержания композиционного равновесия макета. Пользователь переживает эмоциональное впечатление, замечая необычные моменты оформления, контраст добавляет фокуса и не допускает, чтобы дизайн выглядел скучно и плоско.
Для выделения транслируемого сообщения можно выбирать и варьировать разнообразные цвета, шрифты, текстуры, размеры и формы — главное, не перестараться.
К примеру, последнее, что хотелось бы видеть на посадочной странице или брошюре — это беспорядочная смесь шрифтов. Это не только разрушает дизайн макета и выглядит отталкивающе, но ещё и не позволяет сосредоточиться на контенте. Эксперименты с выбором шрифтов должны ограничиваться 2-3 гарнитурами, сочитающихся с дизайном конкретного проекта.
Тоже справедливо и в отношении подбора цветов: избыток цветов создаёт впечатление кричащей, угнетающей и дешёвой безвкусицы. Ограничивайтесь 2-4 цветами, и всегда учитывайте разборчивость текста на выбранных цветах.

8. Использование растровых изображений


Растровые изображения — это сетка пикселей, это типичные файлы форматов: jpg/jpeg, tiff, gif, bmp, and png. Они зависят от разрешения, поэтому, увеличивая растровое изображение, оно становится неровными и размытыми. В свою очередь, векторные объекты масштабируемы и их можно увеличить без потери качества изображения, их линии будут оставаться четкими и резкими, как на экране так и в печати.

В заключение


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

Комментарии (12)


  1. tegArt
    18.06.2015 16:11
    +4

    8. Использование растровых изображений

    Интересно, сколько веб-разработчиков и, тем более, рядовых дизайнеров сайтов не допускают эту «ошибку».


    1. grossws
      19.06.2015 14:20

      И вообще, бедные фотосайты. Срочно всё в вектор!


      1. tegArt
        19.06.2015 14:30
        +1

        Справедливости ради, речь о дизайне, а не о контенте )


        1. grossws
          19.06.2015 14:38

          Тогда снимаю своё замечание) Мне больше нравятся сайты, использующие css, а не изобилие картинок для простых вещей.


  1. Comandante_WilD
    18.06.2015 16:55

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

    Что такое брендинг я понимаю, но в таком контексте как то не очень, можете пояснить, что это?


    1. falke2
      18.06.2015 18:58
      +1

      Я думаю имелось ввиду что-то вроде этого. В первом центрировано, а при ребрендинге уже нет.
      image


      1. Comandante_WilD
        19.06.2015 12:52

        Это логотип, он один из элементов бренда, но никак не бренд. Я почему то так и понял, что именно это имел ввиду автор, но это не правильно, можно было просто написать — логотип.


  1. DenimTornado
    18.06.2015 22:35
    +7

    И ни одной картинки… Отличная статья о дизайне.


  1. artemmalko
    19.06.2015 11:59

    Насчет 8 пункта есть вопрос все же, как быть со сложными радиальными градиентами и тенями, которые в векторе плохо отображаются или не отображаются вовсе?


    1. Novitsky
      03.07.2015 04:49

      Использовать CSS. Там, где это возможно, конечно. Но сейчас с помощью CSS можно сделать практически любой сложный градиент и тени.


  1. spice_harj
    19.06.2015 13:06

    неплохо бы примеров (самых таких, что бы ах).