Часто, при поиске вдохновения для создания дашборда на Dribble, я сталкиваюсь с прекрасными работами, в которых постоянно есть один изъян — график.

Создаем красивый график дашборда за 1 минуту - 1
Выглядит неплохо, но график явно не вписывается.

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

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

Создаем красивый график дашборда за 1 минуту - 2
Одна из моих работ, в которой я использовал данный метод.

Создайте линию и продублируйте ее

Для начала создайте линию и продублируйте ее 10 раз. Сделайте расстояние между линиями в 41 пиксель (для этого примера). Для этого можно использовать Craft by InVision LABS.

Продублируйте группу линий

Далее, создайте группу линий и продублируйте ее. Задайте центр копируемой группы первой группой и измените прозрачность группы до 35%. Аккуратнее с позиционированием потому, что все должно быть идеальным.

Добавьте точки графика

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

Исходный файл

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