Вот базовые гайдлайны, которым все должны следовать при создании каждого нового клона из нашего скетч-темплейта Connect AppBook:

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

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

0. вся графика и анимация принимается только в кривых (вектор). исключение составляют элементы растровой статики, видео и анимации для секции Welcome (onboarding). в остальном, работа по типосетке ниже:

1. каждое приложение системы цифровых миров Connect Technologies имеет базовый набор идентики и цветов.

Базовые элементы идентики:

• logo-sq [1x1] - цвето-графический элемент лого, вписанный в квадрат

• logo-sq-wt [1x1] - версия logo-sq для использования на темном фоне (чаще всего белый overlay outlines)

• logo-text [3x1] - тексто-графический элемент текстового написания лого или торговой марки, вписанный в горизонтальный прямоугольник 3х1

• logo-text-wt [3x1] - версия logo-text для темных фонов

• logo-horiz - сборный элемент [4x1], собираемый автоматически из logo-sq и logo-text, чаще всего используется в хедерах приложения (вешается шириной на 80% вверх экрана без верхнего паддинга).

Цвета:

• primary-bg-gradient - переливной цвет основного (чаще всего светлого) фона экранов

• secondary-bg-gradient - переливной цвет вторичного (чаще всего более насыщенного) фона экранов

• active button bg - переливной либо сплошной фон активных кнопок интерфейса

• inactive button bg - фот неактивных кнопок и элементов

• active nav icon bg - переливной или сплошной цвет активных иконок навигации. чаще всего повторяет active button bg

• active profiler icon bg - подложка выбранной иконки профиля

Иконки:

• ios-app-icon - иконка для Apple по гайдлайнам https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
• app-icon-round - иконка приложения для круглоикончатых устройств (часто тех, что обрезают под rounded 99px)
• app-button - то, что мы рисуем на главной кнопке навигации в приложении, принимается анимация
• app-button - подложка этой кнопки, часто градиент

Системные кастомизации интерфейса:

• profiler1...12 icons -- иконки профильных групп. один из важнейших элементов интерфейса. каждый пользователь выберет свой и нажмет по нему. важно, чтобы каждый такой элемент был приятен взгляду, желательно цветной и понятный сразу.

• product/object/place -- иконки и аватарки продуктов на рынке и объектов на карте, если кастомизация типов продуктов или типов объектов (кастомный вид деательности)

Маркетинговые кастомизации интерфейса:

• welcome1...12 screens -- медиа и текст. на этих экранах показаны преимущества приложения при запуске в первый раз. экранов может быть до 12, но рекомендуется 4. логично перечислить преимущества функций и проблемы, которые решает проект. медиа может быть jpg, png, svg для статики, может быть svg-video, mp4, h264 но всегда отображается на 80% ширины в верхних 50% очередного welcome-экрана, а текст под ними как правило, описывает преимущества, показанные на медиа и содержит кнопку Next внизу.

• splash - стартовый (loader) экран. типово содержит отцентрованный logo-horiz на primary-bg-gradient цвете либо logo-horiz-wt на secondary-bg-gradient. однако же это лишь рекомендация. творчески сделанный сплеш повышает доверие к приложению. наш сплеш не имеет элементов интерфейса, лоадеров, брендинга или фраз, и может содержать любую заложенную 1.5-секундную анимацию или видео, тексты, цвета и эффекты, пока грузятся основные модули. статья по созданию сплешей: https://uxdesign.cc/building-the-perfect-splash-screen-46e080395f06

2.1 будут отдельные рекомендации и отдельный скетч-темплейт для публикации в AppStore и Play market (app-preview экраны для устройств).

3. общие рекомендации по интерфейсу и иконкам:

• идентичность. иконка и ее цвета должны быть максимально похожи на компанию или проект, который юзер ищет в app store - идентифицировать себя. то же самое касается скринов app preview
• вкус. используйте https://coolors.co/app если нужно придумать три градиента или свериться
• цвет. будьте яркими и улыбайтесь чаще.