Figma
xasis monokromoa kaos kromatikorako
Interfazeak egitura-edukiontzi zorrotz eta kontraste handiko gisa funtzionatzen du, erabiltzaileek sortutako edukiari nagusitasun bisual osoa emanez. Oinarrizko lerroa #000000tik #ffffffra bitarteko paleta zorrotza da, gris tonu sotilak alde batera utziz ertz nagusietarako eta testurako kontraste maximo absolutua bultzatuz. Hierarkia tipografikoa ia erabat tamainan eta letren arteko tarte negatibo oldarkorrean oinarritzen da, kolore-aldaeretan baino, testu-lerro handiak bloke grafiko trinko bihurtzen dituena. Ertz-erradioaren logikak dikotomia nabarmena sortzen du: nabigazio-elementu globalen 50px-ko kanpoko "iltzeak" nahita kontrastatzen dira eduki-ontzien 0px-ko izkin nabarmenekin.
Konposizioak ikus-eremuaren erdian dauden gehienezko zabalerako ertzetan oinarritzen dira (gehienez 1440px), eta eduki multzo trinkoak dituzte, makro-espazio zabal batez bereizita (96-120px-ko zuriuneak atalen artean). "Heroi" arketipoak askotan irudi galeria asimetriko bat erabiltzen du, UI bloke flotatzaile eta perfektuki zentratu baten azpian dinamikoki ainguratuta. Tolesturaren azpian, informazioa berehala egokitzen da marjinarik gabeko lau zutabeko sareta zorrotz bati, txartel multzo errepikakorrak markoztatuz, objektuen dentsitatea maximizatuz eta markoaren marjinak ezabatuz.
Diseinu bisuala erabiltzailean oinarritutako emaitzetan oinarritzen da. Irudiak karratu lau eta markorik gabeko gisa edo zati sakabanatu eta gainjarri gisa bistaratzen dira, objektu fisikoak gogorarazten dituztenak, atzealde huts eta huts baten aurrean. Irudiak dira webguneko kolore iturri bakarra. Ez dago bizimodu argazkilaritzako elementurik edo enpresa-ilustrazio estandarrik: elementu grafiko bakoitza mihise digital baten argazki zehatz eta literala da, produktuaren froga eta elementu estetiko nagusi gisa aldi berean funtzionatzen duena.
Paleta
Marka
- Context Action Violet
#4d49fc— Azpi-paneletan tokiko ekintzarako dei nagusia - kolore etengarri bakar batek definitzen du foku-puntua.
Neutroa
- Absolute Canvas
#ffffff— Orriaren atzeko planoa, tresna-barra flotatzaileak, panelen oinarri altxatuak. - Structural Ink
#000000— Oinarrizko letra-tipoa, botoien atzeko plano solidoa, botoien eskemak. - Graphite Metadata
#595959— Bigarren mailako egile-testua, azpitestu lokalizatua, leku-markatzaileen balioak - Boundary Frame
#e2e2e2— Bereizle sotilak eta sarrera-eremu inaktiboen mugak. - Angular Teal
#33dfdf— Efektu apaingarriak, kargatzeko adierazleak eta kurtsore aktiboaren bistaratzea.
Tipografia
12tik 72px-ra · 6 urrats
- figmaSans — ordezkapena: Inter · eskemak 320, 330, 340, 400, 450, 480, 520, 700 · Tresna polifazetikoa, pantailako izenburuetatik hasi eta nabigazio-etiketetaraino dena kudeatzen duena. Itxura berezia sortzen du negatibo optikoaren jarraipena aldatuz.
- figmaMono — ordezkapena: JetBrains Mono · eskemak 400 · Mikroetiketak, koordenatuen jarraipena eta ñabardura teknikoak, eduki gisa baino gehiago erabiltzaile-interfazearen elementu gisa funtzionatzen dutenak.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 24px |
| Botoiaren erradioa | 8px |
| Txartelaren erradioa | 12px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 96-120px |
| Orriaren zabalera | 1440px |
Adimen artifizialak zure webgunea Figma 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
- Caldera — Sua kareharri epelaren gainean erregosia egin. Mihisea igeltsu gordin eta epela da, eta laranja koloreko elementu bakoitza gainazalean sartutako txingar ketsuen antza du.
- Vercel — Terminala paper zurian inprimatuta
- Dylanbrouwer — Brutalista galdategia ilunabarrean
- Headspace — Ongizate txoko eguzkitsu bat paper epel batean
- WHOOP — Gauerdiko emanaldi-laborategia - mahai zuri klinikoak hutsune teatral beltz baten azpian, elektrizitate-pultsu more bakarra
- (dot)connect — Suitzako ingeniaritza-marrazki bat ikatz-zati bakarrarekin
- Together AI — Ikerketa kontsola glaziar-paperean
- Vivid+Co — argi prismatikoa obsidianaren bidez
- Sequel — Iluntasun handiko zinema batean, iluntasunean dagoen emanaldi pribatu bat da argi epel bakarra.
- v0 by Vercel — Tornuzko marrazketa. Zehaztasuna eta funtzionaltasuna dira garrantzitsuenak, elementu bakoitzak helburu argi bat betetzen duelarik gainazal garbi eta teknikoki perfektu batean.
- ThoughtLab — Obsidiana monumentu bat seinale gorrixka batekin. Hutsune beltzaren mihise bat, non katedraleko objektu gorri saturatu bakarra, letra zuri handiz inprimatua, irudi kromatiko bakarra den.
- Dovetail — Ilargi beltz baten azpian plano bat — ia ikusten ez diren grafiko-lerroak, letra-tipo zuria, distira more bat