Как создать оформление для программы

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

• 1 Начните с конструктора тем

• 1.1 Понимание двух тем
• 1.2 Настройка

• 2.1 Переменные

Начните с конструктора тем [ ]

Для создания дизайна вики не нужно сразу открывать CSS. Инструментов конструктора тем вполне достаточно, чтобы создать хорошее оформление для вики. Кроме того, настройки конструктора также влияют на обсуждения, чего невозможно добиться с помощью CSS. Конструктор теи находится на служебной странице Служебная:ThemeDesigner, на которую можно попасть из выпадающего списка пунктов в правой верхней панели инструментов. Конструктор доступен только администраторам вики.

Начните с атрибутов сообщества — фавикона, логотипа и баннера. Если у вас игровая вики, всё это можно взять из официальной атрибутики игры, например в Steam или на официальном сайте. Немного отредактировав, можно подогнать картинку под вики, например добавив подпись «энциклопедия» к логотипу игры.

КАК сделать ДИЗАЙН КАРТОЧКИ товара для Wildberries. Урок в Фотошоп

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

Понимание двух тем [ ]

С 2021 года появилась возможность создавать две темы для вики — светлую и тёмную. Многие не понимают, насколько важно создать правильно настроенные темы.

Светлая тема должна быть достаточно яркой и в идеале представлять собой светлый фон статьи с тёмным текстом. Акцентные цвета и цвета ссылок также должны быть достаточно яркими. Светлая тема предназначена для просмотра во время того как в глаза или экран бьёт солнечный свет. В таком случае тёмную тему просто не разобрать, но яркие цвета светлой темы позволяют продолжить чтение.

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

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

Настройка [ ]

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

ОФОРМЛЕНИЕ ДЛЯ ГРУППЫ ВКОНТАКТЕ В ФОТОШОПЕ ЗА 10 МИНУТ / КАК СДЕЛАТЬ ОФОРМЛЕНИЕ ГРУППЫ ВК?

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

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

Это поможет создать красивый фон даже при наличии скудных ресурсов. При желании можно слегка поправить его с помощью CSS.

Темы и CSS [ ]

Далее можно переходить к использованию CSS. И тут встаёт вопрос — как настроить элемент под обе темы? Для этого в теге находится класс theme-fandomdesktop-light|dark соответственно. Чтобы применить правило только к нужной вам теме, добавьте его в начало набора селекторов:

.theme-fandomdesktop-light p color: black; /*чёрный цвет текста в светлой теме*/ > .theme-fandomdesktop-dark p color: white; /*белый цвет текста в тёмной теме*/ >

Переменные [ ]

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

p color: var(—theme-page-text-color); >

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

Шаблоны [ ]

Лично в моём опыте создании вики между настройкой тем и написанием статей лежит создание шаблонов и их дизайна. Намного приятнее писать готовые статьи с конечным дизайном и сразу видеть всю полноту картины. Поэтому можно заняться дизайном инфобоксов и необходимых шаблонов. Я буду описывать свои привычные методы работы на игровых вики. Для вики других порталов отличие будет лишь в отсутствии готовых вариантов оформления.

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

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

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

Показать стили

