Студия дизайна «Разумный подход» Владимира Соловьёва, podhod.ru

Путь создания пиктограммы

Владимир Соловьёв, 5 февраля

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

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

Интерфейс Fontlab 6 для variable fonts

Владимир Соловьёв, 18 декабря, 2017

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

Библиотека Anime.js

Владимир Соловьёв, 23 мая, 2017

Библиотека Anime.js для анимации объектов в HTML и в SVG с красивой документацией. Поддерживаются простые движения, параметрические, различные циклы и привязка к таймлайну.

Пример результата в gif-анимации.

Живой код этого примера.

Внутренний интерфейс «Медузы»

Владимир Соловьёв, 8 февраля, 2017

Новостной сайт «Медуза» рассказала в своём блоге какой стала система управления редакции к 2017 году. Иными словами, как выглядит CMS у интернет-СМИ.

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

Подобный рассказ о первой версии системы был опубликован в 2015 году.

Всплывающие блоки

Владимир Соловьёв, 2 марта, 2016

Комбинация кода для всплывающих блоков при прокрутке. Блоки, попавшие в видимость при загрузке, видны сразу, без анимации. Но можно специально попросить их появиться классом .slide-up-start.


Для наглядности, горизонтальные блоки повёрнуты контейнером и обратно повёрнуты содержимым. Ещё тут интересное использование :nth-of-type, чтобы в несколько строк разнообразить задержку в анимации и раскраску контейнеров.