Archivi tag: graphic interface

Elementi base del design di interfacce

Alcune nozioni di base sugli elementi che compongono il visual design

Il design visivo si concentra sull’estetica di un sito e dei suoi materiali correlati utilizzando strategicamente immagini, colori, caratteri e altri elementi.

Un design visivo di successo non toglie nulla al contenuto della pagina o della funzione. Invece, lo migliora coinvolgendo gli utenti e contribuendo a creare fiducia e interesse per il marchio.

Elementi di base del design visivo

Gli elementi di base che si combinano per creare disegni visivi includono quanto segue:

  • Le linee collegano due punti e possono essere utilizzate per aiutare a definire forme, creare divisioni e creare trame. Tutte le linee, se sono diritte, hanno lunghezza, larghezza e direzione.
  • Le forme sono aree autonome.
  • Per definire l’area, l’artista grafico utilizza linee, differenze di valore, colore e / o trama. Ogni oggetto è composto da forme. Le scelte e le combinazioni di palette di colori vengono utilizzate per differenziare gli oggetti, creare profondità, aggiungere enfasi e / o aiutare a organizzare le informazioni.
  • La teoria del colore esamina in che modo le varie scelte influenzano psicologicamente gli utenti.
  • La trama si riferisce a come una superficie si sente o è percepita come percepita. Ripetendo un elemento, verrà creata una trama e formato un motivo. A seconda di come viene applicata una texture, può essere usata strategicamente per attirare o dissuadere l’attenzione.
  • La tipografia si riferisce a quali tipi di carattere vengono scelti, le loro dimensioni, l’allineamento, il colore e la spaziatura. Il modulo si applica agli oggetti tridimensionali e ne descrive il volume e la massa.
  • La forma può essere creata combinando due o più forme e può essere ulteriormente migliorata con toni, trame e colori diversi.

Principi per la creazione di un disegno visivo

Una progettazione visiva di successo applica i seguenti principi agli elementi sopra riportati e li riunisce efficacemente in un modo che abbia senso.

Quando si cerca di capire come utilizzare gli elementi di base, si consideri:

  • Unity ha a che fare con tutti gli elementi di una pagina visivamente o concettualmente apparire insieme. Il design visivo deve trovare un equilibrio tra unità e varietà per evitare un design noioso o travolgente.
  • Gestalt, nel visual design, aiuta gli utenti a percepire il design complessivo in contrasto con i singoli elementi. Se gli elementi di design sono disposti correttamente, la Gestalt del design generale sarà molto chiara.
  • Lo spazio è “definito quando qualcosa è inserito” Lo spazio bianco è una parte importante della strategia di layout.
  • La gerarchia mostra la differenza di significato tra gli elementi. I progettisti creano spesso gerarchie attraverso diverse dimensioni, colori e posizionamento dei caratteri nella pagina. Di solito, gli articoli nella parte superiore sono percepiti come i più importanti.
  • L’equilibrio crea la percezione che ci sia una distribuzione equa. Questo non implica sempre che ci sia simmetria.
  • Il contrasto si concentra sul far risaltare gli oggetti enfatizzando le differenze in termini di dimensioni, colore, direzione e altre caratteristiche.
  • Scala identifica una gamma di dimensioni; crea interesse e profondità dimostrando come ogni articolo si rapporta l’un l’altro in base alle dimensioni.
  • Dominance si concentra sull’avere un elemento come punto focale e gli altri come subordinati. Questo è spesso fatto attraverso il ridimensionamento e il contrasto in base a dimensioni, colore, posizione, forma, ecc.
  • La somiglianza si riferisce alla creazione di continuità attraverso un disegno senza duplicazione diretta.
  • La similarità viene utilizzata per far lavorare i pezzi su un’interfaccia e aiutare gli utenti a imparare l’interfaccia più rapidamente

Internet facile: usare il grigio nel web design

Il grigio non è un colore neutro ed equilibrato. Non è nemmeno un colore freddo e conservatore che raramente evoca emozioni forti. Non è un colore e basta!

Il grigio è una tonalità di non colore, una sfumatura del nero, il non colore per eccellenza. Il buio dentro una miniera non è un colore come non lo è il cielo di una notte senza stelle. Quindi non venitemi a dire che il nero oppure una sua tonalità annacquata e cioè il grigio sono colori.

Se pensate che io sia uno svitato, guardate di che colore facevano le ombre Van Gogh e prima di lui Monet, Manet, Cezanne, Degas e tutti gli altri impressionisti che hanno fatto creato il moderno gusto per l’immagine.

