1 2 - Опыт создания паттернов в Figma и развитие креативности

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

Ищите ежедневное вдохновение

Я люблю делать паттерны. Настолько, что недавно бросила себе вызов – каждый день создавать новый паттерн. Хотя по определению паттерн – это «повторяющийся декоративный дизайн», мои дизайны не выглядят одинаково. Поэтому люди часто спрашивают меня, как я нахожу вдохновение, особенно когда каждый день создаю что-то новое. На самом деле это не так сложно. Я говорю им, осмотритесь вокруг. В каждом уголке жизни есть вдохновение. Если вы будете внимательны, вы скоро заметите уникальные детали в еде, архитектуремебелиприроде, по дороге на работу – вдохновение повсюду. Когда вы начинаете замечать эти мелкие детали, их легко перевести в то, над чем вы работаете, для меня это паттерны.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Опыт создания паттернов в Figma и развитие креативности

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

Создайте свою цветовую палитру

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Опыт создания паттернов в Figma и развитие креативности

Создайте сетку

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Опыт создания паттернов в Figma и развитие креативности

Поиграйтесь с фигурами

Теперь пришло время повеселиться! Когда я начинала ежедневные челленджи с паттернами, я рисовала их вручную. Я переключилась на цифровые рисунки, когда начала создавать паттерны из простых геометрических фигур. Некоторые паттерны выглядят довольно сложными, но в основе их лежат простые фигуры: круги, прямоугольники и треугольники, которые я стратегически разместила на сетке. Хотя я начинаю с основ, я экспериментирую с фигурами. Это позволяет мне увидеть, как разные подходы дают разные визуальные результаты.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Опыт создания паттернов в Figma и развитие креативности

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

Вот еще один эксперимент, я смещаю круг, чтобы посмотреть, что получится.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Опыт создания паттернов в Figma и развитие креативности

Я также пробую редактировать цветовые комбинации паттерна, чтобы найти новые и интересные варианты.

Сделайте паттерны бесшовными

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Опыт создания паттернов в Figma и развитие креативности

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

Свежие вакансии
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
Все вакансии

Оригинал: Namika Hamasaki

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Все, что вам нужно знать о сетках в Figma

Когда я был начинающим дизайнером, одной из первых книг, которую я приобрел,…

Figma Tips & Tricks – сверхмощный рабочий процесс

В статье собран список самых последних и самых удобных комбинаций клавиш и техник Figma