Il webdesign o web design, lette-ralmente progettazione per il world wide web (internet), è un’ espressio-ne inglese utilizzata anche nella lin-gua italiana per indicare la progetta-zione tecnica, strutturale grafica di un sito web. Il lavoro del web de-signer comprende capacità di pro-gettazione, sintesi, gusto estetico e creatività più o meno spiccata, studio dell’interattività dei siti in-ternet, usabilità e accessibilità per consentirne un accesso uniforme, nonché visibilità e diffusione tra-mite canali internet quali social network, circuiti pubblicitari, mo-tori di ricerca, e così via. Cono-scenze minime basilari di un web designer devono essere: design, co-

municazione e webmarketing, fun-zionamento dei motori di ricerca e ottimizzazione, interfaccia utente, linguaggi di markup HTML, CSS e conoscenze di programmazione e animazione, che consentono una maggiore interattività. I siti inter-net sviluppati debbono rispondere a grammatiche formali standard, e sviluppate con lo scopo di rendere i siti intercompatibili e navigabili nel modo più uniforme utilizzan-do i vari browser e sistemi infor-matici diffusi. La validazione di conformità a tali grammatiche può essere effettuata tramite un appo-sito validatore online. Altri test ac-compagnano la creazione del sito, tra questi quelli di accessibilità e

di usabilità, solitamente svolti da esperti appositamente dedicati. Tra i vari fattori da considerare vi sono il colore, l’uso ridotto o nullo del mouse e quindi l’utilizzo del-la tastiera per navigare, la resa di oggetti multimediali quali audio e video anche in forma testuale per i non udenti o non vedenti, e altri parametri. Il web designer può es-sere un freelance, ma per lavori di alta qualità/complessità o grande articolazione collabora spesso con un team di sviluppatori di software nonché esperti professionisti dei singoli settori specifici: webmar-keting, accessibilità, designer gra-fici.

il WEBDESIGN

dalla NASCITAai giorni D’oggi

Il primo web designer è stato Tim Berners-Lee, inven-tore del World Wide Web e creatore del primo sito in-ternet, pubblicato nell’agosto 1991. Lee è stato anche il primo a combinare la comunicazione internet (email e reti) con gli ipertesti (usati fino a quel momento solo per navigare tra informazioni registrate su un solo computer oppure su un CD-Rom). Inizalmente, il web design ha utilizzato un semplice linguaggio di markup, l’ HTML, che include alcune opzioni di formattazione e la possibilità di creare col-legamenti ipertestuali tra pagine grazie ai links. E’ sta-ta questa caratteristica che ha distinto il web da altri mezzi di comunicazioni. HTML è nato dal linguaggio SGML, e ha iniziato la sua vita come un semplice lin-guaggio per formattare pagine. Con il tempo e l’uso

l’HTML ha perso in parte la sua funzione di linguag-gio per la formattazione pulita e semplice, “sporcato” dall’uso troppo insistente di tags come <font> per la formattazione del testo, oppure con l’utilizzo di alcu-ni elementi per funzioni diverse dal loro scopo origi-nario. Mentre internet e il web design progredisce, il linguaggio di markup usato per crearlo, HTML, sta diventando più ordinato e flessibile, anche grazie agli standard del W3C. Ad esempio le tabelle, che inizal-mente venivano usate come base per creare layouts ben allineati sono state in gran parte sostituite dai DIV con il supporto dei fogli di stile (CSS). L’integrazione di tecnologie come gli script server side (ad esempio PHP, ASP, JSP) e standard del design come CSS stanno rivoluzionando il modo di fare web design.

Core fonts for the Web è il nome di un progetto di Mi-crosoft che ha avuto inizio nel 1996 ed è stato dichiarato terminato nell'agosto 2002. Il suo scopo era di fornire un pacchetto di caratteri tipografici standard per l'uso su Internet. Anche se non più scaricabile dal sito Mi-crosoft la licenza del pacchetto ne permette la ridistri-buzione a condizione che ne venga mantenuto il for-mato ed il nome originale e che non venga incluso in prodotti commerciali; per questo motivo il pacchetto è scaricabile su siti web di terze parti.Per Windows, i caratteri sono forniti all'interno di ese-guibili (.exe), ognuno dei quali contiene un file cabinet (.cab), che può essere espanso avendo il software adat-to, questo permette l'utilizzo dei font anche da parte di sistemi operativi quali Linux. Per i sistemi Macintosh il file viene fornito come archivio BinHex Stuff-It.

