Allbirds
Naturalne materiały na białym lnie
Czcionka Allbirds emanuje spokojem i naturalną pewnością siebie – niemal całkowicie achromatyczne płótno, uzupełnione ciepłym piaskiem (#e0dacf) i stonowanymi odcieniami ziemi zaczerpniętymi bezpośrednio z fotografii produktowych. Interfejs użytkownika nie zakłóca wrażeń z użytkowania produktu: białe powierzchnie, cienkie obramowania, nawigacja wielkimi literami i elementy sterujące w kształcie pigułek, które bardziej przypominają fizyczne przyciski niż elementy internetowe. W kilku kluczowych momentach wymagających uwagi redakcyjnej – nagłówkach i nazwach kolekcji – użyto czcionki Self Modern (niestandardowej czcionki szeryfowej), natomiast czcionka Geograph została użyta w każdym napisie, tekście głównym i przycisku w trzech zrównoważonych grubościach. Karty kategorii stają się systemem kolorów: każda z nich czerpie odcień tła z prezentowanego produktu, przekształcając nawigację w żywą paletę Pantone.
Maksymalna szerokość to ~1200 px, wyśrodkowana z obfitym marginesem bocznym. Głównym elementem jest pełnoszeroki pasek redakcyjny na ciepłym, piaskowym tle z dużą karuzelą produktów rozchodzącą się promieniście od środka. Nawigacja kategorii to siatka czterech identycznych kart w czterech kolumnach, z których każda zawiera jeden wyśrodkowany model buta. Poniżej linii zagięcia układ naprzemiennie obejmuje pełnoszerokie panele podzielone (zdjęcie lifestylowe po lewej + próbka produktu po prawej) i wyśrodkowane karuzele produktów pod małym, podkreślonym tytułem sekcji. Ogólny rytm jest następujący: pełnoszeroki panel redakcyjny → czterokolumnowa siatka → wyśrodkowana karuzela produktów → dwukolumnowa → wyśrodkowana karuzela produktów. Odstępy między sekcjami wynoszą 40-56 px, tworząc lekkie, ale nie przytłaczające przejścia. Nawigacja to minimalistyczny, stały górny pasek z wyśrodkowanymi linkami głównymi.
Fotografia to cały system wizualny. Wszystkie zdjęcia produktów są robione z bliska, pod niewielkim kątem, na jednolitym tle, które pasuje lub uzupełnia akcent kolorystyczny buta, skutecznie przekształcając każde zdjęcie w studium kolorów. Zdjęcia lifestylowe są wykonane w ciepłych, słonecznych barwach, w naturalnym otoczeniu (pola agawy, drewniane tarasy, nierówny teren), subtelnie stonowane, aby pasowały do stonowanej palety barw. Brak ilustracji, renderów 3D i abstrakcyjnych grafik. We współpracy z Pantone, dosłowna paleta barw została wykorzystana jako element graficzny. Ikonografia jest minimalistyczna i monochromatyczna (ikony konturowe w nawigacji i pozycjach pomocniczych).
Paleta
Neutralny
- Canvas White
#ffffff— Obrazy tła stron, powierzchnie kart, obrazy tła kart produktów. - Charcoal
#212121— Kolor neutralny jest obsługiwany dla drugorzędnych elementów interfejsu użytkownika, separatorów i wyciszonych etykiet. Nie należy go używać jako koloru podstawowego w przypadku wezwań do działania. - True Black
#000000— Nagłówki, ikony, ramki o wysokim kontraście, tekst nawigacyjny. - Warm Sand
#e0dacf— Tło sekcji głównej, dodatkowy cień powierzchni, duże panele redakcyjne. - Olive Char
#222519— Kolor neutralny jest obsługiwany dla drugorzędnych elementów interfejsu użytkownika, separatorów i wyciszonych etykiet. Nie należy go używać jako koloru podstawowego w przypadku wezwań do działania. - Iron Gray
#525252— Tekst wtórny, tekst pomocniczy, dyskretne ramki.
Typografia
od 12 do 40px · 6 kroków
- Self Modern — wymiana: Playfair Display · wytyczne 400 · Nagłówki i artykuły wstępne są stosowane oszczędnie, podkreślając frazy kluczowe i tytuły zbiorów. Czcionki szeryfowe i kursywne przełamują monotonię czcionek bezszeryfowych i przekazują przesłanie: „To jest esencja historii”.
- Geograph — wymiana: Inter · wytyczne 400, 500, 700 · Podstawowa czcionka interfejsu użytkownika obejmuje tekst główny, etykiety nawigacyjne, przyciski, nagłówki produktów, stopki, pola wprowadzania danych i ikony. 500 dla wyróżnionych nagłówków, 700 dla nazw produktów. Szerokie odstępy między literami (0,025–0,10 em) w wielkich literach w etykietach nawigacyjnych i kategoriach zapewniają spójny styl marki.
- HurmeGeometricSans3 — wymiana: Inter · wytyczne 400 · Rzadko używany jako zapasowy lub dedykowany znacznik dla przycisku. Geograph korzysta z tego systemu codziennie.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8-16px |
| Promień przycisku | 9999px (pill) |
| Promień karty | 16px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 40-56px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Allbirds i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Lightship — Kinowa diorama otwartej drogi. Ciepłe, kremowe ściany galerii zdobią duże zdjęcia krajobrazów umieszczone w krótkich odstępach, cienka czarna czcionka ledwo widoczna na ramach i pojedynczy, jaskrawopomarańczowy akcent przełamujący monochromatyczność niczym ognisko na łące.
- Faire ES — hurtowy katalog kremów rozgrzewających
- Adanola — Lookbook redakcyjny na białym papierze. Sesja zdjęciowa, w której typografia i fotografia tchną życie na czystych, białych powierzchniach, z czarnym tuszem jako krój pisma i subtelną, charakterystyczną czcionką bezszeryfową (Favorit), odzwierciedlającą ogólny styl marki.
- Oura Ring — Przytulny warsztat robienia owsianki, skąpany w łagodnym świetle dziennym
- Stykka — Skandynawska pracownia w białym świetle – cichy, rękodzielniczy showroom, w którym jedynym głosem jest fotografia
- DJI — czarne płótno lotnicze z pojedynczym elektrycznoniebieskim akcentem
- Altitude Beverages — Monochromatyczna rozkładówka magazynu. Wyobraź sobie rozkładówkę magazynu modowego pozbawioną wszelkich kolorów poza nieruchomymi zdjęciami – tekst i biała przestrzeń opowiadają całą historię.
- AATHER — Otwarta dłoń, pojedynczy płomień – cichy luksus zawarty w ciszy
- Cowboy — Belgijska galeria rowerów w śnieżnobiałej porcelanowej oprawie. Salon wystawowy, w którym matowe powierzchnie, duże czcionki używane w materiałach redakcyjnych i praktycznie brak dekoracji przyciągają wzrok do roweru i jego zawartości.
- Refero — Układ redakcyjny na białym marmurze – strona produktu stworzona przez typografa, gdzie nagłówek szeryfowy jest wizytówką marki, a wszystko inne jest dyskretne
- Face Formula — Skandynawski portret redakcyjny. Spokojna rozkładówka w stylu magazynu, gdzie spojrzenie modelki i nagłówek, napisany zwartą czcionką szeryfową, mówią same za siebie na chłodnym, mglistym tle.
- Shupatto — Gablota muzealna z białego marmuru