Дизайн е: Интервью с Ириной Ивановой-Корнеевой — дизайнером, которая открыла Е-Дизайн для России и первое обучение — Дизайн на vc.ru

как работает дизайн — Оди. О дизайне

Далее текст от лица автора

Когнитивная легкость возникает тогда, когда отсутствует когнитивное напряжение. Люди не испытывают когнитивное напряжение, если дизайн работает. Но если решения в дизайне нерабочие, пользователи чувствуют, как состояние потока прерывается (подробнее об этом позже), что приводит к когнитивному напряжению. Это означает, что дизайн — неудачный.

Если дизайнер игнорирует принципы дизайна, макет не выглядит «единым целым», он слабый — отсутствует баланс, выравнивание и визуальная иерархия, контраст, целостность, согласованность в цветовой палитре и шрифтах.

Когда дизайн работает, люди «чувствуют это». Он оказывает мгновенное воздействие. Это происходит подсознательно, в доли секунды, на интуитивном уровне, без необходимости досконально его анализировать. Дизайн поражает простотой и элегантностью. Джонатана Айва и Дитера Рамса считают приверженцами подобной идеологии в дизайне.

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

Почему одни дизайн-проекты выглядят эстетически целостными, а другие — нет? Сайт Capsul’in Pro

И наоборот, когда кажется, что в дизайне «что-то не так», пользователи подсознательно воспринимают его, как слабый. Результат негативно влияет на компанию и продукт, особенно, когда она позиционирует себя как бренд премиум-класса или пользуется большим уважением со стороны аудитории. Например, дизайн магазина Chanel всегда выглядит безупречно.

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

Дизайн этого сайта вызывает когнитивное напряжение. Вы бы доверили бронирование путешествий этой компании?

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

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

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

В каком их этих домов вы хотели бы жить?

Роль принципов дизайна в эстетической целостности

В гайдлайнах по дизайну и разработке приложений компании Apple уже несколько десятилетий есть упоминание об «эстетической целостности». Ее также можно назвать «консистентностью» или «эстетической согласованностью».

Apple определяет эстетическую целостность, как «согласованность между внешним видом и характером дизайна и его функцией». Композиция дизайна — неотъемлемая часть продукта. Мы рассмотрим принципы дизайна, которые формируют или разрушают композицию — больше с позиции UI и в меньшей степени — с точки зрения UX.

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

И речь идет не о «золотом сечении». Золотое сечение не поможет. Спираль Фибоначчи не обладает мифической силой, которая cоздаёт впечатляющий дизайн.

«Вы это видите? Смотрите!» — восклицают дизайнеры, рисуя золотую спираль на лице Анджелины Джоли или Моны Лизы. Конечно, в природе существует сакральная геометрия (золотое сечение, или спираль Фибоначчи), но не стоит полагаться на «золотое сечение», как на принцип дизайна. Это заблуждение уже много раз разоблачали в его абсурдности.

Это моя стиральная машина со спиралью Фибоначчи

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

Давайте рассмотрим некоторые принципы дизайна и механизм их работы. Крутые дизайн-проекты включают большинство этих принципов дизайна. Их часто объединяют, чтобы создать рабочий дизайн. Например, иерархия, баланс, симметрия, негативное пространство и выравнивание тесно связаны между собой.

Рассмотрим следующие принципы дизайна:

• Визуальная иерархия
• Пространство, выравнивание и сетки
• Баланс
• Контраст
• Симметрия
• Повторение
• Правило нечетных чисел и правило третей
• Силовые линии
• Масштаб и пропорции
• Расстановка акцентов
• Целостность
• Близость
• Согласованность
• Цвет
• Типографика
• Негативное пространство

Визуальная иерархия

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

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

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

Сайт с хорошей визуальной иерархией направляет взгляд пользователя на главные элементы дизайна

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

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

Бонусные подсказки

• Используйте невидимый треугольник, который соединяет три области внимания в дизайне
• Помните, что пользователи сканируют контент по визуальным шаблонам, включая: диаграмму Гутенберга, F-паттерн, Z-паттерн, паттерн «слоеный пирог» и используйте их

На сайте отсутствует визуальная иерархия, и поэтому на странице нет элементов, которые могут привлечь внимание пользователя

Интервалы, выравнивание и сетки

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