Nero mai, invece colori riportati in tonalità scure semmai. Il risultato è quel colore naturale e vero che tutti conosciamo. Perchè mai questa regola non dovrebbe valere nel web design?

Una volta consapevoli di questo usiamo pure il grigio, sapendo che esitono infinte tonalità di colori “ingrigiti” che si possono adattare alla palette della nostra UI, proprio come hanno fatto gli impresssionisti.

Il grigio comunque è talmente neutro che anche se usato “puro” assorbirà come una spugna le tonalità di colore dei campi a lui vicini.

Sfumature di grigio

Varie sfumature del grigio sono: cenere, cinereo, grigio antracite, canna di fucile, grigio ferro, piombo, topo, ostrica, grigio di Payne, perla, grigio polvere, sere, argento, ardesia, taupe.

I colori grigi vanno dal quasi nero al quasi bianco e portano un accenno dialtri colori. Il grigio e l’argento sono talvolta usati come intercambiabili, sebbene l’argento abbia una lucentezza più lucida e metallica.

Natura e cultura del grigio

Il lato più chiaro del nero, il colore grigio è un colore tendenzialmente freddo visto in nubi temporalesche e alcuni metalli anche e esistono tonalità calde, a seconda del colore di base.

Come il nero, il grigio è usato come colore del lutto e anche come colore formale. Il grigio scuro antracite porta con sé parte della forza e del mistero del nero. È un colore sofisticato senza molti degli attributi negativi del nero. I grigi più chiari sono simili al bianco.

Uso del grigio nel design

Tutte le tonalità di grigio possono essere buoni colori di sfondo neutri.E’ buona norma utilizzare i colori grigi più chiari al posto del bianco e del grigio più scuro al posto del nero.

Taupe, un grigio neutro marrone è una tonalità di grigio conservativa, leggermente terrosa, calda.

Utilizza le immagini in scala di grigi per evocare una sensazione di nostalgia o storia.

Uso con colori e tavolozze colore complementari

I grigi chiari con tonalità pastello di rosa, blu, lavanda e verde hanno una qualità femminile – scurisci quei colori per un tocco più maschile.

Il grigio con il rosa acceso conferisce un tocco retrò. Puoi rinfrescare una tavolozza calda aggiungendo grigio a rossi ricchi o gialli dorati.

Le combinazioni di colori creativi sono caratterizzate da numerose tavolozze di colori tenui centrate su toni di grigio.

Le frasi familiari possono aiutare un progettista a vedere come il loro colore di scelta potrebbe essere percepito dagli altri, sia gli aspetti positivi che quelli negativi. “Buono” materia grigia grigia – cervello, intelletto Potere grigio – avere a che fare con anziani o anziani “Cattivo” grigio Grigio – opaco, sporco, sporco.

Pagina grigia o testo grigio – in desktop publishing, una pagina di testo pesante con poco contrasto o spazio bianco

Capelli grigi – persona anziana (non necessariamente dispregiativa)

Acqua grigia – acqua sporca come l’acqua scolata dalla vasca da bagno o dal lavello della cucina.

I principali colori esadecimali

Se non sapete cosa sono i colori esadecimali ve lo diciamo noi.

Si tratta di una gamma ben definita di colori rappresentati ognuno da un codice composto da 6 tra lettere e numerie nel dettaglio sono:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, dove zero è pari a 0 e F è pari a a 15.

La base esadecimale è usata nella maggior parte dei programmi di grafica per identificare inequivocabilmente un colore ben specifico. In particolare il codice esadecimale viene riconosciuto nel linguaggio html, ed utilizzato nei fogli stile (css).

Vi consigliamo quindi di utilizzare il codice esadecimale esattamente come usate il codice Pantone per definire i colori dei vostri progetti di corporate image.

Per quanto riguarda il linguaggio HTML i colori sono indicati con un codice a 6 caratteri preceduto dal simbolo # che indica appunto un colore.

Prendiamo in esame il colore bianco, in base esadecimale è indicato come #FFFFFF
è composto da:

FF = 255 Rosso
FF = 255 Verde
FF = 255 Blu

255 parti di rosso, 255 parti di verde e 255 parti blu

Se si utilizza un editor ad oggetti o wysiwyg (What You See Is What You Get) come Dreamweaver o Frontpage le conversioni relative ai colori saranno eseguiti automaticamente in base al colore selezionato.Comunque , e ne parleremo, non fatevi ingannare da queste allettanti promesse, usate un editor testuale per scrivere il vostro codice.

