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

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

Итак, система – множество элементов, находящихся в отношениях и связях друг с другом, которое образует определённую целостность, единство.

Давайте теперь попробуем разобрать определение на части и соотнести с составляющими дизайна:
1) множество элементов = изображения, текстовые блоки, кнопки, инпуты и т.д.
2) отношения и связи = взаиморасположение, отступы, динамичность поведения элементов относительно друг друга и т.д.
3) целостность, единство = работающий продукт или его часть (мобильное приложение, сайт, форма на сайте, плакат и т.д.).

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

И сегодня предлагаю начать с самой базы – понять, из чего состоит любая система, а получается, что и любой дизайн.

ЭЛЕМЕНТ
Элемент – предел членения системы с точки зрения решения конкретной задачи. То есть это самая мелкая часть, которую имеет смысл рассматривать на данном уровне.

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

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

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

СВЯЗЬ И ОТНОШЕНИЕ
Связь – ограничение степени свободы элементов, при котором сама система приобретает новые свойства.

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

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

СТРУКТУРА
Структура – наиболее существенные компоненты и связи системы. Многие системы являются динамическими (об этом мы поговорим позже), то есть часть из компонентов может изменяться, добавляться или удаляться. Но структура системы в виде ее постоянных компонентов обеспечивает жизнеспособность системы.

ЦЕЛЬ
Цель – идеальный конечный результат. Любая, даже такая мелкая система, как кнопка, имеет вполне ясную цель, ради которой система существует.

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

И да, 8 декабря (пятница) в 16:00 я буду рассказывать подробнее про системный подход на онлайн-лекции в Skillbox, которая будет доступна вот здесь – https://skillbox.ru/revolution/, так что там многие вещи, надеюсь, станут гораздо более прозрачными.

Ну а завтра мы продолжим тему, попытаемся разобраться в характеристиках систем, которые применимы к дизайну, и посмотрим на основные типы систем.

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

ИНТЕГРАТИВНОСТЬ
Интегративность – «сила» или «ценность» связей элементов внутри системы выше, чем сила или ценность связей элементов системы с элементами внешней среды.

Например, начинающий дизайнер, приступая к новому проекту, собрал себе борд на Pinterest, включив в него самые трендовые работы с Dribbble, Behance, FWA, Awwwards. Все они очень сочные и яркие. Дизайнер не может выбрать какой-то один референс, ему хочется замешать все и сразу, чтобы уж точно медальку получить. И он начинает собирать страницу из блоков, в каждом из которых использует стилистику из разных классных работ. В результате связь этих блоков между собой в рамках страницы гораздо слабее, чем связь каждого из них со своим внешним референсом. Ну и на выходе в таких ситуациях кажется, что дизайн «разваливается» и «сшыт, как ласкутное одеяло».

Ну а еще более явно эта характеристика проявляется во всем известной теории близости, о которой можно почитать вот здесь – https://www.artlebedev.ru/kovodstvo/sections/136/.

СИНЕРГИЧНОСТЬ
Синергичность – возможности системы превосходят сумму возможностей составляющих её частей.

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

ИЕРАРХИЧНОСТЬ
Иерархичность – каждый элемент системы может рассматриваться как система; сама система также может рассматриваться как элемент некоторой надсистемы.

В общем любой «дизайн», который вы делаете, как правило сам по себе состоит из разных подсистем. Но при этом и сам является частью какой-то большей системы.

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

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

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

Ну и на всякий случай напоминаю, что сегодня в 16:00 буду рассказывать про свой взгляд на системный подход вот здесь – https://skillbox.ru/revolution/ . Приходите, мне будет приятна ваша поддержка и вопросы.

Кстати, вот как-то так будет выглядеть сегодняшняя лекция.

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

Тема непростая, поэтому, возможно вам немного упростят восприятие мои пояснения в формате видео-лекции - https://youtu.be/DzNz58sIQBI.

Посмотрите!
Ну и конечно мне очень приятны будут ваши лайк 😝

На лекциях, выступлениях или просто на фейсбуке часто просят дать список ресурсов, на которых можно искать вдохновение. И я уже писал про TheFWA, Awwwards, Muz.li и многие другие. Но если у вас нет желания или времени каждый день заходить на десяток разных сайтов, то можете для начала просто подписаться на канал хороших ребят https://t.me/nowhow, которые на ежедневной основе отыскивают интересные проекты и сопровождают их описанием, чтобы вы сразу понимали, чем ценен проект, даже еще не заходя на него. Думаю, что начинающим дизайнерам, будет особенно полезно!

https://t.me/nowhow

Наверное многие, кто посмотрел мою лекцию на Skillbox, поняли, что для построения любой системы важно основание, на котором она строится. Важно сформировать для себя проверочные условия, от которых можно отталкиваться. И самым верхнеуровневым проверочным условием является принцип.

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

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

