Dub
Link-ის მქრქალი ბრინჯის ქაღალდის მართვის პანელი
დაბის ვიზუალურ სისტემას თავშეკავებული, თითქმის რედაქციული SaaS ესთეტიკა აქვს: თითქმის თეთრი ტილო, რომელიც ერთმანეთთან თხელი საზღვრებით არის შეკრული გამოწეული ელემენტების ნაცვლად, მკვრივი მონოქრომული ტიპოგრაფიით, რომელიც სტრუქტურულ საყრდენს უზრუნველყოფს და ერთი კაშკაშა ლურჯი ფერით (#2563eb), რომელიც შთაბეჭდილებას ტოვებს. ერთი შეხედვით, ზედაპირები ბრტყელი და ჩარჩოს გარეშე რჩება, მაგრამ თითოეულ კონტეინერს აქვს 1 პიქსელიანი #e5e5e5 ზღვარი, რაც დაბეჭდილი დოკუმენტის შეგრძნებას იწვევს. ინდივიდუალურობა მიიღწევა ფერადი „აბი“ აქცენტების მცირე ნაკრებით (ნარინჯისფერი, მწვანე, იისფერი), რომლებიც ნეიტრალურ პალიტრას ზემოთ მოძრაობენ და სათაურებით, რომლებიც თავდაჯერებულად და თანამედროვედ გამოიყურება, თვალისმომჭრელი არ არის. კომპონენტები კომპაქტური და მკვრივია: 8 პიქსელიანი ღარები, 12 პიქსელიანი ბარათის რადიუსი, 9999 პიქსელზე აბის ფორმის ეტიკეტები და უხილავი კონტროლი მძიმე, შევსებული ღილაკების ნაცვლად.
გვერდი აგებულია ცენტრირებული განლაგებით, მაქსიმალური სიგანით დაახლოებით 1200 პიქსელი. მთავარი ელემენტია ცენტრირებული ტექსტური ბლოკი სამი მცურავი ელემენტით (აფილირებული პროგრამები, კონვერტაციის ანალიტიკა, მოკლე ბმულები), რომლებიც ჰორიზონტალურად არის განლაგებული პროდუქტის დიდი განლაგების ზემოთ. სექციები ვერტიკალურად არის განლაგებული თანმიმდევრული 64 პიქსელიანი ღარებით, რომლებიც მონაცვლეობით თეთრ ტილოსა და #f5f5f5 ქაღალდის ბუნდოვანებას შორისაა ტონალური გამოყოფისთვის. ქვედა სექცია იყენებს Z-ფორმის განლაგებას: სარედაქციო ტექსტი ცენტრშია შუა მესამედში, ხოლო მცურავი ინტერფეისის ბარათები მიმაგრებულია მარცხენა და მარჯვენა კიდეებზე, რაც ქმნის ასიმეტრიულ, ჟურნალის მსგავს რიტმს. ლოგოს ღრუბელი არის მარტივი 5x2 ბადე, რომელიც ცენტრშია განთავსებული გვერდზე. ნავიგაცია არის მინიმალისტური ზედა ზოლი - ლოგო მარცხნივ, ნავიგაცია ცენტრში, ორი ღილაკის ჯგუფი (მოჩვენება "შესვლა" ღილაკი + შევსებული "რეგისტრაცია" ღილაკი) მარჯვნივ - ფიქსირებული ან მეგამენიუს გარეშე. მთავარი ფანჯრის დაფის განლაგება წარმოაჩენს კლასიკურ ორსვეტიან აპლიკაციის განლაგებას: ფიქსირებული გვერდითი ზოლი (240 პიქსელის მსგავსი) + კონტენტის არე, რომელიც განსაზღვრავს პროდუქტის ინფორმაციის სიმჭიდროვეს ვიზიტორებისთვის, სანამ ისინი გადახვევას დაიწყებენ.
ვიზუალი პროდუქტზეა ორიენტირებული და არა ცხოვრების წესზე. მთავარი ეკრანი ორიენტირებულია დიდი დაფის ეკრანის ანაბეჭდზე, რომელიც წარმოადგენს რეალური პროდუქტის მაკეტს გვერდითი ზოლის ნავიგაციით, მონაცემთა ცხრილით და მცურავი ინტერფეისის ელემენტებით, რომლებიც განლაგებულია თეთრ ტილოზე ბრტყელი პანელის სახით. კლიენტების ლოგოები ნაჩვენებია გაუჯერებელ ნაცრისფერ ბადეში (beehiv, superpower, Chatbase და ა.შ.), რათა აღიარონ მათი სოციალური მედიის მუშაობა, ფერი კი მოკლებულია, რათა გვერდის ერთი ლურჯი აქცენტი დომინანტური დარჩეს. მცურავი პარტნიორის ბარათები (მცირე პროფილები და ფილები შემოსავლის/გადახდის მონაცემებით) გადაადგილდებიან სარედაქციო ტექსტის ბლოკებში ქვედა ნაწილში, რაც ქმნის სიღრმის შეგრძნებას თავად ტექსტზე ჩრდილების გამოყენების გარეშე. წერტილოვანი ბადისებრი ფონის ნიმუში დამახასიათებელი მახასიათებელია: ძალიან დაბალი გამჭვირვალობის მქონე პატარა წერტილების თხელი რიგი ქმნის ტექსტურას და დიზაინის სისტემის/ნახატის ზედაპირის შეგრძნებას, ხაზს უსვამს საიტის პოზიციონირებას, როგორც „თანამედროვე ბმულების ატრიბუციის პლატფორმის“. იკონოგრაფია მინიმალისტურია, კონტურებითა და შევსებებით და იყენებს აქცენტების პალიტრას (მანდარინისფერი ნარინჯისფერი, ლავანდისფერი-იისფერი, პიტნისფერი მწვანე) ფუნქციების თეგებისთვის. არ გამოიყენება ფოტოები, ილუსტრაციები ან 3D მოდელები - პროდუქტის მომხმარებლის ინტერფეისი თავად ვიზუალური ენაა.
პალიტრა
ბრენდი
- Electric Blue
#2563eb— გამოყენებულია ბრენდის ძირითადი ფერი — ლოგო, ბმულები, ძირითადი შესრულების ინდიკატორები, აქტიური მდგომარეობები და ხატულების აქცენტები. სისტემის ერთადერთ ვიზუალურ მიმზიდველობას თეთრ ფონზე მუქი ლურჯი ქმნის. - Deep Sapphire
#1e40af— მოქმედების ღილაკის მთავარი ფონი, მოქმედებისკენ მოწოდების თამამი შევსება — მოქმედების აღმნიშვნელი ერთადერთი ფერი — იშვიათად გამოიყენება ყურადღების მისაპყრობად.
ნეიტრალური
- Canvas White
#ffffff— გვერდის ფონი, ბარათის ზედაპირი, ამომხტარი პანელები ყველა ეკრანის აბსოლუტური საფუძველია. - Paper Mist
#f5f5f5— ჩადგმული ბარათების, დამატებითი პანელების და შევსებების ზედაპირის ფერის დახვეწილი ცვლილებები მაუსის გადატარებისას. - Ash
#e5e5e5— ბარათებზე, შეყვანის კონექტორებსა და გამყოფებზე თხელი საზღვრები სისტემის ერთობლიობაზე დამყარებულ სტრუქტურულ ხაზს წარმოადგენს. - Smoke
#d4d4d4— არჩეული კონტეინერებისთვის უფრო მკვეთრი საზღვრები და ღილაკების დამატებითი კონტურები. - Pebble
#c8c8c8— საშუალო კონტრასტის მქონე საზღვრები, საკონტროლო კონტურები და სტრუქტურული გამყოფები. ეს ფერი არ უნდა იქნას გამოყენებული მოქმედებისკენ მოწოდების ძირითად ფერად. - Midnight Ink
#0a0a0a— ღილაკების ძირითადი ტექსტი, მონიშნული ღილაკები და ნავიგაციის ტექსტი თითქმის შავია მაქსიმალური კონტრასტისთვის.
ტიპოგრაფია
11-დან 48 პიქსელამდე · 9 ნაბიჯი
- Satoshi — ჩანაცვლება: Inter (weight 500 · კონტურები 500 · სათაურების ჩვენება – გამოიყენება მხოლოდ 36–48 პიქსელიან ხაზებში სათაურებისა და სექციების სათაურებისთვის. შრიფტის წონა – 500 (საშუალო, არა მუქი): სათაურები გამოიყურება დამაჯერებლად და თანამედროვედ, მაგრამ არასდროს არის გადაჭარბებული. სატოშის გეომეტრიული პროპორციები შრიფტს ანიჭებს ოდნავ რედაქციულ, თანამედროვე იერსახეს, რომლის რეპლიკაციაც Inter-ის ძირითად ვერსიას არ შეუძლია.
- Inter — ჩანაცვლება: Inter (native) · კონტურები 400, 500, 600 · ძირითადი ტექსტის ასლი, ინტერფეისის ეტიკეტები, ნავიგაცია, ქვესათაურები და მცირე სათაურები. Inter არის მთავარი სამუშაო ძალა, რომელიც ამუშავებს ყველაფერს, 11 პიქსელიანი მიკროეტიკეტებიდან დაწყებული 30 პიქსელიანი მეორადი სათაურებით დამთავრებული. ძირითადი ტექსტის ასლისთვის ნაგულისხმევი წონაა 400, მონიშნული ელემენტებისა და ღილაკების ეტიკეტებისთვის - 500, ხოლო მნიშვნელოვანი ინტერფეისის ეტიკეტებისთვის - 600. 16 პიქსელი 1.5 ხაზის სიმაღლით არის ყველაზე ხშირად გამოყენებული ერთსაფეხურიანი ზომა (1220 შემთხვევა), რაც ადასტურებს, რომ 16 პიქსელი არის ძირითადი ტექსტის ასლის კანონიკური ზომა.
- Geist Mono — ჩანაცვლება: JetBrains Mono or IBM Plex Mono · კონტურები 400, 500 · კოდის ფრაგმენტები, ტექნიკური მეტამონაცემები და ჩაშენებული მონოსაშუალო ტოკენები გამოიყენება 12–14 პიქსელიანი კოდის ბლოკებში და 24 პიქსელიანი კოდის დიდი ზომის ელემენტებში. ეს უზრუნველყოფს დეველოპერის ინსტრუმენტის სანდოობას, რაც შეესაბამება Dub-ის პროდუქტის პოზიციონირებას.
ინტერვალები და ფორმა
| მიზანი | მნიშვნელობა |
|---|---|
| სიმჭიდროვე | საშუალო |
| ძირითადი ნაბიჯი | 8px |
| ღილაკის რადიუსი | 8px |
| ბარათის რადიუსი | 12px |
| ჩრდილები | საზღვრების გარეშე ჩრდილების ნაცვლად |
| სექციებს შორის | 64px |
| გვერდის სიგანე | 1200px |
ხელოვნური ინტელექტი შექმნის თქვენს ვებსაიტს Dub სტილში და შეავსებს მას
- შეავსეთ პროდუქტებითა და პოსტებით ბმულის საშუალებით - Instagram, TikTok, Facebook.
- გადაიტანეთ კონტენტი თქვენი ძველი საიტიდან — უბრალოდ მიუთითეთ მისამართი.
- თანამედროვე დიზაინი საუკეთესო ძრავზე: React ( Next.js) სერვერის რენდერინგით და SEO ოპტიმიზაციით, დაუყოვნებლივ.
- სრულად ავტომატიზირებული SEO ოპტიმიზაცია ძიების შედეგებისა და ნეირონული ქსელის რეკომენდაციებისთვის.
მსგავსი სტილები
- ElevenLabs — ფოტოესე თბილ კრემისფერ ტონებში, დახვეწილი სათაურებით. ბაუჰაუსის სტილის ბლოკნოტი - კვერცხის ნაჭუჭისფერი ქაღალდი, შავი მელანი და ერთი იისფერი და ნარინჯისფერი აქცენტი პროდუქტის საჩვენებლად.
- Awesomic — სარედაქციო თუთიის ბადე ნარინჯისფერი პუნქტუაციის ნიშნებით, რომლებიც კონფეტის მოგვაგონებს
- Monad — სარედაქციო ტექნიკური ჟურნალი თბილ პერგამენტზე
- Seline Analytics — მშვიდი ანალიტიკური მაგიდა თბილ ქაღალდზე
- Notion — თბილი ქაღალდის რვეული შუადღის მზეზე
- Anthropic — სამეცნიერო დარგობრივი ჟურნალი თბილ პერგამენტზე - მშვიდი სპილოს ძვლისფერი ზედაპირები, სერიფიცირებული სარედაქციო სათაურები და ერთი თიხის აქცენტი, რომელიც მხოლოდ მაშინ ჩნდება, როდესაც მოქმედებაა საჭირო.
- Calendly — მუქი ლურჯი მელანი ცივ მარმარილოზე
- Augen Pro — Apple-ის თეთრი პრეზენტაცია მონოქრომულ სივრცეში ერთადერთ აქცენტად კლინიკურ, უწონო, ელექტრო ლურჯ ფერს წარმოადგენს.
- Antimetal — სარედაქციო ქრონიკა კრემისფერ ფურცელზე - მშვიდი დილა სამეცნიერო ჟურნალში, სადაც თავშეკავება თავდაჯერებულობას გამოხატავს და სერიფები მძიმე საქმეს აკეთებენ.
- Perk — ელექტრო ლაიმი თბილ პერგამენტის ქაღალდზე
- Ditto — მზით განათებული სახელოსნო, სადაც ველური ყვავილების ნიმუშები იქმნება. თბილი კრემისფერი ზედაპირები, ნათელი ყვითელი საბაზისო ფერი, მუქი ლურჯი მელანი, ნამუშევრის უკან ორგანული ფერის ფორმები ყვავის.
- Officevibe — სარედაქციო ჟურნალი თბილ კრემისფერ ქაღალდზე. წარმოიდგინეთ ადამიანური რესურსების მენეჯმენტის შესახებ გააზრებული ესე, წარმოდგენილი როგორც პროდუქტი - დახრილი სერიფული შრიფტი, რომელიც ჩურჩულებს თანამედროვე ლურჯ ინტერფეისში.