Apple
Gela zuri bat etengailu urdin bakarrarekin
Appleren diseinua neurritasunaren eredu bat da: mihise ia zuria, espazio zuri zabala eta azentu urdin bizi bakarra, ekintza guztiak nahita sentiarazten dituena. Foku nagusia tipografia da —SF Pro, letra-tarte negatiboarekin, tamaina handitu ahala gutxitzen dena, titularrei arkitektura-argitasuna emanez, gehiegi astunak izan gabe. Produktua diseinua DA: produktuen argazki handiak eta bizimoduaren irudiak dira nagusi, kromo elementuak marko meheetan, nabigazio zeharrargietan eta lerro sotiletan murgiltzen diren bitartean. Atalak txandakatzen dira atzeko plano gris argi baten aurrean, material promozionalerako kolore osoko blokeekin, erritmoa sortuz eskala-aldaketen bidez, elementu apaingarrien ordez.
Orriaren diseinua zabalera osoko orrialdea da, edukiontziaren zabalera maximo finkorik gabe —atalak ertzetik ertzera luzatzen dira, testu-blokeak 980px inguruko erdian daudela. Nabigazioa barra global finko bakarra da, korritzean agertzen den produktu bakoitzerako azpikarpeta gehigarri batekin. Diseinu nagusia beti erdian dago: produktuaren izen handi bat, lerro bakarreko eslogana, bi pilula-botoi eta, ondoren, gainerako ikuspegia betetzen duen produktuaren irudi bat. Atalak bertikalki pilatzen dira erritmo bertikal eskuzabal batekin (64px+ atalen artean), #f5f5f7 eta koloretako atzeko planoak txandakatuz. Beheko orrialdea zabalera osoko zerbitzu-txartelen ilara horizontal bakarra da (Apple TV+, Fitness+, Musika, Arcade), bakoitza argazki-bloke bat gainjarritako testuarekin eta pilula-botoi batekin. Ez dago alboko barrarik, ez zutabe anitzeko eduki-diseinurik, ez konposizio asimetrikorik — dena erdian, pilatuta eta simetrikoki dago.
Argazkilaritza da hizkuntza bisual nagusia. Produktuen argazkiak atzealde zuri puru edo gris leun baten aurrean ateratzen dira, testuingururik gabe —gailua DA izarra, isolatuta eta argiztatuta—. Bizimoduaren argazkiak zabalera osoko bannerretan erakusten dira, askotan objektu estu moztuekin. Kolore gradienteak (urdin pastela, arrosa, berdea) produktuen atalen atzealde gisa balio dute, ez apaingarri gisa. Ikonografia minimalista eta lerroetan oinarritutakoa da, 1-2 px-ko lodiera duena, testuaren eskala gris berean. Ez ilustraziorik, ez grafiko abstrakturik, ez 3D errendatzerik, produktuen argazkiak izan ezik.
Paleta
Marka
- Apple Blue
#0071e3— Ekintza-botoi beteak, hautatutako egoerak - itxura bakoitza esanguratsua izan dadin neurrian erabiltzen den kolore kromatiko interaktibo bakarra. - Link Blue
#0066cc— Ekintza-ertz nabarmenduak, txertatutako estekak - Apple Blue baino kolore saturatuagoa erabiltzen da tableta bete bat deigarriegia izango litzatekeen lekuan. - Signal Blue
#2997ff— Marko apaingarriak, irudien eskemak, ikonoen ertzak - sistemako urdin argiena, erabiltzailearen interakziorako baino girorako erabiltzen dena.
Neutroa
- Carbon
#1d1d1f— Testu nagusia, goiburuen ertzak, nabigazio-lerroak, txartelen ertzak - tinta-kolore nagusia ia beltza da, berotasun ukitu txiki batekin. - Frost
#f5f5f7— Orriaren mihisea, testu nagusiaren atzeko planoa eta orri-oinaren gainazala Apple-ren gris argi bereizgarria dira, zuri hutsa baino apur bat freskoagoak. - Ice
#f4f8fb— Gainazaleko betegarri adierazgarriak, tonu sotilak, botoien testua atzealde ilun batean — atala nabarmendu gabe bizitzen duen tonu urdin sotila. - Smoke
#333333— Bigarren mailako testua, nabigazio-betegarria, botoien ertzak - Gris ertain batek baino indar handiagoa behar duten ertz eta ikonoetarako kolore neutro polifazetikoa. - Graphite
#474747— Nabigazio testua, nabigazio ertzak, estekaren ertzak - elementuen hierarkian Karbonoaren eta Kearen arteko tarteko posizioa hartzen du. - Ash
#707070— Orri-oinaren testua, zerrenden ertzak, nabigazio-ertzak, gorputz-testu isila - Gris ertaina egon behar den baina nabarmena ez den edukiarentzat.
Tipografia
12tik 56px-ra · 8 urrats
- SF Pro Display — ordezkapena: Inter · eskemak 400, 600, 700 · Titularrak eta testu handia — 40px+ tamainak irekidura estuagoa eta negatiboen jarraipen sendoagoa lortzeko bistaratze formatua erabiltzen dute; 700 publizitate diseinuetarako gordeta dago, eta 400 eduki editorialeko produktuen izenetarako.
- SF Pro Text — ordezkapena: Inter · eskemak 300, 400, 600 · Gorputz-testua, nabigazioa, botoiak, azpitituluak — laneko letra-tipoa; 400 gorputz-testuarentzat, 300 azpitituluentzat eta etiketa kualifikatuentzat, 600 nabigazio-elementuentzat eta botoien testuarentzat; letren arteko tarte negatiboa proportzionalki txikitzen da tamainarekin (-0,022em-tik 12px-ra eta -0,01em-tik 44px-ra).
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | batez bestekoa |
| Oinarrizko urratsa | 12px |
| Botoiaren erradioa | 980px |
| Txartelaren erradioa | 8px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 64px |
| Orriaren zabalera | 1440px |
Adimen artifizialak zure webgunea Apple estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- Studio — Mugimenduan dagoen galeria-horma bat. Pantaila bakoitzak erakusketa-gainazal gris eta isil bat irudikatzen du, non material tipografikoak eta gainjarritako sormen-lanak arreta lortzeko lehian ari diren.
- Mollie — Kaxmirrezko mostradore bat, liburuxka ilun bat. Utzi leku zuri zabala testu beltzaren inguruan diseinu editorialerako, eta gero indartu produktuarekin lotutako puntuak krema beroekin, espresso marroiekin eta ordainketa-metodo errealen argazki ukigarriekin.
- Basis Theory — Ordainketa-terminalak diseinu-estudioan. Paper tekniko zuriak, gainjarritako transakzio-geruza zeharrargiak eta turkesa koloreko kontrol-elementu bakarrak definitzen dute norabide bisuala.
- CleanShot X — Mahaigain urdin argiztatua duen estudio bat. Sortu espazio zuri lasai bat testu beltz trinkoaren inguruan, eta gero utzi kontrol urdin aberatsak eta Mac produktuen irudi geruzatuak protagonismoa hartzen.
- Modern Treasury — Altxorraren kontabilitate-liburua grafiko-paperean. Sortu orrialde zuri eta isil baten antza dutenak, non diru-fluxuak lerro finekin, nodo etiketatuekin eta kontrol zehatz eta ezkutuekin bistaratzen diren.
- Basha-Franklin — Galeria-sareta bat ateburu zuri baten azpian. Erabili #f4ede6 tonu beroa, egitura beltz sotila eta arkitektura-portfolio inprimatu baten itxura duten argazkietan oinarritutako zutabe asimetrikoak.
- Bajgart Office — Editorial galeriaren horma. Erabili espazio zuri handi bat, non serif letra-tipo sotilek eta portfolio zatiek kromozko interfazearen elementuek baino pisu bisual handiagoa duten.
- Heptabase — Eguzki argiztatutako mahaia. Gainazal epel eta papertsuek, ikatz koloreko kontrolak eta ikerketarako leiho flotatzaileek lan-eremu antolatu baten sentsazioa sortzen dute, software kontrol-panel baten ordez.
- Bejamas — Pijama—kare azidoa beira beltzaren bidez. Sortu editorialeko orrialde lasai eta gris argiak, panel beltz liluragarriek eten dituztenak, non argi berde lausoek gainazala gurutzatzen duten.
- Baba — Zaintza oharrak eguzki-argi gorrian. Sortu marra narratibo gorri zabalak informazio-azalera zuri, arrosa eta krema intimoen inguruan, pertsonen argazkiak erdigune emozional gisa erabiliz.
- Grafana Labs — Sunrise Signal Station-eko kontrol-gela. Gris eta zuri koloreko lan-eremu lasaia lau koloreko horizonte-gradiente zabal batekin eta interfazearen seinale urdin zehatzekin konbinatzen da.
- Kagi — Irakurketa-gela bereizi bat. Sortu espazio zuri ireki bat grafitozko testu lodien inguruan, azentu more sotilak eta gainazal pastel epelak erabiliz lasaitasuna hausteko.