Как добавить капельку хаоса в идеальные интерфейсы с Rough.js

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

Недавно я наткнулся на Rough.js. Это крошечная библиотека (меньше 9 КБ), которая делает одну простую, но чертовски эффектную вещь: она рисует графику так, будто её набросали от руки на салфетке.

Зачем имитировать небрежность

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

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

Как это работает на практике

Начать работу проще простого. Устанавливаем через npm:

npm install --save roughjs

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

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); 

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

Управление «шероховатостью»

В библиотеке есть два параметра, которые определяют характер рисунка: roughness и bowing.

1. Roughness отвечает за то, насколько сильно дрожит рука «художника». При значении 0 линии будут прямыми, а при 2.8 — как будто вы рисуете в едущем по гравию автобусе.
2. Bowing имитирует изгиб линий. Знаете, как бывает, когда проводишь длинную черту и она слегка уходит в дугу? Вот это оно.

Стили заполнения

Заливка в Rough.js — это отдельный вид искусства. Вместо скучного сплошного цвета здесь используются штриховки. Есть классическая «зебра» (hachure), зигзаги, точки и перекрестная штриховка.

rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3, // делаем линии штриховки жирнее
  hachureAngle: 60, // меняем угол наклона
  hachureGap: 8 // расстояние между линиями
});

Работа со сложными формами

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

Библиотека сама парсит путь и перерисовывает каждый сегмент в своем фирменном стиле. Кстати, именно Rough.js лежит в основе популярного инструмента для диаграмм Excalidraw. Если вы им пользовались, то уже знаете, насколько приятной может быть такая графика.

Где это применить

Я вижу несколько сценариев, где Rough.js реально выигрывает у стандартных решений:

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

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

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