Выключка по левому краю, по центру, по правому краю — неважно какой вид выравнивания использовать, главное, что оно необходимо. В противном случае, если дизайнер не выстроил элементы в линию, дизайн будет разваливаться. Это вызовет у людей тревожное чувство. Давайте вернемся к главной странице Paypal (см. выше).

Что если бы она выглядела так?

Отсутствие выравнивания делает макет неаккуратным, не так ли?

Существует много типов сеток: колоночная, базовая, модульная, иерархическая, пиксельная и т.д,, а также системы сеток. В проектах дизайнеры используют разные сетки, но все они помогают выравнивать элементы дизайна и создают интервалы между ними.

Источник: UX Engineer

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

Иногда нарушение сетки делает акцент на элементе и добавляет динамичности (Саша Турищев)

Работа с сетками — обширная тема, поэтому мы ее пропустим, но по ссылке вы найдете статью на UX Collective: Responsive grids and how to actually use them

Баланс

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

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

На сайте Breitling дизайнеры использовали следующие принципы дизайна: баланс, выравнивание, масштаб и симметрию

Контраст

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

В дизайне слева текстовые элементы недостаточно хорошо контрастируют между собой

Руководство по обеспечению доступности веб-контента (Web Content Accessibility Guidelines, сокращённо WCAG) рекомендует использовать «коэффициент контрастности для текста, равный не менее 4,5:1». Исключение — крупный текст, коэффициент контрастности которого должен быть не менее 3:1. Дизайнерам важно обеспечить комфортную читаемость контента.

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

Симметрия

В Принципах Гештальта закон симметрии и порядка также известен как prägnanz. Это немецкое слово означает «хорошая фигура». Этот принцип гласит, что мозг будет воспринимать неоднозначные формы в доступном для него формате. Вы угадали — речь идет о стремлении мозга экономить энергию.

Мы ищем симметрию во всем. Согласно исследованиям симметрия человеческого лица повышает оценку его привлекательности, несмотря на то, что симметричные лица не выглядят красивыми. Теория гласит, что это предпочтение связано с подсознательным выбором партнера с лучшей ДНК.

В природе все симметрично. Только взгляните на бабочку, цветок или морскую звезду.

Симметрия в природе

В цифровой сфере действует тот же принцип, что и в природе. Симметричный дизайн выглядит более приятным.

Симметрия в мобильных приложениях Uber Eats, Booking.com и Behance

Повторение

Повторение тесно связано с согласованностью — отличительной чертой хорошего юзабилити.

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

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

Мобильное приложение Athletic — хороший пример повторяющихся элементов в дизайне

Правило нечетных чисел и правило третей

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

Сайт компании Iskos Design использует «правило нечетных чисел» для отображения продукции

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

Правило третей обеспечивает асимметрию в дизайне подобно спирали Фибоначчи (золотое сечение). Оно помогает создавать привлекательные и интересные композиции.

Силовые линии

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

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

Незаметная изогнутая линия слева направо направляет взгляд пользователя к тексту на странице Apple iPad

Масштаб и пропорции

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

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

Умелое использование масштаба и пропорций имеет решающее значение для достижения целостности дизайна (см. ниже). Композиция может выглядеть разрозненной, если некоторые элементы слишком крупные или наоборот мелкие, или нарушены пропорции между ними. Эту ошибку можно допустить в любом элементе дизайна, включая типографику. Например, огромный заголовок по сравнению с подзаголовками и основным текстом. Когда элементы дизайна непропорциональны, дизайн кажется «неправильным» и несбалансированным.

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

Расстановка акцентов

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

Как и в случае использования других принципов дизайна, дизайнеры расставляют акценты, чтобы управлять взглядом пользователя и выделить то, на что важно обратить его внимание в первую, вторую и третью очередь. Лендинги и конверсионные страницы электронной коммерции используют технику расстановки акцентов в 99% случаев.

На сайте часов Citizen дизайнеры сделали акцент на слогане и продукте

Целостность

Целостность — это слаженная работа элементов дизайна, которые образуют «эстетическую согласованность». Согласованность в дизайне дает людям ощущение, что все его составляющие работают вместе. Каждый элемент должен иметь четкую визуальную связь с другими, чтобы передавать точное сообщение. Целостный дизайн выглядит упорядоченным.

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

Согласованная цветовая палитра, повторяющиеся паттерны, баланс и симметрия создают ощущение целостности на сайте Tiffany

Близость

