Un’altro web design è possibile

Argomento della settimana è il web design. La nostra insegnante darà alcuni utili consigli su come approcciare il tema della grafica web. Quali sono i primi passi da fare, gli errori da non fare e un po’ di tracce da seguire…..

Gli aspetti visuali e l’interfaccia grafica del sito costituiscono il punto di contatto tra utente e brand del cliente. Con il visual design devi comunicare in modo efficace le informazioni offerte da sito attraverso una veste grafica adatta e gradevole, ma contemporaneamente devi rispettare i vincoli posti dalle tecnologie e dal budget, rispettando i tempi previsti dalla  pianificazione.

Adotta sempre una grafica “leggera” in modo che il navigatore non sia disturbato nella ricerca delle informazioni che le servono e soprattutto fai in modo che l’aspetto grafico arricchisca di contenuto il sito stesso. Non dimenticare che c’è un’enorme differenza di efficacia tra una grafica d’effetto, anche se semplice e una grafica monotona e scontata.

Troppo spesso capita di visitare siti in cui c’è un abuso di animazioni flash, magari in pagine dove continue apparizioni e movimenti di immagine disturbano la lettura di un testo o la compilazione di un form.

Il web designer deve tenere sempre presente che un sito web non è un varietà televisivo: abbondare in effetti spettacolari rende meno diretto e fruibile il contenuto del sito.

Le animazioni non devono essere troppo “invasive”. Purtroppo molti web designer non sanno trattenersi dall’usare gli  innumerevoli effetti speciali che offrono i vari tipi di software. Corri il rischio, se non ponderi bene le tue scelte, di utilizzare una grafica ridondante e conflittuale, che non contribuisce al raggiungimento degli obiettivi che ti poni.

Dopo queste considerazioni avrai capito che l’uso delle immagini deve essere studiato ad hoc, per far si che non influiscano a rallentare il caricamento della pagina, ma contribuiscano ad esaltare e armonizzarsi con il contenuto delle pagine stesse.

La cosa migliore che puoi fare per compiere i tuoi primi passi nel web design è GUARDARTI INTORNO. Per capire quali sono gli standard a cui attenerti per realizzare una buona grafica basta studiare i 20 - 30 siti più visitati in Internet e

osservare (meglio ancora studiare) come sono stati realizzati. Se troviamo delle caratteristiche o degli elementi comuni nel 90% dei siti che analizziamo puoi ritenere questi elementi degli standard di fatto. Considera sempre che gli utenti

arriveranno al tuo sito dopo averne visitati altri e avendo imparato a utilizzare strumenti di navigazione e funzioni visive che gli sono oramai familiari. Sfrutta quindi la cultura che il tuo utente ha maturato navigando e pur stupendolo, non

dimenticare che alcune consuetudini della Rete (pensa per esempio al posizionamento del marchio in homepage in alto a sinistra) possono essere funzionali per comunicare meglio.

Usa il logo e il nome del sito in tutte le pagine del sito in una posizione strategica, e collegali tramite link alla homepage del sito stesso.

Se stai progettando il sito web di un’azienda, fai in modo che la grafica che stai usando sia coerente con l’immagine coordinata dell’azienda stessa, in modo tale che l’immagine dell’azienda sia riportata coerentemente anche

sul web. Quando questa operazione non è possibile perché l’azienda non è dotata di un’immagine coordinata, fai si che almeno il sito sia caratterizzato da una certa coerenza grafica.

- I simboli e le funzioni che usi devono essere riconoscibili e identificabili in

tutto il sito e non devono cambiare da una pagina all’altra.

Quando il tuo sito diventa molto grande e comunque quando presenta un numero di pagine superiore alle 100, è bene usare una funzione di ricerca.

Usa dei font standard, perché non tutte le macchine hanno installati tutti i font. Potresti incappare in un utente con un PC appena “sballato” dalla confezione con una dozzina di font preinstallati. La soluzione è indicare nel codice html i font in ordine di preferenza, da quello che vorresti a quello che sei “disposto ad accettare”.

