Visual Design
Исчерпывающее руководство по визуальному дизайну
В этом руководстве речь пойдет о фундаментальных принципах визуального дизайна, которые будут подкреплены большим количеством примеров для лучшего понимания. Независимо от того, являетесь ли вы профессионалом, либо же начинающим, изучение самых основ сильно поможет вам улучшить качество вашей работы.
Это очень исчерпывающая статья работает по принципу "все в одном" и включает все необходимое для старта.
Темы
Мы рассмотрим большое количество вещей в этой статье, включая следующие принципы:
Целостность
Выравнивание
Продолжительность
Акцентирование
Отношение фигуры и фона
Иерархия
Постоянство
Схожесть
Пустое пространство
Равновесие
Близость
Замкнутость
Что такое визуальный дизайн?
Визуальный дизайн может помочь вам передать сообщение другим людям. Дизайн – это взаимодействие; через визуальный дизайн вы взаимодействуете с тем, кто "смотрит". Вашими "словами" станут фигуры, текст, символы, изображения, пробелы, текстуры, цвета и даже анимации. Ваша цель – провести пользователя через дизайн к месту, которое вы выбираете сами (но чтобы оно также было наилучшим для пользователя!). Хороший UI (пользовательский интерфейс) серьезно к этому относится и предлагает подходящие решения.
Ниже вы найдете семь принципов дизайна и несколько полезных принципов Гештальта, о которых вам следует знать. Их нужно воспринимать как советы, а не как однозначные решения, они должны помочь вам принимать решения, которые сделают ваш результат лучше.
Отношения
Одна из тем будет встречаться нам во всех сегодняшних принципах: это отношения. Хороший визуальный дизайн – это создание особых отношений внутри вашей работы. Последующий контент этой статьи относительно прост, но он требует постоянной практики, чтобы отношения внутри вашей работы связались воедино.
Гештальт
Все принципы, которые мы перечислили (такие как "близость", "отношения фигуры и фона") можно назвать "принципами Гештальта". Эти правила объясняют, каким образом мы, как наблюдатели, воспринимаем отдельные элементы, как часть общей картины. Как мы отличаем паттерны и, как мы уже упомянули, отношения. Также, как и другие принципы визуального дизайна, эти можно применить к печати, вебу, видео и фотографии.
Пора приступить к первому принципу Гештальта!
Целостность
Дизайн работает, когда он стремится к целостности посредством взаимосвязи между элементами. Старайтесь создавать взаимосвязанные структуры. Близость, выравнивание, продолжительность и повторение помогут достичь целостного восприятия всех элементов. Это также поможет разделить кусочки пазла без использования дополнительных границ и других дизайнерских решений. Как наблюдатель, в первую очередь мы воспринимаем общую структуру, когда смотрим на что-то новое.
Dropbox многое делает правильно, используя все перечисленные принципы. Страница "О нас" – отличный пример целостности. Заметьте, визуальная простота здесь достигнута за счет всего пары элементов на странице. Они могут обойтись здесь даже без разграничителей, это все равно будет работать.
Целостность нужно создавать постепенно – мгновенно вы ее не добьетесь. Подумайте об этом, как о совмещении макро- и микро- целостности; меньшие элементы также должны быть взаимосвязаны, когда вы пытайтесь создать цельное впечатление от дизайна.
GitHub также отлично справляется с принципом целостности. Все мельчайшие элементы в такой насыщенной контентом странице как эта создают опыт, при котором все эти элементы смотрятся органично и ничего нигде не торчит.
Целостность и связность заставляют пользователя чувствовать себя спокойнее. Создание доверие и понимание, как пользователи должны взаимодействовать с контентом, всегда должны идти в дополнение к основному продукту. Если на пути пользователя не стоит преград, которые помешают ему сконцентрироваться, его опыт будет безболезненным.
Изображение выше еще раз демонстрирует отличное использование принципа целостности. Секция, которая показывает список возможных интеграций создавалась, чтобы быть целостной.
Выравнивание
Выравнивание устраняет визуальный хаос. Подумайте о захламленном столе и том, что убран и организован. Даже если вам нравится ваш творческий хаос на столе, ваши клиенты и пользователи, незнакомые с вашим столом, предпочтут понятно отсортированный внешний вид, но не хаотичный. Проще находить необходимую информацию, если будет присутствовать некое ощущение "потока" Плюс, будет проще подчеркнуть иерархию (о чем мы еще поговорим), отказавшись от беспорядочно расположенных где попало элементов.
Этот скриншот Dropbox со страницы помощи демонстрирует приятное использование понятной сетки с четко расположенными элементами.
themanyfacesof.com представляет из себя отличный сайт в тематике Берта Рейнолдса с большим количеством живых и отличных примеров выравнивания. Здесь очень небуквальное выравнивание, которое по большей части достигается через говорящую типографику и понятную разметку.
Список возможностей Dropbox – еще один прекрасный пример, стоящий изучения. Простой, непретенциозный и эффективный для структурирования контента, он использует выравнивание на полную.
Продолжительность
Визуальное выравнивание работает рука об руку с принципом продолжительности в Гештальте. Мы еще рассмотрим то, как можно его использовать в ваших сетках в этой серии уроков. Элементы, направленные в одну сторону, например выравненные друг по другу, создают более тесную групповую связь между собой и отличаются от элементов, выровненных по иным принципам. Создав эти направляющие контента, вы также создаете порядок и поток на вашем макете.
LOL Colors отлично иллюстрирует пример выравнивания и продолжительности. Даже при отсутствии границ у элементов, вы можете отчетливо заметить работающую сетку, а также направление цветовых капель, стремящихся вниз.
На макро уровне, вам нужно работать над выравниванием взаимосвязанных элементов и их расположением в логичном месте. Так, элементы органичней вплетутся в общую композицию и будут тратить меньше усилий пользователя на навигацию. Это визуальная связь также поможет соединить малые элементы дизайна с большими. Это как невидимая граница, которая скрепляет кусочки вашего дизайна воедино, позволяя глазам беспрепятственно скользить по странице.
Объекты можно выровнять по краю и по центру, что обычно визуально слабее. Выравнивать контент по краям однозначно предпочтительный вариант. Выравнивание по центру можно использовать, чтобы подчеркнуть какие-то особенные элементы или призывы к действию.
Акцентирование
Акцентирование – это полностью о точках концентрации внимания. Чем их меньше, тем они сильнее. Здесь главное не создавать множество важных элементов – если вы разместите акценты повсюду, нечему будет выделяться и весь дизайн будет восприниматься как сплошной шум. Я думаю, вы встречали сайты, которые игнорируют этот принцип и размещают множество разноцветных кнопок повсюду. Неприятное послевкусие, правда? Вот к чему приводит отсутствие правильного акцентирования. Но что еще более важно – полное отсутствие акцентов разрушает иерархию.
Выбранные вами инструменты – главные подозреваемые, Использование цвета и размера, чтобы создавать акценты – наиболее эффективное решение.
Dropbox отлично показывает пользователю, что нужно делать. Конечно, расставляя акценты. Визуально ничего не мешает пользователю полностью сконцентрироваться на регистрации. Наиболее сильные акценты здесь – синие кнопки, которые сильно выделяются на фоне всего видимого окна. У этого дизайна отличный визуальный баланс – и он был еще лучше, если бы они сделали одну кнопку.
Одного или двух акцентированных элементов в пределах видимого окна будет достаточно, чтобы привлечь внимание пользователя к наиболее важным элементам на странице. Решить, на какие элементы ставить акценты, может оказаться сложнее, чем кажется. Спросите себя, что на вашей странице настолько важно, что должно привлечь внимание пользователя в первую очередь. Выбирайте с умом!
Акцент на продукте прекрасно выглядит в рамках дизайна. В случае с клавиатурой Orée описание продукта и задний фон создают отличный акцент на продукте. Красота! Также здесь отлично работает симметрия.
Мало чего можно сказать о том, как HTC представила VIVE. Акцентирование в лучшем виде. Такой хороший дизайн как этот однозначно отлично продает.
Craft от Invision имеет замечательный лэндинг, на котором поле, куда нужно вводить емэил отлично акцентировано. Ведь на самой странице довольно легко потеряться. Название продукта также отлично выделяется. Разделение между задним и передним фоном сделано особенно тонко.
Отношение фигуры и фона
Этот принцип очень силен и настолько фундаментален, что вам следует разобраться с ним как можно скорее. Работая над дизайном, вам следует постоянно задаваться вопросом: какие элементы находятся на заднем плане, а какие на переднем?
В этом примере вы можете заметить, что контент и кнопка отлично отделены от фона. Четкое разделение очень важно при работе с концентрацией пользователя. Линии несколько размыты, однако все равно это отличное взаимоотношение фигуры и фона.
Пока наши предки были заняты охотой и собирательством, зачастую жизненно необходимо было отличать, что может представлять сиюминутную угрозу, а что может принести какую-то пользу. Выделять вещи на фоне любого "шумного" фона до сих пор кажется важной составляющей благополучного "выживания". Представьте тигра, спрятавшегося за кустом в джунглях или дождь на горизонте. С точки зрения неврологии, эта визуальная стратегия выживания оставила огромный отпечаток на нас, так что вряд ли когда-либо изменится этот механизм восприятия. Может прозвучать забавно для людей, занятых в диджитале, но это знание позволяет решать быстрее, как правильно акцентировать информацию для пользователя и как "спрятать" детали в фоне.
Здесь у нас очень выдающееся изображение на фоне, которое забирает много внимания на себя – это хорошо, т.к. оно создает эмоции, благодаря чему пользователь ощущает личную связь. Несмотря на это, кнопка, ведущая к действию, отлично размещена и ее цвет выводит ее на передний план.
Другой проблемой может оказаться скорость обработки за раз большого количества информации нашими глазами и мозгом, что ведет к расстановке приоритетов, например, к тому, на чем следует сконцентрироваться в первую очередь. Понимая это, вы сможете разместить частички пазла вашего дизайна более эффективно.
Этот пример отлично работает, перспектива изображения поддерживает различие между задним планом и передним. Лично мне хотелось бы видеть кнопку на конце стола – здесь глаза оказываются в первую очередь из-за линий стола.
Пример нового Samsung Gear 360 хорош насколько возможно; задний план и передний отлично работают вместе. Есть четкое разделение и задний план акцентирует камеру на переднем. Умно и весело!
Ниже представлены еще несколько примеров хорошего акцентирования и принципа отношения фигуры и фона:
Иерархия
Иерархия это целиком о назначении визуальной важности элементам; что-то наподобие сестры акцентирования, но с целью уменьшить визуальную нагрузку. Это макро руководство по последовательной концентрации, по тому, на чем следует сконцентрироваться в первую очередь, как продлить визуальные элементы, в общем о том, как правильно рассказать историю визуально. Рассматривайте элементы на странице по "степени важности" и размещайте их эффективно. Всего с двумя сильно акцентированными элементами вы мягко берете пользователя за руку и ведете через ваш сайт как и было вами задумано.
Скриншот главной страницы Reddit возможно не лучший пример хорошо сделанного дизайна, особенно в смысле выстраивания понятной и сильной иерархии. Reddit – это один из тех случаев, когда успех сайта не так тесно связан с дизайном, как мне кажется. В его беспорядочности есть аутентичность, однако сделать визуальную иерархия ясней было бы не так уж и сложно.
Как мы сказали ранее, вам не нужно, чтобы все элементы на странице выглядели одинаково важными. Если так сделать, то пользователю будет очень сложно переварить ваш контент. Вместо этого создайте различные уровни важности, которые подчеркнут общую структуру вашего дизайна. Есть одна стратегия, которая точно сработает: больше размер – больше важность. Когда базовая иерархия создана через размер и расстановку, можете добавить цвет, который поможет подчеркнуть определенные элементы еще больше. Если вы наоборот, начнете с цвета, вы сами усложните себе работу, такой подход менее эффективен.
Мне нравится, как страница Explore на Github справляется с типографикой, чтобы выстроить строгую и понятную иерархию. Глазам очень легко считывать контент и следовать по ссылкам. Также хорошо используется цвет для создания визуальных якорей, то же применимо и к поисковой выдаче.
Понятная иерархия помогает быстро отличить хороший дизайн от посредственного.
Скриншот выше представляет собой еще один отличный пример того, насколько хороши дизайнеры Dropbox. Здесь огромное количество контента, но он отлично структурирован, глаза беспрепятственно скользят через текст.
Постоянство
Если вы воспользуйтесь уже упомянутыми принципами, но у вас не будет хватать постоянства, то вы замедлите весь прогресс. Постоянство помогает создать умственную модель модель дизайна, сайта, либо облика, к которому вы стремитесь. Схожие элементы должны и визуально выглядеть схоже. Также, как только вы начнете кодить ваш дизайн, создать более уникальный дизайн, не забывая о постоянстве, становится проще.
Пример выше демонстрирует постоянство на разных уровнях. Стиль и размер иллюстраций одинаков. Кнопки выглядят идентично. Также как и визуальный "вес" всех трех колонок и выравнивание. Каждая колонка имеет одну и ту же внутреннюю структуру. В целом, это просто, продуманно и эффективно.
Постоянство создает ожидания насчет последующих встреченных пользователем элементов, он ожидает, что они будут похожи.Благодаря постоянству уменьшается умственная нагрузка.
Избегать большого количества различных шрифтов и размеров шрифтов – один из наиболее важных путей к постоянству. В пределах одной среды люди привыкают читать определенным образом и не нужно это менять.
Встречали ли вы сайты, которые используют множество различных кнопок вместо пары, которые бы могли создать лучшее постоянство? Уверен, что встречали, и готов поспорить, что вам они не понравились. Кнопки на примере ниже принадлежат интерфейсу одного сайта. Как можно заметить, это удивительно, насколько далеко можно забраться в неправильном направлении.
Удобство использования можно значительно увеличить, когда такие как эти элементы разделяют единый стиль. Зачем заставлять учить пользователя разные языки, чтобы пользоваться вашей страницей? Это бессмысленно!
Схожесть
Думаю, вы догадались, что в основе этого принципа Гештальта лежит постоянство. Схожесть – единство схожих элементов, которые вы можете использовать в своем дизайне. Элементы, которые имеют одинаковые характеристики будут более тесно связаны между собой – более, чем те, что имеют меньше общего.
Схожесть элементов подразумевает связь между ними, благодаря которой между этими элементами и всеми другими создается сильный контраст.
Это список пользователей на Dribbble, который выдает дизайнеров и их работы. Это прекрасный пример того, как схожесть может соединить разные элементы дизайна, чтобы создать прочную связь и единый общий вид. Движение на странице создается за счет близости друг к другу превью работ и схожести каждой строки.
Reddit не удается достичь постоянства применением схожести. Список постов имеет как длинные, так и короткие заголовки, некоторые из них имеют отступы, а некоторые нет. Это сбивает с толку, но опять же исправить это не составит большого труда.
Вы можете добиться схожести между элементами благодаря следующим простым вещам:
цвету
форме
размеру
очертаниям
текстуре
ориентации
пространству
постоянству размеров
Все эти вещи подразумевают взаимосвязь. Цвет и очертания (форма) отлично помогают подчеркнуть эту связь. Несмотря на то, что схожесть это мощный инструмент, он не служит для подкрепления иерархии, он не из тех что создает ее сам по себе.
Это список по-настоящему силен. Очень прост, его легко читать и усваивать, он очень связен благодаря схожести. Ему легко удается создавать блоки с контентом, которым даже не нужны границы:
Подсознательную карту, которую мы, как пользователи создаем, не стоит недооценивать. Она помогает задать паттерн для организации контента. Хаос находится по другую сторону это спектра и мы, как дизайнеры, стремимся совсем не к нему. Представьте страницу с текстом, где буквы отображаются построчно, но при этом эти строки расположены хаотично по всей странице. Нес лишком привлекательно, правда?
Это лэндинг страницы Explore на Github. Здесь использование постоянного размера и облика было бы более эффективным. Увеличенный размер некоторых плиток на деле не является каким-то "редакторским" решением, чтобы выделить определенные категории; на деле размер плиток выбирается наугад. При отсутствии веских причин менять размер единство, основанное на постоянстве, могло бы работать лучше. Также вам дают два типа плиток. Одни с небольшим заголовком, а другие еще и с небольшим описанием. В придачу эффекты при наведении мыши также разнятся между каждым видом плиток. Это привлекает внимание, но эта страница не так сильна, как страница Showcases в этом же разделе:
С точки зрения функциональности, схоже выглядящие элементы должны выполнять схожие задачи для пользователя. Когда пользователю приходится без веской причины перепривыкать к использованию схоже выглядящих элементов интерфейса, это вызывает фрустрацию. Схожесть помогает контролировать ожидания – уже само по себе мощный инструмент в вашем арсенале.
Пустое пространство
Что именно понимается под "пустым пространством"? Пустое пространство – это неиспользуемое пространство между элементами. Оно эффективно дробит контент. Большое количество пустого пространства для главных элементов вашего дизайна – так создаются очевидные эффекты. Небольшое пустое пространство, с другой стороны, используется для небольших деталей, например, для промежутков между различными элементами типографики.
Вот отличный пример использования пустого пространства, которое прекрасно расставляет акценты на новом продукте. Тут присутствует несколько дизайнерских принципов, но пустое пространство играет ключевую роль в прекрасной работе этого дизайна.
Взгляните на пример выше. Если мы посмотрим на расстояния на Foundersuite, то заметим, что расстояние снизу и сверху от элементов разнятся. Такое измерение создает "активное" пустое пространство, направляя наше внимание. Давайте рассмотрим подробнее:
"Активное" пустое пространство звучит довольно неопределенно, но мы используем его, когда пустое пространство выражает взаимосвязь с элементами вокруг него. Активное пустое пространство помогает вычертить композицию или структуру вашего контента и положительно влияет на иерархию. "Пассивное" пустое пространство не так хорошо разделяет элементы, но имеет такую же важность, т.к. создает небольшие пространства, чтобы дизайн не "задыхался". Однако, большое количество неактивного пустого пространства, которое не имеет отношения к окружающим элементам, сделает вашу работу выглядящей необдуманно или даже хаотично.
Отличный пример использования пустого пространства от ionic.io. Здесь работают вместе большие и малые пустые пространства.
Каждый день, когда вы читаете текст, вы являетесь свидетелем хорошего использования пустого пространства, даже не замечая его. Расстояние между словами, предложениями, абзацами, это все пустое пространство, которое помогает визуально разделить значение написанных букв. Оно ведет глаза через контент и дает нам подсказки для более эффективного движения сквозь текст. Как большие, так и малые пустые пространства дают глазам возможность передохнуть и сохранять общий баланс.
Не забывайте, что мы пытаемся добиться разнообразия благодаря пустому пространству. Это помогает нам переключаться на другие элементы для создания различий. Если вам нравится "чистый" вид вашего любимого веб-дизайна, значит, осознанное использование пустого пространства является наибольшей его частью. Ничто не выражает элегантность и утонченность лучше, чем разумное использование пустого пространства.
Баланс
Равновесие это целиком о сохранении единого "веса" визуала, оптического единства. Нам инстиктивно нравится смотреть на вещи, которые выровнены по вертикальной оси – одна из особенностей бинокулярного зрения. Поддержание равновесия через вертикальную ось – безопасный паттерн для использования. Но, если вы сможете мастерски нарушить это равновесие, создать какое-то напряжение или сюрприз, возможно, чтобы подчеркнуть какую-то часть композиции, ваш дизайн получится более динамичным и интересным.
Сайт адаптера Blockhead имеет несколько отличных примеров того, насколько аккуратно они применяют баланс в их дизайне. На примере выше изображение, которое сопровождается текстов слева от него, добивается отличного оптического равновесия. Это же применимо к изображению ниже. Равновесие, иерархия, пустое пространство и акцентирование, все это здесь используется.
Добиться равновесия через симметричность несложно, и это отличный способ создания визуально привлекательных композиций. Ассиметричный подход менее статичен, но он требует больше усилий для правильного использования. Для ассиметричного равновесия нам нужно работать над сохранением воспринимаемого равновесия непохожих элементов.
Лэндинг Dropbox отлично использует визуальное равновесие. Вы можете заметить, что изображения и текст вместе создают отличное ассиметричное равновесие – особенно в сочетании с секциями вокруг них. И не заставляйте меня говорить о том, как они используют карпов, чтобы подчеркнуть адаптивность и работу между различными типами устройств. Гениально!
Когда вы играете с визуальным балансом, все инструменты дизайна в вашем распоряжении: размер, цвет, положение, форма, повтор, текстура, все они по одиночке могут иметь индивидуальный "вес" и взаимодополнять друг друга.
Ассиметричный баланс более дружелюбен и динамичен. Не то что бы я был большим фанатом Dropbox, но в рамках дизайна их сайт мастерски использует каждый из перечисленных здесь принципов, достигая таким образом превосходного качества.
Близость
Элементы дизайна, которые расположены относительно недалеко друг от друга создают взаимосвязь. Правильно управляя близостью, вы можете обойтись меньшим количеством необходимых элементов, например, вам не понадобятся границы. Опять же, единство лежит в основе этого всего и все инструменты, которые мы обсудили, в большей или меньшей степени служат для достижения единства.
На сайте YoGrow вы можете обнаружить, как используется близость. Я бы предложил им только использовать меньше цвета фона и границ, позволяя близости создавать свою магию.
В примере ниже, который мы уже использовали, единственно благодаря близости создается взаимосвязь между этими палетками. Границы или цвет фона можно опустить, создавая гармоничный вид.
Замкнутость
Замкнутость – это композиционный прием, когда пользователь сам заполняет пустые пространства вашего дизайна – те, что вы благоразумно создали сами. Это предположение, иллюзия, которая дополняет изображение, которое дизайнер хочет, чтобы вы увидели. Замкнутость это то, что позволяет пользователям понимать комиксы, делать предположения о том, что произошло в промежутке между картинками. Замкнутость также позволяет воспринимать пространство внутри логотипов.
Мозг человека, стремящийся искать паттерны во всем, сам проводит работу по сопоставлению картинки со знакомыми ему элементами.
Возьмем, к примеру, GitHub. Логотип в черном кружке, который они используют, с противоположного цвета Octocat внутри. Даже будучи небольшого, мы можете легко отличить маскота Github и, будучи также помещенным в навигационную панель, он выглядит довольно спокойно и непретенциозно.
Так же это все привязать к разработке дизайна интерфейса для веба? Честно говоря, практически никак. Скорее это пригодится при разработке иконок и логотипов.
Заключительные мысли
Мы многое здесь рассмотрели! Теперь постарайтесь использовать эти принципы, когда вы будете встречаться с каким-либо чужим дизайном. Попытайтесь понять, брали ли создатели визуальные взаимосвязи в расчет, применяя их осознанно. Не забывайте, что для того, чтобы использовать эти принципы эффективно, вам нужно практиковать эти принципы! Если вы будете их практиковать, эти принципы однозначно помогут вам наслаждаться процессом создания дизайна еще больше.
Last updated
