Сенім
Сабырлы ашық ұсыну, жоғары контраст және декоративтік шудың болмауы.
A3 дизайн жүйесі
A3 өнім сайттарының визуалды тілі. Бет бүкіл сайтпен бірдей токендерде жиналған: төмендегі үлгілер олардың суретін емес, нақты мәндерін көрсетеді.
Визуалды тілдің бес қасиеті
Нақтылық
Әр блок абстрактілі уәде емес, нақты функцияны, сценарийді немесе нәтижені түсіндіреді.
Редакциялық мәнерлілік
Ірі типографика, асимметриялық торлар және блоктардың әртүрлі масштабы ауыр анимациясыз ырғақ жасайды.
Материалдық
Иллюстрациялар үлгілік 3D нысандардың орнына қағаз, керамика және графиттен жасалған физикалық композиция сияқты көрінеді.
Отбасылық ұқсастық
Палитра, типографика, радиустар және адаптив тәртібі барлық A3 өнімінде бірдей. Сюжет пен композиция өзгереді.
Палитра
Сегіз базалық түс. Барлық туынды реңк солардан есептеледі, сондықтан базалық мәннің ауысуы бүкіл сайтты өзгертеді.
#F5F6FA--c-bgБет фоны және жұмсақ төсеніштер
#FFFFFF--c-surfaceКарточкалар, өрістер, қараңғыдағы мәтін
#212527--c-inkНегізгі мәтін, қара панельдер, түймелер
#6B6B6B--c-mutedҚосымша мәтін және белсенді емес күйлер
#51C247--c-successСәттілік және растау
#DF720C--c-warningЕскерту және қолмен тексеру
#E83437--c-errorҚате және аса маңызды күй
#6C5CE7--c-accentФокус, белсенді сілтеме, нүктелік акцент
Қолдану ережелері
- Негізгі түйме әрқашан қара, ақ түйме тек қара панель ішінде тұрады.
- Жасыл, сарғыш және қызыл мағына білдіреді. Декор ретінде пайдаланылмайды.
- Күлгін нүктелі қолданылады: белсенді тармақтың астын сызу, фокус, сілтеме.
- Жаңа түс компонентке тікелей түспейді: алдымен семантикалық токен пайда болады.
- Таза қара пайдаланылмайды: қою реңк салқынырақ және төсенішке жақсы жатады.
Типографика
Golos Text, өз серверімізде. Қаріп кириллицаға, кеңейтілген латиницаға және өнімдік ұсынуға жарайды.
Мәтін ережелері
- Бірінші экранның тақырыбы desktop-та екі жолдан аспайды.
- Негізгі мәтін жолда шамамен 44-65 таңбамен шектеледі.
- Uppercase тұрақты декоративтік тәсіл ретінде қолданылмайды.
- Ұзын және қысқа сызықша қолданылмайды: нүкте, қос нүкте немесе үтір.
- Копирайтинг нақты: функция, шарт, нәтиже, шектеу.
Басты тақырыпПлатформа құжат айналымын, қаржыны және кадрларды бір контурға жинайды
Бөлім тақырыбыПлатформа құжат айналымын, қаржыны және кадрларды бір контурға жинайды
Карточка тақырыбыПлатформа құжат айналымын, қаржыны және кадрларды бір контурға жинайды
Негізгі мәтінПлатформа құжат айналымын, қаржыны және кадрларды бір контурға жинайды
Қосымша мәтінПлатформа құжат айналымын, қаржыны және кадрларды бір контурға жинайды
Қолтаңба және метадерекПлатформа құжат айналымын, қаржыны және кадрларды бір контурға жинайды
Форма және беттер
Үш радиус бүкіл интерфейсті жабады. Көлеңкелер салқын және өте жұмсақ, олар әр ақ бетке әдепкіде қойылмайды.
Бет түрлері
- Иерархияны тор жасаған кезде контейнерсіз бет фоны.
- Жұқа салқын шекарасы бар ақ карточка.
- Төсеніште түсті шекарасыз жұмсақ карточка.
- Бір маңызды тезиске немесе қорытынды шақыруға арналған қара панель.
28pxКарточкалар, ірі суреттер, қара панельдер
12pxӨрістер, ықшам плашкалар, ішкі беттер
999pxТүймелер, ауыстырғыштар, сүзгілер
Компоненттер
Базалық элементтер нақты орындалуда.
Түймелер
Күй плашкалары
СәттілікНазар аударыңызҚатеАқпарат
Форма өрісі
Label әрқашан өрістің үстінде, placeholder оны алмастырмайды.
Қозғалыс
Қозғалыс технологияны көрсетпей, иерархияға көмектеседі.
- Бөлімнің пайда болуы: мөлдірлік және 22 пиксельге жылжу, ұзақтығы 0.65 секунд.
- Беттер арасындағы ауысу: мөлдірлік және 10 пиксельге жылжу, шамамен 0.28 секунд.
- Түйме меңзегенде 2 пиксельге көтеріледі және басқанда сәл сығылады.
- Басуға болатын карточка 5 пиксельге көтеріледі және жұмсақ көлеңке алады.
- Қозғалысты азайту қосулы болғанда анимациялар іс жүзінде лезде өтеді.
Біз не істемейміз
- Семантикалық себепсіз ірі күлгін немесе көк контейнерлер.
- Барлық бөлімде қатарынан үш бағандағы бірдей ақ карточкалар.
- Бір мәтін мен градиент дақтан тұратын бірінші экран.
- Интерфейс белгісі немесе жалаудың орнына эмодзи.
- Бір әрекетке әртүрлі түсті және әртүрлі атаулы түймелер.
- Артында дереккөзі жоқ декоративтік сандар.
- Азайтылған қозғалысқа қосалқы тәртібі жоқ ауыр анимация.
A3 брендтік материалдары керек пе?
Логотипті, түс палитрасын және презентация үлгілерін сұраныс бойынша жібереміз, материалдарыңызды платформа стиліне сай келтіруге көмектесеміз.