Allbirds
Oq zig'ir matosidagi tabiiy materiallar
Allbirds xotirjam va tabiiy ishonch bilan ishlaydi — deyarli butunlay achromatik tuval boʻlib, toʻgʻridan-toʻgʻri mahsulot fotosuratlaridan olingan iliq qum (#e0dacf) va xira tuproq ranglari bilan toʻldiriladi. Foydalanuvchi interfeysi mahsulot tajribasiga xalaqit bermaydi: oq yuzalar, yupqa chegaralar, hamma katta harflar bilan navigatsiya va veb-elementlarga qaraganda koʻproq jismoniy tugmalarga oʻxshab koʻrinadigan tabletka shaklidagi boshqaruv elementlari. Self Modern (maxsus serif shrift) tahririyat eʼtiborini talab qiladigan bir nechta muhim daqiqalar — sarlavhalar va toʻplam nomlari — uchun ishlatiladi, Geograph esa har bir harf, asosiy matn va tugma uchun uchta muvozanatli vaznda ishlatiladi. Kategoriya kartalari rang tizimiga aylanadi: har biri oʻzining fon rangini tanlangan mahsulotdan oladi va navigatsiyani jonli Pantone palitrasiga aylantiradi.
Maksimal kenglik ~1200px bo'lib, markazda keng yon qoplama bilan qoplangan. Asosiy element - bu iliq qum fonida to'liq kenglikdagi tahririy chiziq bo'lib, markazdan katta mahsulot karuseli chiqadi. Kategoriya navigatsiyasi to'rtta ustunda joylashgan to'rtta bir xil rangli kartalardan iborat panjara bo'lib, ularning har biri bitta markazlashtirilgan poyabzal modelini o'z ichiga oladi. Buklama ostida, maket to'liq kenglikdagi bo'lingan panellar (chapda turmush tarzi fotosurati + o'ngda mahsulot namunasi) va kichik, tagiga chizilgan bo'lim sarlavhasi ostida markazlashtirilgan mahsulot karuseli o'rtasida almashinadi. Umumiy ritm quyidagicha: to'liq kenglikdagi tahririy panel → to'rt ustunli panjara → markazlashtirilgan mahsulot karuseli → ikki ustunli bo'lingan → markazlashtirilgan mahsulot karuseli. Bo'limlar orasidagi masofa 40-56px bo'lib, havodor, ammo ortiqcha o'tishlarni yaratmaydi. Navigatsiya - bu markazlashtirilgan asosiy havolalarga ega minimalist, mahkamlangan yuqori panel.
Fotografiya butun vizual tizimdir. Mahsulotning barcha suratlari yaqin masofadan, ozgina burchak ostida, poyabzalning urg'u rangiga mos keladigan yoki uni to'ldiruvchi mustahkam fonda olingan bo'lib, har bir fotosuratni samarali ravishda ranglarni o'rganishga aylantiradi. Turmush tarzi fotosuratlari iliq, quyoshli tuslarda, tabiiy sharoitlarda (agava dalalari, yog'och teraslar, notekis yerlar), xira palitraga mos kelish uchun nozik tarzda xiralashtirilgan. Hech qanday illyustratsiya, 3D renderlar, mavhum grafikalar yo'q. Pantone bilan hamkorlikda grafik element sifatida so'zma-so'z ranglar palitrasi qo'llaniladi. Ikonografiya minimalist va monoxrom (navigatsiya va yordamchi pozitsiyalardagi kontur piktogrammalari).
Palitra
Neytral
- Canvas White
#ffffff— Sahifa fon rasmlari, karta yuzalari, mahsulot karta fon rasmlari. - Charcoal
#212121— Neytral rang ikkilamchi UI elementlari, ajratgichlar va ovozsiz yorliqlar uchun qo'llab-quvvatlanadi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - True Black
#000000— Sarlavhalar, piktogrammalar, yuqori kontrastli freymlar, navigatsiya matni. - Warm Sand
#e0dacf— Asosiy qism foni, qo'shimcha sirt soyasi, katta tahririy panellar. - Olive Char
#222519— Neytral rang ikkilamchi UI elementlari, ajratgichlar va ovozsiz yorliqlar uchun qo'llab-quvvatlanadi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Iron Gray
#525252— Ikkilamchi matn, yordamchi matn, sezilmaydigan kadrlar.
Tipografiya
12 dan 40 pikselgacha · 6 qadam
- Self Modern — almashtirish: Playfair Display · konturlar 400 · Sarlavhalar va tahririyat maqolalari kamdan-kam hollarda qo'llaniladi, asosiy iboralar va to'plam nomlarini ta'kidlaydi. Serif va kursiv shriftlar sans-serif shriftlarining monotonligini buzadi va "Bu hikoyaning mohiyati" degan xabarni yetkazadi.
- Geograph — almashtirish: Inter · konturlar 400, 500, 700 · Foydalanuvchi interfeysi uchun asosiy shrift asosiy matn, navigatsiya yorliqlari, tugmalar, mahsulot sarlavhalari, altbilgilar, kiritish maydonlari va piktogrammalarni o'z ichiga oladi. Belgilangan sarlavhalar uchun 500, mahsulot nomlari uchun 700. Navigatsiya yorliqlari va kategoriyalarida bosh harflar bilan yozilgan keng harflar oralig'i (0.025em–0.10em) izchil brend uslubini yaratadi.
- HurmeGeometricSans3 — almashtirish: Inter · konturlar 400 · Kamdan-kam hollarda tugma uchun zaxira yoki maxsus yorliq sifatida ishlatiladi. Geograph ushbu tizimdan har kuni foydalanadi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | zich |
| Asosiy qadam | 8-16px |
| Tugma radiusi | 9999px (pill) |
| Karta radiusi | 16px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 40-56px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Allbirds uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- Lightship — Ochiq yo'lning kinematografik dioramasi. Yaqin masofalarda o'rnatilgan katta landshaft fotosuratlari bilan bezatilgan issiq krem rangli galereya devorlari, ramkalarda zo'rg'a ko'rinadigan yupqa qora shrift va o'tloqdagi gulxan kabi monoxromni buzadigan bitta yorqin to'q sariq aksent.
- Faire ES — issiq qaymoqning ulgurji katalogi
- Adanola — Oq qog'ozga yozilgan tahririyat lookbooki. Tipografiya va fotosuratlar toza oq yuzalarda nafas oladigan moda fotosessiyasi, shrift uchun qora siyoh va brendning umumiy uslubini aks ettiruvchi nozik imzo sans-serif shrifti (Favorit).
- Oura Ring — Kunduzgi yorug'likda cho'milgan shinam jo'xori uni tayyorlash ustaxonasi
- Stykka — Oq yorug'likdagi Skandinaviya ustaxonasi – sokin, qo'lda ishlangan ko'rgazma zali, bu yerda faqat ovoz fotografiyadir.
- DJI — bitta elektr ko'k rangli yorqinlik bilan aerokosmik qora tuval
- Altitude Beverages — Monoxrom jurnal qog'ozi. Moda jurnal qog'ozining barcha ranglari yo'qolganini tasavvur qiling, faqat fotosuratlardan tashqari - matn va oq bo'shliq butun voqeani hikoya qiladi.
- AATHER — Ochiq kaft, bitta alanga - sukunatda yashiringan sokin hashamat
- Cowboy — Qor-oq chinni bezakdagi Belgiya velosiped galereyasi. Mat yuzalar, tahririyat materiallarida ishlatiladigan katta shriftlar va bezaklarning deyarli yo'qligi velosiped va uning ichidagi narsalarga e'tibor qaratadigan ko'rgazma zali.
- Refero — Oq marmar ustidagi tahririyat maket - tipograf tomonidan yaratilgan mahsulot sahifasi, bu yerda serif sarlavhasi brendning tashrif qog'ozi bo'lib, qolgan hamma narsa ko'zga tashlanmaydi.
- Face Formula — Skandinaviya tahririyat portreti. Jurnal uslubidagi xotirjam portret, unda modelning nigohi va qisqartirilgan serif shriftida yozilgan sarlavha salqin, tumanli fonda o'zi uchun gapiradi.
- Shupatto — Oq marmar ustidagi muzey vitrinasi