Comunque, anche se i font sono ancora legalmente di-sponibili su SourceForge e altri siti Web e vengono in-clusi in Mac OS, Håkon Wium Lie, CTO di Opera Sof-tware, ha segnalato la cancellazione del progetto Web Core Fonts come esempio del fatto che Microsoft cerca di evitare l'interoperabilità con sistemi non MS.L'11 aprile 2005 Ascender Corporation ha raggiunto un accordo con Microsoft, tramite il quale Ascender può distribuire i font Microsoft, inclusi i Windows Core Fonts, i Microsoft Web Fonts e molti altri font multilin-guaggio attualmente forniti da Microsoft. Ogni caratte-re costa dai 20 ai 30 dollari.

FONT

Arial, talvolta anche Arial MT, è un font neo-grotesque sans-serif presente in Microsoft Windows, applicativi Microsoft, Apple Mac OS X e in molte stampanti PostScript. Il carat-tere è stato creato nel 1982 da Robin Nicholas e Patricia Saunders per la Monotype Typo-graphy. È generalmente risaputo che l'Arial è stato pensato come sostituto del famoso Linot-ype Helvetica (ma "costruito" in modo da non essere così simile da causare problemi legali). Arial è anche un famiglia di caratteri che com-prende lo standard Arial (Arial std) e le sue varianti, inclusi Arial Black, Bold, Extra Bold, Condensed, Italic, Light, Medium, Monospa-ced, Narrow, e Rounded. L'Arial Alternative Regular e l'Arial Alternative Symbol.

Il Times New Roman è un carattere tipo-grafico con grazie, ideato nel 1931 da Stanley Morison (1889 - 1967), e disegnato da Victor Lardent comparso poi per la prima volta il 3 ottobre 1932 sul quotidiano britannico The Times. Venne rimpiazzato dopo ben 40 anni, poiché le tecnologie di stampa erano comple-tamente cambiate. "Ha un'asse umanista ma proporzione manieriste, colore barocco e af-filate finiture neoclassiche." Lo scopo dell'ide-atore fu quello di avere un carattere leggibile e con occhio medio "stretto" (cioè un caratte-re sviluppato più in altezza che in larghezza), che permettesse di comporre le strette colon-ne tipografiche del quotidiano senza i fasti-diosi effetti dei canaletti.

Impact è un carattere creato nel 1965 da Geoffrey Lee e realizzato dalla fonderia Stephenson Blake. I suoi tratti spessi, gli spazi tra le let-tere compressi e la sua controforma interna minima sono particolarmen-te tesi, come suggerisce il nome, per "impattare". Il font ha un'altezza x, che raggiunge quasi i tre quarti della linea principale. Le sembianze sono principalmente destinate a titoli ed il carattere ha un utilizzo limitato nelle applicazioni di testo. Le stesse porta-no a comparare Impact con caratte-ri simili, come l'Haettenschweiler, il Compacta della Letraset, el'Helvetica Inserat.

La parte del design che tratta il colore è forse l’aspetto più complicato quando si tratta di progettare un’idea grafi-ca. Perchè? Bhe… perchè il colore ci colpisce in modo molto soggettivo. Per alcuni, una paletta di grigi scuro con macchie di rosa brillante può sembrare un’idea fan-tastica, per altri, invece, risulta essere orribile. Troppi designer, anche con titoli di studio del tutto rinomati, finiscono col fare scelte sui colori molto soggettive…Il cervello umano percepisce ed elabora i colori di un sito in meno di un secondo, registrando una sensazione positiva o negativa che poi accompagnerà l’utente du-rante tutto il resto della navigazione. Sfortunatamente non esiste un “codice cromatico” univoco e condiviso in tutte le culture mondiali. Le impostazioni grafiche di maggiore successo sono quelle che non prevedono l’uso di più di tre o quattro colori principali. E’ bene poi rea-lizzare prima di tutto uno schema in bianco e nero per poi aggiungerci i colori, in modo da poter così valuta-re l’impatto di differenti combinazioni alternative. Per quanto riguarda il testo sarà meglio evitare sia colori ad alto contrasto (il classico nero su bianco) che colori chiari su sfondo bianco o scuri/blu su sfondo scuro, in-

