Дизайн-система Macrolook — палитра, логотип и кнопки

Палитра

фон
полиграфии
и интерфейсов

#1D1D1D

элементы
и текст

#FFFFFF

акцент
и выделение

#E57431

второстепенный
голубой

#7CD8E5

второстепенный
зелёный

#ACE272

Типографика

Заголовки, используем редко

Hibana Submedium

Лицензионные Условия
SIL Open Font License 1.1
Свободно для личного
и коммерческого использования.

Основной шрифт для всего

Montserrat

Лицензионные условия
Open Font License
Свободно для личного
и коммерческого использования.

Логотип

Это не просто иллюстрация волокон
радужки глаза, в лого отражена идея

Оранжевый - цвет меланина
Голубой - радужка без меланина
Зелёный - их смешение
Белый - смешение всех трёхКак RGB

Обычное
начертание

Цветной
веер

Белый
+ цвета

macrolook

Чаще всего используем белую версию.

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

Этот вариант начертания логотипа с названием - каноничный.

Соотношение размера надписи к лого строго как на примере. Шрифт Montserrat, надпись полностью маленькими буквами.

Фоновый паттерн

Фон #1d1d1d + паттерн из логотипа. Это один из основных и самых узнаваемых элементов дизайна macrolook.

Используется в полиграфии
и веб интерфейсах.

В веб интерфейсах обязателен
параметр fixed.

Кот по имени глазочек

Маскот и лицо macrolook - белый кот по имени “Глазочек”. Один из самых узнаваемых и важных элементов нашего бренда.

Один его глаз - карий, второй - голубой.

Набор имоджи с глазочком выглядит минималистично и легко вписывается в любой макет.

При этом он отлично разбавляет строгость дизайна, и наполняет его душой и жизнью.

Все эмоджи macrolook

Нажмите на эмоджи, чтобы скачать в SVG, PNG или JPG.

Контейнеры

При необходимости - допускается использование контейнеров.

Они необходимы для чёткого разделения сложных групп элементов, где простые отступы уже не помогают.

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

Фон - rgba(128, 128, 128, 0.1)

Переменная: --glass_background

Эффект фона - blur(8px)

Переменная: --blur_background

У вписанных контейнеров
те же параметры

Скругления и отступы

Круг - форма глаза и радужки человека. Скругления и фигуры без углов - ещё один принцип дизайна macrolook

Радиус скругления должен быть равен отступам от контента.

Радиус скругления равен отступам от контента

Радиус скругления вписанного контейнера считаем по формуле:

Outer = Inner + Gap

Где

Inner: внутреннее скругление

Outer: внешнее скругление

Gap: отступ между границами внешнего и внутреннего контейнера

Формула скругления вписанного контейнера

Отступы между элементами и контейнерами в одном пространстве не должны отличаться

главная цены

В дизайне macrolook допускается использование полноширинных картинок и блоков. Но они также должны быть скруглены с углов, которые “оборваны” сверху и снизу

Пример выше - хедер сайта. Он как бы “прилип” к верхней границе экрана (в данном случае к фото). Поэтому у него нет скруглений на верхней границе.

А пример справа - сторис в инстаграм, разделённые линией разрыва на два слайда, занимающих весь экран телефона.

И снова - часть фото, которая соприкасается с границей экрана - не скруглена. Это создаёт ощущение единого потока контента. Там, где контент резко заканчивается без скругления - он лишь продолжается “за пределами экрана”

Нужно лишь листнуть ещё.
Немного вниз, или вправо.

Пользователь считывает этот визуальный язык очень быстро.

Градиенты и свечение

Пока вы были заняты изучением брендбука - вы не заметили ещё одну важную составляющую нашего стиля - фоновые градиенты и свечение.

Они также состоят из наших основных цветов, дополняя макет тёплым контрастным свечением.

Градиенты не повторяют код брендовых цветов, они намеренно сделаны насыщеннее и выразительнее, чтобы быть заметнее при малой прозрачности.

Nakit sa vašim okom

Da, fotografiju svog irisa možete nositi kao nakit! Izrađujemo narukvice, privezke, prsten ili privezak za ključeve sa vašom fotografijom.

Ovakav nakit biće potpuno jedinstven na svetu, jer ne postoje dva ista irisa!

Slike za enterijer
na čvrstoj plastici

Ako želite nešto više od snimka na foto-papiru – radimo štampu na čvrstoj plastici UV bojama.

Ovakva štampa nikada neće izbledeti niti se oštetiti od vode, a dimenzije će omogućiti da se slika istakne u svakom enterijeru!

Оранжевый - солнечный свет, лучи, и тепло

Зелёный -
для плавного перехода

Голубой - для усиления контраста оранжевого

Ещё один вид свечения - вокруг радужки глаза.

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

Кольца с текстом

Ещё один отличительный приём дизайна macrolook, который мы используем редко, но в нужные моменты.

Тем не менее - это первое, что видит посетитель нашего сайта.

qr-код

У macrolook есть свой стандартный дизайн для qr-кодов.

Он наследует идею скруглений и гладкости. Также, после экспериментов - мы остановились на варианте чёрного кода на белом фоне.

Просто потому, что так его легко считывают все устройства.

Кнопки

ссылка очевидная ссылка

Тогл - выключенный и активный

Первая кнопка - акцентная. Это дейтсвие, которое мы прежде всего хотим от пользователя в интерфейсе.

Далее кнопка с обводкой без заливки - второстепенная по весу кнопка.

Третья - уже вообще не привлекает особого внимания, она нейтральна.

Все белые кликабельные элементы при наведении становятся оранжевыми. А все оранжевые белыми.

Кликабельные надписи делятся на очевидные и неочевидные ссылки.

Очевидные ссылки - там, где ты ожидаешь их увидеть. Например - пункты в хедере сайта. Очевидно, что надпись “Цены” в шапке сайта - кликабельна. Её не нужно дополнительно красить оранжевым, чтобы это подсказать.

А вот такие ссылки нужно выделять цветом. Здесь без выделения цветом просто невозможно догадаться о клиабельности.