Sviluppatori alle prese con l'ansia della finestra vuota? Spaventati dalle infinite possibili combinazioni di colori? Indecisi sulla scelta dei font? Questa è la guida che fa per voi.
L'autore illustra i metodi per applicare i principi del design al Web e vi guida, attraverso numerosi esempi e tecniche, nelle fasi di progettazione delle interfacce.
Alla fine del libro avrete in mano le competenze necessarie per gestire il processo creativo, tracciare l'ossatura del vostro sito grazie a layout armoniosi, creare schemi di colore coerenti al registro comunicativo, comprendere la tipografia, scegliere, creare e ottimizzare le immagini.
Senza dimenticare il design per i dispositivi mobile.
In un'unica guida, tutto quello che vi occorre per iniziare a progettare autonomamente meravigliosi siti web.
Argomenti in breve:
L'autore
Jason Beaird da oltre 10 anni disegna e sviluppa interfacce e progetti grafici di vario tipo. Nel suo lavoro ha unito il background nella grafica tradizionale e la passione per gli standard web, spingendosi alla ricerca di soluzioni per rendere la Rete un luogo più bello. Quando non è impegnato con pixel o con righe di codice, Jason ama condividere il suo amore per il Web con gli altri.
Indice
Prefazione....................................................................... XI
A chi si rivolge questo libro....................................... XIII
Contenuti del libro.................................................... XIII
Per saperne di più......................................................XIV
I forum di SitePoint..............................................XIV
Il sito web del libro................................................ XV
Aggiornamenti ed errata corrige............................ XV
Le newsletter di SitePoint...................................... XV
I podcast SitePoint................................................. XV
Feedback dai lettori............................................... XV
Ringraziamenti..........................................................XVI
Convenzioni adottate nel libro...................................XVI
Esempi di codice...................................................XVI
L’autore....................................................................XVII
Il consulente tecnico.................................................XVII
Il revisore tecnico.....................................................XVII
Il responsabile dello sviluppo....................................XVII
Il sito SitePoint........................................................XVIII
Capitolo 1 – Layout e composizione..............................1
La progettazione.............................................................2
Osservazione..............................................................3
Analisi.......................................................................5
Implementazione ......................................................6
Definizione di un “buon” design.....................................7
Anatomia di una pagina web...........................................9
La teoria della griglia ................................................... 12
La regola dei terzi.................................................... 14
Il 960 Grid System................................................... 15
Equilibrio..................................................................... 16
Equilibrio simmetrico.............................................. 17
Equilibrio asimmetrico............................................ 19
Unità del layout............................................................ 22
Prossimità................................................................ 22
Ripetizione.............................................................. 23
Enfasi........................................................................... 24
Posizionamento....................................................... 25
Continuità............................................................... 26
Isolamento............................................................... 26
Contrasto................................................................. 27
Proporzione............................................................. 27
Layout fondamentali..................................................... 29
Navigazione a colonna sinistra.................................. 30
Navigazione a colonna destra................................... 31
Navigazione a tre colonne........................................ 32
Trovare l’ispirazione...................................................... 32
Utilizzare un file morgue......................................... 33
Le tendenze più recenti................................................ 34
Lo stile rivista, privo di navigazione.......................... 34
Minimalismo nudo e crudo...................................... 36
Ridimensionamento: layout fisso, fluido o dinamico...... 37
Larghezza fissa.......................................................... 37
Larghezza variabile................................................... 38
Una soluzione alternativa: i layout dinamici.............. 39
La risoluzione dello schermo........................................ 40
Un’applicazione concreta: Southern Savers.................... 42
Per iniziare............................................................... 44
Capitolo 2 – Il colore......................................................49
La psicologia dei colori................................................. 50
Associazione di colori.............................................. 50
La temperatura dei colori.............................................. 57
I valori cromatici.......................................................... 58
Saturazione.............................................................. 59
Teoria di base dei colori............................................... 59
Rosso, giallo, blu o CMYK........................................... 61
Gli schemi colore......................................................... 64
Schema di colori monocromatico............................ 64
Schema di colori analoghi........................................ 68
Indice VII
Schema di colori complementari.............................. 70
Colori split complementari, triadici e a rettangolo.... 75
Altre combinazioni di colori.................................... 77
Creare una tavolozza di colori....................................... 78
La notazione esadecimale......................................... 78
Strumenti e risorse per l’uso dei colori.......................... 80
Color Scheme Designer 3 ....................................... 80
Adobe Kuler............................................................ 81
COLOURlovers...................................................... 82
Color Stream, app per iPhone.................................. 83
Pictaculous.............................................................. 83
Colour Contrast Check........................................... 84
Applicazione dei colori: i coupon Southern Savers ....... 85
Capitolo 3 – La texture..................................................89
I punti.......................................................................... 90
Le linee........................................................................ 91
Le forme...................................................................... 93
Angoli arrotondati................................................... 96
Rotazione delle forme............................................. 97
Forme e layout ....................................................... 99
Volume e profondità................................................... 100
Prospettiva............................................................. 101
Proporzioni........................................................... 101
Luci e ombre......................................................... 103
Pattern....................................................................... 106
Realizzare una texture................................................ 111
Stile invecchiato, segnato dal tempo,
logoro e nostalgico................................................. 111
Pulita e granulare................................................... 114
Lo stile album artigianale....................................... 116
Lo stile estroso a cartoni animati............................ 117
Texture minimaliste............................................... 120
Iniziate a sviluppare un vostro stile personale.......... 121
Un’applicazione concreta: ritagliare e risparmiare........ 122
Capitolo 4 – La tipografia...........................................125
Portare il testo nel Web............................................... 128
Sostituzione del testo con immagini............................ 129
Web font con @font-face .......................................... 132
Auto-hosting dei web font..................................... 133
Servizi di font web................................................. 134
sIFR e Cufón........................................................ 135
Anatomia della forma di una lettera............................ 135
Spaziatura del testo..................................................... 138
Spaziatura orizzontale............................................ 139
Spaziatura verticale................................................. 140
Allineamento del testo................................................ 141
Differenze tra i caratteri tipografici.............................. 143
Font serif............................................................... 144
Font sans serif........................................................ 146
Font di scrittura a mano......................................... 148
Font a larghezza fissa.............................................. 149
Font novelty.......................................................... 152
Font dingbat.......................................................... 154
Trovare i font.............................................................. 156
Gallerie di font gratuiti.......................................... 156
Gallerie di font commerciali................................... 156
Artisti singoli e foundry......................................... 157
Scegliere correttamente i font..................................... 157
Impostare dimensione del font
e altezza della riga ................................................. 159
Punteggiatura e caratteri speciali............................ 160
Un’applicazione concreta: la stampa del testo.............. 162
Capitolo 5 – Le immagini.............................................165
Cosa cercare .............................................................. 166
Le fonti delle immagini.............................................. 169
Fotografare per conto proprio................................ 170
Gli archivi fotografici............................................. 171
Immagini gratuite.................................................. 173
Immagini senza diritti d’autore............................... 175
Immagini regolate da contratto.............................. 176
Affidarsi a professionisti............................................... 178
Come non cercare le immagini .................................. 179
Google ganking..................................................... 180
Hotlinking............................................................. 181
Clipart................................................................... 182
Ritaglio creativo......................................................... 183
Fotoritocco con Photoshop........................................ 187
Formati e risoluzione dei file...................................... 193
Interventi creativi sulle immagini................................ 195
Utilizzo di immagini per migliorare le immagini.... 196
Utilizzo di CSS per migliorare le immagini............ 198
Un’applicazione concreta: i piccoli dettagli.................. 202
Sempre più avanti....................................................... 205
Appendice A – Appunti sul design
per dispositivi mobile..................................................207
Come evitare le “abitudini web” nelle applicazioni
per iPhone................................................................. 208
Ideare un’applicazione per iPhone: da dove iniziare..... 210
Le domande da farsi............................................... 210
Dove trovare ispirazione......................................... 211
Prima una serie di schizzi....................................... 212
Quattro modi per migliorare la natura metaforica
del dispositivo mobile................................................. 213
L’applicazione iCal non permette di voltare
pagina con uno swipe............................................ 214
Siti mobili e media query........................................... 215
Come fanno gli utenti mobili a navigare
nel Web?................................................................ 216
Come fanno gli utenti mobili a navigare
sul vostro sito?........................................................ 218
Le media query possono risolvere la situazione?..... 218
Indice analitico.............................................................219
