Superhuman
Urrezko Orduko erredakzio-batzordea
Superhuman argazkigintza editorialaren eta softwarearen UIaren elkargunean dago: pergamino itxurako mihise bero batek (inoiz ez zuri hutsa) marka-elementu granateak eta azentu more biziak markatzen ditu. 460 letra-tipoan jarritako tituluek xuxurlatu egiten dute oihu egin beharrean, orrialde osoko argazkigintza zinematografikoek lan astuna egin dezaten, produktuen UI txartel zeharrargitsuak irudien gainean beira bezala flotatzen diren bitartean. Paleta lasaia eta editoriala izaten da denbora gehienean: krema koloreko gainazalak, ikatz-testua, gris bero koloreko ertz sotilak eta elementuen arteko tarte zabala, kolorea marka-puntuazio nahitarako gordeta: ekintzarako dei granate bakarra, esteka moreak, lila argi koloreko botoia gehigarri gisa. Sistemak nahita saihesten ditu itzal eta gradiente sendoak UI gainazaletan; sakontasuna lortzen da argazkigintza geruzatuen eta izenburuko atzeko planoaren lausotze sotilaren bidez, pilatze-efektu baten bidez baino.
Elementu nagusia argazki zabalera osoko bat da, erdian erdian dagoen izenburu batekin (48-64px/460) eta ekintzarako dei bakarra ardoaren irudi batekin beteta, produktuaren interfazearen txartel zeharrargi flotatzaileekin ezkerreko eta eskuineko ertzetan gainjarrita. Elementu nagusiaren azpian logotipo-zerrenda zuri bat dago (6 gelaxka errenkada bakoitzeko, gehienezko zabalera mugatua), eta ondoren, pergamino-mihisearen gainean dauden txartel zurien gainazalak dituen fitxa-atal bat. Turkesa ilun koloreko marra batek erritmoa hausten du orrialdearen bi heren inguru —zabalera osokoa, bi zutabe (irudia ezkerrean, testua eskuinean)—, eta horrek tonu-kontraste bakarra sortzen du korritzen duzun bitartean. Ondoren, gradiente atmosferikoko marra bat dator. Atalen arteko tarte bertikala 64-96px da. Edukiaren gehienezko zabalera ~1200px da erdian, elementu nagusiak eta marra ilunak ikuspegi-leihoaren zabalera osoa hartzen dutelarik. Nabigazioa goiburu finko bakarra da, atzeko plano lauso batekin; ez alboko barrarik, ez mega-menurik. Oina borgoña koloreko orrialde zabalera osokoa da, esteken diseinu anitzeko zutabe batekin. Erritmo orokorra hau da: marko nagusia → eduki zuri/krema lasaia → irudi nagusiarekin marra iluna → gradiente atmosferikoa → borgoña koloreko oin-oharra, marra argiak eta ilunak txandakatuz tempo editorial bat sortzeko.
Elementu bisual nagusia argazkilaritza zinematografikoa da: zeru ireki baten aurrean zabalera osoko erretratu bat da foku-puntu gisa, orrialdearen behealdean kokatutako bigarren marra atmosferiko batekin. Irudia tonu beroekin egina dago, sotilki isila eta profilez aterata, urrezko ordu baten antza duena, itxura korporatiboa baino editorialagoa sortuz. Laukizuzen geometriko zeharrargiekin eta eskuz idatzitako inskripzioekin egindako marra ilun bat pentsamenduetan galdutako gizon baten argazki baten gainean gainjarrita dago: gainazalen collage bat da, irudi bakar baten ordez. Erabiltzaile-interfazea argazkiaren gainean zuzenean gainjarritako beirazko txartel flotatzaile gisa aurkezten da, pantaila-argazki bereizi gisa baino. Ez dago stock ilustraziorik, ez 3D renderizaziorik, ezta forma apaingarri abstrakturik ere, marra atmosferiko gradientea izan ezik. Ikonoak lerro-ikono monokromo minimalistak dira, ~16-20px zabal, 460 puntuko testu-pisuari dagokion zabalera bakarrarekin.
Paleta
Marka
- Midnight Wine
#421d24— Ekintza-botoi nagusiak, banner iragarkia eta orri-oina borgoña bero batekoak dira, ia beltzak, gorria baino tinta gehiago ematen dutenak, kolore-paleta ainguratuz gehiegi indartsua izan gabe. - Royal Violet
#714cb6— Morea estekak, etiketak eta esaldi laburrak nabarmentzeko erabiltzen da. Ez da erabili behar ekintzarako deietarako kolore nagusi gisa.
Neutroa
- Lilac Mist
#d4c7ff— Bigarren mailako gainazalaren betegarriak, argi-ikonoek eta mamu-botoien atzeko planoek kolore more isila dute, markaren estiloa iradokitzen duena, bere buruari arreta gehiegi erakarri gabe. - Deep Lagoon
#0c4243— Narrazio-elementu nagusi gisa erabilitako tira-hondo iluna da sistemako gainazal ilun bakarra, gainjarritako eredu geometriko batekin konbinatuta. - Warm Parchment
#f2f0eb— Orriaren lan-azalera da elementu nagusia; krema kolore epel batek ordezkatzen du oinarri zuria, sistema osoari berotasun editoriala emanez. - Soft Mist
#e3e3e2— Ertz finak, txartelen eskemak, banaketa-lerroak —pergaminoarekin nahasten den baina ertzak argi definitzen dituen gris bero eta argia. - Ink Charcoal
#292827— Testua, goiburuak, ikonoen eskemak - kolore beroa, ia beltza, paperean tinta bezala sentitzeko adina marroirekin, inoiz ez hotza #000 - Stone Gray
#666666— Bigarren mailako testua, laguntza-testuak, deskribapen diskretuak - gris ertain bakarra, neurriz erabilia, testu nagusiarekin inoiz lehiatu ez dadin.
Tipografia
12tik 64px-ra · 8 urrats
- Super Sans VF — ordezkapena: Inter (closest open equivalent for variable weight range) · eskemak 460, 500, 540, 600, 700 · Sistema osoko letra-tipo bakarra. Ardatz-aldagaiek 460tik (izenburu handi guztientzako sinadura-letra-tipoa, apur bat moztua) 540ra (gorputz-testua azpimarratua) eta 700era (azpititulu txiki eta lodiak) bitarteko tartea hartzen dute. Bereziki diseinatutako VF batek 460 pisuko izenburuak ausazkoak baino nahita agertzea eragiten du: 48-64 px-ko neurrian eta letren arteko tarte estuarekin, "apur bat moztua" efektua mehea baino konfiantzazkoa dela hautematen da.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 8px |
| Botoiaren erradioa | 16px |
| Txartelaren erradioa | 16px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 64-96px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Superhuman 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
- AI for Business — Brutalista erredakzio-erakusleihoa gris tonu beroetan
- Jeton — Fintech-i buruzko editorial bat marmol epelaren gainean
- Airtable — Kolore ezberdinetan markatutako kapituluak dituen mintegi erosoa
- Osmo — Hormigoi Griseko Sustatzaileen Museoa
- Linktr — Erredakzioko kartelak gozokiak bezala pilatuta daude. Webgunea kolore blokeetan diseinatuta dago, berde biziko izenburuak kobalto urdineko hormen kontra jarrita, eta borgoña koloreko zelaien gainean flotatzen duten pilula itxurako nabigazio elementu zuriekin.
- Outsource Consultants — Hezur-paperean egindako arkitektura-orri handikoa. Estetika monografiko bat, non indigo koloreko orban distiratsu bakar batek bestela beroa den sareta tipografikoki maximalista eteten duen.
- Streamtime — Tactile Creative Mood Board - Diseinatzaileen Scrapbooking Mahaia
- Switch-Lit — Krema-paperean tintaz inprimatutako sare editoriala
- HubSpot — Krema koloreko paper epela, laranja koloreko azentu bakarrarekin. HubSpot-ek paper lodian inprimatutako diseinatzaile aldizkari baten antza du: serif izenburuak, krema koloreko orrialde epelak eta laranja kolore biziko azentu bakarra, puntu garrantzitsuenak soilik nabarmenduz.
- Granola — Zelaiko oharrak pergamino epelean — Granola eguzki-argitan dagoen mahaian irekitako Moleskine koaderno zahar baten antzera irakurtzen da: serifazko goiburuek sendotasun sentsazioa ematen dute, landare-oinarritutako tinta bezalako azentu berde organikoak, eta txartelen ertzetan eskuz idatzitako oharren antzeko lerro finak.
- Secure — Europako kafetegi batean, egun argiz, egindako elkarrizketa bat bideo-deien ikuspegi bero eta dotorea da, non serif izenburuek aldizkari-artikulu pentsakor baten itxura duten, produktu teknologikoen orrialde baten ordez.
- Mockups made easy — Diseinu editorialeko estudioa paper zurian