Как я пытался настроить стили в Figma и не потерял веру в человечество 😅

Как я пытался настроить стили в Figma и не потерял веру в человечество 😅

Привет всем! Сегодня делюсь историей о том, как я мучился с цветами и текстовыми стилями в Figma, но всё-таки справился. Если ты, как и я, считаешь, что градиенты — это тёмное искусство, то эта статья для тебя. Погнали!

Как выбрать цвета, чтобы не ослепнуть?

Ну, во-первых, цвета — это мощь. Но они могут и подвести. Я долго вертел палитры, пока не пришёл к этим хайповым оттенкам:
- Viva Magenta — этот цвет прям кричит: «Смотри на меня!» Отлично подходит для акцентов, которые не дают пройти мимо.
- Neon Mint — это когда хочешь добавить яркости, но не переусердствовать.
- Soft Lavender — мягкий, приятный фиолетовый. Когда тебе надо немного расслабона в дизайне.
Но это не всё! В прошлом году все тащились от тёмных и серьёзных оттенков типа Midnight Blue. А сейчас цвета стали ярче и позитивнее, как будто все решили, что пора добавить жизни.
Если ты, как и я, в поиске крутых цветовых решений, рекомендую заглянуть на Color Hunt — здесь можно быстро подобрать стильную палитру под настроение и проект. А для любителей плоских цветов и минималистичных интерфейсов — Flat UI Colors просто мастхэв. Оба сайта выручают, когда нужна свежая палитра за пару минут.

Градиенты — от простого к сложному

Окей, с градиентами я долго мучался. Казалось, что одно неверное движение — и всё выглядит как дешёвый постер для распродажи. В итоге, я начал с монохромных градиентов — это всегда беспроигрышный вариант. Переходы между разными оттенками одного цвета работают, даже когда уже нет сил думать.
Но потом мне захотелось усложнить задачу. Тут и началось! Сложные градиенты — это когда ты комбинируешь сразу несколько оттенков. Вот что помогло:
- Контрастные цвета — комбинируй контрастные, но дополняющие друг друга цвета. Например, Neon Mint и Viva Magenta создают яркий и интересный эффект. Важно не переборщить, чтобы не перегрузить визуал.
- Тёплые и холодные оттенки — миксовать холодные и тёплые оттенки — это тоже классный ход. Только не забудь следить, чтобы цвета не начали "спорить" между собой.
- Сложные градиенты в минимализме — если уж используешь сложные переходы, старайся, чтобы они не перекрывали остальные элементы. Пусть градиент будет акцентом, а не фоном.

Как совмещать цвета и не сойти с ума

Когда у тебя есть три (или больше) цвета, и нужно сделать так, чтобы они не выглядели как радуга после шторма, главное — соблюдать баланс. Вот несколько советов:
- Главный цвет — выбери один цвет в качестве основного. Он будет определять общий тон дизайна. Остальные пусть поддерживают и дополняют.
- Акцентные цвета — если хочешь добавить яркости, используй акцентные цвета. Например, добавь Viva Magenta в кнопки или элементы навигации, чтобы привлечь внимание.
- Нейтральные оттенки — не забывай про нейтральные цвета, они могут связать всё воедино. Если всё слишком ярко, белый или серый помогут сбалансировать палитру.

Тексты: как сделать их читабельными, но не скучными?

Шрифты — это тоже отдельная боль. Но вот что помогло мне не сломаться:- Sans-serif шрифты — я выбрал Inter. Звучит скучно? Возможно. Но это классика. Читабельный, стильный, не отвлекает от сути.- Иерархия — как и в жизни, в тексте всё должно быть на своём месте: заголовок, подзаголовок, текст. Если всё сделано правильно, то даже читать приятно.

Эффекты: где грань между стильным и «я перестарался»?

Теперь про эффекты. Тут главное не уйти в дебри:
- Мягкие тени — аккуратненькие, как будто элемент просто немного приподняли над фоном. Не давим на драму.
- Прозрачность — это магия, когда нужно создать ощущение "стеклянных" элементов. Они добавляют свежести интерфейсу, и всё выглядит супер модно.
Какие цвета и эффекты ты бы добавил? Пиши в комментариях, а я пока пойду делать ещё парочку дизайнерских экспериментов

44
6 комментариев

Явно не хватает картинок с примерами.

Потому искусство и темное.
Отсутствие илллюстраций в статье про градиенты == отсутствие самой статьи. :)

1

Спасибо, учту в следующий раз

1