Буквально на днях открылся отличный ресурс https://principles.design/, на котором на момент публикации в одном месте собраны принципы от 134 разных команд и авторов. Карточка принципов каждого автора содержит их описание и, что важно, ссылку на первоисточник, где вы можете ознакомиться с еще более полным описанием, примерами и так далее.

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

Поэтому переходите по ссылке, добавляйте в закладки и читайте!

https://principles.design/

Примерно неделю назад у Кости Горского (дизайн-лида компании Intercom) вышло интервью на Bang Bang Education. И мне казалось, что это интервью уже должны были посмотреть абсолютно все, но к моему удивлению, на счетчике под видео всего 368 просмотров. А это значит, что многие подписчики канала не видели этой отличной беседы – https://youtu.be/8zBOrahFBAU.

Если кто-то не знает Костю, то ранее он был дизайн-директором всего Яндекса, в котором начинал работать еще дизайнером. А сейчас он руководит дизайн-командой крутой компании Intercom в Дублине.

Ну и, я думаю, вы и так все подписаны, но на всякий случай напомню, что у Кости есть отличный канал про дизайн и продуктивность в телеграме – https://t.me/desprod

Видео-интервью – https://youtu.be/8zBOrahFBAU

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

Уже скоро Новый год, а это значит, что скоро мы увидим лучшие сайты года, выбранные на разных площадках FWA, Awwwards, CSS Design Awards и прочих. И это натолкнуло нас в Looi на мысль. Почему бы не собрать в одном месте сайты, которые становились сайтами года, начиная с момента существования самой взрослой из премий – FWA? Так мы и сделали.

В итоге, сегодня я хочу поделиться с вами проектом с причудливым названием – http://hiiistory.looi.co/.

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

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

Сайт сделан на английском, но текст там не главное, так что не беспокойтесь. И, к сожалению, пока на нем нет нормальной мобильной версии, поэтому лучше приедьте на работу, налейте кофе и откройте ссылку с десктопа 😉

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

Сегодня хочу поговорить про уровни дизайнеров. Если вы не читали посты про системный подход, то лучше сначала прочитайте вот эти пару постов выше:
1) https://t.me/designgest/97
2) https://t.me/designgest/99

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

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

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

Нередко встречается ситуация, когда в студию или агентство приходит начинающий дизайнер. Он владеет инструментами (sketch, photoshop, illustrator...), но при этом он не может создавать даже самые простые системы. Для примера приведем крайний случай – вы можете дать дизайнеру задание по созданию такой микро-системы как кнопка. Кнопка как микро-система состоит из таких элементов например, как текстовая надпись, фоновая подложка, тень под подложкой.

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

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

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

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

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

И на следующих уровнях идет дальнейшее увеличение сложности создаваемых систем.

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

Сегодня речь пойдет не о дизайне.

В начале сентября я решил попробовать фиксировать свои гипотезы и спустя время смотреть на результат – подтвердились они или опроверглись. Гипотезы абсолютно из разных сфер, с которыми я сталкиваюсь: работа, финансы, техника, поп-культура. Просто у меня появляется в голове мысль формата «Блин, кажется через 3 месяца крипта взлетит» – записываю ее в notion, забываю на 3 месяца, а спустя время сверяюсь и отмечаю, сбылось или нет. Без всяких эмоций, просто план-факт.

Кажется, что упражнение бессмысленное, но уже спустя месяц появляются охрененно интересные инсайты. Инсайты о том, как ты смотришь на вещи, и как принимаешь решения.

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

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

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

Проверенные гипотезы лучше не удалять, а хранить в архиве. Чем старше гипотеза, тем интереснее результаты. Понимаешь, какие наивные предположения мог строить =)

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

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

Сегодня хочу порекомендовать вам канал классных ребят https://t.me/psd_eu, на котором они практически каждый день собирают разноформатные материалы: статьи, лекции, исходники, новости из мира дизайна.

Почитайте. У них интересно.

Сегодня внеочередной пост, но уж очень классную штуку сделали ребята из Яндекса – https://ya.ru/design/!

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

Ребята из Intercom вчера обновили дизайн своего сайта – https://www.intercom.com/, и я «за» такие эксперименты. Посмотрите, там свежо!

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

Не думаю, что ребята из Intercom наводят красоту ради самой красоты.

Отличные!

В октябре прошлого года я выступал на Design Prosmotr, который проходил в Москве, и после выступления ребята записывали интервью.

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

После часового выступления голос подсел, но может быть все равно вы услышите что-то интересное для себя.

Посмотрите – https://www.youtube.com/watch?v=C_snBQKt_PQ

А если вдруг лайк поставите, так мне вдвойне приятно будет!