Гештальт-принцип близости позволяет дизайнерам группировать связанные элементы и демонстрировать их взаимосвязь. Человек будет воспринимать объекты как отдельные и обособленные, если расположить их дальше друг от друга. Люди считают, что элементы, которые находятся далеко друг от друга, не связаны между собой.

Пользователи не должны задумываться, связаны элементы друг с другом или нет. Это должно быть очевидно. Если не применять принцип близости, это вызовет когнитивное напряжение и негативно повлияет на UX. Смотрите на примере почтовой службы США ниже.

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

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

Хорошая реализация принципа близости визуально группирует связанные между собой элементы

Согласованность

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

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

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

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

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

Цвет

Цвет в дизайне — это обширная тема. Этот творческий элемент оказывает самое большое влияние на дизайн. Продуманная цветовая палитра поднимет уровень проекта из разряда «так себе» до уровня «потрясающий». А посредственная схема цветов будет отвлекать человека и даже мешать пользоваться продуктом.

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

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

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

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

Типографика

Типографика играет огромную роль в дизайне. Стили шрифтов в композиции влияют на восприятие дизайна больше, чем любой другой элемент, за исключением цвета.

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

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

«Выбор типографики не только обеспечивает удобство восприятия текста, но и выстраивает информационную иерархию, делает акцент на важном контенте и выражает суть бренда», — Гайдлайны по дизайну и разработке приложений компании Apple.

Сайт Lamborghini умело использует типографику и масштаб, чтобы улучшить дизайн

Негативное пространство (свободное пространство)

Гениальный Клод Дебюсси однажды сказал: «Музыка — это пространство между нотами». То же самое можно сказать и о свободном пространстве между элементами, которое расставляет акценты и обеспечивает баланс и целостность дизайна.

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

Apple — отличный пример использования негативного пространства для привлечения внимания к элементам дизайна

Заключение

Люди ожидают быстро и без препятствий просканировать информацию на любых платформах и с любых устройств. Дизайнерам важно понимать принципы дизайна и то, как они взаимодействуют между собой. Их умелое использование поможет создавать визуально привлекательные и функциональные дизайн-проекты, которые работают. Не стоит забывать, что эстетическая целостность серьезно влияет на UX.

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

«Эстетика продукта связана с его полезностью, потому что продукты, которыми мы пользуемся ежедневно, влияют на нашу личность и наше самочувствие. Но только хорошо реализованные продукты могут выглядеть красиво», — Дитер Рамс.

Когда дизайнеры не уделяют внимание качеству дизайна и не руководствуются его принципами, они пренебрегают качеством бренда и всем, что он олицетворяет. Если они сделали плохой дизайн, пострадает и бренд, и продукт. Поэтому успешные дизайнеры прикладывают максимальные усилия в работе. Они знают, что «у вас никогда не будет второго шанса, чтобы произвести хорошее первое впечатление».
«Детали — это не мелочи. Они формируют дизайн», — Чарльз Имз.

Ещё одна статья про дизайн-системы (в продуктовом дизайне) / Хабр

Привет. Меня зовут Костя, и я отвечаю за дизайн в Агиме. Эту статью я написал недели 3 назад, поэтому я не буду рассуждать о том, что происходит сейчас в нашей стране и мире, а лишь подчеркну, что в эти сложные времена мы должны поддерживать друг друга. И надеюсь, что моя статья поможет настроиться на рабочий лад. Как всегда, я старался сделать статью максимально простой и интересной.

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

Мы уже записывали короткое видео на эту тему, которое можно послушать, если вам лень читать. Статья ниже — это в общем всё то же самое, но по-другому.

Что такое дизайн-система, на примере котиков и лего 

Предположим, вашему ребенку задали задачу: сделать 10 фигурок котиков.

У вас в целом несколько вариантов решения. Например, вы можете взять пластилин, глину, бумагу. И получить 10 совершенно уникальных котиков.

Но можете собрать их из конструктора лего. И сделать либо абсолютно похожих, либо немного отличающихся. Но в целом в любом случае они будут +/- квадратно-прямоугольные и с пупырышкками.

LEGO Minecraft

Завод где-то в Китае производит миллионами типовые кубики, шестеренки и моторчики. Совершенная логистика доставляет всё в магазины. Понятные инструкции помогают собирать космические корабли и котят. Всё это и есть дизайн-система. И котики из лего — это котики, сделанные из дизайн-системы.

