Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukgaratzaileEnpresentzako IA tresnak garatzen. Kalitate handikoa. Merkea.Idatzi Telegram bidez
Apple (España) — estilo honetako gune baten aurrebista

Apple (España)

Espazio zurizko katedral bat, ia entzunezinak diren tituluekin. Areto zabal eta argitsu bat, non 700 dentsitateko letra-tipo erraldoiak airean zintzilik dauden, pastel koloreek eta hari urdin bakar batek soilik lotuta.

Apple-ren produktu-orrialdeen hizkuntza tipografia-eskuzabaltasunaren azterketa bat da: SF Pro Display-en izenburu erraldoiak atzealde zuri-zuriaren gainean, hitz bakoitza nahita iruditzen den espazio zuri zabal batez inguratuta. Paleta ia monokromatikoa da —#1d1d1f testua, #ffffff eta #f5f5f7 artean txandakatzen den mihisea—, azentu urdin bakarrarekin (#0071e3) une interaktiboetarako soilik gordeta. Kolorea produktuen irudietan bertan dago (pastel tonuak), inoiz ez UI elementu apaingarri gisa. Osagaiak markorik gabekoak dira: 28px-ko erradioko txartel biribilduak, pilula itxurako botoiak orriaren ertzak ia ukitzen dituztenak, ontzi edo itzal ikusgairik gabe. Erritmoa marra zuri eta grisak txandakatuz sortzen da, ez zatitzailerik edo ertzik.

Atalek orriaren zabalera osoa hartzen dute, ertz batetik bestera luzatuz, betegarri handiarekin (gutxi gorabehera 40-100 alde). Edukiaren zabalera maximoa banda bakoitzaren barruan zentratuta dago. Elementu nagusia pila zentralizatu bat da: bekain itxurako etiketa bat, goiburu handitu bat, ekintzarako dei-botoi bakarra, prezio-errenkada bat eta, ondoren, produktuaren irudi bat ikus-eremuaren behealdea betetzen duena. Atalek errepikatzen den eredu bat jarraitzen dute: ezkerrean lerrokatutako goiburu bat bandaren barruan, ondoren bi zutabeko diseinu bat produktuen deskribapenekin (testua ezkerrean/irudia eskuinean edo txandakatuz), hiru zutabeko txartel-sare bat edo erdian erakusleiho bisual bat. Edukiaren erritmoa guztiz kontrolatzen da 100-100 cm-ko tarte bertikalekin zuri eta hiru koloreko atzeko plano txandakatuz —banatzailerik gabe, elementuak dituzten txartelik gabe—. Nabigazio orokorra barra finko bakarra da. Produktuaren zehaztapen-atalek zabalera osoko bandak erabiltzen dituzte betegarri handiarekin, non testua zutabe estuetan zentratuta dagoen (~560px) eremu bisual zabalago baten aurrean.

Appleren hizkuntza bisuala batez ere produktuen argazkilaritza da: hardwarearen plano hurbilak atzealde zuri edo koloretsu baten aurrean, bizimodu testuingururik edo eszena eszenikorik gabe. Irudi nagusiak MacBook Neo berde pastel bat eusten duten eskuak erakusten ditu; elementu gizatiarra bigarren mailakoa da, eskala eta ehundura erakusten ditu emozioa baino gehiago. Produktuen aldaeren ataletan, bi gailu aurkezten dira alboz albo, kolore berdineko atzealde baten aurrean (arrosa, berdea, zilarra, zeru urdina), txartel bakoitza kolore-eremu laua da, produktua erdian duela. Xehetasun-argazkiek plano hurbil muturrak erabiltzen dituzte (ordenagailu eramangarriaren bisagra, kameraren modulua) atzealde neutro baten aurrean. Ez dago ilustraziorik, ez grafiko abstrakturik, ez irudi apaingarririk; produktua bera da elementu bisuala. Ikonografia nonahi dago: SF Symbols estiloko lerro-ikono monokromoak, 1,5-2 px-ko lodierakoak, Apple sistemaren ikono multzotik hartutakoak. Argazkilaritza beti modu nabarmenean egiten da: argiztapen uniforme eta itzalik gabekoa, produktua hiru dimentsioko objektu baten ordez forma grafiko batera murrizten duena.

Paleta

Marka

  • Electric Blue #0071e3 — Ekintza-botoi beteak dira UI-ko kolore-azentu bakarrak, eta neurriz erabiltzen dira ekintzarako deietarako.
  • Link Blue #0066cc — Lerroko testu-estekak, geziak eta txebrak dituzten estekak.
  • Citrus Gradient #3b3b23 — Produktuaren ezaugarri nagusi bihurtu den beste akabera bat oinarri iluna da, hori-berde koloreko puntuetan desagertzen dena.

