Webdesign for Dummies [lezione 1]

Ecco la prima lezione introduttiva sul web design. Parleremo in questa lezione di aspetti di base, quali i vari tipi di siti web, la scelta dei colori, i tipi di layout e consigli su come comincare a costruire una pagina web.

Prima di tutto esistono vari tipi di siti web. Ci sono i template per blog come wordpress, splinder e iobloggo e ci sono siti che non usano queste tecnologie e vengono aggiornate a mano. Anche graficamente possono essere molto diverse, in positivo e negativo.

Nel web possiamo trovare svariati siti di stampo diverso. Ci sono siti che ancora non sono passati al web 2.0, con grafica semplice o scadente, possiamo trovare siti con grafica strabiliante o semplici e professionali. Ci sono siti poi fatti interamente in flash e siti di e-commerce che hanno in genere uno stampo diverso dagli altri, vuoi per le animazioni del primo o per la leggerezza del secondo, per via delle varie operazioni che devono essere effettuate. Ovviamente, non è sempre così, in genere varia molto anche a seconda di chi ha creato il sito.

Che differenza c'è però tra la grafica che ho nominato sopra "semplice o scadente" e la grafica dei siti "semplici e professionali"?

Diciamo che la prima è quella creata secondo standard precedenti al web 2.0, eccessivamente semplice e piatta, con pochi elementi grafici e fatti male e pieni di gif animate e sfondi al limite dell'epilessia. Il secondo tipo invece è una specie di...restyling del primo. Si mantiene la semplicità del sito in ambito grafico, aggiornandolo al web 2.0 e si rende professionale eliminando una serie di elementi obsoleti quali quelli citati poco fa. Si rimpiazzano inoltre le tabelle (abusate per creare layout di vecchio stampo) coi divs.

Ma che cos'è il web 2.0?

Da Wikipedia: Il web 2.0 è un termine utilizzato per indicare uno stato di evoluzione di internet rispetto alla condizione precedente.
In pratica si riferisce al cambiamento di Internet e dei suoi contenuti rispetto alla versione precedente. Le pagine sono più interattive tramite applicazioni come quelle per blog, chat, forum e per sistemi come Youtube, Facebook ecc. Ma che c'entra questo con l'aspetto della pagina? Beh a parte la struttura, con stile web 2.0 si intende un particolare tipo di aspetto grafico. Insomma, non serve che un sito sia dinamico per forza per essere web 2.0, ma può anche essere di tipo statico ma avere una marcia in più. Qui si parla principalmente di stile del sito.

I colori

Una volta deciso lo stile che vogliamo dare alla nostra pagina web, dobbiamo sceglierne i colori. La teoria del colore è di per sè semplice e complessa allo stesso tempo. I colori del sito vanno scelti con intelligenza. Possiamo anche avvalerci di siti come Colour Lovers ma va preso ovviamente con le molle. Non tutte le palette sono adatte per un sito web, in quanto un utente registrato può creare una bella palette fluorescente. Bellissima a vedersi per 2 minuti, ma inadatta per un sito dove un utente deve navigare e leggere i contenuti.

Leggibilità è la parola chiave da adottare quando si scelgono i colori. Prima che i vari accostamenti di colore o le preferenze personali per un colore è bene vedere se un tale colore è leggibile. Se nella palette sono presenti dei grigi chiari o scuri potete provare i vari altri colori su questi usati come sfondi. Se invece usate un colore come sfondo e un grigio per le scritte, dovete soffermarvi su uno sfondo di quel colore e controllare se stanca la visita, prima di metterci una scritta e controllare se si legge. Perchè è anche possibile che la scritta si legga, ma se lo sfondo stanca è inutile.

Esistono poi alcuni accostamenti off limits o comunque da prendere con le molle, come il rosso e il blu, il verde e il rosa, il giallo e il verde o il giallo e il blu, ovviamente intesi come colori accesi. Tutti i colori accesi sono da evitare, ma questi accostamenti molto di più rispetto agli altri. Meglio sempre optare per colori pastello o leggermente desaturati. Da evitare, ove possibile colori chiarissimi o scurissimi messi assieme. Il rosa e il bianco sono belli assieme, ma se usati bene. Il rosino chiarissimo rende scritte bianche illeggibili, il grigio scuro non fa leggere il blu scuro. Da evitare anche l'uso di #FFF e #000 per bianco e nero, in quanto sono accesi e stancanti. Meglio un grigio chiaro o scuro, vicini a questi due.