И вот хорошая новость: в диджитал вы относительно легко можете создать свой заводик по производству кубиков. И начать собирать котиков, нужных конкретно вам. Не надо докупать лего за многие тысячи денег: у вас бесконечное количество копий блоков, потому что это диджитал!

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

Почему об этом пора поговорить: кривая Гартнера и плато просвещения 

Мне нравится, как Кривая Гартнера описывает жизненный цикл, наверное, любой технологии.

Лет пять назад сообщество было дико воодушевлено. Из каждого утюга бодро рапортовали о том, что «мы первая компания, которая ввела ДС», «мы первое агентство, которое сделало сайт на ДС». Появился каталог отечественных ДС. Но кажется, при этом мало кто понимал, во что они вляпываются. Иногда у меня даже складывалось впечатление, что это было больше инструмент пиара, чем инструмент снижения издержек на разработку.

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

Сейчас наконец-то на ДС смотрят как на инвестиции в сам продукт, на способ уменьшить издержки и повысить скорость разработки продукта. Это становится обычным рабочим инструментом продуктовой команды, а не хайповой игрушкой для энтузиастов. И об этом инструменте надо знать каждому приличному (и некоторым неприличным) менеджеру и дизайнеру.

Что такое дизайн-система с точки зрения производства 

Самое, наверное, важное предложение этой статьи будет сейчас:

Дизайн-система — это UI kit, превращенный в код и связанный с ним, т. е. это система [UI kit] [+] [код].

Т. е. UI kit ≠ дизайн-система!

Сейчас расскажу подробнее, что я имею в виду.

Как вы, конечно, знаете, UI kit — это упорядоченный набор всех элементов вашего диджитал-продукта: кнопки, формы, типографика и т. д.

Обычно, когда говорят «надо сделать UI kit», имеют в виду «дизайнеру надо собрать все элементы в «Фигме» («Скетче»…) в одном месте, показать все состояния, добавить описания, чтобы было всё понятно и можно было сделать нормальную разработку быстро и эффективно».

UI kit для «Комсомольской правды», сделанный в «Фигме»

Реже это же говорят про фронтендеров, имея в виду, что надо сверстать все элементы в HTML, чтобы можно было их переиспользовать.

Или, иначе говоря, картинки надо превратить в код и желательно сложить в специальное хранилище (репозиторий).

Но теперь, если в дизайне вы решите, например, сменить базовый красный цвет на розовый, вам это надо сделать сначала в дизайнерских программах и потом скорректировать код, т. е. синхронизировать UI kit и код.

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

Представьте, что вы обновили логотип в дизайн-программе. Клац-клац, и он уже и на сайте, и в приложении в «Апсторе»…

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

Представьте, что вы обновили логотип в дизайн-программе. Клац-клац, и он уже и на сайте, и в приложении в «Апсторе»…

Как это вы будете делать: автоматически при помощи скрипта или живыми человеками по утвержденному бизнес-процессу, уже не так важно. Важно, что ваш дизайн-процесс систематизирован, т. е. у вас есть дизайн-система.

(Хотя, конечно, в 2022 году делать такую работу руками ну так себе идея.)

Вперед, к светлому будущему! 

Ура! Давайте всё синхронизируем, систематизируем, автоматизируем! 

К сожалению, пока это только мечта, но кое-что мы уже умеем. И сейчас про это расскажу самыми простыми словами.

Во-первых, самый популярный (и возможно, единственный разумный) подход к строительству дизайн-системы называется «атомарный». Тут всё просто: страница состоит из блоков (организмов), блоки состоят из форм и кнопок (молекул), формы и кнопки состоят из линий, шрифта, цвета (атомов).

react-atomic-design

Дизайн-токены могут хранить в себе базовые значения (атомы), такие как цвет, радиус скругления кнопки, параметры шрифта и т. д. Эти значения связываются с репозиторием. И теперь, если поменять значение токена, например в «Фигме», оно попадает в репозиторий и затем уже может быть автоматически синхронизировано с сайтом.

Репозитории типа Storybook, Git, NPM и т. д. помогают разработчикам организовать хранение кода и помогают с его интеграцией в различные фреймворки.

Фреймворк — это программная платформа, которая облегчает работу со структурой диджитал-продукта и помогает делать качественную разработку. Думаю, вы слышали что-то про React, Angular, Vue. Вот это оно.

Сверстанный UI kit для АльфаСтрахование в Storybook

Синхронизировали, синхронизировали да не высинхронизировали 