fatti, entrambe le combinazioni alla lunga tendono ad essere piuttosto stressanti per gli occhi. In ogni caso, il segreto di una scelta cromatica vincente più che nella selezione dei singoli colori è nel loro giusto abbinamen-to. Per ottenere degli accostamenti gradevoli bisogna considerare che tutte le colorazioni derivano dai tre co-lori primari: il rosso, il blu ed il giallo. Unendo a due a due i colori primari si ottengono altri tre colori detti secondari: il verde, l’arancio ed il viola. I sei colori ter-ziari si ottengono invece dalla combinazione dei colori primari e dei secondari, e sono: il giallo-arancio, il ros-so-arancio, il rosso-viola, il blu-viola, il blu-verde ed il giallo-verde. In generale è poi possibile affermare che i colori caldi devono essere utilizzati quando si vuole sot-tolineare in maniera decisa il testo o qualche elemen-to grafico particolare, mentre quelli freddi, quando si vuole sottolineare l’aspetto professionale, oppure, come sfondo. Ecco spiegato perché di solito nelle presenta-zioni ufficiali si tende a privilegiare la scala comatica del blu. Entrambe le combinazioni risultano comunque abbastanza annoianti alla lunga se non “contaminate” l’una dall’altra.

il COLORE

Un’ottima alternativa a Color Scheme Designer 3 è Adobe Kuler, qui potete creare con pochi passi, combinazioni di colori basate su configurazioni standard degli schemi di colore. Un’aggiunta funzione di questo strumento è che è in grado di generare schema di colore attraverso l’upload d’immagini. La registrazione a questo sito offre agli utenti l’interscambio di tavolozze colori con gli altri, che chiunque può usufruire.

Color Scheme Designer 3 riporta una schermata di facile utilizzo,attraverso la quale puoi scegliere il colore da cui partire per realizzare la tavolozza dei colori. La cosa meravigliosa di questo sito è che ti propone lui stesso i 6 schemi di colore soltanto cliccando dei link in alto a sinistra. Un’altra interessante funzione di questo sito è che ti permette di emulare la visione del design in base agli utenti affetti da problematiche di vista, ad esempio cecità parziale, monocromatismo, daltonismo, e attraverso i link “preview”, “light page example”, “dark page example”, puoi direttamente avere una visione del design con colori chiari o scuri.

Il marrone (e tutte le tonalità comprese tra questo ed il rosso) mitiga questi aspetti negativi conferendo maggiore stabilità e credibilità. Tutte le varianti sul colore delle terrecotte sembra-no essere molto gradite (soprattuto agli utenti europei), pro-babilmente perché richiamano colori e temi mediterranei.Meno acceso del rosso, ma anche molto meno efficace nel provocare una reazione, il rosa richiama invece aspetti ro-mantici, femminili e non violenti.

Il giallo richiama invece la bril-lantezza, il calore, l’originalità e la spiritualità. Di difficile ab-binamento, in quanto tende a scomparire sui colori chiari, va spesso sottolineato con colori più forti. Le sue varianti più scu-re (eccettuato il color oro, legato da sempre al benessere econo-mico) sono invece da evitare in quanto collegate a concetti ne-gativi, come gli stati di malattia.

L’arancio è il più stabile e rassi-curante tra i colori della terra (in quanto combinazione del rosso, che richiama l’azione, con il gial-lo, che richiama allegria), spesso associato ad offerte speciali, im-plica energia, equilibrio, estro-versione ed apertura. Nelle sue varianti associate ai colori degli agrumi è in grado di stimolare gli appetiti dell’osservatore.

In particolare il rosso è consi-derato il colore della passione, quello che più potentemente ri-chiama l’attenzione e spinge ef-ficacemente all’azione, tuttavia viene collegato anche ad aggres-sività ,violenza ed eccitazione, e, quindi, è bene non eccedere nel suo uso soprattutto se si ha a che fare con utenti professionali.

Il verde invece, è uno tra i colori più riposan-ti e gradevoli per il cervello umano, in quan-to richiama la natura, l’armonia e la stabilità. Ha anche proprietà curative ed, in opposi-zione al rosso, denota un procedimento o una area sicura (come per i semafori). Nella cultura nord americana le sue varianti più scure richiamano il colore del denaro.

Il nero è invece associato all’eleganza, al pote-re, al male, al mistero, alla paura ed alla morte. Molto formale, denota anche prestigio ed au-torità, conferisce profondità alle prospettive e diminuisce la leggibilità dei testi se usato come sfondo. Combinato con colori rosso-arancio dà vita a schemi cromatici estremamente ag-gressivi.

