Notion
თბილი ქაღალდის რვეული შუადღის მზეზე
Notion-ის ინტერფეისი დღისით საყვარელ ქაღალდის რვეულს ჰგავს: თბილი, კრემისფერი ტილო (#f6f5f4), რომელიც სტერილურის ნაცვლად შეხებითია, უხვი sans-serif ტიპოგრაფია პროდუქტის ტექსტს რედაქციულ წონას სძენს, ხოლო ფერი, რომელიც გამოიყენება როგორც იშვიათი პუნქტუაცია - ატმისფერი „აბები“ ზმნებს ხაზს უსვამს, ერთი ლურჯი ფერი მთავარ მოქმედებას აღნიშნავს, ხოლო აქცენტირებული ფერების მბრუნავი მასივი (მარჯანი, ქარვა, ცა, შუაღამე) ბარათების ფონს სტიკერებივით აფერადებს. ბარათები ტილოზე თხელი საზღვრებითა და კუთხეებითაა განლაგებული - ჩრდილების, ქრომის გარეშე - როგორც Moleskine რვეულის ხაზებიანი მონაკვეთები. ანიმაცია ხალისიანი და ელასტიურულია, 200 ms-ზე გლუვი გადასვლებით და ელასტიურობით პერსონაჟების ანიმაციებით, რომლებიც ინტერფეისს აცოცხლებს დეკორატიული ელემენტების გარეშე.
ცენტრში, მაქსიმალური სიგანე შემოიფარგლება დაახლოებით 1440 პიქსელით. მთავარი ელემენტი არის ცენტრირებული დასტა: სიმბოლოების რიგი → დიდი ორსტრიქონიანი სათაური ჩაშენებული ფერადი აბით → ქვესათაური → რიგი ორი მოწოდების ღილაკით → დიდი პროდუქტის ინტერფეისის მაკეტი. მთავარი ელემენტის ქვემოთ, სექციები მონაცვლეობით არის თეთრი ბარათების ბადეებსა და სრულფეროვან აქცენტულ პანელებს შორის. ლოგოს კედელი არის ცენტრირებული ერთსტრიქონიანი ბადე პარტნიორების ლოგოებისგან ნაცრისფერი ტონებით. ფუნქციების ბლოკები იყენებენ ორსვეტიან განლაგებას (ტექსტი მარცხნივ, ფერადი პანელი მარჯვნივ), სექციებს შორის მონაცვლეობით მარცხნიდან მარჯვნივ. „მოთხოვნის შემთხვევაში მიმართეთ თქვენს ასისტენტებს“ განყოფილება იყენებს 2x2 ბარათების ბადეს, სადაც ზედა ბარათი იკავებს სრულ სიგანეს, ხოლო ქვედა რიგი დაყოფილია ორ თანაბარ სვეტად. სექციებს შორის არსებული ღარები დიდია (~80 პიქსელი), რაც ქმნის მშვიდ ვერტიკალურ რიტმს. ნავიგაცია არის ფიქსირებული 64 პიქსელის სიმაღლის ზედა ზოლი ცენტრირებული ნავიგაციის ელემენტებით და მარჯვნივ გასწორებული მოქმედების ღილაკებით.
ილუსტრაციები უმნიშვნელოვანესია, ფოტოების გარეშე. ვიზუალური ენა აგებულია ბრტყელ, ილუსტრირებულ სიმბოლოებზე (მომრგვალებული კიდეები 2 პიქსელიან ფერად წრეებში), აბსტრაქტულ დეკორატიულ ელემენტებზე (ხელით დახატული ხრიკები, ბრჭყვიალა ხაზები, ისრები, ყვავილების ფორმები) და პროდუქტის მომხმარებლის ინტერფეისის მაკეტებზე. სიმბოლოები მთავარ ფანჯარაში შვიდი ავატარის ჰორიზონტალური რიგის სახით ჩნდება და გვერდზე ხალისიანი პუნქტუაციის ნიშნების სახითაა მიმოფანტული. პროდუქტის ეკრანის ანაბეჭდები ერთადერთი „რეალური“ ვიზუალური ელემენტებია: ისინი აჩვენებენ Notion-ის რეალურ ინტერფეისს (Kanban დაფები, დოკუმენტების ხედები, ხელოვნური ინტელექტის აგენტის პანელები) ელემენტების სრული ნაკრებითა და რეალური მონაცემებით. პროდუქტის მაკეტი მთავარ ფანჯარაში დიდია, ცენტრირებული და ტილოსგან ერთი ჩრდილით გამოყოფს. არ არის ცხოვრების წესის ფოტოები, არ არის საფონდო სურათები, არ არის აბსტრაქტული 3D რენდერები.
პალიტრა
ბრენდი
- Notion Blue
#0075de— მოქმედებისკენ მოწოდების (CTA) ღილაკის შემავსებელი მთავარი ელემენტი, აქტიური ნავიგაციის აქცენტი, შევსებული მოქმედების ღილაკები თითქმის მონოქრომულ სისტემაში ერთადერთი ფერთა სქემაა, რომელიც საკმარისად გაჯერებულია იმისათვის, რომ გადამრთველად აღიქმებოდეს.
ნეიტრალური
- Paper Warmth
#f6f5f4— გვერდის ტილო, მთავარი ფანჯრის ფონი და სექციის ფონი თბილი, ოდნავ კრემისფერი ფერებითაა დამზადებული, რაც სისტემას ტაქტილურ, ანალოგურ შეგრძნებას სძენს. - Pure White
#ffffff— ბარათის ზედაპირები, ამობურცული პანელები, ლოგოს ფონი, კონტრასტული ტექსტი მუქ ბარათებზე. - Ink Black
#000000— მთავარი ტექსტი, ნავიგაციის ბმულები, სათაურები - გამოიყენება სხვადასხვა გამჭვირვალობით (100%, 95%, 90%, 60%, 40%, 20%) იერარქიის ასაშენებლად ახალი ფერების დამატების გარეშე. - Charcoal
#111111— მუქი ტექსტის ვარიანტი ინტერფეისის იმ ადგილებისთვის, სადაც სუფთა შავი ფერი ძალიან უხეშად გამოიყურება. - Stone
#757575— მეორადი ნავიგაციის ტექსტი, დადუმებული დამხმარე ტექსტი, გამორთული ღილაკების ეტიკეტები - 60% მელნის ალფა - Graphite
#615d59— მთავარ ტექსტს აქვს თბილი ტონი - მოყავისფრო-ნაცრისფერი, რომელიც ჰარმონიულად ერწყმის თბილ ფონს.
ტიპოგრაფია
12-დან 96 პიქსელამდე · 10 ნაბიჯი
- NotionInter — ჩანაცვლება: Inter · კონტურები 400, 500, 600, 700 · ძირითადი sans-serif შრიფტი არის გეომეტრიული ჰუმანისტური, დახვეწილი ნიუანსებით, რომელიც გამოიყენება ტექსტისთვის 400 ზომით, ნავიგაციის/მომხმარებლის ინტერფეისისთვის 500 და სათაურებისთვის 600-700 ზომით. შრიფტის მასშტაბი იყენებს აგრესიულ უარყოფით ასოებს შორის ინტერვალს უფრო დიდი ზომებისთვის (-4.6 პიქსელი 96 პიქსელზე, -2 პიქსელი 72 პიქსელზე), რაც სათაურს უფრო კომპაქტურს და თავდაჯერებულს ხდის, ვიდრე ჰაეროვანს.
- Lyon Text — ჩანაცვლება: Source Serif Pro · კონტურები 400 · სარედაქციო სერიული შრიფტი, რომელიც განკუთვნილია ძირითადი ტექსტის ცალკეული ნაწილებისა და ნაწილების შესავლებისთვის, იშვიათად (ოთხჯერ) გამოიყენება, რათა შრიფტს ლიტერატურული წონა მისცეს, ჟურნალის განლაგებაში ციტატის მსგავსად. ის სისტემური აქცენტის ფუნქციას ასრულებს და არა პარალელური იერარქიის.
ინტერვალები და ფორმა
| მიზანი | მნიშვნელობა |
|---|---|
| სიმჭიდროვე | საშუალო |
| ძირითადი ნაბიჯი | 8px |
| ღილაკის რადიუსი | 8px |
| ბარათის რადიუსი | 12px |
| ჩრდილები | საზღვრების გარეშე ჩრდილების ნაცვლად |
| სექციებს შორის | 80px |
| გვერდის სიგანე | 1440px |
ხელოვნური ინტელექტი შექმნის თქვენს ვებსაიტს Notion სტილში და შეავსებს მას
- შეავსეთ პროდუქტებითა და პოსტებით ბმულის საშუალებით - Instagram, TikTok, Facebook.
- გადაიტანეთ კონტენტი თქვენი ძველი საიტიდან — უბრალოდ მიუთითეთ მისამართი.
- თანამედროვე დიზაინი საუკეთესო ძრავზე: React ( Next.js) სერვერის რენდერინგით და SEO ოპტიმიზაციით, დაუყოვნებლივ.
- სრულად ავტომატიზირებული SEO ოპტიმიზაცია ძიების შედეგებისა და ნეირონული ქსელის რეკომენდაციებისთვის.
მსგავსი სტილები
- ElevenLabs — ფოტოესე თბილ კრემისფერ ტონებში, დახვეწილი სათაურებით. ბაუჰაუსის სტილის ბლოკნოტი - კვერცხის ნაჭუჭისფერი ქაღალდი, შავი მელანი და ერთი იისფერი და ნარინჯისფერი აქცენტი პროდუქტის საჩვენებლად.
- Awesomic — სარედაქციო თუთიის ბადე ნარინჯისფერი პუნქტუაციის ნიშნებით, რომლებიც კონფეტის მოგვაგონებს
- Monad — სარედაქციო ტექნიკური ჟურნალი თბილ პერგამენტზე
- Dub — Link-ის მქრქალი ბრინჯის ქაღალდის მართვის პანელი
- Seline Analytics — მშვიდი ანალიტიკური მაგიდა თბილ ქაღალდზე
- Anthropic — სამეცნიერო დარგობრივი ჟურნალი თბილ პერგამენტზე - მშვიდი სპილოს ძვლისფერი ზედაპირები, სერიფიცირებული სარედაქციო სათაურები და ერთი თიხის აქცენტი, რომელიც მხოლოდ მაშინ ჩნდება, როდესაც მოქმედებაა საჭირო.
- Calendly — მუქი ლურჯი მელანი ცივ მარმარილოზე
- Augen Pro — Apple-ის თეთრი პრეზენტაცია მონოქრომულ სივრცეში ერთადერთ აქცენტად კლინიკურ, უწონო, ელექტრო ლურჯ ფერს წარმოადგენს.
- Antimetal — სარედაქციო ქრონიკა კრემისფერ ფურცელზე - მშვიდი დილა სამეცნიერო ჟურნალში, სადაც თავშეკავება თავდაჯერებულობას გამოხატავს და სერიფები მძიმე საქმეს აკეთებენ.
- Perk — ელექტრო ლაიმი თბილ პერგამენტის ქაღალდზე
- Ditto — მზით განათებული სახელოსნო, სადაც ველური ყვავილების ნიმუშები იქმნება. თბილი კრემისფერი ზედაპირები, ნათელი ყვითელი საბაზისო ფერი, მუქი ლურჯი მელანი, ნამუშევრის უკან ორგანული ფერის ფორმები ყვავის.
- Officevibe — სარედაქციო ჟურნალი თბილ კრემისფერ ქაღალდზე. წარმოიდგინეთ ადამიანური რესურსების მენეჯმენტის შესახებ გააზრებული ესე, წარმოდგენილი როგორც პროდუქტი - დახრილი სერიფული შრიფტი, რომელიც ჩურჩულებს თანამედროვე ლურჯ ინტერფეისში.