Airbnb
Cicha, biała ściana galerii z pojedynczą koralowo-czerwoną zakładką
Airbnb działa w stylu „białego płótna”, gdzie niepodzielnie króluje fotografia: niemal każdy ekran to cicha, monochromatyczna ramka, pozwalająca pełnoekranowym obrazom nieruchomości oddać ogólne wrażenie, z pojedynczym, intensywnym koralowo-czerwonym akcentem (Rausch) jako jedynym kolorem oznaczającym akcję. Czcionka to geometryczny sans-serif (Airbnb Cereal VF) – głównie małe, pewne rozmiary – dla tekstu głównego, interfejsu i nagłówków sekcji (22-22) – z wąskimi odstępami między wierszami i dużymi odstępami między wierszami, dzięki czemu karty z gęstym tekstem są czytelne. Interfejs jest płaski, bezramkowy i zaokrąglony: promienie 12-3 na kartach i elementach sterujących, okrągłe przyciski w kształcie pigułek i miękkie, warstwowe cienie tylko dla widocznych elementów, takich jak pasek wyszukiwania. Wszystko inne – karty, elementy listy, linki – opiera się na białych przestrzeniach i cienkich liniach, a nie na chromowanych akcentach.
Układ pełnej szerokości bez ustalonego limitu maksymalnej szerokości — treść rozciąga się od krawędzi do krawędzi w widocznym obszarze, z około 40 px poziomego odstępu po każdej stronie na pulpicie. Bohaterem jest pływająca kapsuła wyszukiwania, wyśrodkowana na neutralnym białym płótnie bez obrazu lub tytułu — pasek wyszukiwania JEST bohaterem. Poniżej wyszukiwania strona przechodzi w pionowo ułożone, poziomo przewijane sekcje (widoczne są cztery rzędy: Polecane domy, Świetne hotele, Inne miasto, Dostępne w przyszłym miesiącu), każda o wysokości około 320 px, oddzielona pionowymi rynnami o szerokości 48 px. Każda sekcja wykorzystuje 7-kartową siatkę z poziomym przepełnieniem i nawigacją strzałkową. Stopka to 3-kolumnowa siatka linków na tle #f7f7f7, a następnie dolny pasek z informacjami o prawach autorskich, opcjami języka/waluty i ikonami mediów społecznościowych. Nawigacja to stały górny pasek z wyśrodkowaną nawigacją kart i elementami sterującymi wyrównanymi do prawej strony.
W systemie wizualnym dominuje fotografia, a pełnoekranowe obrazy ofert nieruchomości stanowią główny rodzaj treści. Wszystkie zdjęcia to ciepłe, dobrze oświetlone ujęcia wnętrz i elewacji prawdziwych domów i hoteli, poddane naturalnej korekcji kolorów (bez mocnych filtrów i duotonów). Obrazy są mocno przycięte do proporcji 1:1 na kartach ofert, wypełniając ich krawędzie bez spadów. Ikony w całym interfejsie mają monochromatyczny kontur (grubość linii ~16–16), używany oszczędnie w kategoriach nawigacji i elementach sterujących interfejsu użytkownika. Logo jest jedynym wielokolorowym elementem graficznym (Rausch). Żadnych ilustracji, renderów 3D ani abstrakcyjnych grafik – język wizualny to czysta fotografia i minimalistyczna monochromatyczna ikonografia na miękkim, białym płótnie.
Paleta
Marka
- Rausch
#ff385c— Czerwień jest używana jako akcent dekoracyjny w ikonach, znakach i drobnych detalach graficznych. Nie powinna być stosowana jako kolor podstawowy w wezwaniach do działania. - Rausch 600
#e00b41— Tłoczona i ciemniejsza wersja farby Rausch przeznaczona do powierzchni wykorzystywanych jako akcenty marki na powierzchniach typu hover/active.
Neutralny
- Hof
#222222— Treść główna, tekst główny, nagłówki, kontury ikon i odwrócone tło są utrzymane w neutralnym kolorze zbliżonym do czerni, który stanowi podstawę całego achromatycznego systemu. - Foggy
#6a6a6a— Tekst drugorzędny, wyciszone napisy, tekst pomocniczy, wyłączone wypełnianie ikon i dyskretne metadane pod tytułami kart. - Grey 500
#c1c1c1— Wyłączony tekst, tekst zastępczy w polach wprowadzania danych i wyciszone kontury ikon w miejscach, gdzie konieczne jest zniwelowanie znaczenia statusu. - Bebe
#ebebeb— Cienkie obramowania, podkreślone pola wprowadzania danych, separatory między wierszami listy i subtelne linie podziału. - Deco
#dddddd— Obrazy tła karty dla nieaktywnych kontenerów, symboli zastępczych i wyłączonych stanów karty. - Faint
#f7f7f7— Tło strony, powierzchnia stopki i stan najechania kursorem na elementy interaktywne mają delikatny, kremowy odcień, który odróżnia tę stronę od czysto białych kart.
Typografia
od 11 do 28px · 5 kroków
- Airbnb Cereal VF — wymiana: Circular · wytyczne 400, 500, 600, 700 · Niestandardowa geometryczna czcionka bezszeryfowa zaprojektowana dla Airbnb. Tekst główny ma szerokość 14 px/400, etykiety interfejsu użytkownika 16 px/500, nagłówki sekcji 20 px/600, 22 px/500 z niewielkim odstępem między literami -0,02 em, a nagłówki stron 28 px/700. Ujemne odstępy między literami zmniejszają się wraz ze wzrostem rozmiaru, co jest cechą charakterystyczną geometrycznych czcionek bezszeryfowych na większych ekranach. Włącza funkcję alternatywnego glifu „salt”.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 12px |
| Promień przycisku | 9999px |
| Promień karty | 12px |
| Cienie | miękkie cienie |
| Między sekcjami | 48px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Airbnb 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
- Apple (España) — biała gablota wystawowa
- Silencio — Biały pokój z unoszącymi się w powietrzu artefaktami. Wystawa galerii wykonana z ciepłego papieru, gdzie każdy element zajmuje swoje miejsce na tle negatywowej objętości, a cisza jest celowym zabiegiem projektowym.
- Oakâme — Skąpany w słońcu prowansalski warsztat wykuty w ciepłym kamieniu
- Nike — Monochromatyczna galeria osiągnięć sportowych – białe ściany, produkt jako dzieło sztuki, chrom rozpuszczony w tle
- Arc — przemysłowa biała galeria nad północną wodą
- Rivian — Elektryczny monolit na betonowej ścianie galerii. Rivian prezentuje każdy pojazd jako rzeźbę na tle ogromnej białej przestrzeni, z typografią tak dużą, że staje się elementem architektonicznym, i pojedynczą ciepłą żółcią, która przełamuje monochromatyczną atmosferę, niczym światło słoneczne na matowej powierzchni.
- Analogue — Czarna gablota wystawowa – towary unoszą się w próżni
- ddna — ciepła gablota muzealna na nieobrobionym lnie
- Zellerfeld — Pracownia rzeźbiarska na białym marmurze – monolityczne powierzchnie cokołu, pojedyncza iskra kobaltu, szept małych liter od podłogi do sufitu
- UY Studio — Kamienna galeria klasztoru to cicha przestrzeń z betonowymi ścianami, w której na białych postumentach stoją flakony perfum, oświetlone jedną 400-watową lampą i czterema ciepłymi, szarymi żarówkami.
- Basic.Space — galeria kuratorska na białym marmurze
- COS — modna galeria z białymi ścianami