Backindietro

  • 1

    Partenza del progetto

    Come per qualunque progetto la partenza è data dall’analisi degli obiettivi, target, messaggi. In base alla prima fase di analisi si strutturano le aree di funzionamento del sito, quella emozionale e quella divulgativa .

    partenza progetto
  • 2

    Atmosfera e coerenza grafica

    Il concetto di “sensazione” (o atmosfera) è strettamente correlato a quello del target. Una volta definito il target dobbiamo infatti intuire quali siano le sue emozioni e sensazioni e quali scelte grafiche siano capaci di valorizzare quest’ultime in modo positivo ed efficace.
    Atmosfera e stile dovranno venir giocate innanzitutto tramite scelta della tavolozza colori e dell’iconologia da utilizzare. Particolarmente importante in un layout web l’utilizzo dei background e di eventuali pattern per enfatizzare lo stile scelto.

    atmosfera e coerenza grafica
  • 3

    Immagini e Iconologia

    L’utilizzo di immagini ed icone dovrà essere definito in base al target e all’obbiettivo comunicativo preposto.

    immagini e iconologia
  • 4

    Regola aurea ed elementi di pagina

    elenco puntato Possiamo applicare le proporzioni auree anche ad altri elementi delle nostre pagine web, come banner, box pubblicitari o altre piccole sezioni. Dividendo infatti la larghezza di un box per il valore 1,62 possiamo ottenere la corretta altezza in proporzione.
    elenco puntato Dobbiamo solo effettuare un piccolo calcolo: 360:1,62=222

    regola aurea
  • 5

    Regola dei terzi

    Rappresenta le zone in cui l’occhio si concentra maggiormente, è possibile sfruttare quindi questa potenzialità nella progettazione del layout posizionando su questi punti gli elementi di maggior risalto.

    regola dei terzi
  • 6

    Dalla griglia dei terzi a quella personalizzata

    elenco puntato Le griglie personalizzate sono strutture reticolari, ovvero la suddivisione del layout in un numero definito di colonne verticali, tutte della stessa dimensione, separate l’una dall’altra da una distanza costante.
    elenco puntato La griglia offre una discreta versatilità nei blocchi del layout e rende molto più semplice la suddivisione dell’area di design tra contenuti testuali, contenuti decorativi e spazi bianchi.

    griglia
  • 7

    Le Griglie

    Per motivazioni di ordine pratico/temporale ma anche grazie alla nascita del concetto di web design “responsive” – sempre più web designer scelgono di progettare i loro layout basandosi su griglie
    Ethan Marcotte nel suo libro "Responsive web design" identifica 6 Resolution breakpoints:
    elenco puntato 320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait)
    elenco puntato 480 pixel per device con schermi piccoli, come cellulari, matenuti con orientamento orizzontale (landscape)
    elenco puntato 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), tenuti con orientamento verticale
    elenco puntato 768 pixel tablet da 10 pollici come l'iPad (768x1024) mantenuti con orientamento verticale
    elenco puntato 1024 pixel computer da scrivania, laptop e netbook, e tablet come l'iPad (1024x768) mantenuti con orientamento orizzontale
    elenco puntato 1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop

    griglie
  • 8

    Struttura simmetrica

    L’equilibrio simmetrico è una forma di equilibrio che rende il layout facile da consultare e visivamente gradevole.
    Utilizza un equilibrio simmetrico se il layout conterrà una massiccia quantità di informazioni e necessita di essere di semplice ed immediata consultazione. Si può parlare di equilibrio simmetrico quando, scomponendo una composizione grafica in due parti, quest’ultime appaiano speculari. Può esistere anche una simmetria parziale rispetto un solo asse o in una sola porzione del layout.

    struttura simmetrica
  • 9

    Struttura Asimmetrica

    L’equilibrio asimmetrico si basa sull’utilizzo di elementi che disposti in un certo modo riescono, nonostante le loro differenze nei colori, nelle dimensioni o nella forma, a bilanciare visivamente il peso della pagina.

    struttura simmetrica
  • 10

    Ripetizione

    Come già suggerito dai principi di gestalt di allineamento e movimento comune, possiamo ritrovare una struttura di ripetizione tra gli elementi compositivi.

    ripetizione
  • 11

    Ripetizione regolare

    Gli elementi ripetuti hanno lo stesso colore, la stessa forma e le stesse dimensioni: l’esempio più rappresentativo di questo ritmo sia ha nell’utilizzo di un pattern, ovvero di un immagine ripetuta più volte con cadenza regolare.

    ripetizione regolare
  • 11

    Ripetizione progressiva

    Anche nel ritmo progressivo si ha una ripetizione degli elementi grafici o concettuali, ma a differenza del ritmo regolare in questo caso tali elementi vengono rappresentati con dimensioni o colori diversi: la forma non muta.

    ripetizione progressiva
  • 12

    Ripetizione Fluida

    Il ritmo fluido si basa sulla ripetizione di un elemento o di uno stile grafico capace di dare dinamicità e movimento alla composizione grafica. L’elemento viene ripetuto, ma in modo discontinuo e irregolare, cosi da aggiungere vigore ad un design altrimenti piatto e prevedibile.

    ripetizione fluida
  • 13

    Layout & Contrasto

    Il contrasto è uno degli elementi di base per la progettazione di una corretta gerarchia di lettura della composizione. Quando creiamo delle enfasi, definiamo la gerarchia all’interno della nostra composizione grafica; scegliamo quali sono gli elementi che vogliamo colpiscano maggiormente l’attenzione dell’utente e quali invece vogliamo porre in secondo piano. La scelta di un punto focale dipende ovviamente dal tipo di azione che vogliamo far compiere all’utente, se vogliamo stimolarlo all’azione elaboreremo visivamente alcune call-to-actions posizionate in punti strategici del layout.

    Le “call to action” sono inviti a compiere un’azione. Nel Web design e soprattutto, nel campo della usability, le Call to Action sono appunto elementi distinguibili, che sollecitano il navigatore a compiere un’azione. Ovviamente, questi elementi, nelle interfacce web, proprio pensando al concetto di usabilità, diventano di enorme importanza e devono essere considerati con estrema precisione.

    layout contrasto
  • 14

    Colore per creare contrasto

    L’uso del colore è un modo semplice e immediato per creare contrasto. I colori più vivaci e accesi, come il rosso, l’arancione e il giallo attirano maggiormente l’attenzione. Se poniamo un elemento dal colore “caldo” accanto ad un elemento in scala di grigio, o dal colore freddo, l’elemento con il colore acceso sarà il punto focale della nostra composizione grafica.

    contrasto colore
  • 15

    Dimensione per creare contrasto

    Per enfatizzare un elemento, ne aumentiamo le dimensioni rispetto al contesto a cui appartiene o agli altri elementi della composizione grafica.

    dimensione per creare contrasto
  • 16

    Luminosità e nitidezza per creare contrasto

    Un altro modo efficace per dare enfasi ad un elemento consiste nel creare un contrasto tra quest’ultimo e il background in cui è inserito.

    nitidezza per creare contrasto

Perchè quando diventiamo tutti uguali diventa solo una questione di prezzo!
What Studio facciamo la differenza.

Privacy Policy | Cookie Policy

Chiudi
^
INFORMATIVA: Questo sito utilizza cookie di profilazione (propri e di altri siti) per inviarti pubblicità in linea con le tue preferenze. Se vuoi saperne di più o negare il consenso a tutti o ad alcuni cookie clicca qui. Se accedi a un qualunque elemento sottostante questo banner acconsenti all'uso dei cookie.