Superhuman
panell editorial de l'hora daurada
Superhuman es troba a la intersecció entre la fotografia editorial i la interfície d'usuari de programari: un llenç càlid, semblant al pergamí (mai blanc pur), emmarca elements de marca grana i vibrants detalls morats. Els titulars, amb font 460, xiuxiuegen en lloc de cridar, permetent que la fotografia cinematogràfica de pàgina completa faci la feina pesada, mentre que les targetes translúcides de la interfície d'usuari del producte suren com vidre per sobre de les imatges. La paleta es manté tranquil·la i editorial la major part del temps: superfícies crema, text carbó vegetal, vores subtils de gris càlid i un espai generós entre els elements, amb el color reservat per a la puntuació deliberada de la marca: una única crida a l'acció grana, enllaços morats, un botó addicional lila clar. El sistema evita deliberadament les ombres i els degradats forts a les superfícies de la interfície d'usuari; la profunditat s'aconsegueix mitjançant la fotografia en capes i un desenfocament de fons subtil al títol, en lloc d'un efecte d'apilament.
L'element principal és una fotografia d'amplada completa amb un títol centrat (48-64px/460) i una única crida a l'acció plena d'una imatge de vi, amb targetes d'IU de producte translúcides flotants superposades a les vores esquerra i dreta. A sota de l'element principal hi ha una tira de logotip de franja blanca (6 cel·les per fila, amplada màxima limitada), i després una secció de pestanyes amb superfícies de cartolina blanca sobre llenç de pergamí. Una franja turquesa fosca trenca el ritme aproximadament dos terços de la pàgina (amplada completa, dues columnes (imatge a l'esquerra, text a la dreta), creant l'únic contrast tonal a mesura que us desplaceu. A continuació, hi ha una franja atmosfèrica amb degradat. L'espaiat vertical entre seccions és de 64-96px. L'amplada màxima del contingut és d'uns 1200px centrada, amb l'element principal i la franja fosca que abasten tota l'amplada de la finestra gràfica. La navegació és una única capçalera fixa amb un fons borgós; sense barra lateral, sense mega menú. El peu de pàgina és una pàgina bordeus d'amplada completa amb un disseny d'enllaços de diverses columnes. El ritme general és: fotograma principal → contingut blanc/crema tranquil → franja fosca amb la imatge principal → degradat atmosfèric → peu de pàgina bordeus, alternant franges clares i fosques per crear un tempo editorial.
L'element visual principal és la fotografia cinematogràfica: un retrat d'amplada completa contra un cel obert serveix com a punt focal, amb una segona franja atmosfèrica situada més avall a la pàgina. La imatge té uns tons càlids, és subtilment apagada i està fotografiada de perfil, cosa que recorda una hora daurada, creant un toc més editorial que corporatiu. Una franja fosca amb rectangles geomètrics translúcids i inscripcions manuscrites se superposa a una fotografia d'un home perdut en els seus pensaments: un collage de superfícies en lloc d'una sola imatge. La interfície d'usuari es presenta com a targetes de vidre flotants superposades directament a la fotografia, en lloc de captures de pantalla separades. No hi ha il·lustracions de stock, ni renders 3D ni formes decoratives abstractes, excepte la franja atmosfèrica en gradient. Les icones són icones de línia monocroma minimalistes, d'uns 16-20 px d'amplada, amb una sola amplada corresponent al pes del text de 460 punts.
Paleta
Marca
- Midnight Wine
#421d24— Els botons d'acció principals, el bàner publicitari i el peu de pàgina són d'un color bordeus càlid, gairebé negre, que sembla més tinta que vermell, ancorant la paleta de colors sense ser massa potent. - Royal Violet
#714cb6— El color porpra s'utilitza per ressaltar enllaços, etiquetes i frases curtes. No s'hauria d'utilitzar com a color principal per a les crides a l'acció.
Neutral
- Lilac Mist
#d4c7ff— El farciment de la superfície secundària, les icones de llum i els fons dels botons fantasma presenten un color porpra apagat que insinúa l'estil de la marca sense cridar l'atenció excessivament. - Deep Lagoon
#0c4243— El fons fosc de la tira, utilitzat com a element narratiu principal, és l'única superfície fosca del sistema, combinada amb un patró geomètric superposat. - Warm Parchment
#f2f0eb— La superfície de treball de la pàgina és l'element dominant; un color crema càlid substitueix el blanc com a base, donant a tot el sistema una calidesa editorial. - Soft Mist
#e3e3e2— Vores fines, contorns de cartolina, línies divisòries: un gris càlid i clar que es barreja amb el pergamí però defineix clarament les vores. - Ink Charcoal
#292827— Text del cos, encapçalaments, contorns d'icones: un color càlid, gairebé negre, amb prou marró per semblar tinta sobre paper, mai fred #000 - Stone Gray
#666666— Text secundari, textos de suport, descripcions discretes: un únic gris mitjà, utilitzat amb moderació per no competir mai amb el text principal.
Tipografia
de 12 a 64 px · 8 passos
- Super Sans VF — reemplaçament: Inter (closest open equivalent for variable weight range) · esquemes 460, 500, 540, 600, 700 · Una sola font en tot el sistema. Les variables d'eix abasten el rang de 460 (una font característica, lleugerament retallada per a tot el text d'encapçalament gran) a 540 (text del cos emfatitzat) i 700 (subtítols petits i en negreta). Un VF especialment dissenyat fa que els encapçalaments de pes 460 semblin més deliberats que desordenats: amb 48-64 px i un espaiat entre lletres ajustat, l'efecte "lleugerament retallat" es percep com a segur en lloc de prim.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 8px |
| Radi del botó | 16px |
| Radi de la targeta | 16px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 64-96px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Superhuman i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- AI for Business — Sala d'exposició editorial brutalista en tons grisos càlids
- Jeton — Un editorial sobre fintech sobre marbre calent
- Airtable — Un seminari acollidor amb capítols marcats amb diferents colors
- Osmo — El Museu dels Desenvolupadors sobre Formigó Gris
- Linktr — Els pòsters editorials estan apilats com caramels. El lloc web està dissenyat en blocs de colors, amb titulars de color verd brillant contra parets blau cobalt i elements de navegació blancs en forma de píndola flotant sobre camps bordeus.
- Outsource Consultants — Un full arquitectònic de gran format sobre paper d'os. Una estètica monogràfica, on una única taca brillant d'indi interromp la quadrícula, altrament càlida i tipogràficament maximalista.
- Streamtime — Tauler d'ambientació tàctil i creatiu: taula de scrapbooking de disseny
- Switch-Lit — Graella editorial impresa amb tinta sobre paper crema
- HubSpot — Un color paper crema càlid amb un únic detall taronja. HubSpot s'assembla a una revista de disseny impresa en paper gruixut: titulars amb serifes, pàgines crema càlides i un únic detall taronja ardent que destaca només els punts més importants.
- Granola — Notes de camp sobre vitel·la càlida: el granola es llegeix com un quadern Moleskine desgastat obert sobre un escriptori il·luminat pel sol: els encapçalaments amb serifes donen una sensació de solidesa, els detalls verds orgànics com la tinta vegetal i les línies fines als marges de les targetes semblen notes manuscrites.
- Secure — Una conversa en un cafè europeu a la llum del dia és una versió càlida i elegant de les videotrucades, on els titulars amb serifes semblen un article de revista reflexiu en lloc d'una pàgina de producte tecnològic.
- Mockups made easy — Estudi de disseny editorial sobre paper blanc