Column
მუქი ლურჯი დავთარი გრილი გარიჟრაჟის ქვეშ
Column თითქმის თეთრ ფონზე იყენებს მუქ, ინსტიტუციურ ლურჯ ფერს: გვერდი თავდაპირველად საბანკო პროდუქტის მყარ ზედაპირს ჰგავს, ხოლო შემდეგ დეველოპერის სათამაშო მოედანს. ბრენდის ფერი არ არის ერთი, არამედ კოორდინირებული წყვილი - მუქი ლურჯი #111a4a სერიოზული სტრუქტურისთვის, პიტნისფერი მწვანე #44b48b მონაცემებისა და კოდისთვის - ერთი თბილი ნარინჯისფერით (#ec652b), რომელიც განკუთვნილია მაღალი ინტენსივობის აქცენტირებული ზედაპირებისთვის, როგორიცაა Brex ბარათი. ტიპოგრაფიაში დომინირებს SuisseIntl, გეომეტრიული sans serif, რომელიც გამოიყენება მთელ წონით დიაპაზონში 300-დან (ბმულები) 600-მდე (ეკრანი), რაც სისტემას დახვეწილ, სარედაქციო სტილს ანიჭებს, რომელიც ფინტექ კომპანიების უმეტესობას აკლია. ბარათები დიდ თეთრ ზედაპირებზე ტივტივებს დახვეწილი, ფენიანი ჩრდილებით; ინტერფეისის ელემენტების უმეტესობა ბრტყელია, სიღრმე კი მხოლოდ იქ ჩანს, სადაც ბარათი ფიზიკურ ობიექტს უნდა ჰგავდეს (ტრანზაქციის ვიჯეტები, პროდუქტის მაკეტები). კოდი და ფინანსური მონაცემები წარმოდგენილია მონოქრომული, ზღვის ქაფის ფერში - ვიზუალური სიგნალი იმისა, რომ ეს არის ბანკი, რომელიც ინჟინრებმა ინჟინრებისთვის შექმნეს.
გვერდის სტრუქტურა სრული სიგანისაა, ცენტრში განლაგებული ფართო გვერდითი კიდეებით (64–15 სმ სამუშაო მაგიდაზე). მთავარი ეკრანი გაყოფილი განლაგებითაა წარმოდგენილი: სათაური და მოქმედებისკენ მოწოდებები მარცხნივ 25 სმ-ზეა გასწორებული, ხოლო მცურავი ტრანზაქციის ვიჯეტი მარჯვნივ 55 სმ-ზეა განლაგებული ნახევარტონიანი რუკის ფონზე. მთავარი ეკრანის ქვემოთ, სექციები მონაცვლეობით თეთრ (4 სმ) და ღია ტილოს (5 სმ) შორისაა განლაგებული 6 სმ ვერტიკალური ღარებით. შინაარსი განლაგებულია ერთი 6-სვეტიანი ბადის მიხედვით: ტექსტური ბლოკები იკავებს 4 სვეტს (7 სმ), სურათის/პროდუქტის ბარათები იკავებს 5–6 სვეტს, ბადიდან განზრახ გადახრით. ფუნქციების აღმწერი სექციები იყენებენ 2-სვეტიან განლაგებას: ტექსტი მარცხნივ, პროდუქტი მარჯვნივ. ნდობის სტატისტიკის განყოფილება დაყოფილია 4-სვეტიან ბადედ გვერდის მთელ სიგანეზე. მომხმარებლის ლოგოები განლაგებულია ერთ ცენტრალურ რიგში 48 პიქსელიანი ღარებით. ქვედა კოლონტიტულს აქვს კომპაქტური ორსვეტიანი განლაგება. ნავიგაცია არის მთავარი ეკრანის ზემოთ მდებარე ფიქსირებული, 62 პიქსელის სიმაღლის, გამჭვირვალე ზედა ზოლი ბუნდოვანი ფონით, რომელიც გადახვევისას თეთრდება. არ არის გვერდითი ზოლი ან მეგამენიუ - ჩამოსაშლელი სიები მარტივი ისრის სტილის მენიუებია.
ვიზუალური სტილი მინიმალისტური და ფუნქციონალურია - სვეტი სრულიად გამორიცხავს საფონდო ფოტოგრაფიას. ვიზუალური ენა სამ წყაროზეა აგებული: (1) SVG მონაცემების ილუსტრაციები, კერძოდ, წერტილოვანი ნახევარტონიანი მსოფლიო რუკა, რომელიც ინდიგოდან ნარინჯისფერამდე და ფირუზისფერამდე გრადიენტით არის წარმოდგენილი, რაც მთავარი ელემენტის უკან გლობალური მასშტაბის ატმოსფეროს ქმნის; (2) პროდუქტის ბარათის განლაგება - მცურავი ვიჯეტები, რომლებიც აჩვენებენ ანგარიშის ბალანსს, გადარიცხვის დეტალებს და JSON კოდის ფრაგმენტებს თეთრ ბარათებზე დრამატული ჩრდილებით; (3) დიაგრამის ვიზუალიზაცია - ფირუზისფერი სანთლის ან სვეტოვანი დიაგრამები თხელი დამაკავშირებელი ხაზებით, რომლებიც გამოიყენება ნდობის/სტატისტიკის განყოფილებაში. ნახევარტონიანი რუკა ვიზუალური ელემენტის დამახასიათებელი ნიშანია - მისი გრადიენტი გადადის #d65620-დან (ნარინჯისფერი) იისფერ, ლურჯ, ზურმუხტისფერ, ფირუზისფერ და ყვითელ ფერებში, რაც ქმნის სპექტრს, რომელიც აერთიანებს მთელ ბრენდის პალიტრას ერთ დეკორატიულ ზედაპირზე. ხატულებს აქვთ ერთგვაროვანი კონტურის სისქე 1.5–2 პიქსელი #232730 ან #a9acb6 ვარიანტებში, აქტიური მდგომარეობებისთვის შევსებით. არანაირი ცხოვრების წესის ფოტოები, არანაირი აბსტრაქტული 3D რენდერები - შეზღუდვა განზრახულია, რათა ყურადღება პროდუქტსა და მონაცემებზე იყოს კონცენტრირებული.
პალიტრა
ბრენდი
- Indigo Navy
#111a4a— ბრენდის ძირითადი ფერი გამოიყენება მოქმედებისკენ მოწოდებების, აქტიური ნავიგაციის მდგომარეობების, სათაურისა და ლოგოსთვის. მუქი იისფერ-ლურჯი ფერი საიტს მყარ, მაგრამ ამავდროულად მდიდარ შავ ელფერს სძენს; თეთრ ტექსტთან ერთად, ის საიტზე ყველაზე გამორჩეულ ღილაკს ქმნის. - Seafoam 600
#44b48b— კოდისა და მონაცემების ფერი არის JSON გასაღებების, იდენტიფიკატორებისა და ფინანსური მნიშვნელობების ბრენდის ფერი კოდის ფრაგმენტებში. ის ასევე გამოიყენება მონაცემთა წერტილებისთვის დიაგრამებსა და ზრდის ვიზუალიზაციაში. - Seafoam 700
#167e6c— ზღვის ქაფის უფრო მუქი ელფერი კონტურის, დიაგრამის ხაზებისა და ხატულების აქცენტებისთვის მონაცემთა კონტექსტში. ეს ზღვის ქაფის მასშტაბს უფრო მუქ ფონზე აფიქსირებს. - Seafoam 400
#94efb7— კოდის მონიშნული ფრაგმენტი კოდის ბლოკებში შეიცავს სტრიქონის მნიშვნელობებს, URL-ებს და API საბოლოო წერტილებს. ყველაზე ღია ზღვის ქაფის ფერი იკითხება, როგორც მონოსაშუალო შრიფტი მომწვანო ელფერით. - Deep Sea
#023247— დიაგრამის დეკორატიული კონტური და აქცენტირების ფერი არის მდიდარი ფირუზისფერი, რომელიც გამოიყენება SVG ილუსტრაციებსა და მონაცემთა ვიზუალიზაციაში, ზღვის ქაფის ფერთა გამასთან ერთად.
ნეიტრალური
- Midnight Ink
#011821— მუქი ზედაპირი და მონიშნული ტექსტი - პროდუქტის ბარათის ფონი, მაღალი კონტრასტის მქონე მთავარი ტექსტი. ნაცრისფერთან მიახლოებული, ცივი ლურჯ-მწვანე ელფერით; გამოიყენება მუქი რეჟიმის საფუძვლად, როდესაც საჭიროა განყოფილების ინვერსია. - Slate Ink
#3b3e47— მეორადი სათაური და მთავარი ტექსტი ცოტა უფრო თბილია, ვიდრე „შუაღამის მელანი“, რომელიც გამოყენებულია იქ, სადაც სუფთა შავი ფერი ღია ტილოზე ზედმეტად უხეში მოჩანდა. - Steel
#7c7f88— ძირითად ტექსტსა და ბმულის ტექსტში დომინირებს მდუმარე ფერი (ძირითად ტექსტში გამოყენებულია 245-ჯერ). ნეიტრალური ნაცრისფერ-ლურჯი ფერი, რომელიც აღიქმება როგორც მშვიდი და არასდროს როგორც გაცვეთილი გამოსახულება. - Fog
#a9acb6— ხატულების კონტურები, მესამეული საზღვრები და ჩანაცვლების ველის ტექსტი. საშუალო ნაცრისფერი ფერი, რომელიც ტექსტს ჰყოფს მასთან კონკურენციის გარეშე. - Mist
#cbcccf— ძირითადი ტექსტი — ხელმოწერები, პასუხისმგებლობის შეზღუდვის განცხადებები და წვრილი შრიფტი — თეთრ ფონზე იკითხება, თუმცა ვიზუალურად ნაკლებად შესამჩნევია. - Silver Lining
#e3e4e8— ბარათის საზღვრები, შეყვანის ველის საზღვრები, გამყოფი ხაზები. ეს სტრუქტურული, დახვეწილი ფერი გამოიყენება იქ, სადაც ორი ზედაპირის გამოყოფაა საჭირო ჩრდილების გარეშე.
ტიპოგრაფია
10-დან 60 პიქსელამდე · 10 ნაბიჯი
- SuisseIntl — ჩანაცვლება: Inter · კონტურები 300, 400, 500, 600 · ძირითადი შრიფტი – გამოიყენება ყველა სათაურისთვის, ძირითადი ტექსტისთვის, ღილაკისთვის, ნავიგაციისთვის, ბმულებისა და ბარათის ტექსტისთვის. უნიკალური გეომეტრიული sans serif შრიფტი Column-ს გამორჩეულ სარედაქციო სტილს ანიჭებს, რაც მას გამოარჩევს სხვა ფინტექ კომპანიებისგან, რომლებიც ექსკლუზიურად Inter-only-თან მუშაობენ. სათაურებისთვის წონაა 600 პიქსელი 52–60 პიქსელზე, ქვესათაურებისთვის 500, ძირითადი ტექსტისთვის 400 და დაბალი აქცენტით ბმულებისთვის 300.
- SuisseIntlMono — ჩანაცვლება: JetBrains Mono · კონტურები 400 · SuisseIntl-ის მსგავსი მონოსაიდური შრიფტი, რომელიც გამოიყენება ტექნიკური ეტიკეტების, API იდენტიფიკატორებისა და UI ელემენტებში ჩაშენებული მონაცემებისთვის. ის ინარჩუნებს SuisseIntl-ის იგივე პროპორციებს, ამიტომ მონოსაიდური და პროპორციული ტექსტი სწორად არის გასწორებული შერეულ კონტექსტებში.
- SFMono — ჩანაცვლება: Fira Code · კონტურები 400 · კოდის ფრაგმენტის ჩვენება – ნაჩვენებია JSON მაგალითებსა და API დოკუმენტაციის ბლოკებში. კოდის ინტერფეისის ტექსტისგან ვიზუალურად გასარჩევად გამოიყენება ზღვის ქაფისფერი ელფერი.
ინტერვალები და ფორმა
| მიზანი | მნიშვნელობა |
|---|---|
| სიმჭიდროვე | საშუალო |
| ძირითადი ნაბიჯი | 8px |
| ღილაკის რადიუსი | 8px |
| ბარათის რადიუსი | 8px |
| ჩრდილები | საზღვრების გარეშე ჩრდილების ნაცვლად |
| სექციებს შორის | 72px |
| გვერდის სიგანე | 1200px |
ხელოვნური ინტელექტი შექმნის თქვენს ვებსაიტს Column სტილში და შეავსებს მას
- შეავსეთ პროდუქტებითა და პოსტებით ბმულის საშუალებით - Instagram, TikTok, Facebook.
- გადაიტანეთ კონტენტი თქვენი ძველი საიტიდან — უბრალოდ მიუთითეთ მისამართი.
- თანამედროვე დიზაინი საუკეთესო ძრავზე: React ( Next.js) სერვერის რენდერინგით და SEO ოპტიმიზაციით, დაუყოვნებლივ.
- სრულად ავტომატიზირებული SEO ოპტიმიზაცია ძიების შედეგებისა და ნეირონული ქსელის რეკომენდაციებისთვის.
მსგავსი სტილები
- dope.security — შუაღამის ტერმინალი იასამნისფერი შუქურებით
- Leonardo — ინვერსიული სარედაქციო გალერეა. შავი კედლებით შემოსაზღვრული მუზეუმი, სადაც იისფერი სათაურები კედლის ინსტალაციების როლს ასრულებს, ხოლო ქვემოთ ხელოვნური ინტელექტის მიერ გენერირებული პორტრეტები მკვრივ ბადეშია ჩამოკიდებული.
- VEED — თეთრი გალერეის კედელი ნეონის მწვანე შუქის ღილაკებით
- Craft Docs — ციფრული კოლაჟი სკრაპბუქინგისთვის. დიზაინი წააგავს გააზრებულ, ტაქტილურ სკრაპბუქს, სადაც სტრუქტურირებული ციფრული ჩანაწერები ერწყმის რბილ, ორგანულ ტექსტურებს.
- Letter — კერძო გალერეა, სადაც წარმოდგენილია საცავიდან ამოღებული მოციმციმე არტეფაქტები. შავი კედლებით შემოსაზღვრული საგამოფენო სივრცე, სადაც გალერეის შეფერილ კედლებზე ქრომირებული ქანდაკებების ზემოთ სერიფიცირებული სათაურები ლივლივებს.
- Railway — კოსმოსური შუაღამის ექსპრესი. მშვიდი, ამაღელვებელი მოგზაურობა ბნელ, ვარსკვლავებით განათებულ კოსმოსში, რომელსაც მკაფიო სიგნალები წარმართავს.
- Garden Eight — კრემისფერ ქაღალდზე შესრულებული მონუმენტური სარედაქციო სტატია. 215 პიქსელიანი სერიფის ზომის სათაური თბილ პერგამენტზეა გამოსახული, გარშემორტყმული მოტივტივე სკულპტურული ფორმებითა და ზღვის ჰაერის მსგავსი ნეგატიური სივრცით — გვერდი უფრო ხელოვნების მონოგრაფიის გარეკანს ჰგავს, ვიდრე დაფას.
- Steep — სერიფ შრიფტების ანალიზი თბილ ქაღალდზე
- ElevenLabs — ფოტოესე თბილ კრემისფერ ტონებში, დახვეწილი სათაურებით. ბაუჰაუსის სტილის ბლოკნოტი - კვერცხის ნაჭუჭისფერი ქაღალდი, შავი მელანი და ერთი იისფერი და ნარინჯისფერი აქცენტი პროდუქტის საჩვენებლად.
- Awesomic — სარედაქციო თუთიის ბადე ნარინჯისფერი პუნქტუაციის ნიშნებით, რომლებიც კონფეტის მოგვაგონებს
- Monad — სარედაქციო ტექნიკური ჟურნალი თბილ პერგამენტზე
- AI for Business — ბრუტალისტური სარედაქციო შოურუმი თბილ ნაცრისფერ ტონებში