Apple
Biały pokój z jednym niebieskim przełącznikiem
Projekt Apple to wzór powściągliwości: niemal białe płótno, duża przestrzeń i pojedynczy, jaskrawoniebieski akcent, który sprawia, że każda czynność wydaje się przemyślana. Główny nacisk położony jest na typografię – SF Pro, z ujemnymi odstępami między literami, które maleją wraz ze wzrostem rozmiaru, nadając nagłówkom architektoniczną przejrzystość bez nadmiernego ciężaru. Produkt JEST projektem: dominują duże zdjęcia produktów i zdjęcia lifestylowe, a chromowane elementy chowają się w cienkich ramkach, półprzezroczystej nawigacji i subtelnych liniach. Sekcje naprzemiennie pojawiają się na jasnoszarym tle z pełnokolorowymi blokami materiałów promocyjnych, tworząc rytm poprzez zmiany skali, a nie elementy dekoracyjne.
Układ strony to strona pełnej szerokości bez ustalonej maksymalnej szerokości kontenera — sekcje rozciągają się od krawędzi do krawędzi, a bloki tekstu są wyśrodkowane na około 980 px. Nawigacja to pojedynczy, stały pasek globalny z dodatkowym podfolderem dla każdego produktu, który pojawia się po przewijaniu. Główny układ jest zawsze wyśrodkowany: duża nazwa produktu, jednowierszowy slogan, dwa przyciski pigułki, a następnie obraz produktu wypełniający pozostałą część pola widzenia. Sekcje są ułożone pionowo z dużym rytmem pionowym (64 px+ między sekcjami), naprzemiennie #f5f5f7 i kolorowymi tłami. Dolna strona to pojedynczy poziomy rząd kart usług o pełnej szerokości (Apple TV+, Fitness+, Muzyka, Arcade), każda z blokiem zdjęć z nałożonym tekstem i przyciskiem pigułki. Brak pasków bocznych, brak wielokolumnowych układów treści, brak asymetrycznych kompozycji — wszystko jest wyśrodkowane, ułożone w stos i symetryczne.
Dominującym językiem wizualnym jest fotografia. Zdjęcia produktów są robione na czystym białym lub jasnoszarym tle, bez żadnego kontekstu – to urządzenie JEST gwiazdą, wyizolowane i oświetlone. Zdjęcia lifestylowe są wyświetlane w banerach o pełnej szerokości, często z mocno przyciętymi obiektami. Gradienty kolorów (pastelowy błękit, róż, zieleń) stanowią tło dla sekcji produktów, a nie dekorację. Ikonografia jest minimalistyczna i oparta na liniach o grubości 1-2 pikseli, w tej samej skali szarości co tekst. Brak ilustracji, abstrakcyjnych grafik i renderów 3D, z wyjątkiem samych zdjęć produktów.
Paleta
Marka
- Apple Blue
#0071e3— Wypełnione przyciski akcji, wybrane stany - jedyny interaktywny kolor chromatyczny używany oszczędnie, aby nadać każdemu wyglądowi znaczenie. - Link Blue
#0066cc— Podświetlone obramowania akcji, osadzone linki — tam, gdzie wypełniony tablet byłby zbyt jaskrawy, stosowany jest kolor bardziej nasycony niż Apple Blue. - Signal Blue
#2997ff— Ramki dekoracyjne, kontury obrazów, obramowania ikon – najjaśniejszy niebieski kolor w systemie, używany raczej do budowania atmosfery niż do interakcji z użytkownikiem.
Neutralny
- Carbon
#1d1d1f— Tekst główny, obramowania nagłówków, linie nawigacyjne, obramowania kart – dominującym kolorem tuszu jest prawie czarny z lekką nutą ciepła. - Frost
#f5f5f7— Płótno strony, tło tekstu głównego i powierzchnia stopki są w charakterystycznym dla Apple jasnoszarym kolorze, nieco chłodniejszym od czystej bieli. - Ice
#f4f8fb— Wyraziste wypełnienia powierzchni, subtelne odcienie, tekst przycisku na ciemnym tle — delikatny odcień niebieskiego ożywia sekcję, nie wyróżniając jej. - Smoke
#333333— Tekst dodatkowy, wypełnienie nawigacji, obramowania przycisków — uniwersalny neutralny kolor do obramowań i ikon, które wymagają czegoś więcej niż średnia szarość. - Graphite
#474747— Tekst nawigacyjny, obramowania nawigacji, obramowania linków - zajmuje pozycję pośrednią między Carbon i Smoke w hierarchii elementów. - Ash
#707070— Tekst stopki, obramowania listy, obramowania nawigacji, wyciszony tekst główny — średni odcień szarości przeznaczony do treści, która musi być widoczna, ale nie wyeksponowana.
Typografia
od 12 do 56px · 8 kroków
- SF Pro Display — wymiana: Inter · wytyczne 400, 600, 700 · Nagłówki i duży tekst — rozmiary powyżej 40 px wykorzystują format wyświetlania zapewniający węższą aperturę i silniejsze negatywowe śledzenie; rozmiar 700 px jest zarezerwowany dla układów reklamowych, a 400 px jest przeznaczony dla nazw produktów w treściach redakcyjnych.
- SF Pro Text — wymiana: Inter · wytyczne 300, 400, 600 · Tekst główny, nawigacja, przyciski, podtytuły — czcionka robocza: 400 dla tekstu głównego, 300 dla podtytułów i etykiet kwalifikowanych, 600 dla elementów nawigacyjnych i tekstu przycisków; ujemne odstępy między literami zmniejszają się proporcjonalnie do rozmiaru (od -0,022 em do 12 px do -0,01 em do 44 px).
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 12px |
| Promień przycisku | 980px |
| Promień karty | 8px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Apple 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
- Ui — plan kliniczny na papierze matowym
- ElevenLabs — Fotoesej w ciepłych, kremowych tonach z subtelnymi nagłówkami. Notatnik w stylu Bauhaus – papier w kolorze skorupki jajka, czarny tusz i pojedynczy fioletowo-pomarańczowy akcent do ekspozycji produktu.
- monopo saigon — Płynna, opalizująca poświata za redakcyjną ciszą – monochromatyczna galeria redakcyjna unosząca się na roztopionym świetle
- Awesomic — Siatka cynkowa redakcyjna z pomarańczowymi znakami interpunkcyjnymi przypominającymi konfetti
- Monad — czasopismo techniczne redakcyjne na ciepłym pergaminie
- Dub — Panel sterowania z matowego papieru ryżowego firmy Link
- Seline Analytics — Cichy analityczny stół na ciepłym papierze
- Ventriloc — Obserwatorium redakcyjne danych na temat ciepłego papieru – pojedynczy pomarańczowy żar podkreślający monochromatyczną precyzję
- Duolingo — Zabawna maskotka klasowa na białym papierze
- Stripe — Księga rachunkowa napisana atramentem indygowym na matowym szkle
- Notion — Ciepły papierowy notatnik w południowym słońcu
- Hyer Aviation — Zmierzch w kokpicie nad pergaminem. Blade niebo o świcie spotyka się z szeryfowym logo wielkości kadłuba, a pojedynczy, ciepły, gliniany akcent przełamuje monochromatyczną powściągliwość.