Hai a disposizione diversi tipi di carattere, raggruppati per famiglie:

- Times New Roman, Times, Georgia, Serif

- Courier New, Courier, Mono

- Verdana, arial, Helvetica, Geneva, Sans-serif

Ricorda che dagli studi di usabilità fatti, la leggibilità dei caratteri sul monitor è diversa dalla leggibilità sulla carta. Mentre sulla carta i caratteri più leggibili sono quelli con le grazie (Serif), sul monitor la lettura è più agevolata dai caratteri Sans serif. In modo particolare i caratteri in assoluto più leggibili sono il Verdana e il trebuchet.

Se poi proprio non puoi fare a meno di usare i caratteri standard, allora trasforma il testo in immagine: solo in questo modo puoi essere sicuro che tutti lo visualizzeranno così come lo hai progettato. Ovviamente devi sempre ricordarti che le immagini pesano in termini di caricamento della pagina, per cui cerca di limitare l’uso di questo stratagemma solo ai titoli, ai bottoni, o per qualche scritta di rilievo.

Scegli le dimensioni del testo prendendo in considerazione la sua visualizzazione. Come abbiamo già visto non tutti usano un pc con Windows, quindi non tutti i font appaiono ai visitatori con la stessa dimensione. L’aspetto di un font Verdana di dimensione 10 su PC è uguale all’aspetto di un font Verdana ma di dimensione 12 su Macintosh. Questo

dipende dal fatto che un PC definisce la risoluzione a 96 punti per pollice, mentre tutti gli altri sistemi operativi usano la risoluzione standard a 72 punti per pollice.

Si consiglia di dare un’occhiata al sito http://www.piepmatzel.de/, dove troviamo è composto da uno splendido mosaico di anteprime del meglio del meglio tra i siti web. Ottimo per trarre qualche ispirazione per cimentarsi in questa attività, che già alcuni considerano una forma d’arte a tutti gli effetti

Tags: Flash, grafica, HTML, Web Design

Provato per voi: Photoshop Cs4

Il Solecosta Studio da qualche tempo ha ottenuto la certificazione di Adobe Training Center. Per festeggiare questa novità vogliamo quindi pubblicare un articolo che parli dell’ultima versione di Adobe Photoshop Cs4. Buona lettura

Da qualche mese l’azienda di San Jose ha immesso sul mercato la versione Cs4 della propria suite creativa. Dopo aver testato il prodotto durante il nostro lavoro siamo ora in grado di fornire una nostra valutazione sulle nuove features, o almeno su quelle che abbiamo trovato più interessanti.

Uno dei temi principali che hanno guidato lo sviluppo della nuova release è stata la necessità di poter sfruttare la GPU grazie al supporto delle OPENGL (1).  Questo garantisce una velocità di calcolo maggiore e consente un utilizzo dello zoom e del pan (per non parlare delle rotazioni) molto più fluido che in passato. Lanciando l’applicativo notiamo subito un layout più sobrio (fig.1), con tutte le palette agganciate all’interfaccia e non più flottanti. In alto a destra abbiamo un menù a tendina che ci permette di cambiare e salvare la nostra area di lavoro, adattandola alle nostre esigenze.

Fig.1 L'area di lavoro di Photoshop cs4

Per chi si avvicina la prima volta alla cs4 potrebbe essere interessante utilizzare “Nuove funzioni di CS4” (fig.2).

Fig. 2 Le aree di lavoro preconfigurate

In questo modo tutti i comandi che sono stati aggiunti o modificati saranno evidenziati nel proprio menu in blu. A mio avviso una delle innovazioni in assoluto più importanti è quella che riguarda l’accesso alle immagini aperte attraverso delle schede o tabs (un po’ come accade su mozilla firefox o internet explorer). In questo modo passare da un’immagine diventa un’operazione decisamente più veloce. Altra innovazione che riguarda la visualizzazione delle immagini aperte è il pulsante disponi documenti, posizionato alla fine della barra dei menù.

