Дизайн в браузере — Параметрический дизайн — Автоматический дизайн

Начну с фразы Григория Бакунова, которую большинство выпустили из внимания, но я не мог проскочить мимо нее.

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

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

Откатимся немного назад. Буквально года полтора назад, камнем преткновения были отрисованные макеты. Так, как основной проблемой, была разница в отображении/поведении возможностях графического редактора и живого кода. Затем многие «тру» дизайнеры, в основном проектные, перешли на сторону «Дизайна в браузере» и планка логики стала возрастать в довольно быстром темпе. Все синхронизировались в понятиях. Стало понятней общаться с интерфейсными спецами разных уровней и разных ролей (в интерфейсном процессе). Дизайн в браузере само собой точка не возврата, но это всего лишь отправной пункт долгого пути.

UI параметры

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

Сопровождаясь жутчайшей депрессией и подхлестывающейся эйфорией, ваш привычный воркфлоу рушится. Реализация будущих проектов становится туманной. Но одно вы стабильно понимаете, что теперь не одна созданная вами UI сущность не будет нарисована/спроектирована просто так. Так как она должна четко вписываться в экосистему. Разумеется «порядка много не бывает», но чтоб ему соответствовать, сначала нужно его понять или выработать. И вы принимаетесь конструировать ваши гайды, чтоб определить тот порядок. А затем конструируете и проектный UI Kit. Без которого сейчас не делается ни один более или менее серьезный проект.

Время боя

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

Снова параметры

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

UI фреймворк

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

Естественное улучшение

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

1. Либо вы занимаетесь «кастомщиной», в следствии вкусовщины, и не совсем хорошо осознали ваш UI.
2. Ваш базовый Kit не достаточно гибкий для того, чтобы позволить внести разумные модификации в компонент.

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

Design must be killed

Если у вас не было поводов ненавидеть себя, то теперь то самое время. Вы разнесли башку всей рандомной, сентиментальной, прекрасной части дизайна. И что самое страшное, вы получаете от этого удовольствие. Поздравляю, теперь вы в секте.

Роль и тип данных

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

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

Аскетичность в дизайне

• Радикальный минимализм, как высшая степень логичности. Так как все параметры подконтрольны.
• Конструкции в соответствии с методологией, для переиспользования и масштабирования.
• Логично раздробленный контент, готовой визуализации.

Убиваем эмоции в дизайне

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

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

Алгоритмы

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

Естественная потребность массовости

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

2016

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

Смерть жутко интересна

Закончу пост тоже фразой Григория Бакунова: «Все разработки связанные со смертью какой-то профессии — жутко интересны». Но на самом деле, дизайн бессмертен — так как это слишком широкое понятие. Но все попытки его убить, выталкивают его на невероятно новый уровень…