Nonostante il numero massimo di colori ottenibile è pari a 16.777.216 (256*256*256) possiamo usare solo 216 colori che vengono indicati come i colori sicuri (web safe)ossia colori che verranno visualizzati allo stesso modo da tutti i browser disponibili, o comunque anche da computer con schede grafiche non proprio di ultima generazione.

In pratica, come vuole la legge di Murphy per il web design, il computer più obsoleto dell’azienda generalmente è quello del capo. Quindi per andare sul sicuro insito nel consigliarvi l’uso dei colori web safe.

Di seguito i principali colori esadecimali:

FFFFFF

bianco

FFC0B6

sabbia rosata

FF8080

salmone

FF4040

salmone scuro

FF1F35

anguria

E01F25

porpora

A00000

cremisi scuro

600000

mogano

FFEFCE

vaniglia

FFE1B0

sabbia

FFC281

crema o pelle

FF9F71

pesca chiaro

FF8141

pesca

FF421E

pesca scuro

FF1F10

mandarino

FF0000

rosso

E10000

rosso scuro

C21212

mattone

A11F12

terracotta

622100

cioccolata

FFFF80

giallo chiaro

FFFF35

giallo limone

FFFF00

giallo

FFE118

senape

FFBF18

oro

FF8100

arancio

E26200

arancio scuro

A13F00

nocciola

824200

marrone scuro

D2B06A

kaki

FFFFD0

avorio

E0E074

avocado

BFBF00

certosa

808000

verde oliva

424200

marrone avana

101000

avocado scuro

82823F

grigio oliva

E0FFBF

verde pallido

C2FF91

sedano

80FF80

verde menta

41FF32

verde foglia

00E100

verde chiaro

00C200

verde

008000

verde scuro

006000

smeraldo

002100

verde pavone

82C168

verde bamb�

3F621F

giada

E0FFDF

nebbia marina

00FFB2

verde acqua

00E1AD

caraibi

009F82

verde mare

00603C

malachite

004023

sempreverde

00201F

pino scuro

81C097

grigio verde

00FFFF

turchese

00323F

blu baltico

002041

blu metallico

82E0FF

zaffiro

00A0E0

ceruleo

0080C0

ceruleo scuro

004080

blu ardesia

002F80

blu acciaio

002060

blu denim

001040

blu aviazione

71B2CF

grigio blu

E0F1FF

blu artico

82C0FF

fiordaliso

5291EF

azzurro

2181FF

wedgwood

0080FF

blu manganese

0062E1

blu medio

0041C2

mirtillo

001FE2

blu marina

0000FF

blu

0020C2

blu cobalto

0000E0

indaco

0000C2

blu oltremare

E0E0FF

lilla nebbia

8080FF

lavanda

4141FF

lilla scuro

4040C2

blu violetto

9F9FE0

grigio lilla

E8E0FF

rosa azzurro

A160FF

rosa di parma

8242FF

blu violaceo

4000A2

ametista

2200A1

uva

000080

blu notte

00004F

uva americana

F1E0FF

rugiada

E1BFFF

prugna chiaro

E081FF

viola polvere

C200FF

fucsia

400080

prugna

1F007F

prugna scuro

E29FDE

malva chiaro

603181

malva

FFC1FD

rosa pallido

FF7FFF

rosa chiaro

FF22FF

rosa confetto

FF00FF

rosa carico

E000E0

magenta

A1009F

magenta scuro

800080

rosso prugna

200042

mora

602162

grigio prugna

FFE0F5

rosa perlato

FF9FCF

fiori di melo

FF82C2

rosa pallido

FF60AF

rosa ciliegia

FF40A0

rosa

FF0080

rosa scuro

C0007F

vinaccia

620042

ribes nero

400040

bordeaux

FFC0CE

rosa quarzo

FF6088

rosa corallo

FF4070

rosso corallo

FF2259

fragola

C20041

ciliegia

800000

scarlatto

410012

rubino scuro

F18FBC

grigio rosa

FFFFFF

bianco

F7F7F7

grigio 5%

EFEFEF

grigio 10%

E1E1E1

grigio 15%

D2D2D2

grigio 20%

C0C0C0

grigio 25%

B2B2B2

grigio 30%

A2A2A2

grigio 35%

8F8F8F

grigio 40%

808080

grigio 50%

5F5F5F

grigio 60%

4F4F4F

grigio 70%

404040

grigio 75%

2F2F2F

grigio 80%

000000

nero