Il blu, soprattutto dagli uomini, evoca calma, professionalità, affidabilità e saggezza. E’ si-curamente tra i colori meno rischiosi da uti-lizzare, a meno che non si commercializzino alimenti (visto che calma la fame). Nelle sue varianti più scure rappresenta potere, cono-scenza, integrità e saggezza, in quelle chiare, salute, tranquillità e delicatezza.

Il bianco è considerato il colore della per-fezione. Richiama concetti di purezza, in-nocenza, verginità pulizia e lucentezza. In opposizione al nero ha spesso un significato positivo. Può essere associato anche al fred-do (in analogia con la neve), ad ospedale e medici o a prodotti dietetici.

il WEBMASTER

Webmaster (o Web master), termine in-glese usato anche nella lingua italiana, indica generalmente colui che progetta (webdesigner), costruisce ed è responsa-bile di un sito web. La figura, nata con lo svilupparsi del World Wide Web, può as-sumere connotazioni e mansioni specifi-che a seconda della dimensione del sito web e delle specializzazioni tecniche in possesso. In un sito di piccole dimensioni o in siti di carattere amatoriale/dilettan-tistico, la persona indicata come webma-ster sarà solitamente il progettista, lo svi-luppatore, il programmatore (scrittura del codice HTML e linguaggi correlati), il grafico, oltre che il redattore dei con-tenuti. Nei siti di carattere amatoriale a lui è spesso affidata anche la gestione dei

contatti con gli utenti del sito oltre che la proprietà del sito stesso. Nei siti di mag-giori dimensioni e in ambito professio-nale, il webmaster agirà da coordinatore e supervisore delle attività delle altre per-sone che lavorano al sito (grafici, editori, ecc.) e sarà normalmente un dipendente o un incaricato del proprietario del sito: da ciò deriva che il webmaster assume anche carattere di “figura professionale”. La figura professionale, a differenza di quella dilettantistica/amatoriale, dovreb-be avocare a sé una serie di conoscenze quali la struttura generale del web, la co-noscenza degli standard di qualità ema-nati dal W3C (World Wide Web Consortium) e di uno o più linguaggi di programmazione, la stesura di docu

menti accessibili, la progettazione con-tenutistica accessibile, il funzionamento generale dei motori di ricerca e dei siste-mi di Information Retrieval (IR), oltre ad una buona conoscenza generale del set-tore informatico. Il webmaster, di norma, gestisce lo sviluppo delle applicazioni sia client, che server, assumendo la respon-sabilità della progettazione e della messa online. Segue il processo di sviluppo in tutte le fasi (analisi, progettazione, im-plementazione, test).

il WEBMASTER

Adobe Photoshop è un software proprietario prodotto dalla Adobe Systems Incorporated specializzato nell'elaborazione di fotografie (fotoritocco) e, più in generale, di immagini digitali. Questo programma è in grado di effet-tuare ritocchi di qualità professionale alle im-magini, offrendo enormi possibilità creative grazie ai numerosi filtri e strumenti che per-mettono di emulare le tecniche utilizzate nei laboratori fotografici per il processamento del-le immagini, le tecniche di pittura e di disegno.

SOFTWARE

WordPress è una piattaforma di "perso-nal publishing" e content management sy-stem, sviluppata in PHP e che usa come database MySQL. Consente la creazione di un sito internet formato da contenuti testuali o multimediali, facilmente gestibi-li ed aggiornabili. Creata da Matt Mullen-weg, è distribuita con la licenza GNU Ge-neral Public License. WordPress supporta un solo blog per installazione, ma ne esi-ste anche una versione multi-utente. Dalla versione 3.0 WordPress MU non esiste più e tutte le funzionalità sono state inglobate in WordPress nella modalità Network.

SOFTWARE

Adobe Illustrator è un’applicazione infor-matica prodotta dalla Adobe Systems In-corporated specializzata nell’elaborazione di illustrazioni e grafica vettoriale. Il pro-gramma permette di costruire immagini vettoriali attraverso forme geometriche o attraverso degli strumenti di tracciatura. Si possono ricostruire loghi da scansioni attraverso il sistema di tracciatura automa-tica o manualmente. I lavori più sviluppati attraverso Illustrator sono: costruzione di loghi, prodotti pubblicitari (biglietti da vi-sita, cartellonistica, scritte) o anche layout per siti web.