Мы живем в эпоху ренессанса инструментов дизайна. За 8 лет, прошедших с момента выхода Sketch 1.0, среди традиционных инструментов дизайна прокатилась волна конкуренции. И по мере того, как количество инструментов, доступных дизайнерам, экспоненциально растет, идеи, которые когда-то считались выходящими за рамки, находят все более широкую аудиторию.
Одна из таких идей значительно изменит способ разработки цифровых продуктов: интеграция дизайна и кода на глубоком уровне. Figma может обновить базу кода React в режиме реального времени; InVision, Abstract и Zeplin покончили с документами эстафетной передачи проекта разработчику; новый Framer X может отображать интерактивные компоненты React непосредственно в рабочем пространстве. Эти примеры — всего лишь намек на то, что должно произойти.
Для таких дизайнеров, как я, которым нравится кодить, эта революция была неизбежной. Моя работа определяется моими знаниями CSS, HTML и Javascript. Но для меня и многих других дизайнеров — обычно дизайн предшествует коду. Редко (если вообще такое бывает) это происходит наоборот.
Недавно мне выпало несколько возможностей использовать код для создания дизайна. В двух моих крупнейших проектах в The Wall Street Journal написание кода привело к появлению новых идей. Типичные проблемы ранних дизайнов — например, «как это будет смотреться с реальным контентом?» — теперь легко решить. Изучая визуальные идеи непосредственно в коде, я начал понимать удивительный потенциал кода в качестве инструмента дизайна.
Случай 1: Журнал WSJ
Я начал работать в The Wall Street Journal в августе 2017 года. Одним из первых моих проектов стал редизайн домашней страницы их сайта.
WSJ представляет собой премиальный журнал о моде, искусстве и образе жизни. Первоклассный контент: регулярные материалы о кино и теле знаменитостях, о самых больших именах в мире моды и искусства, а также о питании и культуре, ориентированной на тренды. До этого редизайна в журнале не было собственного онлайн-контента.
Старый способ проектирования
Когда мои первоначальные идеи обрели форму в Sketch, я использовал курсор мыши для рисования прямоугольников с текстом и изображениями. Пиксельное совершенство было легким и результативным, и у меня была роскошь делать миллионы крошечных корректировок. Я придавал много значения тому, что 10 пикселей — это слишком много места для промежутка между колонками, или, что шрифт 14-pt слишком мал для строки. Словом, я делал дизайнерские штучки.
Я заполнил всю страницу этими маленькими прямоугольными кусочками. Все было привязано к сетке. Я подсознательно выбирал фотографии и заголовки, которые соответствовали моему восприятию пространства и игнорировал контент, который нарушал баланс.
Этот способ проектирования должен быть знаком всем, кто использовал Sketch, Adobe Illustrator, Photoshop или даже более новые продукты, такие как Inivision Studio или Framer. Это статус-кво продуктового дизайна.
Разрушение сетки
В один уик-энд я решил, что было бы интересно прототипировать свои дизайнерские идеи в код (и это было интересно!). Система символов, которую я сформировал в Sketch, начинала замедляться под тяжестью содержимого, и я полагал, что браузер может работать лучше. Кроме того, я хотел попробовать новые спецификации css-сетки и довести до совершенства опыт работы с flexbox.
Через несколько часов все было почти идеально. Я отложил свой лэптоп, намереваясь позже внести в прототип последние штрихи.
В следующий раз, когда я открыл проект, меня поразило, насколько лучше страница выглядела в незавершенном состоянии. Я видел это через традиционный дизайн-объектив: он был неполным, потому что не соответствовал файлу Sketch.
Некоторые области не придерживались строгой сетки. Вокруг элементов было асимметричное и необычное пространство, и неровный край привлек мое внимание. Но чем больше времени я провел с кодом, тем больше возможностей для эксперимента я нашел. В конце концов, вместо того, чтобы возиться с подгонкой пикселей, я делал скриншоты из своего браузера и вставлял их обратно в Sketch.
Счастливая случайность
По своей неопытности я забывал писать медиа-запросы, чтобы указать, как страница должна адаптироваться к маленьким экранам. В результате истории вышли за края браузера, требуя от пользователя прокрутки страницы, чтобы увидеть больше контента.
Боб Росс был прав: «Мы не ошибаемся, это счастливые случайности».
Эта «случайность» стала захватывающей и новой. В Sketch я работаю со статическими экранами, заполненными бесконечным пространством, поэтому переполнения просто не происходит — все всегда находится на виртуальном рабочем столе. Тем не менее, скролл влево и вправо — удобный паттерн навигации на небольших сенсорных устройствах (спасибо Tinder), особенно если контент, очевидно, выходит за пределы фрейма. Не увидев это в браузере на моем телефоне, я бы никогда не подумал это попробовать.
Случай 2: Новая домашняя страница для WSJ.com
Домашняя страница сайта WSJ.com — это одна из важнейших частей веб продукта издания. Ее трудно переоценить: в среднем за месяц миллионы людей смотрят главную страницу сайта десятки миллионов раз. Летом 2018 года я начал полностью перестраивать язык дизайна домашней страницы WSJ.com. Естественно, я был в замешательстве. С чего начать?
При анализе предстоящей работы я понял, что на один компонент — карточку истории, которая ссылается на статью — приходится 80% страницы. Имея это в виду, я решил создать простую, гибкую систему, которая могла бы объединить более 100 историй на главной странице.
Предыстория: Карточки историй
Текущая домашняя страница WSJ.com была создана в 2014 году. Работая над проектом, разработчики решили рискнуть и попробовать новую технологию от Facebook под названием React. Создавать сайт с React означает наличие детально настраиваемых компонентов; истории могут отображаться самыми разными способами, в зависимости от множества переменных.
Когда новые конфигурации карточек были спроектированы и разработаны, они были названы и категорированы; «LS-LEAD» сопровождался «LS-LEAD-NO-IMAGE» и «LS-LEAD-ALT», и с этими компонентами были построены макеты типа «SPOTLIGHT-SEVEN».
По мере того, как вверху карточек было создано больше слоев, концепции нижнего уровня — размер заголовка, медиа позиция, временные метки и связанные с ними истории — абстрагировались в сторону более грубых изменений с большими картинками. Редакторы могут внести существенные изменения в макет страницы, обновив одно значение вместо 100.
Новая система
Я снова нашел, чего не хватает Sketch. При подготовке к пользовательскому тестированию я потратил больше времени на копирование и вставку контента, чем на фактическое проектирование. В идеале я хотел представить список историй для своих проектов, и чтобы на странице отображалось содержание этих историй с минимальной настройкой.
И снова, в уик-энд, я закатал рукава и создал (с нуля!) ужасно неэффективное приложение, которое отображало версию домашней страницы сайта в HTML и CSS.
В этом процессе я раскрыл низкоуровневые конфигурации отдельных карточек историй. Их настройка была забавной. Она была непредсказуемой. Этого не хватало в Sketch.
Я мог бы отправить историю в компонент с такими параметрами, как:
{
"headline": {
"size": "l"
},
"byline": false,
"media": false,
"bullets": false
}И получить карточку, которая выглядит так:
Но если бы я немного изменил эти параметры, я бы получил совершенно другой вариант менее чем за 60 секунд:
Дизайн путем умножения
В моем простейшем прототипе для каждой карточки статьи есть 26 настраиваемых функций. Это означает, что для одной истории есть более 1 000 000 возможных карточек (на самом деле, ближе к 60 миллионам)! Управление этой системой в Sketch было бы кошмаром.
Но в коде этот компонент составляет примерно 300 строк между CSS и HTML. Крошечный кусочек NodeJS заполняет карточки живыми данными с домашней страницы WSJ.com. Я могу внести небольшие изменения в части компонента и в считанные секунды посмотреть, как реагирует система. Этот мультипликативный процесс означает, что небольшие изменения имеют огромное влияние, что делает мои проекты более системными в процессе.
Примечание:
Я хочу углубиться в этот процесс в будущем эссе, но на данный момент я бы предложил прочитать превосходную статью Джона Голда Declarative Design Tools
Вывод
По мере того, как начинает появляться новое программное обеспечение для проектирования, код будет центральной частью инструментов, доступных дизайнерам. Но не ждите бета-версии Framer X или любой другой новой программы. Теперь вы можете начать использовать код в качестве инструмента дизайна. Вот несколько ресурсов для начала:
- У Уэса Боса фантастические курсы по CSS и Javascript, включая введение в React и Node. Его занятия вращаются вокруг забавных проектов, и его стиль обучения очень интересен.
- У Даниэля Шиффмана есть куча замечательных видео по креативному кодингу. То, как он демонстрирует свой рабочий процесс — размышляя о проблемах и вырабатывая решения — и упивается тем, что он делает, восхитительно.
- У Codecademy есть качественные курсы и интерактивные уроки. Я время от времени возвращался и делал серию уроков по Javascript только для того, чтобы освежить свои знания.
В Twitter есть замечательное сообщество инженеров и дизайнеров, которые вдохновили меня использовать код в качестве инструмента дизайна. Если вы обнаружите, что эта тема вам интересна, не стесняйтесь писать @ilikescience.
Нет комментариев