Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukdeveloperPagbuo ng mga kagamitang AI para sa mga negosyo. Mataas ang kalidad. Abot-kaya.Mag-chat sa Telegram
Allbirds — isang preview ng isang site sa ganitong istilo

Allbirds

Mga likas na materyales sa puting linen

Ang Allbirds ay gumagana nang may kalmado at natural na kumpiyansa—isang halos ganap na achromatic canvas, na kinukumpleto ng maligamgam na buhangin (#e0dacf) at mga muted earth tone na direktang kinuha mula sa potograpiya ng produkto. Hindi nakakasagabal ang user interface sa karanasan ng produkto: mga puting ibabaw, manipis na mga border, all-caps na nabigasyon, at mga kontrol na hugis-pill na mas parang mga pisikal na buton kaysa sa mga elemento ng web. Ang Self Modern (isang custom serif font) ay ginagamit para sa ilang mahahalagang sandali na nangangailangan ng atensyon ng editoryal—mga headline at pangalan ng koleksyon—habang ang Geograph ay ginagamit para sa bawat letra, body copy, at buton sa tatlong balanseng timbang. Ang mga category card ay nagiging isang sistema ng kulay: ang bawat isa ay kumukuha ng kulay ng background mula sa itinatampok na produkto, na ginagawang isang buhay na Pantone palette ang nabigasyon.

Ang pinakamataas na lapad ay ~1200px, nakasentro na may malawak na padding sa gilid. Ang pangunahing elemento ay isang full-width editorial strip sa isang mainit na background na buhangin na may malaking product carousel na nagmumula sa gitna. Ang nabigasyon ng kategorya ay isang grid ng apat na magkaparehong kulay na card sa apat na column, bawat isa ay naglalaman ng isang nakasentrong modelo ng sapatos. Sa ibaba ng fold, ang layout ay nagpapalitan sa pagitan ng full-width split panels (lifestyle photo sa kaliwa + product sample sa kanan) at nakasentrong product carousels sa ilalim ng isang maliit at may salungguhit na pamagat ng seksyon. Ang pangkalahatang ritmo ay: full-width editorial panel → four-column grid → centered product carousel → two-column split → centered product carousel. Ang pagitan sa pagitan ng mga seksyon ay 40-56px, na lumilikha ng maaliwalas ngunit hindi nakakapanghinang mga transition. Ang nabigasyon ay isang minimalist, nakapirming top bar na may nakasentrong pangunahing mga link.

Ang potograpiya ang buong sistemang biswal. Lahat ng kuha ng produkto ay malapitan, mula sa bahagyang anggulo, laban sa isang matibay na background na tumutugma o kumukumpleto sa kulay ng sapatos, na epektibong ginagawang isang pag-aaral ng kulay ang bawat larawan. Ang mga larawan ng pamumuhay ay kinunan sa mainit at maaraw na mga kulay, sa mga natural na setting (mga bukid ng agave, mga deck na gawa sa kahoy, magaspang na lupain), banayad na pinatahimik upang tumugma sa pinatahimik na paleta. Walang mga ilustrasyon, walang 3D render, walang abstract graphics. Sa pakikipagtulungan sa Pantone, ang literal na paleta ng kulay ay ginagamit bilang isang elementong grapiko. Ang ikonograpiya ay minimalista at monochrome (mga outline icon sa nabigasyon at mga pantulong na posisyon).

Paleta

Neutral

  • Canvas White #ffffff — Mga larawan sa background ng pahina, mga ibabaw ng card, mga larawan sa background ng product card.
  • Charcoal #212121 — Sinusuportahan ang neutral na kulay para sa mga pangalawang elemento ng UI, mga divider, at mga naka-mute na label. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
  • True Black #000000 — Mga heading, icon, mga frame na may mataas na contrast, teksto ng nabigasyon.
  • Warm Sand #e0dacf — Pangunahing bahagi ng background, karagdagang lilim sa ibabaw, malalaking panel ng editoryal.
  • Olive Char #222519 — Sinusuportahan ang neutral na kulay para sa mga pangalawang elemento ng UI, mga divider, at mga naka-mute na label. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
  • Iron Gray #525252 — Pangalawang teksto, pantulong na teksto, mga hindi nakakasagabal na balangkas.

Tipograpiya

mula 12 hanggang 40px · 6 na hakbang

  • Self Modern — kapalit: Playfair Display · mga balangkas 400 · Ang mga headline at editoryal ay ginagamit nang matipid, na nagtatampok ng mga pangunahing parirala at pamagat ng koleksyon. Ang mga serif at italic na typeface ay nagbubuwag sa monotony ng mga sans-serif na typeface at naghahatid ng mensahe: "Ito ang esensya ng kuwento."
  • Geograph — kapalit: Inter · mga balangkas 400, 500, 700 · Ang pangunahing font para sa user interface ay kinabibilangan ng body text, mga navigation label, mga button, mga heading ng produkto, mga footer, mga input field, at mga icon. 500 para sa mga naka-highlight na heading, 700 para sa mga pangalan ng produkto. Ang malawak na espasyo sa pagitan ng mga letra (0.025em–0.10em) sa malalaking titik sa mga navigation label at kategorya ay nagtatatag ng isang pare-parehong istilo ng brand.
  • HurmeGeometricSans3 — kapalit: Inter · mga balangkas 400 · Bihirang gamitin bilang backup o nakalaang label para sa isang buton. Ginagamit ng Geograph ang sistemang ito araw-araw.

Mga pagitan at anyo

LayuninKahulugan
Densidadsiksik
Pangunahing hakbang8-16px
Radius ng buton9999px (pill)
Radius ng card16px
Mga aninowalang - mga hangganan sa halip na mga anino
Sa pagitan ng mga seksyon40-56px
Lapad ng pahina1200px

Gagawa ang AI ng website mo sa estilong Allbirds at pupunuin ito

  • Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
  • Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
  • Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
  • Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.

Mga katulad na estilo

  • Lightship — Isang sinematikong diorama ng malawak na kalsada. Mainit at kremang mga dingding ng gallery na pinalamutian ng malalaking litrato ng tanawin na nakakabit nang malapitan, manipis na itim na tipo na halos hindi makita sa mga frame, at isang matingkad na kulay kahel na accent na bumabasag sa monochrome na parang siga sa parang.
  • Faire ES — pakyawan na katalogo ng mainit na cream
  • Adanola — Isang editorial lookbook sa puting papel. Isang fashion shoot kung saan ang tipograpiya at potograpiya ay umiihip sa malinis at puting mga ibabaw, gamit ang itim na tinta para sa typeface at isang banayad na signature sans-serif font (Favorit), na sumasalamin sa pangkalahatang istilo ng brand.
  • Oura Ring — Isang maginhawang workshop sa paggawa ng oatmeal, na naliligo sa banayad na liwanag ng araw
  • Stykka — Isang Scandinavian workshop sa puting liwanag – isang tahimik at gawang-kamay na showroom kung saan ang tanging boses ay potograpiya
  • DJI — Itim na canvas na pang-eroplano na may iisang electric blue na highlight
  • Altitude Beverages — Kalat sa magasin na may kulay na monochrome. Isipin ang isang kalat sa magasin ng fashion na walang kulay maliban sa mga litrato—ang teksto at puting espasyo ang nagsasabi ng buong kwento.
  • AATHER — Isang bukas na palad, isang nag-iisang apoy - isang tahimik na luho na nakapaloob sa katahimikan
  • Cowboy — Isang galeriya ng bisikleta mula sa Belgium na may mala-niyebeng puting porselana. Isang showroom kung saan ang mga matte na ibabaw, malalaking font na ginamit sa mga materyales ng editoryal, at halos kawalan ng dekorasyon ay umaakit sa atensyon ng bisikleta at sa mga laman nito.
  • Refero — Layout ng editoryal sa puting marmol - isang pahina ng produkto na nilikha ng isang typographer, kung saan ang serif headline ang calling card ng brand, at ang lahat ng iba pa ay hindi nakakaabala
  • Face Formula — Isang larawang editoryal na Scandinavian. Isang kalmadong istilong magasin, kung saan ang tingin ng modelo at ang headline, na nakasulat sa isang pinaikling serif font, ay nagsasalita para sa kanilang sarili laban sa isang malamig at malabong backdrop.
  • Shupatto — Kahon ng eksibit ng museo na gawa sa puting marmol