Un’apparente nota dolente riguarda l’apparente estromissione dal menù file > automatizza> di alcune opzioni di output molto utili, quali provini a contatto e web gallery. Visto che queste funzioni riguardano soprattutto il maneggiare diversi file contemporaneamente, sono state spostate e implementate su adobe bridge(2) strumento che funge da collegamento (ponte appunto) tra i vari programmi adobe. Questi strumenti sono stati migliorati e implementati nei contenuti. Per passare da PH a bridge, basta cliccare sull’icona BR in alto, di fianco alla barra dei menu. Da qui possiamo selezionare Output e scegliere PDF o Web Gallery (fig.3).

Fig.3 - Adobe bridge: i comandi per creare PDF e Web Gallery

Altra innovazione decisamente utile, riguarda la possibilità di usare i pannelli di regolazione in maniera molto più intuitiva. Per esempio: avendo un’immagine aperta e attivando la palette curve, si potrà cliccare sul pulsante indicato in fig. 4.

Fig. 4 - Il pannello delle curve

Questo consentirà di individuare sull’immagine aperta, il punto corrispettivo sulla curva. Trascinando verso l’alto o verso il basso si modificherà solo quelle parti dell’immagine che hanno la stessa luminosità del punto selezionato (provare per credere). Rimanendo in ambito Regolazioni, risulta interessante anche l’aggiunta del comando Vividezza (fig. 5), che consente un modifica grafica simile all’aumento di saturazione, ma che funziona in maniera decisamente più soft. A tutte le regolazioni sono state inoltre aggiunte delle configurazioni precostituite.

Fig. 5: Il pannello vividezza

Le innovazioni non potevano non riguardare uno degli strumenti più potenti di photoshop, le maschere (fig.6).

Fig. 6 : Il pannello maschere

E’ stata infatti introdotta una palette che consente una gestione delle selezioni mascherate decisamente più performante. E’ quindi ora possibile gestire il bordo delle maschere (funzione già presente dalla versione 10 con i bordi delle selezioni), opacità della maschera e raggio di sfumatura dei bordi.

A completare il comando “allineamento automatico dei livelli” presente dalla versione 10, è stato aggiunto il comando “fusione automatica dei livelli” accessibile come il sopracitato dal menu modifica. Questi due strumenti danno la possibilità di creare dei panorami in stile photomerge, unendo delle foto fatte in sequenza, e di fondere le diverse immagini fatte con esposizioni diverse, creando un’unica immagine ben calibrata e senza stacchi cromatici.

Gli aggiornamenti riguardano anche gli “Oggetti avanzati”. Se per esempio vogliamo creare un ridimensionamento intelligente, possiamo convertire il nostro livello in “oggetto avanzato” e associarlo ad una maschera. Andando a trasformare il nostro oggetto avanzato, verrà di conseguenza trasformata anche la maschera.

A questa lunga lista non può mancare uno degli strumenti più pubblicizzati di Photoshop Cs4: la trasformazione “Scala in base al contenuto” accessibile direttamente dal pannello modifica. E’ un’opzione che permette di ridimensionare le immagini senza cambiarne le proporzioni. Si stabilisce un’area da conservare: durante la trasformazione verrà tutto alterato tranne l’area scelta che rimarrà inalterata. Nell’esempio in fig. 7a abbiamo un panorama a cui è stato applicato il nostro strumento. La fig. 7b mostra cosa avverrebbe durante una scalatura del 50% fatta solo sull’asse delle ascisse. Notare come la figura dello sciatore si restringe. Anche la figura la fig. 7c ha subito una scalatura del 50% sull’asse delle ascisse, ma lo sciatore mantiene le sue proporzioni di partenza perché è stato inserito nell’area da salvaguardare, mentre tutto il resto viene ridimensionato.

Per maggiori informazioni contattami pure all’indirizzo

antonio@solecosta.com

Fig. 7a: Immagine di partenza

Fig. 7b: Immagine scalata senza mantenimento delle proporzioni

Fig. 7c: Immagine scalata con il comando "scala in base al contenuto"

