Vercel
თეთრ ქაღალდზე დაბეჭდილი ტერმინალი
Vercel-ის დიზაინის სისტემა დისციპლინირებული მონოქრომული ბეჭდვის სავარჯიშოა: თითქმის თეთრი ტილო (#fafafa), შავი შრიფტი, თხელი საზღვრები და დეკორატიული ფერის სრული არარსებობა. ვიზუალური ენა დეველოპერის ტერმინალს მოგვაგონებს, რომელიც დაბეჭდილი სახით არის წარმოდგენილი - Geist Sans ძლივს იკითხება „გმირული“ მასშტაბით 400-450 წონით და -0.06em ასოებს შორის ინტერვალით, ხოლო Geist Mono იარლიყებს, მეტამონაცემებს და კოდის ნიმუშებს 11-13 პიქსელიანი დიდი ზომის შრიფტებით იყენებს. ღილაკები არის მკვეთრი 6 პიქსელიანი რადიუსით ან თეთრზე სუფთა შავი ან შავზე თეთრი მართკუთხედები. სისტემა ფერზე მეტად კონტრასტსა და ტიპოგრაფიულ იერარქიაზეა დამოკიდებული, სამკუთხა ნიშანს (▲) და ორსტრიქონიან სასაქონლო ნიშანს ერთადერთ ბრენდინგულ ელემენტებად იყენებს. ზედაპირები ერთმანეთზეა დაწყობილი შემდეგი თანმიმდევრობით #fafafa → #ebebeb → #171717, რაც სიღრმეს ქმნის ტონალური მნიშვნელობების შეცვლით და არა ჩრდილის ან ფერის. თითოეული ელემენტი აგებულია 4 პიქსელიან ბადეზე კომპაქტური სიმკვრივით, რაც იწვევს ინტერფეისის შექმნას, რომელიც ინჟინრის რვეულს მოგაგონებთ - ზუსტი, ფუნქციონალური და თეთრი სივრცის არეში შიშის გარეშე.
კონტეინერი 1280 პიქსელის სიგანისაა, ცენტრშია განთავსებული და დიდი ჰორიზონტალური შევსებითაა (24-48 პიქსელი). მთავარი ბლოკი იყენებს ასიმეტრიულ სამზონიან კომპოზიციას: მარცხნივ დიდი სათაური, ცენტრში ბრენდის გლიფი და მარჯვნივ „წარბის“ ბლოკი. მთავარი ბლოკის ქვემოთ, კონტენტი განლაგებულია მონაცვლეობითი ზოლებით: სრული სიგანის ზოლი კლიენტის ლოგოთი, შემდეგ ორსვეტიანი „აგენტის შემქმნელების“ განყოფილება მარცხნივ სათაურით და მარჯვნივ პროდუქტის განლაგებით, რასაც მოჰყვება სამი ბარათისგან შემდგარი ბადე ფუნქციებით. სექციები გამოყოფილია 96-128 პიქსელის ვერტიკალური ღარებით, გამყოფების ან ფონის ოფსეტების გარეშე. ნავიგაცია არის ერთი ფიქსირებული 64 პიქსელიანი პანელი ბუნდოვანი ფონით. ბარათების ბადეები მუდმივად იყენებენ ორ ან სამსვეტიან განლაგებას 16-24 პიქსელიანი ღარებით. საერთო სიმჭიდროვე კომპაქტურია - ტექსტი ადვილად იკითხება, არის საკმარისი თეთრი სივრცე, მაგრამ შრიფტის ზომა და კომპონენტების ზომები ხელს უშლის გვერდის ჰაეროვან იერს.
სურათები მეჩხერია და ყოველთვის ფუნქციონალურია. მთავარი ვიზუალური ელემენტია შავი სამკუთხედი (▲) - გეომეტრიული ბრენდის ნიშანი, რომელიც „დიდი“ მასშტაბით მოძრავი სილუეტის სახით ჩნდება. კონცეფციის დამადასტურებელ ზოლზე კლიენტის ლოგოები თითოეული ბრენდის რეალურ სასიტყვო ნიშნებს ნაცრისფერი ტონალობის მიხედვით იყენებენ. პროდუქტის მაკეტები (Notion-ის ჩატის ინტერფეისი, CLI ტერმინალის გამომავალი, პასპორტის ბარათი) ჩარჩოში ჩასმულ ბარათებში ღია რეჟიმის ეკრანის ანაბეჭდების სახითაა ჩასმული. არ არსებობს ფოტოსურათები, ილუსტრაციები ან 3D ელემენტები - სისტემა სუფთა ტიპოგრაფია და გეომეტრიული ფორმებია თეთრ ქაღალდზე.
პალიტრა
ნეიტრალური
- Obsidian
#171717— მთავარი სათაურები, ნავიგაციის საზღვრები, მუქი ღილაკების შევსება და სიის მარკერები თითქმის შავია, რაც თავიდან აიცილებს უხეშობას და მკვეთრ გაჯერებას. - Paper White
#fafafa— გვერდის ტილო, ბარათის ზედაპირები, ღილაკების მსუბუქი შევსება - ეს არის სტანდარტული ფონი, რომელზეც ყველაფერი დანარჩენი მდებარეობს. - Pure White
#ffffff— ამაღლებული ბარათის ზედაპირები, ჩანართები, შეყვანის ველები. - Hairline
#ebebeb— ღილაკების, ბმულების და ბარათების 1 პიქსელის საზღვრები ხილულია მაღალი მასშტაბირებისას, მაგრამ უხილავია დაბალი მასშტაბირებისას. - Ash
#c9c9c9— გამორთული ტექსტი, დადუმებული ეტიკეტები, ბრენდის სახელის ჭვირნიშნები კლიენტის ლოგოებში. - Smoke
#a8a8a8— მეორადი ტექსტი, ჩანაცვლების ველის ტექსტი, ხატულას დახვეწილი შევსება.
ტიპოგრაფია
11-დან 64 პიქსელამდე · 6 ნაბიჯი
- Geist Sans — ჩანაცვლება: Inter · კონტურები 400, 450, 500 · ინტერფეისისა და სათაურებისთვის ძირითადი შრიფტი არის Vercel-ის სპეციალურად შექმნილი გეომეტრიული sans-serif შრიფტი, დიდი ზომის სათაურებისთვის ასოებს შორის მცირე დაშორებით (-0.06em 56-64 პიქსელზე, -0.05em 30 პიქსელზე). გვერდის ზედა ნაწილში განთავსებული სათაურებისთვის შეირჩა 450 წონა: უფრო სქელი ვიდრე Light, მაგრამ უფრო მსუბუქი ვიდრე Semi-Bold, რაც ქმნის თავდაჯერებულ, თუმცა არა ზედმეტად მკაცრ ტონს.
- Geist Mono — ჩანაცვლება: JetBrains Mono · კონტურები 400, 500, 600 · მონოსაირისებრი მეორადი შრიფტი წარწერების, კოდის ბლოკების, CLI გამომავალი პანელების, მეტამონაცემების და დიდი ასოებით ტექსტისთვის. 8px/600px/დიდი ასოების კომბინაცია საშუალებას იძლევა პაწაწინა სასაუბრო ნიშნების ზუსტად განთავსდეს. მონოსაირისებრ ვერსიაში ასოებს შორის ფართო ინტერვალი (0.071em) საკმარის ადგილს უზრუნველყოფს დიდი ასოებით ტექსტისთვის.
ინტერვალები და ფორმა
| მიზანი | მნიშვნელობა |
|---|---|
| სიმჭიდროვე | მკვრივი |
| ძირითადი ნაბიჯი | 12px |
| ღილაკის რადიუსი | 6px |
| ბარათის რადიუსი | 6px |
| ჩრდილები | საზღვრების გარეშე ჩრდილების ნაცვლად |
| სექციებს შორის | 96-128px |
| გვერდის სიგანე | 1280px |
ხელოვნური ინტელექტი შექმნის თქვენს ვებსაიტს Vercel სტილში და შეავსებს მას
- შეავსეთ პროდუქტებითა და პოსტებით ბმულის საშუალებით - Instagram, TikTok, Facebook.
- გადაიტანეთ კონტენტი თქვენი ძველი საიტიდან — უბრალოდ მიუთითეთ მისამართი.
- თანამედროვე დიზაინი საუკეთესო ძრავზე: React ( Next.js) სერვერის რენდერინგით და SEO ოპტიმიზაციით, დაუყოვნებლივ.
- სრულად ავტომატიზირებული SEO ოპტიმიზაცია ძიების შედეგებისა და ნეირონული ქსელის რეკომენდაციებისთვის.
მსგავსი სტილები
- Headspace — მზიანი ველნეს კუთხე თბილ ქაღალდზე
- WHOOP — შუაღამისას საშემსრულებლო ლაბორატორია - თეთრი კლინიკური ლაბორატორიის მაგიდები შავი თეატრალური სიცარიელის ქვეშ, ელექტროენერგიის ერთი იისფერი იმპულსი.
- Together AI — კვლევითი კონსოლი მყინვარულ ქაღალდზე
- v0 by Vercel — ხრახნით შესრულებული ნახაზი. სიზუსტე და ფუნქციონალურობა უმნიშვნელოვანესია, თითოეული ელემენტი კი სუფთა, ტექნიკურად იდეალურ ზედაპირზე მკაფიო დანიშნულებას ემსახურება.
- Dovetail — შავი მთვარის ქვეშ ნახაზები - ძლივს შესამჩნევი გრაფიკული ხაზები, თეთრი შრიფტი, ერთი იისფერი ნაპერწკალი
- Glideapps — მონოქრომული საწერი მაგიდა ერთი ელექტრო ფირუზისფერი ნაპერწკლით
- Timescale — საინჟინრო ნახატი თბილ გრაფიკულ ქაღალდზე
- UGLYCASH — კრემისფერ ქაღალდზე დაბეჭდილი სტიკერებით დაფარული ბლოკნოტი თამამი, მაქსიმალისტური ფინტექის ატმოსფეროს ასხივებს, რომელიც ამაყად აჩვენებს თავის ქაოსს.
- Sprout Social — მწვანე ყლორტი შავ ფიქალზე. ერთი ნათელი აქცენტი მკაცრ მონოქრომულ ტილოზე, რომლის ფერიც მხოლოდ მოქმედებისთვისაა გამოყენებული, თავდაჯერებული გეომეტრიული შრიფტი კი საორიენტაციო ნიშნების როლს ასრულებს.
- Krea — გალერეა ნუარი შუაღამისას
- Evergreen — მზის სათბური სელის ქაღალდზე
- Factory — „საომარი ოთახის“ ტერმინალი შუაღამისას. „ქარხანა“ შავი ფერის საკონტროლო პანელია, სადაც ერთი თეთრი ბარათი ფანრით განათებული დისპეტჩერის მსგავსად ხვდება - ოთახში ერთადერთი ობიექტი თავად სამუშაოა.