То, как многие люди, не имеющие отношения к сфере дизайна, думают о дизайне, очень похоже на мое отношение к вину. На данный момент я абсолютно ничего не знаю о вине, за исключением того, что есть хорошие и плохие вина. Я не вижу разницы между Мальбеком за 300$ из таинственных долин Андского региона и обычной бутылкой, купленной в магазине за 30$. Но я могу распознать, когда вино настолько ужасно, что я не выпью его, даже если мне за это заплатят.
То же самое с дизайном. Любой непрофессионал может сказать: "Это хорошо смотрится" или "А это не очень ". Или они могут прокомментировать выбор цветов. Дизайн, как вино, имеет много общего со вкусами, предпочтениями, чувственным восприятием, со всем, что является весьма субъективным.
Что если вам попался хороший визуальный дизайн и вам необходимо его распознать? С чего начать и как критиковать? К счастью, есть некоторые основополагающие принципы создания качественного визуального дизайна. В частности, вы должны знать, что дизайн это нечто большее, чем просто эстетическое удовольствие. Мы выделили 5 способов, которые помогут недизайнерам отличить хороший визуальный дизайн от дизайна посредственного.
1. Существует фокус-центр
Хороший визуальный дизайн во многом похож на захватывающую историю. Представьте себе, что это как «Игра престолов», которая необычайно сложна поначалу. Частично это связано с всеохватывающим повествованием, которое создает фокусный центр для истории. То есть, "зима близко, и все люди должны умереть".
Тем временем, эта большая траектория постепенно разворачивается и появляется несколько основных историй, которые могут повлиять на главное повествование. Даже если герои часто погибают или же нам просто нравятся их образы и имена, есть еще главные персонажи, которым мы уделяем большое внимание в связи с акцентом, поставленным на них. Например, такие как блондинка с драконами, развратный карлик и другие.
Источник: HBO
Плакат предстоящего сезона «Игры престолов», на котором изображен Тирион лицом к лицу с драконом. Согласно принципу хорошего визуального дизайна, плакат имеет очень различимый фокусный центр, связанный с одной из главных сюжетных линий фильма.
Хороший визуальный дизайн работает точно таким же образом. Всегда существует фокус, который захватывает ваше внимание. И вы помните его, даже если кроме него больше ничего не вспомните. Фокусные центры отличаются тем, что визуально они доминируют.
Вы можете отличить доминирующий элемент по его визуальному весу. То есть, это первое, что бросается в глаза. Визуальный вес можно создать путем управления формой элемента, его размером, цветом, глубиной, текстурой, плотностью, насыщенностью, ориентацией и белым пространством вокруг него.
Когда вы рассматриваете новый дизайн, найдите Дейенрис Таргариен, в дизайне ее всегда выделяют. Наблюдайте, как различные детали придают визуальный вес. Определите, заслуживает ли оно того, чтобы доминировать на коммуникационном уровне. Если ваши пользователи должны запомнить из вашего продукта только одно изображение, сработает ли это изображение?
2. Существует визуальная иерархия.
Хороший визуальный дизайн заключается во взаимодействии важных деталей, и неудивительно, что должна существовать иерархия. Визуальная иерархия заключается в создании рейтинга элементов дизайна по важности. Для того чтобы достичь визуальной иерархии, некоторые элементы должны доминировать над другими, а те, в свою очередь, доминируют над другими, пока не останется ничего, над чем можно доминировать.
Например, посмотрим на эти два экрана мобильного приложения.
Два мобильных экрана похожих профилей, но с различными визуальными иерархиями, которые создают отличающиеся контексты для просмотра.
Просто глядя на дизайн, вы уже понимаете, как построен контент. Вы можете сказать, что где начинается и что следует дальше. И вы знаете, как понять это одним взглядом.
Экран слева делает акцент на фотографии в профиле и, скорее всего, это приложение для знакомств. В отличие от экрана справа, приложение на котором напоминает социальную сеть для дизайнеров, так как тут доминирующие элементы содержат информацию о дизайнерских предпочтениях. То, как был разработан дизайн этих экранов, уже говорит вам об этом.
Хороший визуальный дизайн использует иерархию, чтобы обеспечить контекст. Он направляет ваше внимание на суть дизайна, используя при этом то, как вы воспринимаете и познаете мир вокруг вас. В этом смысле мы понимаем визуальную иерархию, мы можем ее даже распознать.
При распознавании хорошего визуального дизайна необходимо научиться понимать визуальную иерархию. При рассмотрении дизайна сделайте шаг назад и еще раз просканируйте его. Запомните следующие вопросы:
Какие элементы всплывают?
Эти элементы достаточно важны, чтобы быть доминирующими?
Много ли их?
Что следует дальше? А после?
Можете ли вы быстро определить, с чем взаимодействует дизайн?
Имеет ли это смысл или больше похоже на визит к окулисту?
Хороший визуальный дизайн должен иметь четкую визуальную иерархию и вы не должны чувствовать себя человеком, который пытается расшифровать доску в кабинете окулиста.
3. Вы должны чувствовать соответствующие эмоции
Эмоции играют большую роль в дизайне. То, как дизайн вызывает в нас определенные чувства, то, как это влияет на наше настроение, и определяет разницу между пользователем и адвокатом. То, насколько уместны наши чувства по отношению к продукту, и отличает хороший визуальный дизайн от посредственного.
Посмотрите на пример этого сайта, принадлежащий предполагаемой компании ActiveCats.
Домашняя страница ActiveCats утверждает, что необходимо пройти дополнительную милю для успеха вашего бизнеса. Однако эмоции, передаваемые посредством выбора изображений, не являются эффективными, что доказывает, что перед нами не совсем качественный визуальный дизайн.
В дизайне в основном доминирует фоновое изображение с кошкой, лениво лежащей на земле. Даже если они утверждают, что для успеха моего бизнеса необходимо пройти лишнюю милю, общее настроение дизайна не придает мне уверенности в себе. Я чувствую себя расслабленным, когда смотрю на этот сайт. Также внутри меня смешанные чувства из-за моего отношения к кошкам. И, конечно, я не испытываю сильного желания проходить еще одну милю ради моего бизнеса.
Другой пример, из Blue Fountain Media, демонстрирует возможность преобразования потенциально негативных эмоций в позитивные. Какая реакция является типичной на странице ошибки 404? Что-то непонятное вдоль линий "% & /% # ∞ ÷!". Это ошибка, и это расстраивает. Креативно разработанная страница 404 преобразует ошибку в дополнительный опыт взаимодействия с веселым сайтом.
Креативно разработанная страница ошибки 404, которая позволяет пользователям играть в Pacman, - это отличный способ превратить негативные эмоции в позитивные.
Дизайн является эмоциональным, и это нельзя отрицать. Эмоции играют очень важную роль в определении успеха продукта. При рассматривании каждая область дизайна в целом вызывает у вас эмоции. Перейдите по различным разделам и представьте, будто бы вы используете дизайн. Чтобы дать оценку, сосредоточьтесь на ваших чувствах, а не мыслительных процессах. Попросите нескольких человек посмотреть на дизайн и «прочувствовать» его таким же образом.
4. Это не картины Пабло Пикассо
Тем временем необходимо запомнить раз и навсегда, что дизайн не искусство. Своими корнями дизайн действительно уходит в искусство. Но это вовсе не означает, что вам во время работы придется интерпретировать картину Пабло Пикассо.
Хороший визуальный дизайн должен быть понятным, он не должен интерпретироваться. Он решает проблемы и не вызывает полемики, как обычно бывает в искусстве. Дизайн направлен на решение определенной проблемы в определенных обстоятельствах. Поэтому не стоит считать, что дизайн то же самое, что и попытка расшифровать шедевры в Лувре.
Просмотрите, насколько различимы элементы в дизайне и сделано ли это таким образом, что все выглядит легко и понятно.
Хорошо ли используется белое пространство?
Не кажется ли все разбросанным в беспорядке?
Все ли хорошо сбалансировано?
Все ли симметрично?
Если есть использование асимметричного дизайна, смотрится ли оно отвлекающе или непонятно?
Насколько согласован дизайн?
Не бойтесь прямо сказать дизайнеру, что вы не понимаете. Хороший дизайнер всегда будет больше заботиться о том, как дизайн функционирует, а не только, как он смотрится.
5. Вашим глазам должно быть комфортно
Что вы скажете об этих изображениях?
Мобильное приложение с отвлекающим черно-белым психоделическим фоном отлично показывает, чего не должно быть в хорошем визуальном дизайне.
Онлайн-магазин свадебных платьев с большим количеством ярких неоновых цветов доказывает, что некачественный дизайн действительно может навредить вашим глазам.
Источник: Yvette’s Bridal
Если вы еще не закрыли браузер, не спешите, так как на этом мы закончили демонстрацию картинок, неприятных зрению. Моей целью является доказать, что хороший визуальный дизайн должен быть не только понятным и эффективным, он также должен быть эстетично оформленным. Он не должен вредить вашим глазам или вызывать у вас желания закричать.
Показанные выше картинки являются только примером, но все же важно запомнить, что тонкое различие между одним сочетанием цвета и другим при взаимодействии со шрифтом может быть решающим. Дизайнеры обычно используют цвета, которые соответствуют и подходят бренду. Кроме того, наличие двух шрифтов, с засечками и без засечек, является стандартным выбором для большинства дизайнеров.
Обычно дизайнеры не создают настолько резких для глаза изображений, как приведенные выше примеры (если только вы не забыли заплатить им в течение нескольких месяцев). Но хороший визуальный дизайнер знает, как сочетать цвета и шрифты, чтобы просмотр контента был простым и приятным.
Насколько хорошо работает контраст между текстом и цветами в дизайне?
Хорошо ли они смотрятся вместе?
Отчетливо ли читается текст или есть что-то, что затрудняет чтение?
Наблюдается ли несочетаемость между двумя или более шрифтами?
Соответствует ли выбор цветов и шрифтов продукту или бренду?
Надеемся, что вам понравились советы недизайнерам, как различить хороший визуальный дизайн!