Tags: Cs4, grafica, Novità, Photoshop

David Carson

Tutti conosciamo i nomi dei grandi pittori, scultori o fotografi, però di solito, i nomi dei grandi disegnatori grafici passano in secondo piano, quasi ad evidenziare un valore inferiore del loro lavoro. Per questo, da oggi inizieremo a trattare una serie di biografie riguardanti i disegnatori più famosi che hanno contribuito a creare la storia della grafica moderna, partendo da David Carson.

Amato, odiato, capito, ignorato, criticato, copiato…David Carson è uno dei genitori del disegno tipografico così come lo conosciamo oggi.

Nato in Texas nel 1956, laureato in Sociologia e surfista professionista (arrivò al numero 9 del ranking mondiale), capì la sua vera vocazione dopo aver frequentato un corso di due settimane sul disegno grafico. Forse a causa di una mancanza di formazione accademica specifica, fu uno dei pionieri del disegno editoriale alternativo.

Attualmente lavora come direttore e disegnatore “capo” del suo studio [david carson design].

Gli inizi della sua carriera risalgono ai tempi della rivista sul surf Beach Culture, edita San Diego. L’ordine grafico tipico di quel periodo (fortemente influenzato delle tecniche commerciali e di marketing) fu da lui distrutto e riscritto. Nonostante le sole 6 uscite, queste gli bastarono per vincere il premio per il “Miglior Disegno” e per il “Miglior Disegno di Copertina” dell’Associazione dei Disegnatori Editoriali di New York. Grazie a questo riconoscimento diventò art director di Ray Gun, rivista musicale alternativa per la quale avviò una nuova forma di interpretazione del disegno. Carson racconta che ai tempi guadagnava poco, però aveva il 100% di libertà creativa. Dopo aver disegnato una copia, la portava direttamente in stampa senza dover chiedere l’autorizzazione per il contenuto.

Considerato un genio dai disegnatori giovani e un traditore per quelli più conservatori, Carson è un radicale del disegno, cerca sempre la polemica, e si diverte nel trovarla . Una delle maggiori rimostranze che gli vengono fatte è che il suo lavoro è considerato “illegibile”.

Il suo genio lo porta a considerare qualunque disegno, buono o brutto, come espressione di un “quid” e che non si deve confondere la leggibilità con la comunicazione. Se qualcosa è leggibile non necessariamente comunica.

"Non confondere la leggibilità con la comunicazione”, una massima di David Carson che viene letta da destra a sinistra e di su a giù.

Secondo lui, un buon disegno è quello che provoca una reazione emozionale nel ricevente , e per questo il suo lavoro si basa sull’intuizione più che sul pensiero puramente razionale. Nelle sue opere prova ad essere molto espressivo e per questo, a volte, deve rompere le regole rendendo più difficoltosa la lettura, anche se per lui non è un problema.

I suoi estimatori arrivarono a sentenziare che grazie a Ray Gun (la rivista che lo rese famoso) i giovani tornarono a leggere.

Ecco alcuni esempi del suo uso tipografico nel disegno editoriale:

• Mischia e sovrappone tipografie, dimensioni e colori: modifica i font e le dimensioni, utilizza, anche nella stessa parola, il grassetto e il corsivo, il maiuscolo e il minuscolo.
• Le lettere sono esageratamente grandi o esageratamente piccole.
  
• Usa una interlinea eccessiva oppure negativa, ossia, troppa separazione fra le linee o troppo poca.
• Le lettere non hanno un andamento lineare, ma tendono a “ballare”
  
• I testi sono colorati anche quando gli sfondi sono colorati, questo complica la lettura e obbliga al lettore a sforzare la vista.
  
• I blocchi di testo diventano poligonali e di diverse forme. Rompono la struttura classica che prevede dimensioni delle colonne prestabilite.
• I blocchi di testo sono ruotati o invertiti e obbligano a girare la rivista per leggerli.
  
• I titoli si sovrappongono sul corpo di testo.
  
• La testata delle rivista (Ray Gun) cambia ad ogni uscita.
  