Neutroa

  • Primary Ink #1d1d1f — Izenburuak, testuaren gorputza eta botoien etiketak dira gainazal guztietan lehen planoko tonu nagusia; produktuaren irudi nagusiaren atzeko planoa goiko #1d1d1f kolore solido batetik urdin kromatiko batera leunki igarotzen da.
  • Mid Gray #707070 — Bigarren mailako testua, nabigazio egoera inaktibo, UI etiketak isilarazita
  • Deep Gray #474747 — Nabigazio testua eta ikonografia letra-tipo ertainean daude.
  • Hairline #d6d6d6 — Atalen eta UI elementuen arteko muga meheak.
  • Canvas #f5f5f7 — Txandaka dauden atalen atzeko planoak - eremu zuriak bereizten dituen marra gris bat.
  • Paper #ffffff — Txartelaren gainazala, orrialde nagusiaren atzeko planoa, botoien testua atzeko plano ilun batean.

Tipografia

12tik 96px-ra · 10 urrats

  • SF Pro Display — ordezkapena: Inter · eskemak 600, 700 · Bistaratzeko goiburu eta azpititulu nagusiak — 700 pisua 80–96px-tan eta -1.44px-ko letra-tarte negatiboarekin, Apple-ren "titulu erraldoi zuriz flotatzen" bereizgarria sortzen du. Ordezkoak: Inter, system-ui
  • SF Pro Display — ordezkapena: Inter · eskemak 600 · Atalen izenburuak, txartelen izenburuak, azpitituluak - 600eko letra-tipoa, letren arteko tarte positibo samarra duena, beroa eta atsegina da tamaina ertainean, goiko izenburu laburrek ez bezala.
  • SF Pro Text — ordezkapena: Inter · eskemak 400, 500, 600 · Gorputz-testuarentzat, nabigaziorako, paragrafo osagarrietarako eta azpititulu txikietarako, 400eko indizea eta 17px-ko letra-tipoa da letra-tipo nagusia. Letra-tarte negatiboak testu nagusi zehatzagoa ahalbidetzen du informazio asko duten orrialdeetan.

Tarteak eta forma

HelburuaEsanahia
Dentsitateatrinko
Oinarrizko urratsa8-10px
Botoiaren erradioa980px
Txartelaren erradioa28px
Itzalakez - itzalen ordez ertzak
Atalen artean100-120px
Orriaren zabalera1200px

Adimen artifizialak zure webgunea Apple (España) 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

  • Airbnb — Galeria-horma zuri lasai bat, koral gorrizko laster-marka bakarrarekin
  • Peak Design — Galeria-horma, partzialki argiztatua
  • Ramp — Finantza sail editoriala, orrialde zuri-beltzak neon markatzaile bakarrarekin. Argitalpenaren gainazal ia monokromoa, non limoi berde distiratsu bakar batek interakzio oro seinale monetario bihurtzen duen.
  • 099 SUPPLY — Galeria-horma bat objektu zuri-beltzez beteta
  • Orderful — Industria Logistika Kontrolerako Karpeta - Logistika bidaltzailearen kontrol-zerrenda inprimatua, tinta beltzez eta gorri kirurgikoz egina, orrialde bakoitza nahikoa diskretua operadore batek zerbait garrantzitsua oihukatzeko.
  • Apple (España) — galeria zuriaren erakusleihoa
  • teenage engineering — Estudioko argiztapeneko industria-katalogoa - produktua da orrialdeko objektu esanguratsu bakarra, eta gainerako guztia haren inguruan eztabaidatzen da
  • Apple (España) — Galeria-leiho bat goizeko lainoan
  • Lightship — Errepide irekiaren diorama zinematografikoa. Krema koloreko galeria-horma epelak, tarteka muntatutako paisaia-argazki handiekin apainduta, markoetan ia ikusten ez diren letra beltz meheak, eta laranja biziko azentu bakarrak, monokromoa hausten duena, larre bateko su bat bezala.
  • Custo — Galeria brontze kolorekoa, letra-tipo monolitiko batekin. Erakusleiho bat, gris-berde tonu apalekin, non objektu ilun bakar batek eta 57px-ko letra-tipo batek berez hitz egiten duten.
  • Silencio — Gela zuri bat artefaktu flotatzaileak dituena. Paper beroz egindako galeria-erakusketa bat, non elementu bakoitzak bere lekua hartzen duen bolumen negatiboko atzealde baten aurrean, eta isiltasuna diseinu-erabaki nahita bat den.
  • ORYZO AI — Gela ilun bati buruzko argazki-saiakera bat. Objektu bakarti bat iluntasun epelean flotatzen, krema koloreko letra-tipoa apaingarri bakarra izanik.