Superhuman
kultaisen tunnin toimituspaneeli
Superhuman on toimituksellisen valokuvauksen ja ohjelmistokäyttöliittymän leikkauspiste – lämmin, pergamenttimainen kangas (ei koskaan puhtaan valkoinen) kehystää viininpunaisia brändäyselementtejä ja eloisia violetteja yksityiskohtia. 460-fonttisella otsikolla piirretyt kuiskaukset pikemminkin kuin huutavat, antaen koko sivun elokuvamaisen valokuvauksen tehdä raskaan työn, kun taas läpikuultavat tuote-käyttöliittymäkortit leijuvat kuin lasi kuvien yläpuolella. Väripaletti pysyy rauhallisena ja toimituksellisena suurimman osan ajasta: kermanväriset pinnat, hiilenharmaa teksti, hienovaraiset lämpimän harmaat reunat ja reilusti elementtien välillä olevia välejä, ja väri on varattu tarkoitukselliselle brändimerkeille – yksi viininpunainen toimintakehotus, violetit linkit, vaaleanlila lisäosapainike. Järjestelmä välttää tarkoituksella voimakkaita varjoja ja liukuvärejä käyttöliittymän pinnoilla; syvyys saavutetaan kerrostetun valokuvauksen ja hienovaraisen taustan sumennuksen avulla otsikossa pinoamistehosteen sijaan.
Pääelementti on täysleveä valokuva, jossa on keskitetty otsikko (48–64 pikseliä/460) ja yksi toimintakehotus, joka on täytetty viinin kuvalla. Vasemmalla ja oikealla reunalla on päällä kelluvia läpikuultavia tuote-käyttöliittymäkortteja. Pääelementin alapuolella on valkoinen raidallinen logonauha (6 solua rivillä, enimmäisleveys rajoitettu) ja sitten välilehtiosio, jossa on valkoiset kartonkipinnat pergamenttikankaalla. Tumman turkoosi raita rikkoo rytmin noin kahden kolmasosan kohdalla sivusta – täysleveä, kaksi saraketta (kuva vasemmalla, teksti oikealla) – luoden ainoan sävykontrastin vieritettäessä. Seuraavaksi seuraa liukuvärjätty tunnelmallinen raita. Osioiden välinen pystysuora etäisyys on 64–96 pikseliä. Sisällön enimmäisleveys on noin 1200 pikseliä keskitettynä, ja pääelementti ja tumma raita kattavat koko näyttöalueen leveyden. Navigointi koostuu yhdestä kiinteästä otsikosta, jossa on sumennettu tausta; ei sivupalkkia eikä megavalikkoa. Alatunniste on täysleveä viininpunainen sivu, jossa on monisarakkeinen linkkien asettelu. Yleinen rytmi on: pääkuva → rauhallinen valkoinen/kermanvärinen sisältö → tumma raita pääkuvan kanssa → tunnelmallinen liukuvärjäys → viininpunainen alatunniste, jossa vuorottelevat vaaleat ja tummat raidat luovat toimituksellisen tempon.
Ensisijainen visuaalinen elementti on elokuvamainen valokuvaus: koko leveyden omaava muotokuva avointa taivasta vasten toimii keskipisteenä, ja toinen tunnelmallinen raita sijaitsee alempana sivulla. Kuva on lämpimän sävyinen, hienovaraisesti hillitty ja kuvattu profiilista, tuoden mieleen kultaisen tunnin, luoden enemmän toimituksellisen kuin yritysmäisen tunnelman. Tumma raita, jossa on läpikuultavia geometrisia suorakulmioita ja käsin kirjoitettuja kaiverruksia, on asetettu miehestä miehestä tehdyn valokuvan päälle – se on pikemminkin pintojen kollaasi kuin yksi kuva. Käyttöliittymä esitetään kelluvina lasikortteina, jotka on asetettu suoraan valokuvan päälle, eikä erillisinä kuvakaappauksina. Kuvakkeissa ei ole kuvapankkikuvituksia, 3D-renderöintejä tai abstrakteja koristemuotoja, lukuun ottamatta liukuvärjättyä tunnelmallista raitaa. Kuvakkeet ovat minimalistisia yksivärisiä viivakuvakkeita, noin 16–20 pikseliä leveitä, ja niiden leveys vastaa 460 pisteen tekstin painoa.
Paletti
Merkki
- Midnight Wine
#421d24— Tärkeimmät toimintopainikkeet, bannerimainos ja alatunniste ovat lämpimän, lähes mustan viininpunaisia, jotka tuntuvat enemmän musteelta kuin punaiselta, ankkuroiden väripalettia olematta liian voimakas. - Royal Violet
#714cb6— Violettia käytetään linkkien, tunnisteiden ja lyhyiden lauseiden korostamiseen. Sitä ei tule käyttää toimintakehotuksen päävärinä.
Neutraali
- Lilac Mist
#d4c7ff— Toissijaisen pinnan täyttö, vaaleat kuvakkeet ja haamupainikkeiden taustat ovat kaikki hillittyä violettia väriä, joka vihjaa brändin tyyliin kiinnittämättä kuitenkaan liiallista huomiota itseensä. - Deep Lagoon
#0c4243— Nauhan tumma tausta, jota käytetään pääkerronnan elementtinä, on järjestelmän ainoa tumma pinta yhdistettynä päällekkäin asetettuun geometriseen kuvioon. - Warm Parchment
#f2f0eb— Sivun työskentelypinta on hallitseva elementti; lämmin kermanväri korvaa valkoisen pohjana, mikä antaa koko järjestelmälle toimituksellisen lämmön. - Soft Mist
#e3e3e2— Hienot reunat, korttien ääriviivat, jakoviivat – lämmin, vaaleanharmaa, joka sulautuu pergamenttiin, mutta määrittelee reunat selvästi. - Ink Charcoal
#292827— Leipäteksti, otsikot ja kuvakkeiden ääriviivat – lämmin, lähes musta väri, jossa on tarpeeksi ruskeaa tuntuakseen musteelta paperilla, ei koskaan kylmä #000 - Stone Gray
#666666— Toissijainen leipäteksti, tukitekstit, huomaamattomat kuvaukset – yksi keskiharmaa sävy, jota käytetään säästeliäästi, jotta se ei koskaan kilpaile päätekstin kanssa.
Typografia
12:sta 64 pikseliin · 8 askelta
- Super Sans VF — korvaava: Inter (closest open equivalent for variable weight range) · ääriviivat 460, 500, 540, 600, 700 · Yksi fontti koko järjestelmässä. Akselimuuttujat kattavat koon 460:stä (tyypillinen, hieman rajattu fontti kaikelle suurelle otsikkotekstille) 540:een (korostettu leipäteksti) ja 700:aan (pienet, lihavoidut kuvatekstit). Erityisesti suunniteltu visuaalinen näkymä saa 460-painotteiset otsikot näyttämään harkitummilta kuin sattumanvaraisilta – 48–64 pikselin koossa ja tiheällä kirjainvälillä "hieman rajattu" vaikutelma vaikuttaa itsevarmalta eikä ohuelta.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 8px |
| Painikkeen säde | 16px |
| Kortin säde | 16px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 64-96px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Superhuman -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- AI for Business — Brutalistinen toimituksellinen showroom lämpimin harmaan sävyin
- Jeton — Pääkirjoitus fintechistä lämpimällä marmorilla
- Airtable — Viihtyisä seminaari, jonka luvut on merkitty eri väreillä
- Osmo — Kehittäjämuseo harmaalla betonilla
- Linktr — Pääkirjoitusten julisteet ovat pinossa kuin karkit. Verkkosivusto on suunniteltu väriblokeina, kirkkaanvihreillä otsikoilla koboltinsinisiä seiniä vasten ja valkoisilla pillerinmuotoisilla navigointielementeillä, jotka leijuvat viininpunaisten peltojen yllä.
- Outsource Consultants — Suurikokoinen arkki luupaperille. Monografinen estetiikka, jossa yksi kirkas indigon laikku katkaisee muuten lämpimän, typografisesti maksimalistisen ruudukon.
- Streamtime — Taktiilinen luova tunnelmataulu - suunnittelijan scrapbooking-pöytä
- Switch-Lit — Toimituksellinen ruudukko painettu musteella kermanväriselle paperille
- HubSpot — Lämmin kermanvärinen paperi yhdellä oranssilla aksentilla. HubSpot muistuttaa paksulle paperille painettua design-lehteä – serif-otsikot, lämpimän kermanväriset sivut ja yksi tulisen oranssi aksentti korostaen vain tärkeimmät asiat.
- Granola — Kenttämuistiinpanoja lämpimällä vellumilla – Granola lukee kuin kulunut Moleskine-muistikirja, joka on avattu auringon valaisemalla pöydällä: serif-otsikot antavat vakautta, orgaaniset vihreät yksityiskohdat, kuten kasvipohjainen muste, ja korttien reunoissa olevat ohuet viivat muistuttavat käsin kirjoitettuja muistiinpanoja.
- Secure — Keskustelu eurooppalaisessa kahvilassa pehmeässä päivänvalossa on lämmin ja tyylikäs näkemys videopuheluista, joissa serif-otsikot tuntuvat harkitulta aikakauslehtiartikkelilta pikemminkin kuin teknisen tuotteen sivulta.
- Mockups made easy — Toimituksellinen suunnittelustudio valkoisella paperilla