Allbirds
Ак җитен өстендәге табигый материаллар
Allbirds тыныч, табигый ышаныч белән эшли - тулысынча диярлек ахроматик полотно, җылы ком (#e0dacf) һәм продукт фотосурәтләреннән турыдан-туры алынган тонык җир төсләре белән тулыландырылган. Кулланучы интерфейсы продукт тәҗрибәсенә комачауламый: ак өслекләр, нечкә чикләр, зур хәрефләр белән навигация һәм веб-элементларга караганда физик төймәләр кебек тоелган таблетка формасындагы идарә итү элементлары. Self Modern (махсус сериф шрифты) редакция игътибарын таләп итә торган берничә мөһим мизгел өчен кулланыла - исемнәр һәм коллекция исемнәре - ә Geograph һәр хәреф, төп текст һәм төймә өчен өч тигез авырлыкта кулланыла. Категория карталары төс системасына әйләнә: һәрберсе күрсәтелгән продукттан үзенең фон төсен ала, навигацияне тере Pantone палитрасына әйләндерә.
Максималь киңлек ~1200 пиксель, уртасында киң ян-яклары белән бизәлгән. Төп элемент - җылы ком фонда тулы киңлектәге редакция полосасы, үзәктән зур продукт каруселы чыгып тора. Категория навигациясе - дүрт баганадагы дүрт бер үк төстәге карточкадан торган челтәр, һәрберсендә бер үзәктә урнашкан аяк киеме моделе. Бөкләнеш астында, макет тулы киңлектәге бүленгән панельләр (сулда яшәү рәвеше фотосы + уңда продукт үрнәге) һәм кечкенә, астына сызылган бүлек исеме астында үзәктә урнашкан продукт карусельләре арасында чиратлаша. Гомуми ритм: тулы киңлектәге редакция панеле → дүрт баганалы челтәр → үзәктә урнашкан продукт каруселы → ике баганалы бүленгән → үзәктә урнашкан продукт каруселы. Бүлекләр арасындагы ара 40-56 пиксель, һавалы, ләкин артык күчешләр тудырмый. Навигация - үзәктә урнашкан төп сылтамалары булган минималист, фиксацияләнгән өске панель.
Фотография - ул бөтен визуаль система. Барлык продукт фотолары да якыннан, бераз почмактан, аяк киеменең төсенә туры килә торган яки аны тулыландыра торган ныклы фонга төшерелгән, бу һәр фотоны төсләрне өйрәнүгә әйләндерә. Тормыш рәвеше фотолары җылы, кояшлы төсләрдә, табигый шартларда (агава кырлары, агач террасалар, тупас җирләр) төшерелгән, тонык палитрага туры килерлек итеп нечкә итеп сүндерелгән. Иллюстрацияләр, 3D рендерлар, абстракт графика юк. Pantone белән хезмәттәшлектә, график элемент буларак, туры мәгънәдәге төс палитрасы кулланыла. Иконография минималист һәм монохром (навигациядә һәм ярдәмче позицияләрдә контур иконкалары).
Палитра
Нейтраль
- Canvas White
#ffffff— Бит фон рәсемнәре, карточка өслекләре, продукт карточкасы фон рәсемнәре. - Charcoal
#212121— Икенчел UI элементлары, бүлгечләр һәм тавышсыз ярлыклар өчен нейтраль төс кулланыла. Аны гамәл чакырулары өчен төп төс итеп кулланырга ярамый. - True Black
#000000— Башлыклар, иконалар, югары контрастлы кадрлар, навигация тексты. - Warm Sand
#e0dacf— Төп өлешнең фоны, өстәмә өслек күләгәсе, зур редакция панельләре. - Olive Char
#222519— Икенчел UI элементлары, бүлгечләр һәм тавышсыз ярлыклар өчен нейтраль төс кулланыла. Аны гамәл чакырулары өчен төп төс итеп кулланырга ярамый. - Iron Gray
#525252— Икенчел текст, ярдәмче текст, күзгә ташланмый торган кадрлар.
Типография
12 дән 40 пиксельгә кадәр · 6 адым
- Self Modern — алыштыру: Playfair Display · контурлар 400 · Башлыклар һәм редакция мәкаләләре сирәк кулланыла, төп фразаларны һәм җыентык исемнәрен ассызыклый. Сериф һәм курсив шрифтлар санс-сериф шрифтларының бертөрлелеген җимерә һәм "Бу хикәянең асылы" дигән фикерне җиткерә.
- Geograph — алыштыру: Inter · контурлар 400, 500, 700 · Кулланучы интерфейсы өчен төп шрифт текст, навигация ярлыклары, төймәләр, продукт исемнәре, аскы колонтитуллар, кертү кырлары һәм иконкаларны үз эченә ала. Ачыкланган исемнәр өчен 500, продукт исемнәре өчен 700. Навигация ярлыкларында һәм категорияләрендә баш хәрефләр белән язылган киң хәреф аралыгы (0.025em–0.10em) бренд стилен билгели.
- HurmeGeometricSans3 — алыштыру: Inter · контурлар 400 · Төймә өчен резерв яки махсус ярлык буларак сирәк кулланыла. Geograph бу системаны көн саен куллана.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | тыгыз |
| Төп адым | 8-16px |
| Төймә радиусы | 9999px (pill) |
| Карта радиусы | 16px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 40-56px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Allbirds стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- Lightship — Ачык юлның кинематографик диорамасы. Зур пейзаж фотосурәтләре белән бизәлгән җылы каймак төсендәге галерея стеналары, рамнарда бик аз күренә торган нечкә кара шрифтлар һәм болындагы учак кебек монохромны җимерә торган бердәнбер ачык кызгылт сары төстәге акцент.
- Faire ES — җылы каймакның күпләп сату каталогы
- Adanola — Ак кәгазьдәге редакция лоокбугы. Типография һәм фотография чиста ак өслекләрдә сулыш ала торган мода фотосессиясе, шрифт өчен кара кара һәм брендның гомуми стилен чагылдырган нечкә имзалы sans-serif шрифты (Favorit).
- Oura Ring — Йомшак көн яктысында җылы солы боткасы ясау остаханәсе
- Stykka — Ак яктылыкта Скандинавия остаханәсе – тыныч, кулдан эшләнгән күргәзмә залы, анда бердәнбер тавыш – фотография
- DJI — бер электр зәңгәр төстәге яктырткычлы аэрокосмик кара төстәге холст
- Altitude Beverages — Монохром журналлар өчен тышлык. Мода журналлары өчен тышлыкның фоторәсемнәрдән кала барлык төсләреннән дә мәхрүм ителгәнен күз алдыгызга китерегез - текст һәм ак бушлык бөтен тарихны сөйли.
- AATHER — Ачык уч, бер ялкын - тынлыкта сакланган тыныч ләззәт
- Cowboy — Кар кебек ап-ак фарфор бизәлгән Бельгия велосипед галереясе. Күргәзмә залында мат өслекләр, редакция материалларында кулланылган зур шрифтлар һәм бизәкнең бөтенләй булмавы игътибарны велосипедка һәм аның эчтәлегенә җәлеп итә.
- Refero — Ак мәрмәрдә редакция макеты - типограф тарафыннан төзелгән продукт бите, анда serif баш тамгасы брендның визит карточкасы булып тора, ә калганнары күзгә ташланмый.
- Face Formula — Скандинавия редакция портреты. Тыныч, журнал стилендәге рәсем, анда модельнең карашы һәм кыскартылган сериф шрифты белән язылган исем салкын, томанлы фонда үзләре өчен сөйли.
- Shupatto — Ак мәрмәрдә музей витриналары