Superhuman
grup editorial al orei de aur
Superhuman se află la intersecția dintre fotografia editorială și interfața cu utilizatorul software - o pânză caldă, asemănătoare pergamentului (niciodată albă pură), încadrează elemente de branding maro și accente violet vibrante. Titlurile, cu font 460, șoptesc în loc să strige, permițând fotografiei cinematografice de pe o pagină întreagă să facă munca grea, în timp ce cardurile translucide ale interfeței cu utilizatorul de produs plutesc ca sticla deasupra imaginilor. Paleta de culori rămâne calmă și editorială în majoritatea timpului: suprafețe crem, text cărbune, chenaruri subtile gri cald și spațiere generoasă între elemente, culoarea fiind rezervată pentru punctuația deliberată a mărcii - un singur îndemn la acțiune maro, linkuri violet, un buton suplimentar liliac deschis. Sistemul evită în mod deliberat umbrele și gradienții puternici pe suprafețele interfeței cu utilizatorul; Profunzimea este obținută prin fotografie stratificată și o estompare subtilă a fundalului în titlu, mai degrabă decât printr-un efect de suprapunere.
Elementul principal este o fotografie pe toată lățimea, cu un titlu centrat (48-64px/460) și un singur îndemn la acțiune umplut cu o imagine cu vin, cu carduri translucide plutitoare pentru interfața cu utilizatorul a produsului, suprapuse pe marginile stânga și dreapta. Sub elementul principal se află o bandă albă cu logo (6 celule pe rând, lățime maximă limitată), apoi o secțiune de tab-uri cu suprafețe albe de carton pe pânză pergament. O bandă turcoaz închis rupe ritmul pe aproximativ două treimi din pagină - lățime completă, două coloane (imagine în stânga, text în dreapta) - creând singurul contrast tonal pe măsură ce derulați. Urmează o bandă atmosferică gradientă. Spațierea verticală dintre secțiuni este de 64-96px. Lățimea maximă a conținutului este de ~1200px centrată, elementul principal și banda întunecată acoperind întreaga lățime a viewport-ului. Navigarea este un singur antet fix cu un fundal neclar; fără bară laterală, fără mega meniu. Subsolul este o pagină vișinie pe toată lățimea, cu un aspect de linkuri pe mai multe coloane. Ritmul general este: cadru principal → conținut calm alb/crem → dungă închisă la culoare cu imaginea principală → gradient atmosferic → subsol vișiniu, alternând dungi deschise și închise pentru a crea un tempo editorial.
Elementul vizual principal este fotografia cinematografică: un portret pe toată lățimea pe fundalul unui cer deschis servește drept punct focal, cu o a doua bandă atmosferică poziționată mai jos pe pagină. Imaginea are tonuri calde, subtil estompate și este fotografiată din profil, amintind de o oră de aur, creând o senzație mai degrabă editorială decât corporativă. O bandă întunecată cu dreptunghiuri geometrice translucide și inscripții scrise de mână este suprapusă peste o fotografie a unui bărbat pierdut în gânduri - un colaj de suprafețe, mai degrabă decât o singură imagine. Interfața cu utilizatorul este prezentată ca niște carduri plutitoare de sticlă suprapuse direct pe fotografie, mai degrabă decât ca niște capturi de ecran separate. Nu există ilustrații de stoc, randări 3D și forme decorative abstracte, cu excepția benzii atmosferice gradiente. Pictogramele sunt pictograme minimaliste monocrome, cu o lățime de ~16-20px, cu o singură lățime corespunzătoare grosimii textului de 460 de puncte.
Paletă
Marca
- Midnight Wine
#421d24— Butoanele principale de acțiune, bannerul publicitar și subsolul sunt de un vișiniu cald, aproape negru, care se simte mai mult ca cerneala decât ca roșu, ancorând paleta de culori fără a fi prea puternică. - Royal Violet
#714cb6— Movul este folosit pentru a evidenția linkuri, etichete și fraze scurte. Nu ar trebui folosit ca și culoare principală pentru îndemnuri la acțiune.
Neutru
- Lilac Mist
#d4c7ff— Umplutura secundară a suprafeței, pictogramele luminoase și fundalurile butoanelor fantomă prezintă o culoare violet estompată care sugerează stilul brandului fără a atrage atenția în mod nejustificat asupra sa. - Deep Lagoon
#0c4243— Fundalul întunecat al benzii desenate, folosit ca principal element narativ, este singura suprafață întunecată din sistem, combinată cu un model geometric suprapus. - Warm Parchment
#f2f0eb— Suprafața de lucru a paginii este elementul dominant; o culoare crem caldă înlocuiește albul ca bază, conferind întregului sistem o căldură editorială. - Soft Mist
#e3e3e2— Chenare fine, contururi de carton, linii de demarcație — un gri cald, deschis, care se îmbină cu pergamentul, dar definește clar marginile. - Ink Charcoal
#292827— Textul corpului, titlurile, contururile pictogramelor - o culoare caldă, aproape neagră, cu suficient maro cât să se simtă ca cerneala pe hârtie, niciodată rece #000 - Stone Gray
#666666— Text secundar, texte de susținere, descrieri discrete - un singur gri mediu, folosit cu moderație pentru a nu concura niciodată cu textul principal.
Tipografie
de la 12 la 64px · 8 pași
- Super Sans VF — înlocuire: Inter (closest open equivalent for variable weight range) · contururi 460, 500, 540, 600, 700 · Un singur font în întregul sistem. Variabilele axei acoperă intervalul de la 460 (un font ușor decupat, cu semnătură, pentru tot textul mare al titlurilor) la 540 (text accentuat) și 700 (legende mici, îngroșate). Un VF special conceput face ca titlurile cu grosimea de 460 să pară mai degrabă intenționate decât aleatorii - la 48-64px cu o spațiere strânsă a literelor, efectul de „ușor decupat” este perceput ca fiind mai degrabă încrezător decât superficial.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | dens |
| Pasul de bază | 8px |
| Raza butonului | 16px |
| Raza cardului | 16px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 64-96px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Superhuman și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- AI for Business — Showroom editorial brutalist în tonuri calde de gri
- Jeton — Un editorial despre fintech pe marmură caldă
- Airtable — Un seminar confortabil cu capitole marcate în culori diferite
- Osmo — Muzeul Dezvoltatorilor din Beton Gri
- Linktr — Posterele editoriale sunt stivuite ca niște bomboane. Site-ul web este conceput în blocuri de culoare, cu titluri verde strălucitor așezate pe pereți albastru-cobalt și elemente de navigare albe în formă de pastilă plutind deasupra câmpurilor vișinii.
- Outsource Consultants — O foaie arhitecturală de format mare pe hârtie de os. O estetică monografică, în care o singură pată strălucitoare de indigo întrerupe grila altfel caldă, tipografic maximalistă.
- Streamtime — Tablă de dispoziție creativă tactilă - Masă de scrapbooking de design
- Switch-Lit — Grilă editorială tipărită cu cerneală pe hârtie crem
- HubSpot — O culoare caldă a hârtiei crem cu un singur accent portocaliu. HubSpot seamănă cu o revistă de designer tipărită pe hârtie groasă - titluri cu serif, pagini crem cald și un singur accent portocaliu aprins care evidențiază doar cele mai importante puncte.
- Granola — Note de teren pe pergament cald — Granola se citește ca un caiet Moleskine uzat, deschis pe un birou însorit: titlurile cu serife conferă o senzație de soliditate, accente verzi organice, precum cerneala vegetală, și linii fine pe marginile cărților de vizită care seamănă cu notițe scrise de mână.
- Secure — O conversație într-o cafenea europeană, în lumina blândă a zilei, este o abordare caldă și elegantă a apelurilor video, în care titlurile cu serife par un articol de revistă detaliat, mai degrabă decât o pagină de produs tehnologic.
- Mockups made easy — Studio de design editorial pe hârtie albă