Il gergo del design è ovunque. E devi essere in grado di parlare la lingua. Lavorare su progetti digitali ha una propria terminologia. Dal dithering ai valori dei colori, ai layout fluidi o fissi, ci sono alcuni termini di cui ogni progettista deve avere una conoscenza.
Quindi ti abbiamo semplificato le cose e creato un elenco di termini di progettazione digitale che devi conoscere. Questa lista è iniziata tra le prime 10, ma abbiamo aggiunto un po 'di gergo bonus a fini comparativi. Quanti di questi termini conosci già?
1. RGB e HEX
Sia RGB che HEX si riferiscono a valori numerici di colore. Ogni colore nello spettro luminoso, sì, il colore dello schermo è creato con la luce, può essere ottenuto pettinando tre tonalità primarie.
- R = rosso
- G = Verde
- B = blu
I valori RGB sono espressi usando un insieme di tre numeri, in cui ogni numero varia da 0 (nessun uso di un colore) a 255 (valore di colore completo). Sullo schermo, anche il bianco e nero sono realizzati combinando questi valori. Il nero non usa valori di colore per rosso, verde e blu mentre il bianco usa valori del 100 percento per ciascuno.
I valori HEX usano una formula leggermente più complessa di lettere e numeri. Ogni valore HEX ha un valore RGB corrispondente. I codici HEX sono usati in HTML per codificare il colore nei siti web. Questi valori sono rappresentati da tre serie di coppie di caratteri che includono sia lettere che numeri.
I valori HEX iniziano sempre con un segno #. Il valore più basso è 00, mentre il valore più alto è FF.
2. Passaggio del mouse
Un mouseover è un elemento JavaScript che provoca la modifica di un elemento sullo schermo quando il puntatore del mouse lo raggiunge.
Questi cambiamenti riguardano spesso elementi grafici come le foto. Spesso si vede qualcosa di semplice come un collegamento ipertestuale, ma gli stati di mouseover possono essere anche complessi. Alcuni effetti di mouseover più complessi includono menu di navigazione nascosti o modifiche a stati di foto o elenchi a scorrimento.
3. retinatura
Un processo utilizzato nell'audio digitale e nell'editing delle immagini, il dither aiuta a prevenire il banding a colori o il rumore casuale. Il processo include in realtà una formula matematica complessa che aggiunge rumore intenzionale (visivo o audio).
Questa aggiunta di rumore può influire in particolare sul modo in cui le immagini appaiono in relazione alle immagini in una tavolozza di colori limitata. Con il dithering, il progettista può creare un'illusione di colore che potrebbe non esserci perché, con il rumore aggiunto, i pixel inizieranno ad assumere alcune delle proprietà cromatiche dei pixel vicini.
4. CSS
Le Cascading Style Sheets sono un insieme di regole che definiscono il modo in cui le cose appaiono su un sito Web, utilizzando un set di stili sfocati per gli elementi HTML.
Comunemente chiamati CSS, queste definizioni possono risparmiare molto tempo ai progettisti, aiutano i motori di ricerca a leggere il tuo sito e semplificano la creazione di un sito che abbia immagini coerenti. Con una singola modifica al CSS, tutti gli attributi di testo o colore possono essere modificati in un unico passaggio.
Funzionerà definendo le specifiche per elementi come la copia del corpo o le intestazioni, in cui un carattere, dimensione, colore, allineamento e altri valori vengono applicati ogni volta che viene utilizzato il tag HTML corrispondente.
5. Metadati e meta tag
Metadati e meta tag sono termini correlati. Meta tag relay metadata. I metadati sono informazioni sui dati, per quanto possa sembrare confuso, fornendo informazioni specifiche sul contenuto di un elemento in un file digitale. I metadati più comunemente riconosciuti includono le informazioni della videocamera che vedete sui file di foto digitali.
I metadati vengono anche utilizzati per descrivere il contenuto di un sito Web per i motori di ricerca e queste informazioni vengono aggiunte al back-end di un sito utilizzando meta tag. I tag comuni includono la descrizione del contenuto di una pagina, parole chiave, informazioni sull'autore, informazioni sulle foto e timbri di giorno, ora e posizione.
Vuoi vedere i meta tag in azione? Google quasi tutto. Quella breve descrizione che emerge dopo il nome e il link della pagina di solito proviene dalla descrizione? meta tag, rendendolo un elemento altamente visibile e importante nella tua casella degli strumenti di progettazione digitale. (Nota: se lasci questo tag vuoto, i motori di ricerca lo riempiranno per te con il primo bit di contenuto sulla tua pagina).
6. Favicon
Questa piccola icona, in genere 16 per 16 pixel, è l'immagine situata nella parte superiore di ogni scheda o finestra del browser. Ogni sito web può avere la sua favicon, che è l'abbreviazione di icona preferita. La piccola icona apparirà anche nelle cronologie di ricerca, accanto ai segnalibri e nelle schede del browser e icone del desktop.
Le favicon devono essere salvate e archiviate correttamente per funzionare su un sito web. Mentre molti browser supportano i formati GIF e PNG, Internet Explorer preferisce un file ICO.
Puoi creare la tua favicon utilizzando software come Adobe Photoshop o utilizzare uno strumento online come Favicon Generator.
7. Layout a larghezza fissa rispetto a fluido o reattivo
Ci sono così tanti termini che circolano in questi giorni che descrivono come funziona il tuo sito web all'interno di un browser o di un'interfaccia mobile. Prima di scegliere un tipo di concetto o griglia di progettazione, considera le opzioni di layout fisse, fluide e reattive.
Layout a larghezza fissa: Un layout a larghezza fissa funziona esattamente come suggerisce il nome. Un sito è costruito sulla base di un set di specifiche dimensionali e mantiene tali specifiche, indipendentemente dalla dimensione del dispositivo o del browser. Sebbene questi siti possano essere progettati rapidamente, possono essere scomodi da visualizzare su dispositivi più piccoli.
Layout fluido: I layout fluidi sono costruiti utilizzando un sistema di proporzioni relative al design e alle dimensioni dello schermo per rendere un sito. A ogni elemento del disegno viene assegnata una larghezza percentuale in relazione alle dimensioni dello schermo. Ad esempio, la colonna principale di testo può comprendere il 60 percento dello schermo mentre la barra laterale riempie il restante 40 percento. Durante l'utilizzo di un layout fluido, sono stati risolti alcuni dei problemi associati al design a larghezza fissa, il risultato finale a volte può essere difficile da determinare sul back-end. I layout fluidi possono funzionare bene con diversi ambienti di browser desktop, ma tendono a diventare un po 'goffi su dispositivi di dimensioni ridotte.
Layout reattivo: Responsive è la grande tendenza del 2013 e sta rilevando il modo in cui pensiamo al web design. Poiché la progettazione reattiva si adatta al dispositivo su cui è visualizzata, il design reattivo funziona quasi universalmente. Ogni elemento viene ridimensionato in base a percentuali, incluse immagini e testo e le query multimediali consentono di creare siti reattivi utilizzando stili CSS diversi. Il design reattivo non è solo una visione più piccola di un sito, può effettivamente includere una versione personalizzata del sito desktop completo, poiché gli elementi potrebbero essere impilati in modo diverso o includere funzionalità solo per dispositivi mobili, ad esempio toccando un numero di telefono sullo schermo per comporre esso. Il rovescio della medaglia, può richiedere più tempo per sviluppare e progettare.
8. Risoluzione
Quando si tratta di immagini, la risoluzione è un termine che sentirai spesso. E la risoluzione dello schermo è particolarmente importante per l'ottimizzazione delle immagini per una rapida visualizzazione sul web. La risoluzione di uno schermo è la dimensione visibile del display, ad esempio un browser che visualizza uno? Schermo? o scorrere di un sito web a 1.396 pixel di larghezza per 768 pixel di altezza.
La risoluzione di un'immagine è misurata allo stesso modo. Ma devi anche considerare i pixel per pollice quando salvi le immagini. Per i migliori risultati online, risparmiate a 72 ppi se non diversamente raccomandato. La larghezza e l'altezza delle immagini dovrebbero essere ridimensionate alla dimensione più grande che verranno utilizzate online, sebbene molti designer optino per una larghezza minima di 600 pixel, la dimensione ottimale per fissare su Pinterest.
9. UI vs.UX
UI e UX si riferiscono ai back-end e front-end del design digitale. Non puoi averne uno senza l'altro.
- Interfaccia utente (interfaccia utente) - Sono tutti i componenti e il lavoro che va nella creazione di un sito web. L'interfaccia utente sta facendo funzionare tutto, da tutti i componenti utilizzati per costruire un design del sito a come funziona ogni parte.
- UX (esperienza utente) - è come il design funziona per gli utenti reali. Quale esperienza, emozione o reazione crea il prodotto finale? Quello che può essere difficile è che una buona interfaccia utente è ciò che in genere crea un'esperienza utente eccellente.
Ottieni una lezione approfondita su questi termini in un precedente articolo di Design Shack.
10. Skeuomorphism vs. Flat
Quasi tutti hanno avuto qualche tipo di esperienza con lo skeuomorphism o la progettazione piatta negli ultimi mesi, grazie all'abbondanza di progettisti di siti che stanno diventando "piatti".
Il design Skeuomorphic include elementi e trucchi di progettazione per rendere l'aspetto di un'interfaccia utente o operare in modo realistico. Dalle ombre alle smussature o ai pomelli che ruotano? con un clic del mouse o scroll, lo skeuomorphism incarna un senso di "falso realismo". L'esempio più noto di design skeuomorphic è l'interfaccia iOS di Apple, che presenta sfumature, trame e ombre.
Il design piatto, d'altra parte, è senza abbellimenti o "realismo". Lo stile è semplicissimo e non include alcun elemento che gli conferisca una sensazione tridimensionale. L'esempio più noto di design piatto è l'interfaccia di Windows, inclusa quella di Windows Phone, con lo stile dei blocchi.
Conclusione
Ora che conosci il gergo, esci e inizia a creare. Non dimenticare di dare un'occhiata alla guida di Design Shack a 10 termini di progettazione della stampa che devi conoscere, in modo da avere una buona comprensione in entrambe le aree!
Fonte immagine: Robert Scoble.