• C’è un’invasione del testo nelle zone che il disegno riserva per separare una pagina pari da una dispari.
  
• In alcuni articoli viene omesso il titolo
  
• La punteggiatura, le parentesi, i segni più e meno sono usati come risorse grafiche di espressione e non solo per il loro valore ortografico.
  
• Anche i numeri assumono un uso estetico anzichè testuale. Ad esempio, utilizza il numero 5 per sostituire la lettera S o il numero 3 invertito per la lettera E.
  
• I Testi riportano errori corretti a mano.
  
• La numerazione delle pagine è assente.

Alcuni del premi che ha ricevuto nella sua carriera professionale:

- Miglior disegno, Associazione dei Disegnatori Editoriali di New York

- Miglior disegno di copertina, Associazione dei Disegnatori Editoriali di New York.

- Miglior uso della fotografia nel disegno grafico

- Disegnatore dell’anno 1998, International Center of Photography

- Disegnatore dell’anno 1999, International Center of Photography

- Master di tipografia, Graphics magazine (NY)

- Il disegantore grafico più famoso del planeta, Aprile 2004 - London Creative Review magazine (Londra)

Invece la sua bibliografia, partendo dal 1995 con End of Print, il suo primo libro pubblicato, che diventò subito un best-seller del disegno grafico:

• Carson, David (1995). The End of Print: The Graphic Design of David Carson. Chronicle Books.
• Carson, David (1997). David Carson: 2nd Sight: Grafik Design After the End of Print. Universe Publishing.
• Meggs, Phillip B.; David Carson (1999). Fotografiks: An Equilibrium Between Photography and Design Through Graphic Expression That Evolves from Content. Laurence King.
• Stecyk, Craig; David Carson (2002). Surf Culture: The Art History of Surfing. Laguna Art Museum in assoziazione con Gingko Press.
• Mcluhan, Marshall; David Carson, Eric McLuhan, Terrance Gordon (2003). The Book of Probes. Gingko Press.
• Carson, David (2004). Trek: David Carson, Recent Werk. Gingko Press.
• Mayne, Thom; David Carson (2005). Ortlos: Architecture of the Networks. Hatje Cantz Publishers.

Alcuni dei suoi clienti sono:

Addison-Whitney, Albert Watson, Aldus Corporation, American Airlines, American Express, Ameritrade, AT&T, Atlanta Olympics Committee, Atlantic Records, Autobytel, Beach Culture, Blue Magazine, Big NYC, British Airways, Bank of Montreal, Budweiser (1995 Superbowl spot), Citibank, CNN, Cuervo Gold, David Byrne, Dita Watches, Elias Associates NY, Fox TV, Gannet Outdoor, Gibbes Museum of Art in Charleston SC, Giorgio Armani , Glendale Federal, Idea Magazine (Japón), Individual, Kodak, Leap Batteries (Canadá), Levi’s, LOFT, Lotus Software, Lucent Technologies, Laguna Beach Contemporary Art Museum, Lycra, Marshall McLuhan Estate, Magic Johnson AIDS Foundation, MCI, Meg Ryan, Mercedes Benz, Metropolis Magazine, MGM Studios, Microsoft, Motrin Migarine, MTV, Nations Bank, NBC, Newsweek, Nike , Nine Inch Nails, Nissan, Packard Bell, Pepsi, Princo, Quiksilver, Ray Ban, Ray Gun Magazine, Ryder Trucks, Sears, SOL Communications, Sony, Spalding, Speak Magazine , Surfer’s Path, Suzuki, Toyota, TwSkateboarding, twSnowboarding, UMPQUA Bank of Seattle, US West, Warner Brothers, Xerox.

E ora tocca voi. Avete visto quali sono le le regole e come trasgredirle. Provate voi a fare una composizione in pure stile Carson, a giocare con la tipografia e con la sua espressività. Se volete inviarci la vostra composizione saremo lieti di pubblicarvele!

Buon lavoro

Tags: david carson, disegno editoriale, grafica, tipografia