Apple (España)
Katedra białej przestrzeni z ledwo słyszalnymi nagłówkami. Ogromna, jasna sala, w której wisiały w powietrzu ogromne czcionki o gęstości 700, połączone jedynie pastelowymi kolorami i pojedynczą niebieską nicią.
Język stron produktów Apple to studium typograficznej hojności: ogromne nagłówki SF Pro Display unoszą się na kremowym tle, otoczone rozległą białą przestrzenią, która sprawia, że każde słowo wydaje się celowe. Paleta barw jest niemal monochromatyczna – tekst w #1d1d1f, kanwa naprzemiennie #ffffff i #f5f5f7 – z pojedynczym niebieskim akcentem (#0071e3) zarezerwowanym wyłącznie dla momentów interaktywnych. Kolor jest obecny na samych zdjęciach produktów (pastelowe odcienie), nigdy jako dekoracyjne elementy interfejsu użytkownika. Komponenty są bezramkowe: zaokrąglone karty o promieniu 28 pikseli, przyciski w kształcie pigułek niemal dotykające krawędzi strony, bez widocznych pojemników ani cieni. Rytm tworzą naprzemienne białe i szare paski, a nie separatory czy obramowania.
Sekcje zajmują całą szerokość strony, rozciągając się od krawędzi do krawędzi dzięki obfitemu wypełnieniu (około 40-100 boków). Maksymalna szerokość treści jest skutecznie wyśrodkowana w każdym pasku. Głównym elementem jest wyśrodkowany stos: etykieta w kształcie brwi, powiększony nagłówek, pojedynczy przycisk wezwania do działania, wiersz z ceną, a następnie obraz produktu wypełniający dolną część okna widoku. Sekcje podążają za powtarzającym się wzorem: nagłówek wyrównany do lewej w pasku, po którym następuje układ dwukolumnowy z opisami produktów (tekst po lewej stronie/obraz po prawej lub naprzemiennie), trzykolumnowa siatka kart lub wyśrodkowana prezentacja wizualna. Rytm treści jest w całości kontrolowany przez naprzemienne białe i trójkolorowe tła z pionowymi odstępami 100-100 cm — bez separatorów, bez kart z elementami. Globalna nawigacja to pojedynczy, stały pasek. Sekcje specyfikacji produktu wykorzystują pasy o pełnej szerokości z dużym marginesem, w których tekst jest wyśrodkowany w wąskich kolumnach (~560 px) na szerszym obszarze wizualnym.
Język wizualny Apple opiera się przede wszystkim na fotografii produktowej: zbliżeniach sprzętu na czystym białym lub kolorowym tle, bez kontekstu lifestylowego czy inscenizowanych scen. Na głównym zdjęciu widać dłonie trzymające pastelowo-zielonego MacBooka Neo – element ludzki jest drugorzędny, ukazując skalę i fakturę, a nie emocje. W sekcjach z wariantami produktu dwa urządzenia są prezentowane obok siebie na tle o dopasowanych kolorach wykończenia (różowym, zielonym, srebrnym, błękitnym), a każda karta stanowi płaskie pole kolorów z produktem pośrodku. Zdjęcia detali wykorzystują ekstremalne zbliżenia (zawias laptopa, moduł aparatu) na neutralnym tle. Nie ma ilustracji, abstrakcyjnych grafik ani obrazów dekoracyjnych – sam produkt jest elementem wizualnym. Ikonografia jest wszechobecna – monochromatyczne ikony liniowe w stylu SF Symbols o grubości 1,5–2 pikseli, zaczerpnięte z systemowego zestawu ikon Apple. Fotografia jest zawsze wykonana w stylu high-key: jednolite, pozbawione cieni oświetlenie, które redukuje produkt do formy graficznej, a nie trójwymiarowego obiektu.
Paleta
Marka
- Electric Blue
#0071e3— Wypełnione przyciski akcji stanowią jedyny akcent kolorystyczny w interfejsie użytkownika i są używane oszczędnie w przypadku wezwań do działania. - Link Blue
#0066cc— Linki tekstowe, linki ze strzałkami i szewronami. - Citrus Gradient
#3b3b23— Alternatywnym wykończeniem, które stało się znakiem rozpoznawczym produktu, jest ciemna baza, przechodząca w żółtozielone refleksy.
Neutralny
- Primary Ink
#1d1d1f— Nagłówki, tekst główny i etykiety przycisków stanowią dominujący kolor na wszystkich powierzchniach; tło głównego obrazu produktu płynnie przechodzi od jednolitego #1d1d1f na górze do chromatycznego błękitu. - Mid Gray
#707070— Tekst pomocniczy, nieaktywny stan nawigacji, wyciszone etykiety interfejsu użytkownika - Deep Gray
#474747— Tekst nawigacyjny i ikony są napisane czcionką średnią. - Hairline
#d6d6d6— Cienkie granice między sekcjami i elementami interfejsu użytkownika. - Canvas
#f5f5f7— Naprzemienne tła sekcji - szary pas oddzielający białe obszary. - Paper
#ffffff— Powierzchnia karty, tło strony głównej, tekst przycisku na ciemnym tle.
Typografia
od 12 do 96px · 10 kroków
- SF Pro Display — wymiana: Inter · wytyczne 600, 700 · Nagłówki główne i podtytuły do wyświetlania — grubość 700, szerokość 80–96 px, odstęp między literami ujemny -1,44 px, tworzy charakterystyczny dla Apple „ogromny, unoszący się na biało nagłówek”. Zamienniki: Inter, system-ui
- SF Pro Display — wymiana: Inter · wytyczne 600 · Nagłówki sekcji, tytuły kart, podtytuły – czcionka 600 z lekko dodatnimi odstępami między literami sprawia wrażenie ciepłej i przyjaznej w średnim rozmiarze, w przeciwieństwie do krótkich nagłówków powyżej.
- SF Pro Text — wymiana: Inter · wytyczne 400, 500, 600 · W przypadku tekstu głównego, nawigacji, akapitów pomocniczych i małych podpisów, czcionka o indeksie 400 i wysokości 17 pikseli jest czcionką podstawową. Ujemne odstępy między literami pozwalają na uzyskanie bardziej zwięzłego tekstu głównego na stronach z dużą ilością informacji.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8-10px |
| Promień przycisku | 980px |
| Promień karty | 28px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 100-120px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Apple (España) 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
- Airbnb — Cicha, biała ściana galerii z pojedynczą koralowo-czerwoną zakładką
- Peak Design — Ściana galerii, częściowo oświetlona
- Ramp — Dział finansowy redakcji, czarno-białe strony z jednym neonowym markerem. Praktycznie monochromatyczna powierzchnia publikacji, gdzie pojedyncza, jaskrawozielona kreska przekształca każdą interakcję w sygnał pieniężny.
- 099 SUPPLY — Ściana galerii wypełniona czarno-białymi obiektami
- Orderful — Panel sterowania logistyką przemysłową - wydrukowana lista kontrolna dyspozytora logistyki, wykonana czarnym tuszem i chirurgiczną czerwienią, każda strona na tyle dyskretna, że jeden operator może krzyknąć coś ważnego.
- Apple (España) — biała gablota wystawowa
- teenage engineering — Katalog przemysłowy oświetlenia studyjnego - na stronie znajduje się tylko jeden istotny obiekt, a wszystko inne jest omówione wokół niego
- Apple (España) — Okno galerii w porannej mgle
- 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.
- Custo — Galeria w kolorze stalowo-brązowym z monolityczną czcionką. Salon wystawowy w stonowanych szaro-zielonych odcieniach, gdzie pojedynczy ciemny obiekt i czcionka o szerokości 57 pikseli mówią same za siebie.
- 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.
- ORYZO AI — Fotoesej o ciemni. Samotny obiekt unoszący się w ciepłej ciemności, jedyną dekoracją jest kremowa czcionka.