Мария Верхунова — Мысли как дизайнер

2021-05-11 12:44:15 ​​Про белое пространство


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

Одним из первых арт-директоров, осознавших, что пустая поверхность имеет не меньшее значение, чем занятая печатью, был Алексей Бродович. Его макеты для журнала Harper's Bazaar в 1950-х годах рассматривали белую бумагу в качестве электромагнитного поля с блоками шрифта и фотографиями, заряженными положительной и отрицательной энергией. В 1970-80х белое пространство преобрело значение элитарного, направляющее внимание на другие органы чувств (тактильные, звуковые).

И хотя белое пространство часто описывается как "пустое", "бесцветное" и многих до сих пор пугает, оно очень далеко от нейтрального.

Белое пространство (в теории whitespace) — также фундаментальный инструмент проектирования пользовательского опыта. Значимость свободного пространства часто недооценивают. Так же, как тишину между музыкальных нот.


Людям надоедает переизбыток информации. Пустое пространство успокаивает и дает нам «дышать».


Белое пространство существует двух типов: микро и макро.

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


«Пробелы следует рассматривать как активный элемент, а не пассивный фон» – Ян Чихольд


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


Итого, коротко, для чего нужно белое пространство:

1. Помогает сфокусироваться на главном

2. Улучшает понимание
~
Исследование Д. Ю. М. Лина показало, что “использование пробелов между абзацами и на левом и правом полях увеличило понимание почти на 20%.”

3. Помогает создать баланс
~
Элементы с различным визуальным весом могут быть сбалансированы с помощью пространства вокруг них

4. Связывает отношения
~
Меньшее количество пробелов (микро) может быть применено для указания связи между элементами

5. Помогает установить визуальную иерархию и зависимости
~
Сочетание макро-и микро-пробелов может быть использовано для создания визуальной иерархии

6. Помогает создать ритм в дизайне Открыть/Комментировать

2021-05-06 12:03:09 ​​Символы и графически идеи, которые меняли графический дизайн

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

Сжатый кулак — символ силы, власти и гнева.

Долгое время левые считали приветствие кулаком своей эксклюзивной особенностью — символ солидарности и неповиновения.

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

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

Поднятый кулак использовался (и до сих пор можно наблюдать) на всех крупных митингах, плакатах и листовках для студенческих, антивоенных, женских и др политических мероприятий по всему миру. Он до сих пор эксплуатируется как символ несогласия, пусть иногда и коммерчески ассимилировано. Открыть/Комментировать

2021-04-21 19:29:07 ​​Собеседуя дизайнеров, частенько спрашиваю, на что они опираются при принятии тех или иных решений в интерфейсах. В процентах 35 получаю ответ: "интуиция". И это неплохо, если интуиция подкрепляется совокупностью знаний, которыми дизайнер обладает.

Напишу сегодня краткий списочек основ. Конечно, список можно продолжать бесконечно, но это уже более контекстная история.

1. Закон Миллера
Пользователь запоминает не более 7 элементов за раз

2. Закон Хикка
Закон Миллера плавно перетекает в закон Хикка: чем меньше элементов и действий, которые должен совершить пользователь на экране, тем быстрее пользователь совершает выбор. Иногда лучше сделать несколько шагов, чем уместить много элементов на одном экране

3. Закон Теслера
У любой системы есть объем сложности, который нельзя сокращать. Важно всегда держать баланс между простотой интерфейса и задачей пользователя, которую мы помогаем ему решать. Есть вещи, которые просто важно не усложнять еще сильнее

4. Закон Якоба
Чем органичнее приложение (в моем случае это касается приложения, которое является частью оффлайн работы, а не ценностью само по себе) с платформой или с приложениями, которыми пользователь пользуется каждый день, тем скорее оно ему понравится. Дизайн приложения, которое дополняет (а НЕ заменяет) основную работу, не должно заставлять пользователя привыкать к непривычному поведению. Важнее стать незаменимым помощником, чем запомниться необычной кнопкой

5. Принцип Парето
80% внимания уделяется 20% интерфейса. 20% функций отвечают за 80% действий


Это то, что в абсолютной базе. Написать базовую памятку по цветам в интерфейсе? Открыть/Комментировать

2021-03-11 10:34:21 ​​Задумывались ли вы когда-нибудь почему одни цветовые сочетания нам нравятся, а другие нет?

Основной принцип гармонии исходит из обусловленного физиологией закона дополнительных цветов.

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

У каждого из нас есть свой опыт, в котором какие-то сочетания цветов нам приятны, а какие-то неприятны и не вызывают эмоций. Что определяет данное впечатление?

Ответ прост. Приятны те цвета, между которыми есть закономерная связь, порядок. Сочетания цветов, которые нам нравятся и от которых нам приятно мы называем гармоничными. То есть основной вывод: Гармония = порядок.

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

Вот так, любой цветовой вкус определяет логика и система. Открыть/Комментировать

2021-02-08 10:27:08 Фундаментальные принципы визуального дизайна, которые нужно всегда держать в уме, проектируя интерфейсы. Ясно и по полочкам

https://link.medium.com/SP764o9EHdb Открыть/Комментировать