Per approfondire questo argomento, leggete la lezione sulla teoria del colore: La teoria del colore in sintesi

I tipi di layout

Che differenza c'è tra questo e i tipi di siti web?
Semplicemente, con tipi di layout in questo corso si intende fluidi o fissi. I layout fluidi sono quelli che al ridimensionare del browser cambiano la loro dimensione per adattarsi alla dimensione della finestra, mentre quelli fissi sono quelli che al variare della finestra, non cambiano aspetto. Entrambi hanno i loro vantaggi e svantaggi:

I layout fluidi

• Si adattano alla configurazione del browser dei singoli utenti


• Meno spazi bianchi perchè il layout si adatta alla risoluzione


• Nessuna barra di scorrimento orizzontale a risoluzioni più basse

• Non è possibile prevedere come si comporterà su tutte le risoluzioni, il sito potrebbe avere dei comportamenti inaspettati


• Le dimensioni dei contenuti multimediali se sono fisse vanno aggiustate per adattarsi alle risoluzioni

I layout fissi

• Sono più semplici da usare e personalizzare


• Le dimensioni sono fisse su ogni browser ed è più facile integrare contenuti multimediali


• Non serve impostare dimensioni minime e massime che non sono supportate da tutti i browser


• Anche se il sito è realizzato per schermi piccoli, il contenuto sarà abbastanza grande per essere letto

• Possono esserci troppi spazi bianchi su schermi ad alta risoluzione


• A risoluzioni minori invece potrebbe essere necessario l'uso di barre di scorrimento orizzontale

Ovviamente il tipo di layout va scelto al momento della creazione del sito in base a quello che si ritiene più opportuno.

Suggerimenti

Una volta scelta il tipo di sito, il tipo di layout e i colori, bisogna cominciare a pensare a come impaginarlo. Ovvero ai menù, ai vari links e le categorie. E' sempre meglio ridurre al minimo i collegamenti per evitare di dover creare mille pagine mezze vuote. Meglio poche ma piene di significato e ovviamente suddividerle logicamente. Ad esempio, in un sito di pokemon è utile suddividere i vari giochi per consolle. In un sito di grafica è bene avere tutti i lavori sotto un Artfolio e le risorse in una zona a parte. Ovviamente tutto questo dipende anche da come volete impostare il vostro sito. Però è bene avere un menù sintetico che ti manda ad altre pagine, come un bel menù orizzontale con sottomenù a tendina con tutti gli argomenti della categoria.

Una volta stabilito anche che pagine volete e quante, potete pensare a realizzare su carta il vostro progetto. Vi consiglio, per quanto possibile di buttare giù qualche bozza del sito su carta, prima di aprire il programma di grafica e andare a naso. Poi potrete anche cambiare radicalmente il vostro progetto, ma prima è bene organizzarlo e fissare la vostra idea. Se siete provvisti di matite colorate potete anche provare ad accostare i colori per vedere come potete fonderli.

Quando aprite il vostro programma di grafica realizzate la preview completa con una panoramica di tutti gli elementi e la loro disposizione. Se avete Photoshop, raggruppate gli elementi in cartelle, vi accorgerete che sarà poi facilissimo spostare gli oggetti nel sito, come un'intera colonna o menù.

Se volete, potete viaggiare per il web e cercare l'ispirazione guardando i &grandi& del web design, ma senza copiare o cercare di riprodurre a tutti i costi. Siate sempre originali, altrimenti è inutile. Anche perchè spesso questi web designer navigati montano cose più complesse, quindi per fare una cosa identica dovreste anche copiare il codice ed è una cosa che proprio non si fa. Lo scopo di questo corso è insegnarvi il più possibile le basi per creare tutti i tipi di pagine web e vari trucchi css per creare layout sensazionali con un pò di esperienza.

Quindi andiamo avanti, nella prossima lezione vedremo i fondamenti HTML di una pagina web e alcuni concetti chiave per realizzare una pagina web.