Accessibilità Accessibility
L'accessibilità aiuta le persone con abilità diverse a capire e usare un prodotto.
↗Design
Impara come rendere gli schermi chiari, coerenti, facili da usare e accessibili a tutti.
01 / Atlas
Tutti i termini di Design
Apri un termine per un significato semplice, un esempio, quando usarlo, quanto è ufficiale e il suo nome codice.
-
01 · Nucleo -
02 · Nucleo Anello di messa a fuoco Focus Ring
Una linea o un evidenziazione visibili attorno al controllo che in quel momento riceve i comandi dalla tastiera.
↗ -
03 · Più dettagli Angolo CSS a squircle CSS Squircle Corner
Nel draft CSS Borders Level 4, squircle è un valore di forma per angoli di una superellisse convessa tra rotonda e quadrata. Equivale a superellipse(2), richiede un raggio del bordo non nullo e necessita ancora di un controllo di supporto del browser.
↗ -
04 · Più dettagli Aqua Aqua
Aqua è uno stile di interfaccia luminoso legato ai primi macOS. Usa controlli brillanti, profondità gelatinosa, strisce sottili e dettagli blu acceso.
↗ -
05 · Più dettagli Border Radius & Squircle — Pacchetto di apprendimento Border Radius & Squircle — Learning Bundle
Questa guida separa tre idee. Sono il border-radius standard CSS, la forma dell'angolo in bozza: squircle, e altre forme simili allo squircle o maschere di piattaforma. Il pacchetto non è un termine di design standard unico.
↗ -
06 · Nucleo Bordo Radius CSS CSS Border Radius
Il border-radius CSS crea gli angoli delle scatole a partire da quarti di ellisse usando raggi orizzontali e verticali. Modifica la pittura e il clipping, ma non la dimensione del layout della scatola, e non crea uno squircle matematico.
↗ -
07 · Più dettagli Brutalismo Web Web Brutalism
Il brutalismo web è uno stile web grezzo. Mostra la struttura, le impostazioni predefinite del browser, il tipo semplice e la ruvidezza pianificata invece della consueta lucidatura.
↗ -
08 · Più dettagli Claymorphism Claymorphism
Claymorphism è uno stile giocoso con forme soffici e angoli arrotondati. Ombre morbide e superfici pastello lo fanno sembrare argilla.
↗ -
09 · Nucleo Componente Component
Un Component è una parte riutilizzabile di un'interfaccia, con una struttura, un comportamento, degli stati e dei limiti chiari.
↗ -
10 · Nucleo Contrasto dei colori Color Contrast
Il contrasto dei colori è la differenza di luminanza misurata tra il contenuto e lo sfondo vicino. Mostra se il testo chiave e i bordi sono facili da vedere.
↗ -
11 · Nucleo Design editoriale Editorial Design
Il design editoriale organizza una storia attraverso il ritmo di lettura, il tipo, le immagini, le didascalie e i modelli di pagina che si ripetono.
↗ -
12 · Nucleo Design Organico Organic Design
Il Design Organico segue le forme presenti in natura. Utilizza curve irregolari, texture tattili, colori naturali e layout meno meccanici.
↗ -
13 · Nucleo Design piatto Flat Design
Il design piatto utilizza forme semplici, colori solidi e aree piatte chiare, con poca profondità finta.
↗ -
14 · Nucleo Design Responsive Responsive Design
Il Design Responsive permette a layout, contenuti e controlli di cambiare per adattarsi allo spazio e al dispositivo disponibile.
↗ -
15 · Più dettagli Digita Scala Type Scale
Una Type Scale è un piccolo set pianificato di dimensioni del testo e altezze delle righe.
↗ -
16 · Nucleo E-commerce diretto al consumatore DTC E-commerce
Il commercio elettronico DTC consente a un marchio di vendere direttamente ai consumatori. Copre scoperta, scelta dei prodotti, pagamento, consegna e assistenza post-vendita.
↗ -
17 · Nucleo Estetica del terminale Terminal Aesthetic
L'estetica del Terminal prende in prestito dagli schermi a linea di comando. Usa testo monospaziato, gerarchia stretta, segni di prompt, pochi colori e stato chiaro.
↗ -
18 · Più dettagli Estetica digitale Y2K Y2K Digital Aesthetic
Questa estetica digitale è uno stile retro-futuro della cultura digitale tra la fine degli anni '90 e i primi anni 2000. Spesso utilizza chrome, pixel, gradienti brillanti e dettagli informatici giocosi.
↗ -
19 · Più dettagli Frutiger Aero Frutiger Aero
Frutiger Aero è uno stile speranzoso degli anni 2000. Mescola interfacce lucide con cieli azzurri, acqua, piante verdi, bolle e tecnologia dall'aspetto amichevole.
↗ -
20 · Nucleo Gerarchia Visiva Visual Hierarchy
La Gerarchia Visiva guida ciò che le persone notano prima, dopo e per ultimo attraverso dimensione, contrasto, posizione e spazio.
↗ -
21 · Più dettagli Glassmorphism Glassmorphism
Il Glassmorphism è uno stile visivo con superfici stratificate trasparenti. Utilizza sfocatura, bordi luminosi e un piccolo senso di profondità.
↗ -
22 · Nucleo Gradiente Gradient
Un gradient è un passaggio fluido tra colori o trasparenze. Può seguire una linea, un cerchio, un angolo o una mesh.
↗ -
23 · Più dettagli Iconografia Iconography
L'iconografia è un insieme di simboli condivisi con aspetti corrispondenti e significati chiari per azioni e idee.
↗ -
24 · Nucleo Illustrazione giocosa Playful Illustration
L'illustrazione giocosa utilizza personaggi, forme, colori e battute visive vivaci. Può aggiungere calore, significato o carattere al marchio.
↗ -
25 · Più dettagli Invito all'azione Affordance
Un invito all'azione è un indizio visibile o tangibile che mostra come si può usare un oggetto.
↗ -
26 · Più dettagli Linee guida sull'interfaccia umana di Apple Apple Human Interface Guidelines
Le linee guida sull'interfaccia umana di Apple spiegano il design per le piattaforme Apple. Coprono azioni, elementi visivi, controlli, input, accessibilità e differenze tra piattaforme.
↗ -
27 · Nucleo Material Design Material Design
Material Design è un sistema per componenti e interazioni. Usa superfici stratificate, movimenti con uno scopo, layout flessibili e token di design condivisi.
↗ -
28 · Nucleo Minimalismo Minimalism
Il minimalismo rimuove ciò che un design non necessita. Mantiene comunque il prodotto chiaro, utile e distinto.
↗ -
29 · Nucleo Modalità scura Dark Mode
La modalità scura cambia superfici, testo, bordi, media e stati per un ambiente scuro.
↗ -
30 · Più dettagli Neobrutalismo Neobrutalism
Il Neobrutalismo è uno stile digitale audace e ad alto contrasto. Usa forme semplici, bordi spessi, colori diretti e un layout meccanico chiaro.
↗ -
31 · Più dettagli Neumorfismo Neumorphism
Il Neumorfismo è uno stile morbido a basso contrasto. Ombre chiare e scure fanno sembrare i controlli sollevati o incassati in una superficie di colore unico.
↗ -
32 · Nucleo Ombra & Elevazione Shadow & Elevation
Un'ombra è un effetto visivo. L'elevazione è la relazione di profondità che l'ombra può spiegare tra le superfici.
↗ -
33 · Più dettagli Rivelazione progressiva Progressive Disclosure
La Rivelazione progressiva mostra prima le scelte necessarie e rivela opzioni più difficili solo quando sono importanti.
↗ -
34 · Nucleo Scala dello spazio Spacing Scale
Una Spacing Scale è un piccolo set di dimensioni per gli spazi. Mostra i gruppi e mantiene un ritmo visivo costante.
↗ -
35 · Più dettagli Scheumorfismo Skeuomorphism
Lo scheumorfismo copia oggetti reali familiari per spiegare un controllo digitale. Può anche copiarne i materiali.
↗ -
36 · Nucleo Sistema di Design Design System
Un Design System è un insieme condiviso e aggiornato di regole, design token, componenti, pattern e guide.
↗ -
37 · Nucleo Sito aziendale B2B B2B Corporate Site
Un Sito Aziendale B2B aiuta i gruppi aziendali a controllare le competenze, le regole, l'affidabilità e la compatibilità di un'azienda. Supporta anche gli acquisti o le partnership.
↗ -
38 · Nucleo Sito Marketing SaaS SaaS Marketing Site
Un Sito di Marketing SaaS spiega un problema e un servizio software a un pubblico. Aiuta i visitatori a capire se fa al caso loro e a scegliere il passo successivo.
↗ -
39 · Nucleo Spazio di lavoro in stile Notion Notion-style Workspace
Un Workspace in stile Notion usa un aspetto dei documenti calmo. Preferisce testo leggibile, blocchi di contenuto, controlli silenziosi e spazio aperto.
↗ -
40 · Nucleo Stato dell'interazione Interaction State
Uno Stato di interazione mostra la condizione attuale di un controllo. Esempi: predefinito, al passaggio del mouse, con focus, premuto, disattivato, in caricamento, errore e successo.
↗ -
41 · Più dettagli Stile Memphis Memphis Style
Lo Stile Memphis è un aspetto audace e postmoderno. Utilizza forme forti, colori contrastanti, motivi, bilanciamento irregolare ed energia giocosa.
↗ -
42 · Più dettagli Stile svizzero Swiss Style
Lo stile svizzero utilizza griglie chiare e layout irregolari ma bilanciati. Usa anche caratteri sans-serif, fotografie e un ordine visivo rigoroso.
↗ -
43 · Nucleo Tavolozza dei colori Color Palette
Una Tavolozza di Colori è un set di colori programmato. Ogni colore ha un ruolo, uno stato o una superficie chiara.
↗ -
44 · Nucleo Tipografia Typography
La tipografia è come vengono scelti e disposti gli stili del testo per rendere le parole leggibili, ordinate e in linea con il brand.
↗ -
45 · Nucleo Token di design Design Token
Un Design Token dà un nome a una singola scelta di design. Alcuni esempi sono un colore, uno spazio, un carattere o la velocità di un'animazione.
↗ -
46 · Nucleo Variante Variant
Una variante è una versione approvata di un componente per una dimensione, un peso o un'impostazione diversa.
↗ -
47 · Più dettagli Vetro Liquido Liquid Glass
Il Vetro Liquido è uno stile di materiale chiaro e in movimento. Usa piegature simili a lenti, riflessi e forme che sembrano unirsi o flettersi.
↗ -
48 · Più dettagli Wabi-sabi Wabi-sabi
Wabi-sabi è una visione giapponese della bellezza. Valuta i limiti, il cambiamento, la forma irregolare, l'età e i materiali autentici rispetto alla lucidatura perfetta.
↗ -
49 · Più dettagli Web vernacolare Vernacular Web
Il web vernacolare copia i siti quotidiani che le comunità creano. Differisce dai sistemi raffinati creati da grandi gruppi.
↗ -
50 · Più dettagli Windows Aero Windows Aero
Windows Aero è uno stile desktop della fine degli anni 2000. Usa cornici delle finestre trasparenti, vetro sfocato, bagliore morbido e bordi stratificati.
↗