.portable-infobox border: 5px solid #0000; border-image-source: url(‘https://static.wikia.nocookie.net/inscryption/images/a/a3/Инфобокс_рамка.png/revision/latest?cb=20220205192204path-prefix=ru’); border-image-slice: 6; border-image-repeat: round; position: relative; background-color: #ffe3bb; background-image: url(https://cdn.discordapp.com/attachments/647158963804307458/1008378554184122480/card_terrain_emptghjky_1.png); background-size: 330px; background-position: center; background-blend-mode: multiply; > #content .portable-infobox .pi-title background: none; font-family: ‘HEAVYWEIGHT’, serif; font-size: 30px; line-height: 28px; font-weight: 500; > #content .portable-infobox .pi-header background-color: #0000; font-family: ‘HEAVYWEIGHT’, serif; font-size: 20px; line-height: 18px; font-weight: 100; background-image: url(‘https://static.wikia.nocookie.net/inscryption/images/6/69/Инфобокс_заголовок.png/revision/latest?cb=20220205192236path-prefix=ru’); background-size:900px; background-repeat: no-repeat; background-position: center; > .portable-infobox:after content: url(‘https://static.wikia.nocookie.net/inscryption/images/3/3f/Инфобокс_лапа.png/revision/latest?cb=20220205192119path-prefix=ru’); position: absolute; bottom: -12px; left: 20px; > .portable-infobox section.pi-item:last-child .pi-item.pi-data:last-child padding-bottom: 30px; > .portable-infobox .pi-item.pi-data border-top: 10px solid #0000; border-image-source: url(‘https://static.wikia.nocookie.net/inscryption/images/3/38/Инфобокс_рамка_низ.png/revision/latest?cb=20220205192311path-prefix=ru’); border-image-slice: 20; > .pi-image margin-top: 10px; > .portable-infobox .wds-tabs__tab-label text-transform: uppercase; > .theme-fandomdesktop-dark .portable-infobox background-color: #8b6e9c; > .type-card .pi-image img width: 90%; height: auto; > /*Привет. Я съел булочку.*/

Другие шаблоны оформляются ситуативно. Могу рассказать лишь об одной хитрости — использовании таблиц. Кастомная таблица без каких-либо классов сайта (wikitable/article-table) может быть переоформлена почти во что угодно. При этом в мобильном скине она будет отображаться строго как таблица, что позволит адаптировать вики к мобильному скину.

Заглавная [ ]

К оформлению заглавной стоит подходить очень ответственно. Лучше делать это, когда на вики появятся все основные статьи, на которые вы хотели бы дать ссылки с главной страницы вики.

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

Самой распространённой ошибкой является вёрстка заглавной на таблицах. Хоть это никак не влияет на внешний вид и не доказано пагубное влияние на производительность, это является плохой практикой. Таблицы необходимо использовать для записи данных, а не для создания дизайна. В оформлении лучше использовать такие теги HTML как и . Кроме этикета, они более гибкие чем таблицы, что расширяет потенциал заглавной.

Добавьте отступы и фон общего блока, в котором будут находиться все остальные блоки. Рекомендую использовать переменную —theme-page-background-color—secondary для фона. При желании можно задать блоку рамку. Далее необходимо продумать дизайн заголовков. Можно взять красивый шрифт и увеличить его размер, чтобы заголовки выделялись на общем фоне.

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

JS [ ]

Помочь с оформлением вики также могут скрипты JS. Вот краткий список полезных скриптов:

• DiscordChat — добавляет аккуратный виджет Discord в правую колонку.
• Tooltips — позволяет создавать гибкие подсказки по наведению на элемент.
• DiscussionsRailModule — выности в правую колонку активные темы из обсуждений.
• Selector — создаёт кнопки-переключатели.

Заключение [ ]

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

1. Не перебарщивайте с дизайном. Пользователям важно оформление, но производительность сайта должна быть на первом месте. Каждая строка кода увеличивает время загрузки страницы, из-за чего пользователю причиняются неудобства.
2. Не забывайте о двух темах. Кроме настроек конструктора, необходимо адаптировать под две темы почти все элементы, включая шаблоны и блоки заглавной.
3. Слушайте сообщество. Каким бы вы не были крутым дизайнером, вы делаете работу для людей, поэтому стоит прислушиваться к их мнению, советам и просьбам.
4. Не копируйте вслепую. Многие начинающие администраторы копируют стили других проектов. В этом нет ничего зазорного, однако, это приводит к тому, что при поломках администратор сам не понимает, где что находится и как это чинить. Лучше приземлённый дизайн, в котором вы разбираетесь сами, чем красота, в которой позже вы сломите ногу.
5. Изучайте новое. Веб дизайн не стоит на месте, и рано или поздно ваше оформление устареет. Интересуйтесь новостями, отзывами пользователей и обучайтесь новому.

См. также [ ]

• Справка:Конструктор тем
• Справка:CSS
• Справка:Инфобоксы/CSS
• Справка:Заглавная страница

Источник: community.fandom.com

Рисуем дизайн первой страницы приложения в Figma

