Когда я впервые попробовал использовать переменные CSS, у меня не было полного представления об их возможностях. Правильное их использование позволяет существенно сократить время и трудозатраты на решение определённых задач в CSS.

Если вы ещё не работали с переменными CSS, рекомендую прочитать эту статью, чтобы познакомиться с ними. Как только вы их освоите, работа станет намного проще. Цель этой статьи сосредоточить внимание на разных случаях практического использования переменных CSS помимо их применения для создания маркеров дизайна, таких как цвета.

Вы готовы? Тогда вперёд!

В чём основная проблема?

Если вы используете переменные CSS так же, как и препроцессоры CSS (например в Sass), то вы не полностью реализуете все их преимущества. Рассмотрите следующий пример:

:root {    --brand-primary: #7777e9;    --brand-secondary: #c96fde;}.title {    color: var(--brand-primary);}

И тут нет никакой разницы с нижеприведённым примером в Sass:

$brand-primary: #7777e9;$brand-secondary: #c96fde;.title {    color: $brand-primary;}

Да, применение переменных CSS в качестве переменных цвета ни в коей мере не является ошибкой. Но это всё равно, что покупать Apple MacBook M1 для посещения интернет-сайтов, хотя с этим и так хорошо справляется ваш старый настольный ПК, собранный в 2012 году. Какой смысл покупать ультрасовременный компьютер и делать на нём то же самое, никак не используя весь спектр его возможностей? Как вы понимаете, примерно так я и думаю об использовании переменных CSS для сохранения информации о цветах.

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

Примеры и случаи практического использования

Полные формы записи свойств

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

<!-- Base component --><header class="page-header">    <h2>...</h2>    <p>...</p></header><!-- Component variation --><header class="page-header page-header--compact">    <h2>...</h2>    <p>...</p></header>

.page-header {    --padding-start: 2.5rem;    --padding-block: 2rem;    padding: var(--padding-block) 1rem var(--padding-block) var(--padding-start);}.page-header--compact {    --padding-start: 1.5rem;    --padding-block: 1rem;}

Обратите внимание, для изменения заполнения нам потребуется всего лишь изменить значение переменной CSS. Без неё нам было бы необходимо вручную вводить полную форму записи свойства внутреннего отступа padding, чтобы изменить только одно значение в нём.

.page-header {    padding: 2rem 1rem 2rem 1.5rem;}.page-header--compact {    padding: 1rem 1rem 1rem 2.5rem;}

Всё вышесказанное применимо и для свойства внешнего отступа margin.

Свойства CSS background

Что касается свойств CSS для работы с фоном, то и здесь переменные CSS помогают сократить объём создаваемого нами кода. И даже больше того: благодаря их применению сам код CSS легче читать.

Хранение значений URL

При работе с интерфейсом пользователя вам может потребоваться добавить какое-либо изображение в декоративных целях. В таком случае хорошим решением будет использование элементов <div> и background-image. Если интерфейс должен быть динамическим, то значения для изображения нужно подставлять с помощью JavaScript.

Без применения переменных CSS соответствующий код HTML будет выглядеть так:

<section     class="newsletter"     style="background-image: url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')"></section>

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

<section     class="newsletter"     style="--thumb:url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')"></section>

.newsletter {    background-image: var(--thumb);    background-size: cover;    background-position: 100% 50%;}

Обратите внимание, что необходимо включить элемент url() без переменной CSS.

Положение фонового изображения

В приведённом выше примере фоновое изображение помещается справа. Для макетов с направлением текста справа налево (RTL) положение фона следует перевернуть.

.newsletter {    --pos: 100% 50%;    background-image: var(--thumb);    background-size: cover;    background-position: 100% 50%;}html[dir="rtl] .newsletter {    -background-position: 0% 50%;}

Чтобы упростить эту задачу, мы можем воспользоваться переменными CSS.

.newsletter {    /* other styles */    background-position: var(--pos);}html[dir="rtl] .newsletter {    --pos: 0% 50%;}

Угловой градиент: часть 1

Угловой градиент также можно применять при создании макетов для нескольких языков. По умолчанию он может быть равен 45deg, и, возможно, потребуется изменить его на -45deg для макетов RTL.

.element {    --angle: 90deg;    background: linear-gradient(var(--angle), #4088vb, #C05858);}html[dir="rtl] .element {    --angle: -90deg;}

Угловой градиент: часть 2

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

А здесь показано, как можно сделать то же самое без переменных CSS.

.card {    background: radial-gradient(        circle 200px at center top,        rgba(64, 136, 203, 0.5),        #f7f7f7    );}

Теперь предположим, что у нас есть какой-то вариант карточки .card-2 и он должен находиться в другом положении. Необходимо написать следующий код:

.card-2 {    background: radial-gradient(        circle 200px at center top,        rgba(64, 136, 203, 0.5),        #f7f7f7    );}

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

.card {    --pos: center top;    background: radial-gradient(        circle 200px at var(--pos),        rgba(64, 136, 203, 0.5),        #f7f7f7    );}.card-2 {    --pos: left top;}

Свойство clip-path

Весьма полезным случаем использования переменной CSS является изменение с её помощью значений clip-path: polygon() при переходе с настольных на мобильные устройства.

На показанном выше рисунке необходимо изменить положение вершин многоугольника. С помощью переменных CSS сделать это намного проще.

.hero {    --first: 4% 7%;    --second: 80% 0;    --thrid: 100% 95%;    --fourth: 10% 100%;    clip-path: polygon(var(--first), var(--second), var(--thrid), var(--fourth));}@media (min-width: 40rem) {    .hero {        --second: 96% 0;        --thrid: 92% 82%;    }}

Если вы хотите узнать больше о свойстве CSS clip-path, здесь вы найдёте статью за авторством вашего покорного слуги.

Элемент флажка

Великолепный пример использования переменных CSS это применение их в сочетании с функцией определения цветов hsla(). Таким образом мы можем создавать динамические компоненты, которые затем можно менять, корректируя одну или несколько переменных CSS.

Первое, что я сделал, это определил значения hsla() для корневого элемента компонента.

.form-item {    --primary-h: 240;    --primary-s: 56%;    --primary-l: 63%;    --primary-alpha: 100%;}

Теперь я могу использовать эти свойства в функции определения цветов hsla().

/* The circle that appears on hover */.form-item__label:after {    --primary-alpha: 0;    background-color: hsla(        var(--primary-h),        var(--primary-s),        var(--primary-l),        var(--primary-alpha)    );}.form-item__label:hover:after {    --primary-alpha: 15%;}

Код SVG, встроенный в CSS

Когда-то я работал над пользовательским интерфейсом для проекта одного клиента и столкнулся с такой ситуацией. У нас был раздел с двумя лентами (одна сверху, а вторая снизу). Мне необходимо было изменить цвет, угол поворота и размер этих лент, не создавая отдельный код CSS для каждой из них. Спасением стали переменные CSS!

Прежде всего я подготовил требуемый код SVG в Adobe Illustrator. Я разделил каждую ленту на три слоя:

• светлые области;

• тёмные области;

• базовый слой.

Затем я экспортировал этот код SVG и поместил его в элементах <defs> так, чтобы легко можно было использовать его повторно. Обратите внимание, я также добавил ключевое слово currentColor! Это и есть то самое магическое значение, которое заставит всё работать.

Наконец, теперь нам необходимо определить размер и угол поворота в CSS.

.tape {    width: var(--size);    transform: rotate(var(--angle));}

<svg class="tape" style="--angle: 10deg; color: red; --size: 120px;" aria-hidden="true" focusable="false" viewBox="0 0 123 47">  <use href="#tape"></use></svg>

Готово. Мы создали собственный код SVG, который можно настраивать по мере необходимости. Впечатляет, не правда ли?

Создание миксинов (примесей-шаблонов), таких, как в Sass

Об этой интересной возможности я узнал из рекомендуемого мною к просмотру выступления Ли Веру (Lea Verou). Идея состоит в том, чтобы установить исходные переменные CSS для определённого свойства, а затем переопределять их, когда это понадобится.

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

<div class="featured-section u-center"></div>

.u-center {  --mx: initial;  --my: initial;  margin: var(--my) var(--mx);}.featured-section {  --mx: auto;  --my: 2rem;}

Во-первых, я создал служебный класс .u-center с заданными по умолчанию значениями для горизонтальных и вертикальных внешних отступов. Я могу добавить этот класс к элементу и затем переопределить переменные CSS. Это может оказаться очень полезным, например, если элементу нужны определённые внешние отступы только с верхней и нижней сторон.

Использование функции calc()

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

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

.c-avatar {  width: calc(var(--size, 32) * 1px);  height: calc(var(--size, 32) * 1px);}

Обратите внимание, я использовал функцию var(--size, 32). Если переменная --size не определена, то значение 32 будет использовано как резервное значение. Важно указать 1px, чтобы добавить px к результирующему числу.

Таким образом, мы можем создавать вариации классов, просто добавляя переменную CSS --size.

.c-avatar--medium {    --size: 64;}.c-avatar--large {    --size: 128;}

Псевдоэлементы

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

В заголовке раздела содержится декоративная фиолетовая линия, которая является псевдоэлементом. Мы можем передать переменную CSS данному заголовку, и этот псевдоэлемент унаследует её.

.section-title {    --dot-color: #829be9;}.section-title:before {    content: "";    background-color: var(--dot-color);}

Но, кроме того, мы также можем имитировать изменение цвета псевдоэлемента с помощью Javascript.

Встроенные стили

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

Рассмотрите следующий пример.

.o-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(var(--item-width, 200px), 1fr);    grid-gap: var(--gap);}

У нас есть настроенный грид и заданное по умолчанию для ширины элемента грида значение 200px. В коде HTML мы можем переопределить его, переустановив значение для переменной CSS.

<!-- Example 1 --><div class="o-grid" style="--item-width: 250px;">     <div></div>     <div></div>     <div></div></div><!-- Example 2 --><div class="o-grid" style="--item-width: 350px;">     <div></div>     <div></div>     <div></div></div>

Ну разве это не полезно? Если вы хотите узнать больше о переменных CSS со встроенными стилями, я уже писал об этом более подробно.

Заключение

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

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

Узнайте, как прокачаться и в других специальностях или освоить их с нуля:

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering

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

Почему возникает проблема

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

Ссылки создаются с помощью тега <a>.

<a href="http://personeltest.ru/aways/htmlacademy.ru">HTML Academy</a>

Кнопка это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.

Для кнопок используют тег <button>.

<button class="button">9 900 руб.</button>

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

Что случится, если вместо ссылки сделать кнопку

Если URL-адрес обернуть не <а>, а тегом <button>, то при нажатии пользователя на правую кнопку мыши браузер предложит выполнить действия, которые положены при клике на кнопку. Адрес нельзя будет открыть в новой вкладке или отправить через контекстное меню.

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

При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в <button>, не отобразится.

Что произойдёт, если вместо кнопки сделать ссылку

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

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

<a href="javascript:;">На самом деле это кнопка</a>

При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/#.

Как определить элемент по макету

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

У ссылки должны быть стили для состояния покоя, при наведения курсора :hover, в момент нажатия :focus, активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited.

У кнопки нет состояния :visited, зато есть состояние блока :disabled.

Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited, а у блока :disabled это может запутать.

Забудьте про div семантика спасёт интернет

Всё-таки кнопка или ссылка?

Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться одной логикой.

Пример, чтобы расставить всё по своим местам

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

Другие великие противостояния

• Как ставить пустые ссылки: 7 способов

• Абсолютные и относительные ссылки

• Когда использовать флексы, а когда гриды

• Что лучше табы или пробелы?

Ссылки ссылками, а промокод VESELO даст приятную скидку на любой профессиональный курс в HTML Academy. Например, на курс Анимации для фронтендеров можно записаться в любой момент, а пользы для карьеры будет целый вагон.

Вот уже несколько лет производители электроники говорят о новой прорывной технологии, которая изменит привычные нам устройства и подход к их проектированию: никаких больше механических кнопок и переключателей, сокращение толщины до 2 мм, снижение веса на 70%, а себестоимости на 30%. Причем речь идет не о будущих серийных устройствах типа экрана с двойным сложением, который недавно представила Samsung, а о технологии производства, которая уже сейчас используется в автомобилях, бытовой технике и IoT-гаджетах. Эта технология называется литье с интегрированной / встроенной электроникой или In-Mold Electronics (IME).

На Хабре эту интересную тему еще почему-то не затрагивали. Исправляем это досадное недоразумение.

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

А теперь давайте обо всем по порядку. Литье с интегрированной электроникой это одно из направлений литья с декорированием в форме, о котором мы уже рассказывали на Хабре. В англоязычных инженерных публикациях такая технология называется In-Mold Decoration (IMD). Напомним, что корпус декорируется под давлением прямо в пресс-форме или в процессе выдувного формования.

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

Принцип маркировки в форме (In-Mold Labeling, IML) Источник: Maspi S.r.l.

На схеме выше показана суть технологий IMD и IML:

1. Сначала на тонкопленочный пластик наносят нужный рисунок текст, декор или текстуру (например, лого фирмы-изготовителя или подписи для кнопок). Это делается за счет трафаретной или цифровой печати. Получается так называемая аппликация.

2. Аппликацию помещают в пресс-форму для литья.

3. Затем в формовочную машину засыпают сухие гранулы полимера, который в расплавленном виде под давлением подается в пресс-форму за пленкой или перед ней.

4. Форма заполняется полимером, и печатная этикетка приклеивается к пластику.

5. На выходе при раскрытии формы мы получаем готовую деталь пластикового корпуса уже со встроенной графикой.

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

На фото выше верхняя панель пульта дистанционного управления, изготовленная с декорированием в форме (IMD). Другие всем знакомые примеры устройств, которые производятся по этой технологии: мультиметры, автомобильные панели, игрушки и мобильные телефоны.

В чем разница между декорированием в форме (IMD) и маркировкой в форме (IML)?

Если графика или текстура внутри пресс-формы наносится не на всю поверхность изделия от края до края, а локально, на отдельный участок, то такой тип декорирования называется маркировка в пресс-форме или In-Mold Labeling (IML). С помощью этой технологии можно добавлять цвет, графические элементы и текстурированные области.

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

И вот теперь мы возвращаемся литью с электроникой (In-Mold Electronics), которая стала логическим продолжением предыдущих двух технологий. Похоже, что первое коммерческое внедрение IME было реализовано в инновационной подвесной консоли для автомобиля Ford в 2012 году. Сегодня же IME применяется в производстве бытовой техники, автомобильных панелей, медицинского оборудования, аэрокосмической и носимой электроники.

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

На схеме ниже показано, как это работает:

Источник изображения: Functional Ink Systems for In Mold Electronics by DuPont

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

2. Термоформование придает печатным носителям трехмерную форму, которая соответствует форме для литья под давлением.

3. Литье под давлением.

IME, как правило, термоформованные, но не всегда. В областях с сенсорным интерфейсом поверхность может остаться плоской.

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

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

Источник фото: аналитический отчет IDTechEx за 2020 год.

На фото выше серийные устройства и прототипы, созданные по технологии In-Mold Electronics.

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

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

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

Емкостное сенсорное управление и пользовательские интерфейсы

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

Вот, как американская химическая компания Dupont, один из мировых разработчиков токопроводящих чернил для IME, представляет в своей презентации интерфейсы для автомобилей настоящего и будущего:

Подводим итоги

Автопром это всего лишь одна из многих сфер применения IME, которые мы уже называли выше. Но давайте на ее примере рассмотрим реальный кейс. Возьмем потолочную консоль в автомобиле, которая была спроектирована с использованием печатной платы и классического пластикового корпуса, состоящего из десятков компонентов и сборных деталей, и сравним ее с консолью финской компании TactoTek, которая сейчас разрабатывает свою технологию in-mold structural electronics (IMSE):

Итого, мы получаем значительное уменьшение веса, габаритов, количества подвижных частей и, как следствие, надежности и себестоимости устройства в целом. Судя по активным разработкам в этой теме и отчетам аналитиков, которые прогнозируют рост внедрений IME, начиная с 20232024 года, на рынке электроники намечается новый тренд переход от печатных плат в коробке к трехмерной структурной электронике. Так что если ваша работа связана hardware, можно присмотреться к этому направлению и успеть попасть на гребень волны. Надеемся, что мы вскоре сможем поделиться с читателями Хабра собственными кейсами по разработкам и запуску производства литой электроники.

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

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

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

В конце статьи будет ссылка на видео-инструкцию.

Иерархия библиотек вOzon

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

Работа внашей команде строится последующей схеме: для каждой Job или User Story мыделаем отдельный файл сэлементарным линейным сценарием. Там мысобираем экраны, пройдя которые пользователь решает свою задачу. Втаких сценариях, конечноже, появляются повторяющиеся паттерны, которые можно переиспользовать вдругих User Story иони достойны переноса вотдельную сценарную библиотеку. Этот подход позволяет нераздувать файлы, держать всю систему под контролем идостаточно свободно вносить правки, затрагивающие множество сценариев.

Сейчас унас вOzon есть несколько типов библиотек:

• Атомарные токены дизайн-системы.

• Молекулярные библиотеки сэлементами интерфейса. Изних собираются экраны сценариев.

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

Рабочие лошадки иудобные пони

Нохватит зауми! Вперёд кхит-параду. Ида, тут будут представлены иплатные сокровища, ночто значат деньги, когда дело касается Продукта иПродуктивности.

Master

Community

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

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

Копируем одну изформ ивставляем её всценарную библиотеку. Делаем компонент ипубликуем. Запускаем команду Pick Target Component изарсенала плагина Master. Возвращаемся вфайл сценария ивыделяем все наши формы. Запускаем команду Link Objects toTarget Component.

Дапребудет стобой сила, Master!

Design System Organizer

Community

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

Тут унас локальные цветовые итипографские стили. Надо привязать ихктакимже библиотечным. Идём вбиблиотеку изапускаемDSO. Заходим вцветовые стили, выделяем нужную группу ивыбираем извыпадающего меню Set AsTarget. Возвращаемся внаш файл, запускаем DSO ивыбираем Relink Styles. Бум! Стили теперь тянуться изкомандной библиотеки. Такимже образом перелинковываем другие стили или компоненты.

Style Organizer

Community

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

Вот тут унас типичная ситуация. Наглазок всё впорядке, нотакли это? Стартуем Style Organizer. Ивидим, что один изчёрных квадратов имеет локальный стиль, второй библиотечный, атретий вообще без стиля. Можно пробежаться посписку ошибок вручном режиме, сшивая стили, аможно нажать Auto Fix Color иStyle Organizer будет действоватьсам.

Similayer

Community

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

Давайте выделим слово Zen синего цвета, вне зависимости отстиля текста. Выделяем один синий Zen изапускаем Similayer. Выбираем параметры Fill Style иText Characters.

Удобненько!

Instance Finder

Community

Ищет ивыделяет только инстансы. Зато делает это шустрее Similayer иработает повсему документу, анепоодной странице.

Выделяем мастер или любой изинстансов изапускаем поиск. Можно сразу выделить все найденные настранице инстансы.

Select Layers

Community

Ещё один незаменимыйвыделятель. Чаще всего ловлю им слои по названию (он поддерживает частичное вхождение запроса). В отличииотSimilayer, SelectLayersне требует выделять образец для поиска соответствия и, что крайне важно, может искать только в выделенном.

Вот тут унас мега-вариант инпута. Выделяем поля пароля изапускаем плагин. Пишем название нужного слоя ивуаля! Можем поменять иконку, например.

Sorter

Community

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

Если попытаться пронумеровать экраны, нерасставив ихвпанели слоёв, получим хаос. Нуок. Выделяем все экраны, запускаем команду Sort Position ипосле этого уже штатный Rename Selection.

Порядочек.

Quantizer

Community

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

Выделяем, что нужно, истартуем Quantizer. Сделаем колонки сотступами по40px.

Кстати, вызнали, что можно таскать объекты всетке закруглые маркеры вцентре? Аменять отступ, хватаясь замаркеры между? Если делать это сShift, шаг будет кратен вашему Nudge Amount.

Swap

Community

Плагин, достойный горячей клавиши. Меняет между собой два любых объекта. Выставляет покоординатам верхнего левого угла.

Выделяем два объекта, запускаем команду Swap и, собственно, всё.

Layer Counter

Community

Карманный бухгалтер для ваших макетов. Подсчитает всё ився. Выделяем, запускаем. Наслаждаемся статистикой.

Если снять галку Include Nested Layers, увидим только количество выделенных фреймов.

Retextifier

Community

Может массово заменять текст ввыделенных блоках. Ноесть досадный недочёт при работе вWindows лишний перевод строки, скоторым можно бороться внешними средствами, заменив символ \n на\r или прогнав текст через сам плагин.

Замечательный инструмент, если умеешь импользоваться иутебя macOS.

НаmacOS: копируем текст, например, колонку изGoogle-таблицы. Выделяем целевые текстовые слои изапускаем плагин. Вставляем текст комбинацией Cmd+Shift+V.

Если увас Windows, действуем немного сложнее. Сначала вставляем скопированный текст вфайл Figma. Выделяем его, запускаем Retextifier, копируем итутже вставляем текст, жмём Change. Копируем изменённый текст, далее действуем как наmacOS. Надеюсь, автор плагина что-то придумает поповоду этого недоразумения.

Copy and Paste Text

Community

Вотличие отпредыдущего, этот плагин вставляет вовсе выделенные слои одинаковый текст избуфера. Безусловно полезно.

Копируем нужный текст, выделяем целевые слои, запускаем команду Paste Text.К

Find & Replace

Community

Поиск изамена потекстовым слоям споддержкой регулярных выражений (Regex). Для тех, кто умеет врегулярки ипонимает, как это круто.

Сейчас мыпоменяем местами буквы ицифры. Запускаем плагин, включаем поддержку Regex ипишем регулярное выражение. Найти (.*)-(.*) изаменить на$2-$1.

Мистика!

Nisa Text Splitter

Community

Разрезает текстовый блок настроки, сортирует, сшивает, расставляет буллиты имногое другое. Рекомендую.

Давайте расставим фильмы похронологии. Запускаем Nisa Text Splitter ирежем наш блок настрочки. Сортируем поалфавиту Sort byalphabet исшиваем обратно водин блок Join text. Внутри плагина ещё много другой годноты. Например, сразу делать Auto Layout изнарезанного текста.

Change Text to Layer Name

Community

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

Выделяем текстовые блоки, применяем Rename Selection, оставляем старое название, добавляем кнему дефис иномер. Запускаем команду Change Text toLayer Name.

Математично!

Data Roulette

Community

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

Делаем Google-таблицу. Линк нанеё добавляем вData Roulette. Называем целевые слои всоответствии сназваниями колонок таблицы поставив вначало решётку. Можно сделать это вмастер-компоненте. Помере необходимости добавляем вGoogle-таблицу новые колонки.

Рулетка рулит!

Content Reel

Community

Для того, кому лень возиться сGoogle-таблицами, Microsoft наплагинил Content Reel. Только нужно залогиниться. Тогда можно будет создавать свои наборы данных.

Тут всё просто. Выделяем целевые слои, выбираем свой или чужой набор данных, вставляем.

Copypasta

Community

Очень часто нужно что-то добавить навсе экраны сценария. Водно итоже место. ИCopypasta прекрасно решает эту задачку.

Выделяем нужную деталь, запускаем Copypasta, жмём Save selection, выбираем целевые экраны, Duplicate Layers.

Шикарно.

Safely Delete Components

Community

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

Safely Delete Components удаляет неиспользуемые мастер-компоненты. Ноэтот плагин нужно использовать состорожностью. Нестоит запускать его вбиблиотеках.

После переноса компонентов всценарную библиотеку, выделяем компоненты локальные изапускаем Safe Delete.

SBOL-Typograph

Community

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

Божечки-Ёжечки!

Хорошо, ногдеже тот самый плагин?

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

Всем удачи напродуктовом фронте!

P.S.: Видео-версию статьи можете посмотреть намоём YouTube-канале.

P.P.S.: Ясерьёзно про комментарии.

Усталость от принятия решений это популярный термин, описывающий случаи, когда человек за определенное время принимает слишком много решений. Исследования показывают, что причина этого явления в исчерпании когнитивных ресурсов именно поэтому после 30минут поисков на Нетфликсе чего-то нового вы в итоге смотрите давно знакомый Офис: ваша способность принимать решения снизилась, и мозг сдался (хотя это и неплохое шоу).

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

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

В этой статье рассматриваются шесть способов снизить когнитивную нагрузку в UX-проекте.

1. Чем реже нужно делать выбор, тем лучше

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

Если у пользователя слишком много вариантов выбора, он легко сбивается с толку и раздражается. У продукта могут быть все необходимые функции, но если интерфейс чересчур запутан из-за чрезмерного количества возможностей, он становится неудобным. В опубликованном в журнале Journal of Personality and Social Psychology исследовании говорится, что такая ситуация часто вызывает паралич принятия решений и раздражение. [1]

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

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

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

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

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

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

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

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

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

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

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

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

Ответ прост: нужно дать возможность легко вернуться туда, откуда пользователь начал.

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

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

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

При разработке пути пользователей я использую следующие рекомендации:

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

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

• Предотвращайте неправильный ввод данных: сохраняйте их до того, как ошибка испортит пользователю впечатление.

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

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

3. Визуальные подсказки для навигации

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

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

Правильно подобранное количество визуальных подсказок:

• Упрощает обзор и чтение страницы.

• Улучшает визуальную иерархию.

• Улучшает навигацию по странице.

• Существенно повышает коэффициент конверсии.

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

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

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

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

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

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

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

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

Согласованная цветовая схема.

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

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

Повторение в шаблонах проектирования и условностях.

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

• вашим продуктом станет удобно пользоваться, потому что в нем не будет ничего нового (это снижает когнитивную нагрузку);

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

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

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

Знакомые значки и символы для обозначения привычных действий: например, корзина для удаления файлов.

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

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

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

5. Делайте интерфейс для пользователей, а не для себя или своей компании

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

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

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

При этом можно задавать такие вопросы:

• Что больше всего понравилось в нашем последнем продукте?

• Как бы вы отнеслись к изменению функции X?

Некоторые полученные в результате такого опроса идеи могут вас удивить и даже изменить направление развития прототипа.

Есть несколько методов исследования UX, которые помогут держать пользователей в центре внимания:

• Надлежащее исследование рынка.

• Использование персонажей пользовательских ролей.

• Макеты и прототипы для получения быстрой обратной связи.

• Регулярное общение с собственной службой поддержки.

И этот список, конечно, далеко не полный

6. Стремитесь к простоте не перегружайте пользователей большим количеством вариантов и функций одновременно

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

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

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

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

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

Заключение

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

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

Помогли ли вам приведенные в статье советы? Расскажите в комментариях ниже или напишите мне на почту alexander@radahl.no.

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

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

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

Такой стиль иллюстраций называется корпоративный мемфис.

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

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

Как так получилось? И какое значение этот стиль имеет в сфере маркетинга?

Давайте разберемся.

Откуда название корпоративный мемфис?

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

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

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

Получившийся в итоге стиль назвали корпоративным мемфисом.

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

В итоге теперь уже сложно различить компании по визуальному стилю взгляните сами.

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

1. Смерть скевоморфизма

Помните старые 3D-иллюстрации на айфонах? Это скевоморфизм дизайнерский стиль, при котором изображение элементов интерфейса имитирует реальные аналоги.

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

Так что покойся с миром, скевоморфизм.

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

Корпоративный мемфис недостающий элемент мозаики плоского фирменного стиля.

2. Взаимозаменяемые цвета

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

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

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

3. Простой, масштабируемый дизайн

Еще один фактор популярности корпоративного мемфиса простота создания иллюстраций в этом стиле.

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

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

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

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

Например, Canva одна из множества платформ, предлагающих готовые элементы оформления. Среди других ресурсов FreePik, UnDraw, векторная библиотека Adobe, Humaaans и т. д.

4. Радость на лице радость в жизни?

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

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

И это работает.

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

И что, это всё? Это и есть Корпоративный мемфис? Просто яркие цвета, культурное разнообразие и радостное настроение?

Внешность может быть обманчива

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

Ненастоящее этнокультурное разнообразие

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

Простота для ленивых

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

Бездумное счастье

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

Заключение

Корпоративный мемфис это палка о двух концах.

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

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

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

И если увидите маркетинговые материалы в стиле корпоративного мемфиса (что неизбежно), остановитесь на мгновение, задумайтесь, присмотритесь и оцените, достаточно ли правдиво эти иллюстрации воплощают компанию?

О переводчике

Alconost занимаетсялокализацией игр,приложений и сайтовна 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаемрекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

_{Соавтор:Кузнецова Юлия Андреевна - UX-писатель Экосистемы РСХБ}

Каким должен быть дизайнер в банке, чтобы и продукт хороший создавал, и коллеги не жаловались. Смотрим через призму софт-навыков вместе с UX-дизайнерами РСХБ.

#1 Коммуникабельность: не просто коллега человек

Дизайнер отличная профессия для интровертов. Рисуешь интерфейсы, слушаешь музыку, ни с кем не общаешься На самом деле, нет!

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

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

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

#2 Презентация: готов объяснить свою работу

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

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

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

#3 Аналитика: думает не только о красоте

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

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

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

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

#4 Понимание бизнес-процесса: переводит с банковского языка на человеческий

Юный дизайнер: мастерски работает в Фигме, любит компоненты, боготворит филигранную верстку.

Продвинутый дизайнер: понимает, как устроен бизнес и финансы.

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

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

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

#5 Любознательность: постоянно учится новому

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

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

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

В 2017 году я решила поехать в Финляндию, в местечко близ Миккели, и подумала, что неплохо бы там нафотографировать красивого и написать пару статей. На горе себе я купила Irbis: клавиатура моментально поцарапала экран, он был без слота для симки, а аккумулятор приказал долго жить и отказывался работать без розетки. Цифровой котейка сохранился могу подарить любому желающему. Может, сейчас Ирбисы стали лучше, но тогда я прокляла день, когда зашла в магазин. Но намедни произошло тут со мной нечто хорошее. Короче говоря, если есть тут люди из племени копирайтеров-дезигнеров, то я вам, кажется, "покушоц принёс" (с).

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

Цена

Поскольку девайсина мне досталась с чужого плеча, в первую очередь я погуглила цену. Не, ну правда: а я бы вот это купила? Итак, Huawei MatePad с тушкой в 10.4 дюйма стоит примерно 25 килорублей. Честно говоря, по первой мысли: не купила бы, дороговато. Но это я, у меня смартфон Redmi A1, без NFC-модуля 2016 года рождения, три копейки в базарный день. Так что не стоит ориентироваться на мою жмотническую натуру, цена вполне разумная. И потому вторая мысль была: да, купила бы. И во втором мнении утвердилась после недели работы на планшете.

Комплектация

Изначально в коробке должно было быть всё, но голова от зарядки была, а шнурка нет. Понятно, что в магазинной версии есть всё. Зато к планшету отлично подошел шнур type-С от смартфона. Зарядился планшет за ночь полностью, и стал открыт для ковыряния, но 10-ваттная зарядка - это, конечно, маловато. Зато заряд при активном использовании планшета держится три дня (большой объем батареи - 7250 mah), а с учетом того, что я питаю свой старенький смартфон каждую ночь, это, я вам скажу, недурно. Кстати, только что я обнаружила, что шнур-таки был, просто в упаковке - в коробочке. Это просто я - дятел :)

Конечно, в инструкцию я заглянула уже после того, как вдоволь полазала в гаджете, но, в целом, ничего в ней, этой инструкции особенного и нет: комплектация и инструкция, как вставлять симку. А, из смешного: поскольку в планшете нет гнезда наушников, оно прилагается в отдельном пакетике в виде шнурка C-jack headpbones. Звук, кстати говоря, отпадный чистый, глубокий, это я вам как человек с пониженным восприятием басов говорю: в первый раз за долгое время послушала Крэнберриз с наслаждением: потому что, Harman/Kardon, звук как у колонок JBL, четыре динамика.

Железо и софт

Работает стабильно, не тормозит, и понятно, почему: 8 ядер в процессоре, 4 Gb оперативки, производительность поболее, чем у моего пятилетнего ленововского лаптопа. Поиграла на нем в Fornight отлично, залипла даже слегка, потому что экран откалиброван практически идеально. Почитать книжку тоже можно, и даже нужно: на смартфоне, когда читаю, даже на ночном режиме, у меня скукоживаются и вытекают глаза. А тут можно и в кровати почитать (потому что лёгкий), и глаза расслаблены. Ну, насколько это возможно при чтении вообще. В планшете есть такой режим электронная книга - сугубо рекомендую любителям многостраничных ЛитРПГ. Понравилось, что есть режим защиты зрения, поскольку глаза и так устают от компа 24/7. Из маленьких приятностей есть Kirin 810NFC.

Через Aurora Store скачала те сервисы, что мне были нужны, установилось все нормально планшет не грелся. Вёл себя как заинька. YouTube vanced порадовал меня отсутствием рекламы, а сам планшет тем, что ничего не тормозило! Я так порадовалась этому обстоятельству, что даже посмотрела от начала до конца Разрушитель со Сталонне, хотя поначалу хотела просто проверить качество видео. Если часто путешествуете и в дороге смотрите фильмы, то, кажется, Huawei MatePad one love, one choice.

Chrome летает, нареканий нет. В Серпухове и Смоленске я подключила Google Maps, ну и все отлично работало, опять же без тормозов, в то время, как родной Redmi с Яндекс.Картами чуть не довел меня до слёз: не, ну реально, я крутилась у памятника Чехову как волчок, пока наконец смартфон милостиво не подгрузился. Планшет на том же Билайне показал себя гораздо лучше. А ещё у него металлический корпус, что добавляет уверенности в будущем. Во всяком случае, в его, планшета, будущем.

Порадовали: предустановленный Сбер и Яндекс.Дзен, программка интеллектуальной клавиатуры Swiftkey (кто много пишет, журналисты там, блогеры, СММ-щики очень рекомендую: довольно грамотный корректор, подбирает эмодзи, можно водить пальцем, а не тыкать. Такая, знаете, дочь Порфирьевича) По камерам могу сказать, что фронталка размещена немножко странно: сбоку, как у смартфонов. Но если там это оправданно, но здесь все время смещается фокус, глаза убегают в сторону и надо приноровиться к съемке.

Юзабилити

Сейчас главное скажу: можно одновременно работать в трёх окнах. Ну, к примеру: в одном у меня висел Инстаграм, во втором поиск картинок, гугловский, в третьем Канва, в которой я пилила обложечку для Инсты. И прекрасно всё это на одном экране уживалось, сохранив мне кучу времени и нервов. По сути, это переносной медиацентр, и своих денег он определенно стоит.

А, да, вот: я подключила его к камере своего квадрокоптера и вышел гораздо более качественный тандем, чем со старичком Redmi: изображение видно на большом экране лучше, цвета естественнее, не виснет. Правда, похвастаться кадрами не могу, потому как если с компами роман у меня более-менее случился, то летать я пока ещё не очень умею, и потому кхм, в общем, через полгода смогу похвастаться классными снимками, а пока сорри, придётся поверить на слово. Качество съемки на высоте: чёткая, можно снимать живые картинки, цвета не искажаются.

Безусловно, у меня возник вопрос: если Huawei MatePad такой хороший, почему его отдали? Ответ меня насмешил: он не влезал в дамский рюкзачок. Ну, факт, да, в рюкзачок он не влезет, как не влезет в клатч и дамскую сумку. Но, упакованный в чехол с клавиатурой, вполне комфортно себя чувствует в городском рюкзаке и шоппере. Чехла я на него не нашла, а потому, опасаясь крошек от печенек, носила красавца в боковом кармане рюкзака. Один раз он у меня упал и хоть бы хны.

Почему носила, а не ношу сейчас? Планшет я отдала маме, ей он оказался нужнее: крупный экран, удобно играть в Candy Crush (кому что нравится, не осуждайте), понятный интерфейс. Но Huawei MatePad, как по мне, не только для старых и малых в нём есть всё, что надо, крупные яркие иконки, чистый экран, можно подгрузить много полезного, легкий и прочный. Вещь особо годная для тех, кто работает с соцсетями и контентом, с чего я и начала разговор. Я лично девайс оценила: как по мне, это 4,5 из 5, и то только потому, что на 5 я ещё ничего не встречала, но, как говорится, нет идеала в этом мире.

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

Началось всё в 2009 году, когда вместо того, чтобы, для документов в электронном виде, отсканировать печать (как это обычно делается), я, по разным причинам (включая уже заметную на тот момент деформацию полимера действующей печати), запланировал отрисовать её заново. Но перед этим решил проверить: не была ли она сделана при помощи одного из популярных генераторов. Моё предположение оказалось верным и, через несколько минут, печать, со 100% точностью, я получил просто, выбрав подходящий шрифт и введя нужные данные в поля программы. Результат выглядел примерно так:

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

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

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

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

На следующем этапе нужно было определить минимально допустимую толщину линий и размер элементов микротеста для печати, но не найдя ничего конкретного, пришлось ориентироваться на ГОСТ Р 51511-2001, относящийся к печатям с воспроизведением государственного герба Российской Федерации, а именно на п. 6.2.3: Наличие линий толщиной 0,08^+0,01 мм., и п. 6.2.1, 6.2.2: Размер элементов микротекста от 0,5 до 0,8 мм.

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

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

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

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

То же самое изображение:

Так это выглядит на самом деле (одинаковый размер печатей):

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

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

Наигравшись, я забыл о нём еще на несколько лет, до тех пор, пока, всё-таки, не захотел нормально освоить Illustrator, знакомство с которым, на тот момент, ограничивалось опытом работы над одним единственным элементом. Тогда, ожидаемо, очередные размышления на тему того, как бы сейчас выглядел шаблон, привели меня к следующей работе. В этот раз всё было по-другому: я продумывал каждый микрон, каждый элемент многократно переделывался. Иногда проходило несколько дней, прежде, чем он начинал меня полностью устраивать. Если я в чём-то сомневался, то откладывал работу, чтобы потом посмотреть на неё свежим взглядом. Примерно через год, был закончен первый вариант и меня он устраивал всем, кроме казавшейся не достаточной устойчивостью к секторному копированию (как я это назвал), когда для того, чтобы воссоздать тело печати достаточно отрисовать только небольшую её часть. Дальнейшую работу я продолжил в надежде исправить этот недостаток и, спустя какое-то время, сделать это мне удалось в полном объеме от задуманного.

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

Текущий проект оформлен таким образом, чтобы большая часть нового шаблона генерировалась автоматически при помощи скриптов. Таким образом можно получить бесконечное множество визуально одинаковых, но разных по сути шаблонов (для чего это может быть нужно, станет понятно позднее). Адаптацию одного из скриптов под свою версию Illustrator пришлось заказывать на стороне. Общий объем чистого проекта (в котором уже нет ничего лишнего) можно представить по следующим кадрам:

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

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

Привет, мы дизайнеры экосистемы Своё для фермеров и банковских сервисов Россельхозбанка. Рассказываем, зачем нам понадобился SVGator.

Как мы пришли к SVGator.com

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

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

Что за зверь и какие задачи решает

SVGator.com это web-платформа для создания svg-анимаций, то есть svg-файлов со встроенными анимациями, которые без каких-либо проблем интегрируются в html. Можно задать последовательную обработку таких анимаций. Возможен экспорт как js, так и чистым CSS. Возможности js немного шире, но разница не существенная.

В рамках продуктов группы Своё мы создавали различные анимации для лоадеров, микроэлементов (таких как стрелка дропдауна), логотипов и элементов оформления. Мы ещё находимся на стадии экспериментов с SVGator, но уже чётко понимаем, в каких моментах он имеет преимущества и что можно создать с его помощью:

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

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

Элементы дизайна. Например, иллюстрации

Интерфейс и функционал

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

Инструмент включает в себя следующие функции: работа с размером, положением, поворотом, наклоном, цветом, прозрачностью, а также богатый функционал для работы с обводкой. Помимо этого, поддерживается работа с масками и векторами движения. Этого достаточно для работы с классическими решениями анимации. Ещё один важный момент работа с easing, которые также встраиваются в svg-файл. Это упрощает работу на этапе front-end, и дизайнеру не приходится тревожить разработчика скоростью анимации.

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

Чем svg отличается от sequence, gif, video? А также основные конкуренты:
Lottie и Keyshape

Ключевые преимущества svg вес, отсутствие api и возможность давать плавную анимацию. Разберём каждую из альтернатив.

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

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

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

Lottie. Это один из ключевых конкурентов SVGator. Компания раньше вышла на рынок и имеет значительно больше почитателей. Плюс возможности анимации значительно больше, поскольку базовая анимация собирается в Аfter Еffects, а lottie является своего рода оболочкой для такой анимации. Но для работы с данным решением необходимо предустановить api на платформу, что не всегда хорошо для продакшена больших нагруженных систем.

Keyshape. Очень близкая по возможностям платформа, различия лишь в деталях. Текущий функционал Keyshape несколько выше и позволяет делать экспорт чистым svg + css. К недостаткам можно отнести её стационарность и возможность работать исключительно на macOS.

Вот поэтому и стоит обратить внимание на SVGator. Плавные анимации, реализованные кодом, кроссплатформенные, без каких-либо api и с нормальным весом.

SVGator в экосистеме Своё

На наших продуктах Своё Фермерство, Своё Жильё, Своё Родное, Монеты, Подбор персонала, Своё Село и т.д. уже присутствуют наработки в SVGator: лоадер, интерактивные состояния компонентов, логотипы, а также иллюстрации для оформления разделов. Мы планируем увеличивать их долю и продолжать экспериментировать.

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

Перспективы

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

Объёмные решения склонны к излишней нагрузке системы и могут стать камнем преткновения. Поэтому в наших планах использовать этот инструмент поступательно, небольшими шагами, анимируя поначалу небольшие элементы.

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

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

Прибытие кошечки

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

Кошечка не была первым компьютерным мультфильмом, однако она стала первым реалистично анимированным при помощи компьютера персонажем.

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

В БЭСМ-4, на которой создавалась Кошечка было несколько модулей памяти общей ёмкостью 16К 45-разрядных слов. Результаты работы программ печатались на рулонной бумаге суровым агрегатом под названием АЦПУ-128, так что ни о какой графике речи не шло. Полагать, что в конце 60-х существовали какие-либо графические пакеты, тоже было бы слишком наивно учёные сами писали нужные им программы. Через 6 лет Константинов и соавторы (Владимир Пономаренко, Виктор Минахин) опубликуют в журнале Проблемы кибернетики статью, из которой можно узнать много интересных подробностей: представление чисел, описание структур данных, вывод уравнений, описывающих движение.

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

Наследие Трона

Мы были в восторге от backlit-анимации. Свет не отражается от рисунка на целлулоиде, а попадает прямо в объектив камеры сквозь маску и светофильтр, и получается очень насыщенный, приятный глазу цвет. [Тогда] никто не делал backlit-персонажей. Эту технику применяли для логотипов, чтобы заставить предметы светиться и пульсировать. Мы же попытались создать такого персонажа Этот тест, он был из текучего неона, он был электронным. И раз он был электронным, мы прозвали его Трон.

Стивен Лисбергер, режиссёр

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

Остановимся на самом главном. Картина Лисбергера не была первым художественным фильмом, в котором для создания визуальных эффектов применялась машинная графика. До Трона как минимум были Мир запада и Мир будущего (1973 и 1976 соответственно), Звёздные войны (1977) и второй полнометражный Star Trek (1982), однако именно в Троне визуальные эффекты сыграли решающую роль.

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

Над графикой для разных частей ленты независимо друг от друга трудились 4 фирмы, что в результате отразилось на визуальном стиле картины. Обычно, когда речь заходит о Троне, в первую очередь вспоминают Triple-I и её супер-ЭВМ (совместимый с PDP-10 Foonly F1), а также MAGI/Synthavision. Две эти компании создали большую часть визуальных эффектов, но лично моё внимание привлекла другая Robert Abel and Associates. Работавший над фильмом сотрудник Абеля по имени Билл Ковакс через два года станет одним из основателей Wavefront Technologies, крупного разработчика графического ПО.

Что такое Silicon Graphics

Человек Идея Венчурный фонд Признание Головокружение от успеха Закат. Это если совсем кратко. В 70-х годах Джеймс Кларк, будучи профессором Стэнфордского университета, вместе с Марком Ханной начал работу над Geometry Engine набором микросхем, призванным взять на себя обработку трёхмерной графики. Демонстрация разработки на выставке SIGGRAPH позволила привлечь необходимое финансирование, и в 1982 году рождается Silicon Graphics с приставкой Inc.

Чтобы понять, чем так интересны эти машины, мысленно вернёмся в 1992 год. За 386-й компьютер в конце 92-го просили около $1300 (на момент написания статьи эта сумма примерно соответствует $2300 или 170 000 рублей). Максимум своих возможностей чудо-машина обычно демонстрировала в играх вроде Doom или Седьмого гостя. Последний выпускался аж на двух компакт-дисках извольте потратить ещё долларов 300 на привод, если жаждете прикоснуться к прекрасному.

Apple стагнирует вплоть до возвращения Джобса, менее дорогие Макинтоши конкурируют с Макинтошами подороже, что в будущем выльется в несколько линеек примерно одинаковых машин, но в разных ценовых диапазонах. Одно из самых доступных предложений Macintosh LC II, производительность сопоставима с персоналками.

Найти цены SPARCstation от Sun уже сложнее, но готов поспорить, что было дорого как-никак кровавый enterprise. Сейчас нам важен тот факт, что в части этих машин в принципе не было аппаратной поддержки графики. К этому моменту за 10 лет своего развития аппараты SGI прошли путь от графических терминалов до производительных рабочих станций, способных выводить трёхмерную графику в реальном времени, что привлекло киностудии.

Конкретно это демо было записано в 1996 году, но оно очень хорошо передаёт суть, да и компьютеры Onyx были выпущены в 93-м. После выхода таких картин как Бездна (1989) или Терминатор 2 (1991) слова Silicon Graphics и визуальные эффекты фактически стали синонимами. Космические возможности, однако, стоили космических денег. Компьютер Indigo 2 в минимальной комплектации (MIPS R4000, 100 МГц) обошёлся бы в $25 000 ($45 000 или 3 330 000 рублей сейчас), и это далеко не предел. При этом крупные клиенты вроде Industrial Light & Magic нуждались во всё более производительных решениях деньги лились рекой. Так, между делом, в том же 1992 году SGI приобретает себе MIPS.

И тут как гром среди ясного неба разносится известие об уходе самого Кларка. Совет директоров не был согласен с его идеями привнести разработки компании на рынок потребительской электроники. С руководством кроме Кларка конфликтовали и другие инженеры, что вылилось в основание такой никому не известной конторы как 3dfx или уход части сотрудников в ещё более неизвестную ATI.

По иронии судьбы изначально игрушечные персоналки развивались семимильными шагами, не без помощи вышеупомянутых контор (а там ещё nVidia подтянется), и признанный лидер недооценил это обстоятельство. С 1997 года компания начинает терпеть убытки. Ещё два года назад бывшая на пике своего развития она больше неспособна вести конкурентную борьбу с Intel-совместимыми системами. Масла в огонь подлили разработчики ПО, которые портировали свои графические пакеты на Windows NT и другие платформы, когда дело запахло жареным. В 2006 году несмотря на отчаянные попытки выжить Silicon Graphics объявляет о своём банкротстве и окончательно перестаёт существовать к 2009 году остатки компании распроданы, а вырученные средства уходят на выплаты кредиторам.

Несмотря на печальный конец, наследие Silicon Graphics продолжает жить. В 1995 году под крышей SGI произошло слияние Alias Research и Wavefront Technologies, из прежних наработок которых родилась Maya среда, фактически ставшая промышленным стандартом (и с которой я совершенно не умею работать). На этой же платформе родился такой графический пакет как Houdini жив, используется как одиночками, так и гигантами вроде Pixar.

Без упоминания в художественных произведениях тоже не обошлось:

Аппаратный зал, находившийся за дверью с игривой надписью Машинное отделение, не произвёл на Татарского особого впечатления Никакой мебели в комнате не было; на одной стене висела цветная фотография Гагарина с голубем в руках, а у другой стояли металлические стеллажи со множеством однообразных синих ящиков, единственным украшением которых была похожая на снежинку эмблема Silicon Graphics.

Виктор Пелевин, Generation П

Но если Generation П вещь довольно специфичная, то с этим камео вы точно знакомы:

Бесконечность не предел

Для работы над Звёздными войнами Джорджу Лукасу требовалась студия, которая будет заниматься визуальными эффектами, ради чего в 1975 году режиссёр создаёт упомянутую ранее Industrial Light & Magic грядущего титана; наверное будет проще сказать, над чем они не работали.

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

В 1983 году в связи с финансовыми трудностями Лукас начал в срочном порядке избавляться от активов, в т.ч. и от Graphics Group. Смит, Катмулл и Лассетер, помня о своих планах, попытаются сохранить сформировавшуюся команду и в 1986-м решают самостоятельно выкупить подразделение. Инвестором и по совместительству главным акционером стал Ни за что не поверите Стив Джобс, тогда уже уволенный из Apple. Новая независимая компания стала называться Pixar.

Катмулл, Лассетер и ко считали Джобса своим, однако вопреки ожиданиям и сложившейся репутации он окажется жёстким авторитарным руководителем выключить солнце, забыть про анимацию, сосредоточиться на железках, которые можно продать! Ради справедливости стоит отметить, что такой подход мог быть оправдан. Лукас хотел начать активно применять графику ещё в Empire Strikes Back (1980), но отказался от этой затеи, т.к. несмотря на огромный потенциал производительность вычислительных машин долго оставляла желать лучшего и получить результат требуемого качества было нереально. Анимационные короткометражки были лишь побочным продуктом, призванным рекламировать решения Pixar. Продажа оборудования не приносила достаточного дохода и компания работала в убыток. Весной 1988 года Джобс поднимает вопрос о значительном сокращении расходов, возможно, вместе с частью сотрудников. Катмуллу и Лассетеру удаётся убедить его выделить средства на ещё один короткометражный мультфильм из собственных активов. Оловянная игрушка, ради которой аниматоры буквально ночевали на рабочих местах, завоевала Оскара, привлекла к себе внимание Disney и, самое главное, сдружила Джобса с Лассетером.

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

Джери, Катмулл и Кларк

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

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

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

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

The Spirits Within

В 1987 году тогда ещё малоизвестная студия Square испытывала серьёзные финансовые трудности. Первые игры японцев не снискали популярности у игроков и находящаяся в разработке Final Fantasy в прямом смысле могла стать final, но вместо этого её ждал успех. Вслед за ней из-под пера Square выйдет немало хитов (от номерных частей Final Fantasy до Chrono Trigger и Parasite Eve), однако японцы не захотели останавливаться на достигнутом.

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

Вскоре после премьеры некоторые актёры, например Том Хэнкс, высказали опасения насчёт того, что их и их коллег вскоре заменят компьютерными моделями, а СМИ разразились жёлтыми заголовками (как минимум New York Times). Стоит отметить, что планы создателей действительно шли далеко вперёд: как вам концепция виртуальной актрисы и её взаимодействия с отснятым материалом? Забегая вперёд скажу, что они не сбылись, однако на Аки Росс в реальности можно посмотреть тут (первая минута):

Качественный прорыв обошёлся дорого. Просто приведу слова Троя Брукса, одного из руководителей проекта:

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

В том же интервью раскрываются и некоторые технические подробности: рабочие станции художников и аниматоров SGI Octane, композитинг и монтаж SGI Onyx. Моделирование и анимация производились в Maya, рендеринг Pixar RenderMan (Pentium 3, RedHat 6.2).

Подводя итоги: 4 года производства, 120 человеко-лет, 1200 компьютеров (рендер-ферма, без учёта рабочих станций), 24 года машинного времени и соответствующие всему этому великолепию $137 млн. бюджета. При кассовых сборах чуть более $85 млн. Square Pictures ждало неминуемое банкротство, хотя сама Square переживёт эту неудачу. Коммерческому провалу могли поспособствовать некоторые обстоятельства:

• Во-первых, название Final Fantasy явно говорило о связи с одноимённой серией игр, сужая аудиторию; масла в огонь подливал тот факт, что автором сценария и режиссёром выступил Хиронобу Сакагути создатель оригинальной игры. При этом сам фильм не связан с какими-либо играми серии, если не считать отсылок вроде учёного по имени Сид или едва заметного силуэта ездовой птицы на пижаме главной героини.

• За красивой картинкой прятался слабый сценарий с флёром Рен-ТВ. С другой стороны, концепцию живой планеты или что-то очень на неё похожее использовали в художественных произведениях задолго до Духов внутри (привет, Конан Дойл), и будут использовать после (привет, Кэмерон).

В отличие от других провалившихся проектов, за Final Fantasy почему-то особенно обидно и из головы не уходит мысль о том, что этот мультфильм сильно недооценили. В 2017 году сбылась мечта идиота я попал на московский CG Event. В своей речи на открытии конференции Сергей Цыпцын сравнил Духов внутри с короткометражным фильмом Adam теперь картинку аналогичного качества можно получать практически в реальном времени. Первый докладчик как раз был из Unity Technologies.

Не мне спорить с известными специалистами, однако соглашусь лишь частично: Adam безусловно хорош, но он про роботов. После Фантазии в принципе было немного анимационных фильмов в реалистичной стилистике, и ни одному из них не удалось превзойти первопроходца. Из полнометражных можно вспомнить три работы Земекиса и Тайну Единорога Спилберга по альбомам Эрже, но её можно сразу отбросить.

Weta Digital как всегда выдаёт конфетку, но сравнение будет некорректным, ибо персонажи стилизованные. От правдоподобных до откровенно гротескных.

Если вы всё ещё не забыли про Тома Хэнкса, то через 3 года он примет участие в похожем проекте, а именно Полярном экспрессе Роберта Земекиса, где отыграет и озвучит сразу несколько ролей.

Ирония в том, что три года спустя и при большем бюджете ($165 млн., сборы $306 млн.) картина окажется заметно слабее как минимум в техническом плане, но хотя бы окупит производство.

Я просто оставлю это здесь.

Трассировка лучей и полный метр

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

Роберт Кук, один из создателей Pixar RenderMan

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

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

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

Альтернативный подход заключается в том, чтобы отследить путь попавших в виртуальную камеру лучей света. Впервые эту технику, сейчас известную нам как обратная трассировка лучей, продемонстрировали в лабораториях Белла в далёком 1979 году. Найти эту короткометражку (Compleat Angler) целиком непросто, однако этот шестисекундный фрагмент даёт неплохое представление:

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

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

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

Честно достичь такого результата классическими методами не получится. Распространённая практика добавить в сцену дополнительные источники света, количество которых стремительно растёт.

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

В 1998 году Маркос Фахардо напишет Arnold, шутки ради названный так в честь бывшего губернатора Калифорнии. Для своего времени замысел был довольно смелым: освещение в каждой точке рассчитывается методом Монте-Карло, эту технику называют трассировкой пути. Для нас это означает максимальное стремление к физической корректности и повышенный аппетит программы к вычислительным ресурсам. Дебютом системы стали несколько короткометражных мультфильмов, после которых в 2004 году на новичка своё внимание обратит Sony Imageworks. Студия включается в процесс разработки и делает Arnold своим основным инструментом. Первым полнометражным анимационным фильмом, полностью отрендеренным с его помощью методом трассировки пути становится Дом-монстр 2006 года, что бы там ни говорили в Pixar. Они в свою очередь не спешат отказываться от старых наработок, но в том же году добавляют в свой RenderMan поддержку трассировки лучей и активно используют новые инструменты. 10 лет спустя Pixar полностью откажется от старой архитектуры в пользу трассировки пути.

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

В этом интервью у меня в гостях Ксения Гордиенко из Канады.

После окончания института в Санкт-Петербурге Ксения обучалась в Германии, после чего за короткое время смогла вырасти из студента-ассистента до BIM-менеджера одной из крупнейших строительных компаний Европы. Но, несмотря на достигнутые результаты, Ксения вместе со своим мужем переезжает в Канаду, где начинает свою жизнь с чистого листа.

В этом выпуске мы поговорим с Ксенией Гордиенко о проблемах эмиграции и актуальных проблемах строительной отрасли.

Видео версия:

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

К: Артем, спасибо большое за приглашение. Я слежу за твоими публикациями в Linkedin. То, что ты делаешь, это очень классное дело. Особенно мне нравятся твои схемы, поэтому я с большим удовольствием участвую в этом интервью.

Я живу сейчас в Ванкувере, в Британской Колумбии на западном побережье Канады, работаю virtual design construction менеджером в строительной компании ETRO Construction. Моими прямыми обязанностями является анализ строительных процессов и движения информации в строительстве в общем и в этой компании в частности. Моя карьера началась в Штутгарте параллельно с моим моим обучением архитектуры и дизайна.

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

К: Мой переезд был обусловлен получением второго образования.

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

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

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

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

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

А: Получается, эти профессора потом нанимали на работу кого-то из студентов?

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

А: То есть они, как маклеры, продавали объекты недвижимости хорошим работодателям?

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

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

А: А что ты делала на стройке?

К: Представь, русскоговорящая девчонка на стройке в Германии: Привет, мне нужно пройти практику для поступления в университет. Естественно, все сводилось к тому, что я выполняла какую-то посредническую работу. Начинала я вообще с каркасов из бетона и просто убиралась за строителями. Но у меня была координация с прорабами, и они мне просто объясняли, что происходит на стройке: Вот, посмотри, план. Я начала изучать какую-то документацию. Но я постаралась скоординировать свою практику не только на одной стройке.

А: Это было в Австрии?

К: В Германии, в маленьких деревеньках близ Штутгарта. Я нашла контору-застройщика. У них были подрядчики, которые выполняли разные дисциплины. Сначала это были бетонные конструкции, потом я с кирпичом работала, затем укладка плитки и покраска помещений. Там я тоже много выучила (азы строительства) еще до того, как начала изучать архитектуру. Например, если мы плитку кладем, то швы по диагонали вымываем, а не по вертикали и тому подобное.

А: Большинство строительных объектов, которые ты видела в Германии, это двух-трехэтажные дома?

К: Да. Я как раз до университета работала на таких объектах.

А: Если уж мы заговорили про стройку, скажи, пожалуйста, каких людей ты там видела, каких национальностей? Можешь коротко рассказать про рабочих, или о каком-то интересном опыте?

К: В деревнях около Штутгарта это, естественно, были швабы.

А: Поясним для слушателей. Швабский регион это отдельный регион. Это как отличия между украинцами и белорусами. Вообще, на юге Германии проживает три народа: баварцы, швабы и бады. Отличия между ними и в языке, и в культуре очень существенны. Ксения, и ты осела в этой Швабландии

К: Да. Сложно было. Помню, в каком я была шоке, когда один человек попросил меня принести из рабочей машины Kreissge. Я на него смотрю и понимаю, что не знаю, что такое это Kreissge.

А: Циркулярная пила

К: Да. Я подбегаю к машине, пытаюсь догадаться, что такое Kreissge. В результате приношу одну пилу, но не круглую, а длинную, сабельную. Побежала второй раз, опять не то. В общем, правильную пилу я только с третьего раза принесла. Вот тогда я поняла, насколько мне не хватает словарного запаса. Я не понимала, о чем люди меня спрашивают. Вот так со швабами я провела два лета (мне удалось разбить 6-месячную практику). Но несмотря на то, что я была такой непонятливой неумехой, мне хорошо платили.

А: А сколько тебе платили?

К: Мне хватило этих денег, чтобы заплатить за мою общагу за полгода.

А: То есть ты покрывала месячные расходы какие-то.

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

А: А в проектировании ты работала в Германии, в Австрии?

К: Проектирование началось в четвертом семестре, когда я приехала в Гратц на обязательную практику.

А: То есть ты переехала в Австрию, километров 500 от Штутгарта.

К: Да. В этом архитектурном университете есть обязательная практика. Можно было пройти ее в каком-то бюро в Германии, при этом тебе необязательно оставаться в Штутгарте. Также можно уехать в немецко говорящую страну (потому что образовательные проекты подходят) или организовать практику в каком-то другом университете, где образовательная программа была чуть побольше, там можно было даже в Италию переехать.

А: После обучения в Германии ты устраиваешься работать в австрийскую компанию Zblin. Это одна из крупнейших строительных фирм в Европе, с оборотом 5 миллиардов в год и 15 тысячами сотрудников. Как тебе удалось за такое короткое время вырасти из студента-ассистента вырасти в BIM-менеджера?

К: Расскажу обязательно свой секрет. После переезда из Санкт-Петербурга мне был нужен дополнительный заработок, потому что Штутгарт очень дорогой город. Я искала работу, где могли быть востребованы мои знания. Во втором семестре я познакомилась с одним товарищем из Zblin, который тоже учился в моем университете. Узнав, что у меня уже есть одно высшее образование по специальности информатика и вычислительная техника, а также определенные теоретические знания по базам данных, он предложил мне заняться исследованием трехмерной графики. Решающим фактором, благодаря которому меня взяли тогда на практику в Zblin, стало мое знание Solidworks.

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

А: То есть ты в Zblin занималась геометрическим ядром какого-то САПРа?

К: Да

А: А Zblin для себя эти исследования проводил?

К: Начиналось это все в отделе проектирования. Ребята-инженеры работали тогда с Autodesk Inventor, но уже тогда понимали, что мир движется в сторону трехмерного моделирования, и видели уже какие-то всплывающие софты.

А: А какой это был год?

К: Я начала с ними работать в 2007 году.

А: А про Revit никто не слышал тогда?

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

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

А: Какие были софты?

К: Я выполняла в Nemetschek (он был нашим фаворитом), Archicad и Revit. Когда я уже работала на полную ставку в Zblin, я работала в Nemetschek . С другими софтами работала другая девушка, тоже с архитектурного факультета (Эва, она справа от меня на фото выше)

А: Интересно, к чему пришли.

К: Конечный результат Nemetschek, который уже тогда обладал Allplan Menge, и естественно, это их зацепило. Revit предлагал только таблицу из трехмерной панели, но ты не знал, какие объекты туда попали. Не было двунаправленного движения, у тебя были величины, а что за величины ты не знал. Поэтому первый год в Zblin я продолжила моделирование в Nemetschek. А буквально через год, в 2009 году, мы так заросли заказами на трехмерные модели, что мой босс сказал, что мне уже пора учить других, а моделировать мне некогда. Тогда же мы вернулись к Revit, потому что он к тому времени обогнал по скорости развития.

Инженеры Zblin известны по той причине, что они действительно классные инженеры. Они создают невероятные статические конструкции, такие как Mercedes-Benz Museum в Штутгарте.

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

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

А: И те объекты до 2007 года делались в Nemetschek?

К: Да, Nemetschek и Solidworks. Конечно, органические формы, такие как Mercedes-Benz Museum, делались в Solidworks. Когда речь идет о Revit или Nemetschek, то мы ограничиваемся квадратной шоколадкой Ritter Sport (Quadratisch. Praktisch. Gut). А что касается объектов, как Zaha Hadid или Frank Owen Gehry, у нас есть лимит по воспроизведению геометрии, поэтому проще перейти в машинный софт.

Проект Flughafen Bblingen лёг в основу исследовательского проекта RFID (от дизайна до использования), результатом которого стало это видео: https://www.youtube.com/watch?v=44OzWHR9mzQ

А: Теперь понятно, как ты стала BIM- менеджером в Zblin.

К: Да, я стала BIM- менеджером, потому что им не на кого было положиться.

А: И еще вопрос об обучении. То, чему ты обучалась в Германии или России, тебе пригодилось в твоей работе?

К: Да, безусловно. Мне кажется, что оба образования свелись каким-то образом вместе.

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

В тот момент, когда я уехала из Санкт-Петербурга в Германию, я поставила крест на информатике и компьютерной технике, даже не подозревая, что это станет в дальнейшем частью моей карьеры. Естественно, сейчас я больше встречаю людей, которые сначала получают архитектурное и строительное образование, а потом докладывают какие-то информационные курсы какие-то, программирование то же. А у меня получилось наоборот: сначала информатика, потом архитектура и затем BIM.

А: Очень крутой микс, правильная смесь получилась. В 2007 году ведь, по сути, технологий BIM не было, мало еще каких-то обучающих видео по Nemetschek, по Revit. Откуда ты брала информацию в то время?

К: По Nemetschek у нас были курсы в университете. У нас была возможность свободных курсов по Nemetschek и Arhicad. Не буду секретничать, Zblin тоже был за бесплатные курсы, за бесплатные студенческие лицензии для софта. Немцы все-таки платят за свои лицензии, и иметь студента, который обучается самостоятельно, для них было круто.

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

А: Ты стала BIM-менеджером в Zblin, жизнь уже наладилась, да еще в таком юном возрасте. Однако в 2015 году что-то происходит в твоей жизни, и ты решаешься покинуть Европу и переселиться в Северную Америку на канадский запад, который отчасти похож на Дальний Восток по климатическим и социальным параметрам. То есть из теплой Европы (юг Германии считается сравнительно тёплым регионом) ты перемещаешься на север, в Ванкувер. Что тебя побудило поменять страну и уехать в Канаду?

К: Ответ будет очень романтичным. Это история любви. В Германии я встретила своего будущего мужа, который жил в Барселоне. На тот момент, когда моя карьера развивалась, в Барселоне после 2008 года была только одна большая стройка это Sagrada de Famlia, которая продолжается уже больше ста лет. Она не была моим вариантом, поэтому мне было ясно, что если мы хотим продолжать развитие наших отношений, то нам нужно куда-то переехать. Он не был готов переехать в Штутгарт, в Германию, а я не была готова переехать в Испанию. Как я люблю шутить, с географией у нас было плохо, поэтому встретились мы на середине. Мы переехали в Ванкувер по той причине, что это самый теплый город Канады и своим ландшафтом схож с Барселоной. У нас за городом горы, есть возможность покататься на лыжах, а город находится на океане.

А: То есть вы, находясь в Европе, думали о том, куда переехать, и ваш выбор пал именно на Ванкувер, так как он подойдет вам обоим?

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

А: А какие еще были варианты?

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

А: Получается, вы выбрали страну, город, переехали туда и там искали работу? Или из Европы? Как поиск работы происходил?

К: Мы пытались найти работу из Европы, мы изучали рынок, и что касается рынка моей индустрии, моего направления (BIM или virtual design construction), - это было очень сложно. Народ мне не отвечал, я не могла найти правильных людей, не понимала, что происходит У меня было несколько знакомых через Linkedin, и люди, которые переехали в Канаду. Я их спрашивала: Говорят, что у вас нет безработицы, что нужны европейские специалисты, почему тогда мне люди не отвечают, почему все так тихо, почему я не могу найти хоть какую-то зацепку? Мне отвечают: Приезжай сюда, ты найдешь всё. Я сомневалась, сложно переезжать куда-то без работы. К твоему вопросу о разнице между Европой и Северной Америкой.

Северная Америка строится на references, на soft skills. На тех вещах, которые для меня были даже немыслимы. Чтобы найти работу в Zblin, тебе нужно было быть специалистом, инженером. А в Канаде реальные пункты, чтобы найти работу, - это хорошие коммуникативные способности, ты хороший человек, и у тебя отличное чувство юмора.

Что это за пункты? То есть, чтобы найти работу в Канаде, человек должен быть коммуникабельным, человек должен быть leader, team player. Здесь в первую очередь важно быть хорошим человеком, а хорошим специалистом во вторую.

А: Это, наверное, из-за того, что страна эмигрантская, много людей разных национальностей, и приходится под всех подстраиваться.

К: Очень может быть! Думаю, ты прав. Ведь канадцы известны тем, что они очень вежливые. Когда общаешься с человеком другой культуры, ты не знаешь: правильно ли посмотреть ей/ему в глаза, правильно ли подать сейчас руку. Поэтому лучше оставлять дистанцию между человеком и самим собой и смотреть, что происходит, и лучше сказать Спасибо, До свидания. То есть у канадцев присутствует высокая чувствительность к личному пространству.

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

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

Что касается американского стиля жизни, то он тоже присутствует. По той простой причине, что и Голливуд, и Лос-Анджелес, и Силиконовая долина тоже как бы относительно недалеко, соответственно, сюда начинают стекаться все стартапы. Голливуд в Америке очень дорогой стал для производства, поэтому в Ванкувере очень много фильмов снимается. Если кто-то меня спросит, какое направление преобладает, это киноиндустрия. Также Аmazon огромный офис выстраивает, Windows здесь уже давно. То есть они потихонечку-потихонечку из Силиконовой долины перекочевывают в Ванкувер.

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

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

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

А: А чем отличается жизнь в Центральной Европе от жизни в Канаде? Какие основные отличия ты увидела, что тебя удивило?

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

А: А как ты думаешь, с чем связана такая активность? С движением к успеху, для того чтобы поддерживать себя в рабочем состоянии?

К: Да, я думаю, ни для кого не секрет, что успешный человек это, в первую очередь, здоровый человек. Речь идет о work life balance, и, чтобы жизнь была успешной, нужно быть физически активным человеком. Например, в моей предыдущей компании, EllisDon, людей набирали во время катания на mountain bikes . Молодые люди приезжают туда, начинают разговор о строительстве и в результате оказываются в строительной компании. То есть быть успешным или заинтересованным в спорте очень приветствуется.

А: Поговорили о жизни, вернемся к строительству. Итак, из Европы было тяжело найти работу. Вы переехали. Кто первым нашел работу, ты или муж?

К: Когда мы приехали, то решили, что немножко попутешествуем, осмотримся, может быть, даже уедем из Ванкувера, потому что мы оба здесь не были до того, как переехали. Но мы быстро поняли, что Ванкувер очень дорогой город. И мой муж, как ответственный человек, решил быстро найти работу, потому что не мог смотреть, как быстро утекают деньги с нашего счета, а следующая заплата неизвестно когда. Он работал в очень интересном направлении, которое очень развито в Канаде, но я не слышала о нем ни в России, ни в Германии. Это компании, которые помогают с переездами. Это сильные мужчины, которые пришли, погрузили твои коробки и перевезли тебя на новую квартиру.

А: Moving.

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

А: Это оффлайн конференция, которая раз в месяц проходит?

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

А: И как у тебя получилось найти работу на этой конференции?

К: Я пришла на встречу, где народ просто разговаривал возле бара. Они спросили, что я умею, какой у меня опыт. И вот после этого разговора у бара у меня было три предложения о работе. Час презентации и у тебя есть предложение.

А: Если я правильно понимаю, ты устраиваешься в компанию EllisDon. Это одна из крупнейших и старейших компаний Канады. Тяжело бы перестроиться с немецкого образа работы в проектировании на канадский? И с чего ты начала в проектировании?

К: Меня взяли на проект, который горел. У них не было BIM-координатора, я была первым в Ванкувере BIM-координатором для EllisDon. Это был проект Park Resort & Casino.

В этом проекте не было никаких BIM-requirements, там была очень сложная геометрия и недодизайн. Заказчик пытался сэкономить, это было казино и два отеля c fancy finishing. Это интересные люстры, многослойные потолки.

А: На рынке проектирования идет борьба между двумя, можно сказать, религиозными направлениями: close BIM (продукты Autodesk) и open BIM (Nemetschek, Arhicad и передача данных на основе формата IFC). Ты можешь что-то сказать про Канаду и Германию в этом плане? Был ли у тебя опыт работы с open BIM/close BIM и какие направления выбирают в Северной Америке и в Европе?

К: Я слышала твою дискуссию с молодыми людьми, очень интересно. Я понимаю, почему так происходит. В связи с тем, что Autodesk американская контора, Северная Америка тоже фокусируется на Аutodesk. А open BIM двигается из Европы как раз потому, что они не хотят работать с монополистом. Я выступаю за демократический процесс и свободный рынок. Победить должен тот, кто лучше, а для проектировщиков важно использовать тот софт, который подходит для их задач. Я не фокусируюсь на Revit. Для меня важно, чтобы при работе с одним или другим субподрядчиком, дизайнерские софты выполняли свои задачи. Мы просто найдем возможность для передачи данных.

А: А в Канаде ты в каких программах работала? Это все-таки больше close BIM или передача через IFC?

К: Как я уже сказала, очень многое рассчитано на Autodesk, и мы тоже очень тесно сотрудничаем с Autodesk. Но здесь очень много строительства в металле, в стали. В принципе в Северной Америке много стали, поэтому много Tekla. В принципе, Frank Gehry тоже недалеко, в связи с этим также популярна Catia. И метрическое программирование, и дизайн здесь есть. Сама я в Revit, потому что, что касается моего моделирования это все тоже Quadratisch. Praktisch. Gut и Revitа хватает. Но если какие-то сталелитейные модели, то работаю с ребятами, которые передают IFC.

А: А какие объекты популярны в Канаде? Это частное жилье, загородные дома? Что в основном строят в Канаде?

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

В EllisDon я работала на трех госпиталях. Меня там сделали специалистом по healthcare. И это одна причин, по которой я хотела поменять работу, мне уже как-то стало грустно с госпиталями. К тому же это один клиент, одни и те же задачи на BIM, одни и те же прописанные стандарты, и в какой-то момент становится скучно.

А: Можешь сравнить субъективно уровень специалистов в Канаде и в Европе, можно ли сказать, что где-то уровень более продвинутый?

К: Нет, так сказать нельзя. Нужно понимать, что образование в Германии бесплатное, в Северной Америке же, в Канаде, все образование платное. И для того чтобы получить образование без кредита, тебе нужно откладывать деньги на своего ребенка с момента его рождения.

А: А сколько стоит обучение примерно?

К: Все зависит от того, где ты планируешь получать образование, что это будет: курсы, ВУЗ. В Канаде образование дешевле, чем в Америке, но допустим, в местном университете UBC до 60 тысяч канадских долларов в год. Мой муж тоже получал дополнительное образование в Ванкувере, как повышение квалификации, мы платили 5 тысяч канадских долларов в семестр.

А: Идеальная связка образования: дошкольное и школьное образование получаешь в России, университет можно в Европе закончить бесплатно, и потом уже переезжаешь в Северную Америку.

К: Точно. Артём, ты прописал просто идеальный план обучения детей. Школа в России, вышка в Европе, а потом уже можно и деньги зарабатывать.

А: По всему миру: Гонконг, Северная Америка.

К: Точно.

А: А вот по уровню технологий: может, были какие-то интересные технологии, которые ты видела в Германии, но не видела в Канаде, или наоборот?

К: Да, я хотела бы поделиться своими наблюдениями. В Германии, если мы говорим о made in Germany, в центре внимания стоит качество. Они его добиваются за счет постоянного процесса тестирования и стандартизации процессов. Они ничего не делают на авось, наобум, без теста. Для того чтобы выпустить софт, тот же Nemetschek, на реальный проект, он должен быть сначала протестирован минимум на одном псевдопроекте, потом он будет параллельно идти в реальном проекте, и только третий проект будет реально на Nemetschek рассчитываться.

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

А: Мне кажется, это заметно и по Азии. Там тоже люди сначала выкидывают продукт на рынок, и уже по ходу его корректируют. А европейский подход это сначала AB-тесты, и, когда продукт пройдет всю бюрократию, только тогда он выйдет на рынок. В больших же странах (Россия, Китай) или в эмигрантских (Канада) продукт дорабатывается в процессе, нужен он людям или нет.

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

А: Есть ли в Канаде интересные технологии, которых не было в Европе?

К: Что касается материалов, на самом деле Канада отстает. Они не лидеры, они занимают позицию мы посмотрим, что там происходит, а потом переймём. С одной стороны, они интегрируют все, что интересно, но с другой стороны, если какое-то глобальное изменение, то они ждут. Самую большую разницу я вижу в том, что Канада фокусируется на строительстве из дерева, особенно в passive house, которые являются абсолютно немецкими технологиями (такой mishmash американского и европейского). А так ничего особенного нет, потому что в Канаде работают те же европейцы. Единственное, что стоит отметить, за счет того, что они не фокусируются на правилах, на стандартизации, которая существует в Германии, все можно осуществить очень быстро. Если есть лидеры, заинтересованные люди, которые двигают, то можно добиться стремительного успеха. В Канаде очень быстро можно построить свой бизнес. В Германии, в принципе, тоже, но потом тебя давят налогообложением. У меня есть друзья-инженеры, которые приехали сюда из Германии. Они формируют здесь бизнес, нанимают двух-трёх человек и продают его. Создают второй, третий, вырастают в капитале снова продают.

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

А: Кстати о разнице. В Китае (недавно разговаривали с Еленой) на стройках работают в основном люди из деревень, в России из южных республик, в Штатах, я думаю, люди из Мексики. А в Канаде кто работает, страна же и так эмигрантская? До Мексики далеко, получается, эмигранты сами работают?

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

А: Интересно еще узнать про аутсорсинг в Канаде. В Европе про это ещё мало говорят, потому что это сложный путь. А в Канаде аутсорсинг популярен, занимаются этим фирмы?

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

А: А кто там на Филиппинах?

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

А: Могла бы ты примерно сравнить зарплаты с ценами, например, на съем жилья в Европе и в Канаде. Например, если в Штутгарте съем однокомнатной квартиры стоил 1000 евро, то сколько была зарплата, и как с этим соотношением обстоят дела в Канаде?

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

А: Но Штутгарт, Ванкувер и Питер похожи, это большие центры.

К: Да, большие центры, куда стекаются молодые специалисты, где есть работа. Что касается жилья, Ванкувер дороже Штутгарта, и качество жилья хуже. Мне кажется, что это связано с большим притоком эмигрантов, просто не успевают строить так быстро.

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

А: А начинающий сотрудник, например, проектировщик из Питера, на какую зарплату может примерно рассчитывать в Канаде?

К: Как только у тебя в резюме появляется Revit эксперт, или какой-то BIM-проект (в Америке это чаще называется VDC virtual design and construction), то можно уже торговаться с 70 тысяч канадских долларов (в Ванкувере)

А: Мы не пропагандируем переезды, не хантим никого

К: Я хотела бы, мне нужен дополнительный персонал.

А: Что можно посоветовать людям? На что обращают внимание работодатели европейские и канадские? Что им интересно: социальные контакты, какие-то статьи или просто резюме? Ты говорила, что из Европы даже тебе было тяжело найти работу, несмотря на то, что ты уже профессионал. Как может человек, например, из России найти работу в Канаде, это же нереально, наверное?

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

А: Как витамин В. В Германии связи называют витамин В.

К: Beziehung.

А: Да, как и в России, как и везде. Всё делают связи.

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

А: Ни религию, ни фотографию не нужно указывать?

К: Не просто не нужно нельзя! Это закрытая личная информация.

А: Интересно, ни разу не слышал о таком.

К: Как только они видят твое имя, они выходят на Linkedin, где есть твоя фотография, и проверяют соответствие тому, что написано у тебя в резюме.

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

К: Я вижу две основных проблемы в BIM-проектировании: это проблема отсутствия образования или полного понятия процессов BIM. Это видится как nice to have, но не как интегрированный процесс, а также почему BIM-технологии возникли. Мы говорим о потере информации. Сейчас вижу очень много застройщиков, которые передают уже существующий дизайн кому-то другому для создания дополнительной трехмерной модели, то есть мы делаем двойную работу, что не есть хорошо. Вторая проблема это легализация BIM-проектов. Да, мы говорим о том, что у нас есть дополнительные условия труда и прописываем то, что мы хотим видеть в результате, а печати все-таки ставятся на планах. У нас нет договоренности о том, какие печати мы ставим на моделях. Если мы говорим о строительстве, основанном на трёхмерной модели, люди не понимают, что в принципе модель несет информацию двухмерной графики, что двухмерные планы должны вытекать из трехмерной модели.

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

А: Попробуй охарактеризовать BIM в двух словах. Что для тебя BIM?

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

А: Откуда ты получаешь сама информацию по новым технологиям, где ты обучаешься чему-то новому в BIM? На Youtube, или какими-то платформами пользуешься для обучения? Где ты черпаешь свое вдохновение?

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

А: С какими разработчиками?

К:. Например, местными ребятами - СadMakers Их новый софт называется cmBuilder это новая платформа, которую мы только что приобрели с ETRO Construction. Она рассчитана на людей, которые работают на фазе тендера. В CmBuilder можно загрузить существующую модель или создать свою в LOD100, платформа содержить необходимые для планирования строительства модели как краны, трайлеры, экскаваторы и пр. Очень дешевая платформа в настоящий момент. Эти ребята эксперты в Catia и в Catia offset Frank Gehry. Они стали разрабатывать свой софт самостоятельно, просто видя необходимость внести параметрический дизайн и облегчить жизнь специалистам. Когда я увидела их продукт, который они хотели выпустить на рынок, я не могла сдержать восторга: наконец-то что-то доступное на параметрическое. Они берут inspiration, вдохновение, от Catia и приносят его в открытую онлайн-платформу для людей, которые работают на первых фазах строительства.

А: Ты имеешь в виду платформу для онлайн-проектирования или онлайн-платформу для хранения информации?

К: Онлайн-проектирование.

А: Сейчас на рынке есть онлайн только Fusion, и были разговоры о том, чтобы перевести Revit в онлайн. А этот продукт именно САПР в онлайн?

К: Да. У тебя целые библиотеки библиотека кранов, библиотека заборов, библиотека разных машин. И больная темаСеверной Америки: библиотеки для создания безопасных условий труда , а так же есть крутая возможность координация с градостроительством.

А: А в каком формате эти библиотеки? Это какие-то программы с Revit?

К: Хороший вопрос, я даже не знаю. Они уже просто существуют там, ты их не можешь скачать. Мне нравится лично то, что, когда я создавала те же планы в Revit, на которые у меня уходили недели, мне нужно было объекты вычислять. Что это за тип крана, как я его подниму, насколько далеко он выйдет, где его крюк заканчивается, то есть было очень много мануальной работы. А в cmBuilder ты видишь номера этого крана, как его нужно поднять, как нужно удлинить, и у него есть лимит: если ты не можешь его вытянуть, значит, это не твой тип крана, и он не может поднимать эту массу.

А: А ты даешь им feedback?

К: Да. Этот софт вышел на рынок в сентябре прошлого года. Но поскольку это новый софт, у него могут быть баги, и они есть. Соответственно, им интересно работать с застройщиками и людьми, которые работают непосредственно с новым софтом, они слушают пожелания. Когда компания еще маленькая, когда софт только разрабатывается, очень просто договориться, реакция людей моментальная. В немецкой версии Navisworks Manage есть такой интересный баг: item и element перевели как элемент два раза. Я этот баг в 2007 году отправляла Autodesk несколько раз, он до сих пор там, в 2012 точно. Этот процесс перевода или анализа вот таких багов в монополистических или больших компаниях просто остается где-то в их длинном списке багов, и ничего не происходит.

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

К: Да, лошадь, которая умерла и не хочет скакать, а мы ее понукаем все равно.

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

К: Пока нас хорошо здесь кормят, скажем так, пока ничего не планируем. Но я не исключаю возможности переезда, предполагаю, что это будет более теплая страна или более теплый регион. В Канаде нет более теплых регионов, чем Ванкувер, поэтому вероятен переезд в другую страну. Мне кажется, что переезды соответствуют фазе жизни. Как мы сказали, получить начальное образование в России, высшее в Европе, начать работать в Северной Америке, так же, возможно, будет фаза, когда будет интересно пожить в другом месте.

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

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

А: Может, у тебя лайфхаки есть, какие-то уроки, которые ты вынесла из этой эмиграции?

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

А: Ну ты не пугай наших слушателей. Может, в этом есть все-таки какие-то позитивные вещи?

К: Да, ты ведь становишься другой личностью, которая намного сильнее.

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

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

А: Да. Такова судьба эмигранта.

К: У тебя нет своей identity.

А: На такой позитивной ноте давай закончим. Спасибо тебе большое, Ксения. Было очень интересно узнать про Канаду, про Германию, про твой субъективный опыт. Спасибо тебе большое, что пришла на этот выпуск.

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

А: Да, спасибо. Хотел добавить, что людей много, и они все открыты, эмигранты особенно. Мы всегда готовы к любым разговорам. И этот разговор был особенно интересным. Я оставлю тогда с твоего позволения ссылку на Linkedin.

К: Да, конечно.

А: Спасибо большое, Ксения, за разговор, хорошего дня.

К: Спасибо тебе за приглашение.

Ксения - большой энтузиаст виртуального строительства, которая будет рада ответить на ваши вопросы, обговорить возможности сотрудничества или просто поболтать за чашечкой чего-нибудь о жизни. Добавляйтесь и пишите ей в LinkedIn. Ксения Гордиенко на LinkedIn:

https://www.linkedin.com/in/xeniagordienko/

Аудиовыпуск интервью:

Сравнение технологий в строительстве и 5D проектирование в Азии и Европе: Казахстан, Австрия, Германия, Китай, Украина

Войны лоббистов и развитие BIM.Часть 5: BlackRock хозяин всех технологий. Как корпорации контролируют Open source

MVP (minimum viable product) - это первая версия вашего продукта, с помощью которой вы, как создатель продукта:

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

• собираете обратную связь от ваших будущих пользователей;

• пытаетесь продать (или уже продаёте) ваше решение пользователям.

Пройдёмся по этим пунктам.

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

Однажды люди нащупали гипотезу, которая могла явиться проблемой: что если я оказываюсь в диком лесу, и мне нужно срезать гриб и отметить это, выпив бутылку шампанского? Носить с собой штопор и нож - попросту неудобно (да и кто в здравом уме берёт с собой в лес штопор?). Что, если объединить эти инструменты в одно?

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

Представим, что у них это получилось. Что им делать в таком случае?

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

2. совершенствовать текущее решение, делать его более удобным (работать над UX);

3. собирать обратную связь от пользователей и корректировать продукт.

Но всё получается с первого раза только у создателей швейцарских ножей. В реальной жизни 42% стартапов умирают от отсутствия спроса. Каждый раз фаундеры могут заходить на рынок с новым набором инструментов (пробовать разные гипотезы), либо, если всё идет наперекосяк - менять бизнес модель (сделать Pivot).

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

Как это можно сделать?

1. Производить и пытаться продать совсем маленькие партии;

2. Экономить на качестве (но не так, чтобы получилось совсем плохо).

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

Как отбирать гипотезы и функции

Гипотеза - это предположение о проблеме клиента.

В одной версии продукта стоит тестировать только одну гипотезу за раз. При этом гипотеза должна быть смелая. Хотят ли люди есть грибы? Определенно да! Готовы ли пить шампанское? О да! Но может ли кому-то внезапно понадобится и нож, и штопор одновременно? Это уже гипотеза, которую стоит протестировать!

Теперь перейдём к тому, что можно включить в первую версию продукта. Ответ прост: нужно включать те функции, которые:

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

2) дают наибольшую ценность для пользователя. Да, в швейцарский нож можно напихать ещё и трекер шагов, и bluetooth колонку, но основную ценность в нашем примере имеет нож и штопор.

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

Валидация без продукта

Можно ли подтвердить гипотезу относительно продукта, совсем не создавая никакого решения?

В IT-сфере - можно, если быть чуть хитрее и умнее, чем наши фаундеры из примера.

К примеру, они могли создать лендинг Чудо Швейцарские Ножи, повести на него трафик из социальных сетей, и посмотреть, оформляют ли люди предзаказ на этот товар. Если да - то его можно производить.

Примеров таких предзапусков в истории множество, но вот мой любимый:

Около 2-х лет создатели таск-менеджера Sunsama запустили на главной странице анкету, в которой опрашивали рабочие привычки будущих пользователей (сколько человек в команде, каким таск-менеджером пользуются сейчас, где хранят задачи и т.д.). Когда вышла первая версия продукта, доступ получили только те, кто подошёл в качестве целевой аудитории этого продукта. Таким образом создатели Sunsama убили трёх зайцев одним махом: исследовали аудиторию, получили первых последователей и подогрели интересы прочих, кто доступ не получил.

К слову, я даже пытался подобрать правильные ответы к анкете, чтобы получить доступ. И у меня это получилось! Но то, что оказалось внутри, мне уже было не интересно (не зря же я подбирал ответы).

Продавать или нет?

Автор книги Бизнес с нуля. Метод Lean Startup для быстрого тестирования идей и выбора бизнес-модели Эрик Рис говорит, что MVP с первого дня должен продавать. И я с ним абсолютно согласен.

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

Ошибки при разработке MVP

MVP - это непаханное поле для больших ошибок и слитых бюджетов!

Вот какие ошибки вы можете совершить по ходу пьесы:

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

• Не слушать обратную связь от пользователей. Если вы не проводите тестирования и не слушаете обратную связь от пользователей, то вообще непонятно, зачем вы затеяли MVP. Возможно, вам стоит сразу пилить полноценный продукт и оказаться без миллиона в кармане?

• Слишком стараться. Есть выражение, что если вы показываете первую версию продукта, и вам не стыдно - то вы уже перестарались. Поверьте, у вас будет бесконечно много шансов улучшить ваш продукт, и делать сразу идеально вовсе не обязательно!

• Недостаточно стараться. Можно придумать отличную идею совместить нож со штопором, но если сделать это в стиле и таааак сойдёт!, то вы рискуете, что ваш пользователь окажется без руки, пользуясь вашим чудом техники. Перефразирую: в 21 веке уже недостаточно сделать косое и кривое приложение. Аппетиты и желания клиентов растут, поэтому постарайтесь, чтобы ваша первая версия выглядела хотя бы симпатично.

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

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

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

Характеристики цвета

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

Цветовые системы

Классификация цветовых систем:

1. По свету (RGB). Смесь. Красный, зеленый, синий

2. По краске (CMYK). Вычитание. Голубой, пурпурный, желтый, черный

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

В 1676 Исаак Ньютон провел следующий эксперимент: пропустил луч света через трёхгранную призму и получил цветовой спектр от красного к фиолетовому, кроме пурпурного. После этого спектр был пропущен через собирательную линзу, в результате чего был получен белый цвет.

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

Цвет света

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

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

Иоганн Гёте смешал фиолетовый и красный, таким образом, получив пурпурный цвет и появился новый цветовой круг.

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

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

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

Мишель Шеврёль был первым, кто разработал цветовой атлас. В его основе 6 основных цветов в двенадцати модификациях.

Цвет краски (Субтрактивный цвет или Subtractive color)

Эта система предсказывает спектр мощности света после прохождения света через последовательно поглощающие слои разных сред. Создателем цветового колеса при вычитаемом смешении является Моисей Харрис.

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

Какой формат использует большинство?

Еще со времен CSS 2.1 принято использовать либо HEX, либо RGB-цвета. Недостатками использования такой формы представления цвета являются:

• Система не понятна интуитивно. Мы не разделяем цвет отдельно на красный, зеленый и синий и не приводим цвет в шестнадцатеричную систему счисления, да и не говорим, например, Кремль цвета #ff0000.

• Отсутствует поддержка. Дизайнерам может понадобиться 10 типов одного цвета, а в HEX и RGB нет никакой привязки к оттенкам.

HSL (hue, saturation, lightness)

Цвет в HSL представлении определяется тремя значениями:

• тоном (оттенком, hue);

• значением (светлотой, яркостью, value);

• хромой (цветностью, насыщенностью, chroma, saturation).

Существует трехмерная колометрическая система Манселла. В ней цвет определяется с помощью трех координат.

Если составляющие цвета переименовать, мы получим следующую картину:

Выбор цветовой схемы

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

1. Выбор типа цветовой схемы

Итак, какие же бывают цветовые схемы, согласно теории цвета:

• Монохромные (используется один основной цвет и его оттенки)

https://codepen.io/gevara2015/pen/xxVdooe

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

Всего же существует 5 цветовых схем:

1. Монохроматическая схема (один основной цвет).

2. Добавочная схема (два основных цвета).

3. Триадная схема (три основных цвета).

4. Тетраэдная схема (четыре основных цвета).

5. Примыкающая схема (два или три основных цвета).

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

2. Именование переменных

Большинство именований переменных цвета, которые есть сейчас: accent, base, high, button-contrast-alpha, positive, negative, faint, success, warning... множество их. И почти к каждому обозначению есть вопросы.

1. Возьмём, к примеру, high относительно чего он high, есть ли low, насколько high больше и по какому параметру low?

2. Button-contrast-alpha. Если следовать логике этого именования, должен быть ряд alpha, beta, gamma. Опять же вопрос: чем они будут отличаться и в какой степени? Какой цвет будет иметь средние значения?

3. Низкий уровень абстракции: button, text, link и т. д.

По именованию, мне кажется, нужно придерживаться ряда правил:

• Вместо alpha, beta, gamma использовать strong, base, weak.

• Primary (основной цвет бренда).

Учитывая множество абстракций в именовании (в имени переменной нельзя указывать конкретный параметр элемента разметки или сам элемент), я подумал о том, что было бы неплохо придерживаться именования по слоям (мало кто вспомнит аддон Tilt в Firefox). Чтобы отличить один элемент от другого, достаточно представить, что он находится просто уровнем выше. А чтобы он выделялся, нужно ему задать этот самый цвет подложки, что-то наподобие background и foreground.

И тут я наткнулся на объяснение принципов именования переменных для Material Design.

1. Background (0dp elevation surface overlay)

2. Surface (with 1dp elevation surface overlay)

3. Primary

4. Secondary

5. On Background

6. On Surface

7. On Primary

8. On Secondary

2.1 Разделение именований

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

https://codepen.io/gevara2015/pen/poywzLj

То есть для описания свойств элементов нам будет достаточно следующего набора переменных:

/* elements variables */--global-background: var(--bg);--surface: var(--bg-weak);--on-color: #fff;--on-background: var(--contrast-weak);--on-primary: var(--on-color);--on-secondary: var(--on-color);--on-error: var(--on-color);--on-surface-prime: var(--contrast-weak);--on-surface-second: var(--contrast-strong);--input-background: var(--bg-weak);--input-outline: inset 0 0 0 1px var(--secondary-strong);--component-outline: none;

Также стоит отметить, что для описания границ элемента лучше использовать не border, а box-shadow, так как он является более комплексным (можем применить сразу хоть три значения тени):

--component-outline: 15px 17px 26px -4px rgba(34, 60, 80, 0.6), 15px 17px 19px -11px rgba(20, 117, 191, 0.6), -22px -36px 19px -11px rgba(56, 167, 103, 0.6);

Плюс он не меняет размер всей кнопки или, к примеру, инпутау (если мы берем за исходные данные box-sizing: border-box). Мне кажется, что это является хорошим решением, так как разработчики описывают для каждого компонента набор переменных, а дизайнер в дальнейшем может играться с цветами или цветовыми схемами, с дизайнерскими подходами (skeuomorphism, neumorphism) или даже использовать LCH цвета, все на усмотрение дизайнера.

Lea Verou в своей статье указывает на вариант конвертации цветовой схемы для темной темы с помощью L (светлота) параметра в HSL формате. В итоге для светлой темы получается лесенка:

 --l-0: 0%;--l-30: 30%;--l-40: 40%;--l-50: 50%;--l-90: 90%;--l-100: 100%;

а для тёмной обратная лесенка переменных:

@media (prefers-color-scheme: dark) {:root {--l-0: 100%;--l-30: 70%;--l-40: 60%;--l-90: 10%;--l-100: 0%;}}

И казалось бы, все логично, можно просто определить текущий параметр светимости как формула 100% - lightness, и он будет средним как для темной, так и для светлой темы. Однако у hsl есть недостаток. В светлой теме будет недостаточно контраста для ряда элементов. Решение, предложенное Lea Verou c использованием LCH цветов, как мне кажется, еще слишком сырое, это все еще драфт в спецификациях w3c.

Выводы

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

2. Настройка цветовой схемы лежит полностью на дизайнере, и он отдает всего лишь итоговый файл конфиг.

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

Автор: Александр Танцюра, Frontend Developer в Space307.