Come creare un sito Web: fasi e tutorial utili
Nel processo di creazione di un sito Web ci sono diverse fasi che portano al risultato finale. Tralasciamo per ora le fasi strategiche (come lo studio dei competitor e il target di riferimento) e concentriamoci invece sulle attività più concrete che andremo a svolgere.
Per riuscire a ottenere un buon design i Web Designer dividono il processo in due fasi principali: la fase di design e la fase di codice.
La fase di Design
La fase di design è sicuramente quella più creativa. Si apre photoshop e si incomincia a disegnare il sito. Disegnare un sito chiaramente non è come disegnare un’ illustrazione o una grafica normale, infatti ci sono delle nozioni che un designer deve possedere. I contenuti non sono posizionati a caso ma ogni elemento si trova al suo posto per determinati motivi e, cosa più importante, dobbiamo pensare che poi dovremo realizzare il codice di quello che abbiamo disegnato. Per questo spesso prima di cominciare a disegnare il sito si fanno degli schizzi su carta o dei mockup con un software come ad esempio Balsamiq Mockup.
Uno dei migliori modi per capire come strutturare un sito è guardarne altri che reputiamo di qualità e vedere come sono organizzati. In base al target del sito cambierà l’organizzazione dei contenuti. Anche nel web design come in molti altri campi esistono poi mode del momento e influenze provenienti da altri settori.
La cosa migliore per chi vuole provare a disegnare un sito è trovare un tutorial di qualità che spiega come disegnare un sito in photoshop e provare a seguirlo passo passo, magari mettendoci del proprio. Non è strettamente necessario seguire per filo e per segno il tutorial, l’importante è capire le funzioni che vengono utilizzate e apprendere il più possibile.
A tale scopo indico qui sotto un paio di tutorial veramente ben fatti che spiegano come creare un sito in photoshop:
http://psd.tutsplus.com/tutorials/interface-tutorials/fabric-textured-web-layout/
http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-professional-web-2-0-layout/
La fase di realizzazione del Codice
Una volta che abbiamo disegnato il nostro sito in photoshop dobbiamo renderlo una pagina web vera e propria. Bisogna trasformare l’immagine creata in codice. Durante questo processo il web designer partendo dalla testata della pagina “header” realizza il codice HTML di ogni elemento che ha disegnato in precedenza. Scrivere codice ben fatto non è difficile ma non è neanche facilissimo, anche qui una buona base di partenza può essere una guida all’HTML con un tutorial che spiega come convertire layout da photoshop a codice:
http://www.html.it/guide/guida-html/
Una volta realizzato il codice ci sarà la fase di test nella quale si testerà il sito sui vari browser. Nel caso di siti dinamici a questo punto si comincia una terza fase dove si interfaccia il sito in HTML con un CMS come WordPress (per esempio), ma di questo parleremo prossimamente.
Stay Tuned!
0 Commenti