Хотите создавать красивый дизайн в Figma? Тогда вы по адресу! Уже в этом посте мы вместе начнем рисовать реальное приложение! Я буду описывать каждый свой шаг очень подробно и информативно. Вы даже не заметите, как за несколько простых уроков, познакомитесь с основными инструментами и возможностями Figma.

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

Что ждет в статье

Сегодня мы выясним:

• Как загрузить изображение во фрейм (п. 2)
• Как нарисовать фигуру (shape) в Figma (п. 3)
• Что такое булевы операции и как с ними работать в Figma (п. 3)
• Какие стандартные эффекты есть в Figma и как их применять (п.3)
• Как использовать собственные шрифты в браузерной версии Figma с помощью Font Helper (п.4)
• Как работать с текстовыми слоями в Figma (п. 4)

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

1. Описание будущего проекта и подготовка к работе

Следующие действия нужно выполнять согласно инструкции, описанной в ней.

Создайте новый проект и назовите его Proper Nutrition – это будет некая база рецептов правильного питания, которые можно будет просматривать, добавлять в избранное и оставлять заметки.

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

Прототип экранов, загружаемых после Splash Screen (экран с логотипом приложения и его названием) будет выглядеть следующим образом.

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

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

Здесь будет видео инструкция и текстовое описание (ингредиенты + пошаговая инструкция).

В конце описания рецепта будет возможность добавить его в список избранных вариантов. Для этого будет предусмотрена кнопка в конце или значок с сердечком напротив названия рецепта.

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

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

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

Создайте первый фрейм для Iphone 8 и назовите его SplashScreen

Приветственная страница или Splash Screen, с которой мы начнем, как правило содержит тематическое фоновое изображение, логотип и приветственные слова.

2. Загрузка изображений в Figma

Фоновым изображением у нас будет фотография с ПП коктейлями . Скачайте ее на свой компьютер.

Теперь в Figma выполните действие Menu – File – Place Image.

В появившемся диалоговом окне выберите загруженный файл с изображением. Его сокращенное название появится во вкладке Layers слева, а в рабочей области миниатюра и курсор в виде крестика. Растяните изображение по площади фрейма.

Обратите внимание, что часть изображения, которая выходит за границы фрейма не отображается, так как для него включена опция Clip Content (обрезка содержимого по размерам фрейма) в меню Design справа.

Щелкните на значок замочка напротив названия изображения в меню Layers , чтобы заблокировать его. Тоже самое можно сделать, выбрав в контекстном меню изображения функцию Lock/Unlock (заблокировать, разблокировать). Теперь фоновое изображение не будет нам мешать.

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

3. Создание логотипа с помощью фигур, булевых операций и стандартных эффектов

Теперь создадим логотип нашего проекта в Figma.

ЧИТАЙТЕ ТАКЖЕ

Фирменный стиль. Как создать логотип на практике. Узнайте как придумать логотип, используя карту мышления

Для этого используем фигуру эллипс, текст и булевы операции.

В верхнем меню из выпадающего списка Shape Tools выберите Ellipse

Нарисуйте эллипс размера 60 на 60 пикселей. При этом удерживайте нажатой клавишу Shift , чтобы стороны были одинаковыми.

На панели Design справа выставите следующие настройки:

• Выравнивание по центру фрейма
• Fill (заполнение) — #DA0100

Поверх эллипса с помощью инструмента Text (T) напишите букву П. На панели Design задайте следующие настройки в графе Text – шрифт Roboto Mono – Bold, 42 px. Выровняете букву следующим образом.

Обратите внимание, что для удобства я вывела сетку для нашего фрейма SplashScreen с шагом 5px. Как это сделать, я описала в главе «Настройка сетки» в статье «Создаем первый проект в Figma»

Создайте дубликат буквы П – Ctrl + D (Cmd+D для Mac).

Отразите ее по вертикали — Flip Vertical в контекстном меню и выровняйте следующим образом

Как вы уже догадались, у нас будет логотип, в котором замаскировано сокращение ПП – Правильное Питание.

Пришло время довести его до ума. Выделите эллипс и две буквы П.

В верхнем меню, в выпадающем списке булевых операций выберите Subtract Selection (Вычитание).

