Notion
Günorta günəşində isti kağız dəftər
Notion interfeysi gün işığında sevilən kağız dəftər kimi görünür: steril deyil, toxunma hissi verən isti, krem rəngli bir kətan (#f6f5f4), məhsul mətninə redaksiya çəkisi verən səxavətli sans-serif tipoqrafiyası və seyrək durğu işarələri kimi istifadə edilən rəng - şaftalı "həbləri" felləri vurğulayır, əsas hərəkəti tək mavi lövbərləyir və fırlanan vurğu çalarları (mərcan, kəhrəba, səma, gecə yarısı) kart fonlarını stikerlər kimi rəngləndirir. Kartlar Moleskine dəftərinin xətlənmiş hissələri kimi nazik haşiyələri və küncləri - kölgələri, xromu olmayan - olan bir kətan üzərində düzülmüşdür. Animasiya oynaq və yaylıdır, 200 ms-də hamar keçidlər və dekorativ olmadan interfeysə can verən yaylı personaj animasiyaları ilə.
Mərkəzləşdirilmiş, maksimum eni təxminən 1440 piksel ilə məhdudlaşdırılıb. Əsas element mərkəzləşdirilmiş yığındır: simvollar sırası → daxil edilmiş rəngli həb olan böyük iki sətirli başlıq → alt başlıq → iki çağırış düyməsi olan bir sıra → böyük bir məhsul UI maketidir. Əsas elementin altında bölmələr ağ kartların və tam rəngli vurğu panellərinin şəbəkələri arasında növbələşir. Loqo divarı boz rəngdə tərəfdaş loqotiplərinin mərkəzləşdirilmiş tək sətirli şəbəkəsidir. Xüsusiyyət blokları bölmələr arasında soldan sağa növbələşən iki sütunlu düzülüşdən (soldakı mətn, sağdakı rəngli panel) istifadə edir. "Tələb üzrə köməkçilərinizdən soruşun" bölməsi 2x2 kart şəbəkəsindən istifadə edir, burada üst kart tam eni tutur və alt sətir iki bərabər sütuna bölünür. Bölmələr arasındakı novlar genişdir (~80 piksel), sakit şaquli ritm yaradır. Naviqasiya mərkəzləşdirilmiş naviqasiya elementləri və sağa düzülmüş hərəkət düymələri olan sabit 64 piksel hündürlükdə üst paneldir.
Şəkillər olmadan illüstrasiyalar çox vacibdir. Vizual dil düz, illüstrasiyalı simvollar (2 piksel rəngli dairələrdə yuvarlaq kənarlar), mücərrəd dekorativ elementlər (əl ilə çəkilmiş qıvrımlar, parıltılar, oxlar, çiçək formaları) və məhsulun istifadəçi interfeysinin maketləri üzərində qurulub. Simvollar əsas pəncərədə yeddi avatardan ibarət üfüqi sıra kimi görünür və səhifə boyunca oynaq durğu işarələri kimi səpələnmişdir. Məhsul ekran görüntüləri yeganə "real" vizual elementlərdir: onlar tam element dəsti və real məlumatlarla faktiki Notion interfeysini (Kanban lövhələri, sənəd görünüşləri, süni intellekt agent panelləri) göstərir. Əsas pəncərədəki məhsul maket böyük, mərkəzləşdirilmişdir və onu kətandan ayıran tək bir kölgə salır. Həyat tərzi fotoşəkilləri, stok şəkilləri, mücərrəd 3D renderlər yoxdur.
Palitra
Brend
- Notion Blue
#0075de— Hərəkətə çağırış (CTA) düyməsini dolduran əsas element, aktiv naviqasiyada vurğu, doldurulmuş hərəkət düymələri, demək olar ki, monoxrom sistemdə açar kimi qəbul ediləcək qədər doymuş yeganə rəng sxemidir.
Neytral
- Paper Warmth
#f6f5f4— Səhifə kətan, əsas pəncərə fonu və bölmə fonu sistemə toxunma və analoq hissi verən isti, bir az bej rənglərdədir. - Pure White
#ffffff— Kart səthləri, qabarıq panellər, loqo fonu, tünd kartlar üzərində kontrastlı mətn. - Ink Black
#000000— Əsas mətn, naviqasiya linkləri, başlıqlar - yeni rənglər əlavə etmədən iyerarxiya qurmaq üçün fərqli şəffaflıqla (100%, 95%, 90%, 60%, 40%, 20%) istifadə olunur. - Charcoal
#111111— Saf qara rəngin çox sərt görünəcəyi UI sahələri üçün tünd mətn seçimi. - Stone
#757575— İkinci dərəcəli naviqasiya mətni, səssizləşdirilmiş köməkçi mətn, deaktiv düymə etiketləri - 60% mürəkkəb alfa - Graphite
#615d59— Əsas mətn isti fonla harmoniya yaradan isti bir tona - qəhvəyi-boz rəngə malikdir.
Tipoqrafiya
12-dən 96 pikselə qədər · 10 addım
- NotionInter — əvəzetmə: Inter · konturlar 400, 500, 600, 700 · Əsas sans-serif şrifti incə nüanslara malik həndəsi humanist şriftdir və əsas mətn üçün 400, naviqasiya/istifadəçi interfeysi üçün 500 və başlıqlar üçün 600-700 ölçülərində istifadə olunur. Şrift şkalası daha böyük ölçülərdə (96 pikseldə -4.6 piksel, 72 pikseldə -2 piksel) aqressiv mənfi hərf aralığından istifadə edir ki, bu da başlığı daha yığcam və inamlı hiss etdirir, daha rahat edir.
- Lyon Text — əvəzetmə: Source Serif Pro · konturlar 400 · Əsas mətnin ayrı-ayrı bölmələri və bölmə girişləri üçün ayrılmış redaksiya serif şrifti, jurnal düzümündəki sitata bənzər şəkildə şriftə ədəbi çəki vermək üçün az miqdarda (dörd dəfə) istifadə olunur. Paralel iyerarxiyadan daha çox sistemli vurğu kimi fəaliyyət göstərir.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 8px |
| Düymə radiusu | 8px |
| Kart radiusu | 12px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 80px |
| Səhifə eni | 1440px |
Süni intellekt veb saytınızı Notion üslubunda quracaq və onu dolduracaq
- Məhsullar və paylaşımlar ilə Instagram, TikTok, Facebook linkləri vasitəsilə tanış olun.
- Köhnə saytınızdan məzmunu köçürün — sadəcə ünvanı göstərin.
- Ən yaxşı mühərrikdə müasir dizayn: Server render və SEO optimallaşdırması ilə React ( Next.js).
- Axtarış nəticələri və neyron şəbəkə tövsiyələri üçün tam avtomatlaşdırılmış SEO optimallaşdırması.
Oxşar üslublar
- ElevenLabs — İsti krem tonlarında incə başlıqlarla yazılmış foto esse. Bauhaus üslubunda dəftər — yumurta qabığı rəngli kağız, qara mürəkkəb və məhsul nümayişi üçün tək bənövşəyi və narıncı vurğu.
- Awesomic — Konfeti xatırladan narıncı durğu işarələri olan redaksiya sink tor
- Monad — isti perqament üzərində redaksiya texniki jurnalı
- Dub — Link-in mat düyü kağızı idarəetmə paneli
- Seline Analytics — İsti kağız üzərində sakit analitik masa
- Anthropic — İsti perqament haqqında elmi sahə jurnalı - sakit fil sümüyü səthləri, serif redaksiya başlıqları və yalnız hərəkətə ehtiyac olduqda görünən tək bir gil vurğu.
- Calendly — Soyuq mərmər üzərində tünd mavi mürəkkəb
- Augen Pro — Apple-ın ağ təqdimatı monoxrom məkanda yeganə vurğu kimi klinik, çəkisiz, elektrik mavisinə malikdir.
- Antimetal — Kremli kağız üzərində redaksiya xronikası — elmi jurnalda sakit bir səhər, burada təmkin özünəinam ifadə edir və seriflər ağır işi yerinə yetirir
- Perk — İsti perqament kağızı üzərində elektrik əhəng
- Ditto — Günəş işığı altında vəhşi çiçək nümunələri yaradan emalatxana. İsti krem səthlər, canlı sarı əsas rəng, tünd tünd göy mürəkkəblər, əsərin arxasında çiçəklənən üzvi rəng formaları.
- Officevibe — İsti krem rəngli kağız üzərində redaksiya jurnalı. Müasir mavi interfeys vasitəsilə pıçıldayan kursiv serif şrift kimi təqdim olunan, məhsul kimi təqdim olunan, HR idarəetməsi haqqında düşünülmüş bir esse təsəvvür edin.