К сожалению, не всё можно интегрировать просто и дешево. А кое-что и нельзя.

Например, сейчас, в 2022 году, не существует лёгкого способа синхронизировать компоненты для мобильной разработки. А многие интеграции для веба проще делать руками, чем автоматизировать. И параметрические вариации компонентов тоже тяжело делать (((

Например, у вас есть дизайн кнопки. И технически вы понимаете, как можно автоматически сгенерировать ее для веба, для iOS- и Android-приложения, а также для b2b- и для b2c-сайтов. Тут уменьшим, там конвертируем в rem, а здесь растянем. И вроде написали алгоритм и — пыщь-пыщь, готово… Но в реальности это будет кастомная разработка, которую надо поддерживать при помощи специального человека. А удобного WYSIWYG-интерфейса, с которым разберется любой дизайнер, для этого не существует.

И в реальности проще держать 4 разных дизайн-системы со всем фаршем: токены, репозитории и живые люди для синхронизации не только внутри ДС, но и между ними.

Но в целом всё движется к светлому будущему, когда мы сможем поменять в «Фигме» один шаблон и он автоматически и без проблем применится к работающему сайту и приложению в «Апсторе».

А пока мы карабкаемся на «Склон просвещения» и радуемся, например, тому, что ребята из Яндекса намутили плагин, помогающий компоненты из фреймворка Rеасt внести в «Фигму». Как говорится, маленький шаг для дизайнера, большой шаг для дизайн-систем!

Еще немного дегтя 

Я очень люблю дизайн-системы, но у них есть довольно существенные недостатки и особенности:

• Внедрять дизайн-систему сложно и дорого, особенно на начальном этапе. Вам нужны эксперты (которых пока мало). Ресурсы, чтобы закомпонентить компоненты и зашаблонить шаблоны. Терпение, чтобы всё это внедрить в ваш продукт. И сила воли, чтобы поддерживать системность дальше. В крупных проектах есть иногда даже целая команда «хранителей дизайн-системы». (Хотя я слышал про подход, когда эта функция распределяется между всей командой, даже у крупняков.)

• Успешно внедрив ДС, через некоторое время вы можете обнаружить, что ваш продукт потерял гибкость: страницы сайта выглядят, как дома в районе панелек. А сделать какую-то необычную фичу трудно, а то и невозможно: пока ты внедришь в ДС новый компонент, пока протестируешь и интегрируешь, уже и не надо вроде бы. Так, ребята там сами наколхозили что-то…

• Это не всегда дешевле. Да, расходы на дизайн снижаются. Зато появляются работы на поддержание и развитие самой ДС. Т. е. затраты просто переходят в другое подразделение. А еще добавьте затраты на создание инфраструктуры и на ее поддержание…

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

Панельки — это тоже дизайн-система

Всё на самом деле хорошо 

Всё же у ДС есть очень крутые преимущества, которые уже сегодня могут продвинуть ваш проект вперед и нанести проекту много пользы.

• С помощью ДС продуктологи и менеджеры проектов могут сами собирать простые экраны и вводить новые фичи. Скорость поставки нового функционала и проведения экспериментов резко повышается за счет того, что этап дизайна и верстки выкидывается. Нет вот этого «ой, дизайнер так видит, а у фронтендера лапки». Да и сами фронтендеры тратят ресурсы не на скучную верстку таблиц, а на интеграцию калькулятора, например. А это более интеллектуальная работа, которая обычно больше нравится профессионалам.

• Снижаются расходы на дизайн: если ДС достаточно богатая, то всё ограничивается улучшением и обогащением текущих компонентов. А минорные изменения в дизайне типа корректировки цвета, замены лого или формы кнопок делаются почти мгновенно. «Сделать страницу нового продукта? Берем вот эти 5 блоков, меняем текст и изображения, добавляем ссылку на форму — оп, готово, на прод!»

• Весть продукт выглядит консистентно. И минорная страница с юридическими документами, и суперконверсионный калькулятор: всё выглядит и работает одинаково. И никто не может своими шаловливыми ручками безнаказанно это испортить. Да, панельки могут выглядеть красиво)

City N

Резюмируя, кому надо дизайн-системы 

• У вас длинный проект, который вы готовы системно развивать.

• Вам хочется ставить кучу экспериментов, делать последовательные улучшения и планомерно развивать продукт.

• У вас несколько команд, которые работают над одним продуктом и им нужно поддерживать консистентность.

• Вы просто любите заводики и котиков.

Что такое E-Design?! Все, что вам нужно знать о найме виртуального дизайнера интерьера — Kayla Simone Home

Привет, друзья, добро пожаловать обратно в блог! Или, если вы новичок, приятно познакомиться! Я был очень занят последние пару недель, между настройкой моего нового пространства, обновлением веб-сайта и работой над проектами для клиентов, поэтому я не успевал за сообщениями в своем блоге. Но, я вернулся, и у меня есть куча контента, которым я могу поделиться со всеми вами! Обновления моей новой квартиры будут в следующем месяце, и я только что закончил обновлять свое портфолио новыми проектами. Посмотрите некоторые из комнат, над которыми я работал, и дайте мне знать, что вы думаете! Над этими проектами было НАСТОЛЬКО весело работать, и они стали идеальными примерами для основной темы сегодняшнего поста — E-Design!

Что такое электронный дизайн?

На первый взгляд, E-design — это то, на что это похоже — услуги по дизайну интерьера, предлагаемые полностью онлайн! Электронный дизайн — это простая и доступная альтернатива традиционному дизайну интерьера, поскольку услуга предоставляется виртуально, что исключает необходимость личных встреч и поездок. Любой человек из любой точки мира может работать с электронным дизайнером *кхе-кхе, я!*, не беспокоясь о местоположении. Благодаря технологиям и цифровому веку услуги по дизайну интерьера теперь могут быть выполнены без дизайнера, даже не ступившего в ваш дом. Электронный дизайн также обычно представляет собой гораздо более простой и непринужденный процесс с более быстрым временем выполнения, чем традиционный дизайн интерьера.

Что делает электронный дизайн таким замечательным?

Я, наверное, немного предвзят, но лично я не вижу минусов в найме виртуального дизайнера, главное, чтобы он подходил под ваш проект. Вот мои причины быть профессионалом в области электронного дизайна:

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

• Быстрая обработка — Поскольку проекты электронного дизайна выполняются в меньшем масштабе, обычно по одной комнате за раз, время обработки завершенного проекта намного быстрее. Я заканчиваю дизайн комнаты менее чем за месяц, поэтому мои клиенты могут начать обустраивать свое пространство раньше.

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

• Доступность . Электронный дизайн обычно более доступен по цене, чем традиционный дизайн интерьера. Поскольку вы выполняете часть работы по проекту (снимаете мерки, обрабатываете заказы и т. д.), вам не придется платить дизайнеру за выполнение этих действий. В итоге вы сэкономите тонну денег, которые затем можно будет потратить на товары для дома.

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

Подходит ли мне E-design?

Каждый проект уникален, поэтому универсального ответа не существует. Однако вот как вы можете определить, подойдет ли вам электронный дизайн:

Вам следует нанять электронного дизайнера, если:

• Вам удобно общаться только виртуально. Вы знаете, как отправлять текстовые/электронные сообщения/звонки/видеочаты, чтобы общаться с вашим дизайнером.

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

• Вы можете сформулировать, каким должен быть ваш дизайн. У вас уже есть вдохновение, и вам просто нужен кто-то, кто объединит его таким образом, чтобы это имело смысл, но все же было уникальным.

• Вы хотите сэкономить. Вы работаете с ограниченным бюджетом и хотите, чтобы как можно больше денег было потрачено на фактический дизайн.

• Вы хотите быстро приступить к работе. Вы хотели бы получить готовый дизайн как можно раньше.

• Вы можете нанять помощника самостоятельно. У вас не возникнет проблем с наймом подрядчиков, которые могут вам понадобиться, например, маляров или монтажников, для выполнения вашего проекта.

Вам следует нанять местного дизайнера, если:

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

• Вы хотите, чтобы замеры и фотографии были сделаны для вас.*

• Вам нужна индивидуальная работа, например, изготовление мебели или строительство для вашего проекта.

• Вы хотите, чтобы ваш дизайнер занимался заказами и доставкой.*

• Вы хотите, чтобы ваш дизайнер подготовил для вас все сразу.*

*Я предлагаю эту услугу в качестве дополнения к мои пакеты виртуального дизайна для местных клиентов (большой Остин, штат Техас), просто спросите!

мифы об электронном дизайне

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

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

Электронный дизайн не такой клиентоориентированный/уникальный.
По какой-то причине некоторые люди считают, что электронный дизайн = готовый дизайн. Это на 100% не так, по крайней мере, когда речь идет о Kayla Simone Home. Я работаю со своими клиентами, чтобы определить их индивидуальный стиль и потребности проекта, прежде чем создавать уникальный дизайн, адаптированный специально для них. Некоторые продукты, используемые в электронном дизайне, могут повторяться, поскольку они обычно продаются в розницу, а не только на заказ / для продажи, но мои проекты никогда не дублируются!

Электронный дизайн похож на HGTV.
Я не могу создать полный дизайн комнаты с нуля, имея бюджет всего в 1000 долларов и 2 дня на его завершение, чтобы вы могли заказать все и подготовить все к ужину в пятницу. Извините, я хороший, но я не настолько хороший. И, как и все хорошие вещи, электронный дизайн все еще требует времени. На той же ноте, хотя я готов работать с любым (разумным) бюджетом, который вы мне предложите, вещи стоят столько, сколько они стоят, и вы получаете то, за что платите. ‘Достаточно.

Какие услуги электронного дизайна предлагает Kayla Simone Home?

*Обновлено от 21 января: Kayla Simone Home в настоящее время не предлагает дизайнерские услуги. Я сосредоточен на DIY и дизайне в моем недавно построенном доме — вы можете следить за проектами и прогрессом прямо здесь и в Instagram!

Электронный дизайн, онлайн-услуги по дизайну интерьера, электронное оформление

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

Ваш цифровой план дизайна комнаты будет включать

:

• КОНЦЕПЦИЯ ВДОХНОВЕНИЯ — качественные изображения всей мебели, освещения и декора
• МАТЕРИАЛЬНАЯ ДОСКА — краски, ткани, обои, отделка окон, напольное покрытие
• СПИСОК ПОКУПКИ ПРОДУКЦИИ — все местные и онлайн-ресурсы, выбранные для вас
• ПЛАН ЭТАЖА в масштабе (дополнительно) — включает всю мебель и размещение освещения
• РУКОВОДСТВО ПО КОМНАТЕ — подробные рекомендации по реализации вашего нового дизайна

Примеры плат для цифрового дизайна

Как это работает

Шаг 1: Заполните опросный лист по дизайну

Шаг 2: Выберите наиболее подходящий пакет или услугу дизайна

Шаг 3: Добавьте пакет или услугу в корзину 9003

Шаг 4: Расслабьтесь и предоставьте проектирование нам.

Выберите пакет онлайн-дизайна:

Пакет дизайна помещения №1: 375 долларов США

Ваша цифровая концептуальная доска e-Design будет включать:
• Доски для вдохновения с выбором мебели, материалов и декора
• Список источников продукции и информация о покупке
• Палитра красок и индивидуальная Выбор ткани
• Замечания по дизайну и предложения по сборке всего вместе

Пожалуйста, подождите 1-2 недели для доставки. Концептуальный пакет по цене за номер/место

Комплект №2 для дизайна помещений: 475 долл. США

Ваша цифровая концептуальная доска e-Design будет включать:
• Доска вдохновения с выбором мебели, материалов и декора
• Список источников продукции и информация о покупке
• Палитра красок и индивидуальная Варианты ткани
•План этажа в масштабе: план комнаты с мебелью и освещением
•Замечания по дизайну и предложения по сборке всего вместе

Пожалуйста, подождите 1-2 недели для доставки. Концептуальный пакет по цене за номер/место.

Консультация по цвету краски: 85 долларов США

Ваша цифровая концептуальная доска e-Design будет включать:
• 3 схемы цвета краски (каждая схема включает 3 цвета)
• Советы и методы рисования для вашего помещения

* Пожалуйста, разрешите 1 неделя на доставку.

Услуги A La Carte

Мы рады предложить нашим клиентам услуги онлайн-дизайна a la carte, если вам не нужен полный пакет дизайна. Мы также предлагаем консультации по дизайну по телефону, просто напишите нам по адресу [email protected], чтобы запросить дату и время вашего сеанса, и мы будем рады помочь вам.

Стоимость онлайн-консультаций и услуг:

•План этажа ……… $150

Хотите, чтобы ваша мебель располагалась лучше? Отправьте нам свои размеры комнаты, и мы спланируем ваше пространство для вас.

• Высота над уровнем моря ……… $150

Может включать виды на боковые стены встроенных модулей, макеты художественных работ и многое другое.