Получится вот такой логотип. Обратите внимание, что на панели Layers , слои с эллипсом и буквами объединятся в группу Subtract .

Понятие булевых операций в Figma не должно быть ново для вас. Так как логика самого процесса практически не отличается от других графических редакторов – Photoshop или Sketch.

Булева группа объединяет в себе несколько фигур (Shape), от 2 и более. Все они взаимодействуют друг с другом в зависимости от выбранной операции (булевой операции):

• Union— Объединение двух фигур в одну. Видимы обе.
• Subtract— Вычитание верхней из нижней. Видима нижняя.
• Intersect— Пересечение. Видима область пересечения двух фигур.
• Exclude— Исключение. Видимы обе фигуры, не видима область пересечения.

Действие всех булевых операций на примере двух фигур проиллюстрировано на пиктограммах к каждой из них.

Булевы операции можно проводить над любым количеством фигур и по- разному сочетать их.

Как вы убедились булевы операции действуют даже на текст.

Теперь попробуйте увеличить или уменьшить наш логотип – все слои в нем начнут ехать, тем самым искажая его. Чтобы такого не происходило, необходимо все объекты, объединенные булевой операцией поместить в один слой.

Для этого на панели Layers щелкните правой клавишей по группе Subtract и выберите операцию Flatten

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

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

Отключите видимость сетки для фрейма Splash Screen . Она нам пока не понадобится.

Выделите логотип и на вкладке Design справа найдите группу Effect – щелкните на значок +. Выберите Inner Shadow (внутренняя тень). Настройте ее следующим образом.

Обратите внимание, что в Figma ограничен набор стандартных эффектов. Их всего 4:

• Inner Shadow – внутренняя тень
• Drop Shadow – внешняя тень
• Layer Blur – размытие слоя
• Background Blur – размытие фона

4. Работа с текстом в Figma – установка новых шрифтов с помощью Font Helper

В базе Figma доступны шрифты из Google Fonts , где есть и кириллические варианты.

Мне доставил неудобства тот факт, что при наведении курсора мыши на название шрифта, не отображается его миниатюра, как, например, в Photoshop. Поэтому процесс подбора шрифта может растянуться. Легче зайти на сайт Google Fonts и там подобрать шрифт для своего текста.

ЧИТАЙТЕ ТАКЖЕ

Как выбрать шрифт для проекта если ты новичок Узнайте каким правилом стоит руководствоваться для создания гармоничного дизайна проекта.

Чтобы вы могли воспользоваться скаченными из сторонних источников шрифтами в браузерной версии Figmaпредлагается использовать Font Helper .

Чтобы его включить необходимо выполнить следующий порядок действий:

1. Перейти в настройки аккаунта — figma.com/settings
2. Найти пункт Fonts и нажать на кнопку Download installer to enable local fonts – на компьютер загрузится скрипт для Font Helper (на моем Mac Os это FigmaInstaller.pkg).
3. Запустите скаченный скрипт для Font Helper и в списке шрифтов браузерной версии Figma появятся шрифты с вашего локального диска.
4. Для того чтобы удалить этот скрипт, нажмите на Download uninstaller to disable local fonts в группе Fonts. Ссылка появится вместо кнопки Download installer… Будет загружен пакет для удаления Font Helper.

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

С помощью инструмента Text напечатайте следующую фразу под логотипом – «Лучшие ПП рецепты»

Я воспользовалась креативным бесплатным шрифтом Sweet Mavka Script о котором писала в статье « Бесплатные русские шрифты для заголовков ». Цвет шрифта #FDE0C0, размер 13 px.

Посмотрите на панели Design, какие еще есть настройки для текста в Figma. Там можно определить параметры обводки (Stroke) или эффекты (Effect), такие же как и для других объектов в Figma.

В результате проделанных манипуляций у нас получился следующий дизайн приветственной страницы приложения:

В следующем уроке мы сделаем данную страницу адаптивной и узнаем, что такое ограничители в Figma .

Кстати, мокап первой страницы, подготовленный благодаря статье « Мокап или как презентовать проект заказчику » выглядит следующим образом.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

• Share on Vkontakte
• Share on Telegram

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

• Share on Vkontakte
• Share on Telegram
• Share on Pinterest
• Share on Twitter
• Share on Email

