Что позволяет судить о дизайне как о плохом или хорошем? Верно, что это субъективное вкусовое предпочтение того или иного человека. Но в конечном счёте хороший дизайн доносит сущность сообщения, поддерживает заинтересованность и чётко визуализирует транслируемую информацию. Плохой дизайн, в свою очередь, делает сообщение трудно разборчивым, тем самым усложняя коммуникацию.
Приведём восемь распространённых ошибок в оформлении визуального сообщения и как их избежать.
Баланс — один из фундаментальных принципов дизайна, который служит для распределения элементов на макете, создавая ощущение упорядоченности и равновесия. Баланс является достижением оптического и психологического равновесия в композиции. Однако баланс не всегда подразумевает использование строгой симметрии. Но в тоже время симметрия не является обязательно дурным тоном — это быстрый, банальный и простой способ передачи информации. Используя же асимметрию, можно вызвать непроизвольный интерес и прочие эмоции у субъекта информации. В результате чего — активизированное внимание и целенаправленное обращение субъекта к нашему ресурсу.
Пространство — другой из основных принципов, применяемых в дизайне. Он гласит о продуманном размещении связанных элементов, об их визуальном группировании друг с другом — это помогает нам соотносить информацию и понимать логику взаимоотношения элементов. Для данной цели и служит использование дизайнерами белого (негативного) пространства. Так мы позволяем аудитории быстро просмотреть страницу без применения дополнительных визуальных элементов вроде разделителей.
Распространённая ошибка в дизайне — это раскиданный контент по всей странице, в результате чего она выглядит загромождённой и неаккуратной. Это не способствует эффективному донесению информации до потребителя.
Итак, совершенствуйте белое пространство, давайте возможность заголовкам, подписям, параграфам и прочим элементам страницы «дышать». Белое пространство создаёт контраст, провожает взгляд зрителя в необходимом направлении, устанавливает аккуратную визуальную иерархию.
Повторение придает ощущение согласованности и постоянства, а также улучшает читаемость контента. Если в проекте отсутствуют повторяющиеся визуальные элементы — к примеру, цветовая схема, формы, шрифты, изображения, пространственные отношения — то сайт теряет целостность и читатели не смогут связать информационные блоки.
Но следует избегать пресыщения страницы повторяющимися элементами, в противном случае есть вероятность утомить аудиторию и вызвать у неё раздражение.
К следующей распространённой ошибке относится неуместное использование выравнивания большого количества текста по центру. Выравнивание по центру применимо к плакатам, приглашениям, брендингам, позволяя сбалансировать небольшой текст, выделить определенные аспекты макета и создать визуальную иерархию.
Если абзац, содержит больше трёх строк, то данный приём создает впечатление неряшливости и неуклюжести, снижается читабельность контента, поскольку рваность границ текстовых строк делает сложным переход от конца одной строки к началу следующей. Таким образом, пользователи вынуждены стараться и пристально вглядываться в абзац.
Необходимо использовать в отношении больших блоков текста выравнивание по левому или по правому краю. В случае веб-дизайна приём центрирования текста лучше оставить для заголовков и кратких подписей, цитат.
Чтение большого объёма текста, сформированного в множество длинных строк вызывает усталость глаз. Контент куда проще читать и усваивать, если он организован с соблюдением оптимальной длины строки. Последнее зависит от отступов, размеров и типа шрифта. Как правило человеку комфортно читать текст, длина строк которого 10 сантиметров, что равно 45-70 символам, включая пробелы, при размере шрифта 11-13 пикселей.
Кернинг — это регулируемое изменение расстояния между парами соседних символов. Качество текста зависит от определения правильного расстояния мужду буквами, а также от пропорций символов выбранного шрифта.
Если буквы слишком близко друг к другу, это создаёт впечатление, что надпись слиплась. Если расстояние между ними чересчур большое — надпись разваливается на отдельные символы. В обоих случаях задача создания аккуратного и легко читаемого текста не решается. Если целью текста не является эффект акциденции, а комфортное чтение, то необходимо создать кернингом гармоническую равномерность текста, чтобы дизайн выглядел аккуратно и визуально организованным.
Контраст — это важное и веское правило в дизайне для поддержания композиционного равновесия макета. Пользователь переживает эмоциональное впечатление, замечая необычные моменты оформления, контраст добавляет фокуса и не допускает, чтобы дизайн выглядел скучно и плоско.
Для выделения транслируемого сообщения можно выбирать и варьировать разнообразные цвета, шрифты, текстуры, размеры и формы — главное, не перестараться.
К примеру, последнее, что хотелось бы видеть на посадочной странице или брошюре — это беспорядочная смесь шрифтов. Это не только разрушает дизайн макета и выглядит отталкивающе, но ещё и не позволяет сосредоточиться на контенте. Эксперименты с выбором шрифтов должны ограничиваться 2-3 гарнитурами, сочитающихся с дизайном конкретного проекта.
Тоже справедливо и в отношении подбора цветов: избыток цветов создаёт впечатление кричащей, угнетающей и дешёвой безвкусицы. Ограничивайтесь 2-4 цветами, и всегда учитывайте разборчивость текста на выбранных цветах.
Растровые изображения — это сетка пикселей, это типичные файлы форматов: jpg/jpeg, tiff, gif, bmp, and png. Они зависят от разрешения, поэтому, увеличивая растровое изображение, оно становится неровными и размытыми. В свою очередь, векторные объекты масштабируемы и их можно увеличить без потери качества изображения, их линии будут оставаться четкими и резкими, как на экране так и в печати.
Без грамотно продуманного дизайна превосходнейшая идея теряет шанс быть замеченной, услышанной, воспринятой. Перечисленные выше распространённые ошибки и рекомендации, как их избежать, а так же дальнейшее самостоятельное гугление по перечисленным восьми пунктам позволят создавать профессионально исполненные макеты, на котором контент будет выглядеть привлекательно и эффективно транслировать сообщение целевой аудитории.
Приведём восемь распространённых ошибок в оформлении визуального сообщения и как их избежать.
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)
Comandante_WilD
18.06.2015 16:55Выравнивание по центру применимо к плакатам, приглашениям, брендингам, позволяя сбалансировать небольшой текст
Что такое брендинг я понимаю, но в таком контексте как то не очень, можете пояснить, что это?falke2
18.06.2015 18:58+1Я думаю имелось ввиду что-то вроде этого. В первом центрировано, а при ребрендинге уже нет.
Comandante_WilD
19.06.2015 12:52Это логотип, он один из элементов бренда, но никак не бренд. Я почему то так и понял, что именно это имел ввиду автор, но это не правильно, можно было просто написать — логотип.
artemmalko
19.06.2015 11:59Насчет 8 пункта есть вопрос все же, как быть со сложными радиальными градиентами и тенями, которые в векторе плохо отображаются или не отображаются вовсе?
Novitsky
03.07.2015 04:49Использовать CSS. Там, где это возможно, конечно. Но сейчас с помощью CSS можно сделать практически любой сложный градиент и тени.
tegArt
Интересно, сколько веб-разработчиков и, тем более, рядовых дизайнеров сайтов не допускают эту «ошибку».
grossws
И вообще, бедные фотосайты. Срочно всё в вектор!
tegArt
Справедливости ради, речь о дизайне, а не о контенте )
grossws
Тогда снимаю своё замечание) Мне больше нравятся сайты, использующие css, а не изобилие картинок для простых вещей.