Источник: des-life.ru

Цветовая схема приложения — 14 трендовых вариантов

Привет! В этой статье расскажем что такое цветовая схема приложения и как подобрать правильную цветовую схему.

В наше время дизайн мобильного приложения очень важен для любого бизнеса, если бизнес должен обеспечить превосходный UX — пользовательский опыт. Согласно исследовательским данным, пользователи тратят 89% времени в смартфонах на мобильные приложения. Это очень много! Более того, больше 50% людей утром после пробуждениясразу начинают пользоваться своими гаджетами. Осознание этой информации во многом повышают важность дизайна в мобильных приложениях.

Обязательная часть дизайна мобильного приложения это его цветовая схема. Нельзя просто так преуменьшать мощь цвета в приложениях. Верная цветовая схема приложения может помочь определить необходимое настроение. Это также помогает пользователям взаимодействовать с UI элементами приложения и вернее понимать основное взаимодействие в приложении.

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

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

Аналоговая цветовая схема приложения

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

Аналоговая цветовая схема приложения

Аналоговая цветовая схема на цветовом круге

• Теория цвета в веб дизайне
• Как стать Junior UX дизайнером и найти свою первую работу?
• Что такое UI UX дизайн?
• Что такое дизайн система? 4 шага по созданию дизайн системы

Монохромная цветовая схема приложения

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

Монохромная цветовая схема приложения

Монохромная цветовая схема на цветовом круге

Цветовая схема триада

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

Цветовая схема триада

Триада на цветовом круге

Дополнительная цветовая схема

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

Дополнительная цветовая схема приложения

Дополнительные цвета на цветовом круге

Составная цветовая схема

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

Составная цветовая схема на примере мобильного приложения

Составная цветовая схема на цветовом круге

Цветовые оттенки в мобильном приложении

Чтобы создать оттенок нужно добавить к основному цвету черный цвет. Такая цветовая схема дает возможность приобрести мобильному приложению привлекательный монолитный дизайн. Оттенки достаточно эффективны для выделения важных элементов UI в приложении. Так же они хороши чтобы создать визуальные связи.

Цветовые оттенки в мобильном приложении

Креативные цветовые схемы

Нестандартные цветовые схемы должны быть аккуратно скомбинированы с учетом лучших сочетаний цветов на цветовом круге. Мы не советуем новичкам сразу выбирать такие цветовые схемы для создания UI мобильного приложения. Сначала нужно иметь опыт работы с традиционными цветовыми схемами, а затем вы можете приступить к более сложным цветовым решениям или создать свою схему. Хотелось добавить что опытные UI-дизайнеры чаще всего используют один два минималистичных основных цвета и его оттенки. Такой подход к цветам позволяет получить быструю визуальную связь с брендом.

Креативная цветовая схема для приложения

Красочные иллюстрации

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

Использование иллюстраций в мобильных приложениях

Цветные градиенты

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

Использование цветных градиентов в мобильных приложениях

Чёрный и его оттенки

Тенденция к минимализму неизбежно привела к минимализму в использовании цветов. Черный цвет играет такую же важную роль в дизайне как и маленькое черное платье в гардеробе каждой девушки. Несмотря на то, что черный цвет выбивается из всего дизайна, в комбинации с белым и серым он может создать очень контрастную схему.

Черная цветовая схема для приложения

Использование пастельных цветов

Пастельные цвета в дизайне мобильных приложений — еще одна заметная тенденция для дизайнеров. Такие схемы помогают прийти к визуальному балансу в мобильном UI. На пользователей приложение в такой цветовой гамме произведет гармоничное впечатление.

Использование пастельных цветов в дизайне мобильного приложения

Яркие иконки

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

Использование иконок в дизайне мобильного приложения

Использование мягких теней

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

Мягкие тени в мобильном приложении

Высококонтрастные цвета

Высококонтрастные цветовые схемы стали популярны после выхода в свет Apple iPhone 7. Яркие голубые, бирюзовые, розовые, красные, зеленые цвета — главные составляющие таких цветовых схем.

Высококонтрастные цвета в мобильном приложении

Источник: webdevnet.ru