Come creare un sito Web: fasi e tutorial utili
By Andrea Marchetti
@marchetti_design
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!
Ciao,
sto cercando da tanto tempo un modo per riprodurre l’effetto che hai dato tu all’immagine “di copertina” di questo articolo. L’immagine che riproduce la parte di codice
Devo ritagliare l’immagine della pagina di un sito e vorrei dare quell’effetto lì , tridimensionale, per non mettere una immagine piatta.
Mi puoi aiutare?
Grazie in anticipo 🙂
F
Ciao Francesca,
per realizzare un immagine con l’effetto della copertina, apri l’immagine con photoshop selezioni:
1) edit –> transform –> perspective
2) con il puntatore prendi l’angolo in basso a sinistra dell’immagine e trascini verso il basso
3) duplichi l’immagine e sul livello superiore applichi: filter –> blur –> guassian blur (imposti il valore di sfocatura a 3,0)
4) mascheri l’immagine superiore in modo da rendere visibile una porzione dell’immagine sottostane più o meno al centro dell’immagine (per creare il punto di fuoco)
ecco il risultato:
Potrebbe essere uno spunto per un articolo grazie 😉
Ciao Andrea,
Complimenti per i tutorial, volevo chiederti se sapevi indicarmene uno in cui viene spiegata l’integrazione dei cms all’interno di un sito html.
Ciao Giovanni,
a breve vorrei realizzare dei video tutorial su come trasformare un template html in un template wordpress per adesso posso consigliarti questo:
http://www.marchettidesign.net/2013/03/creare-il-tuo-primo-tema-wordpress-responsive/
Ciao Andrea,
hai già ricevuto una pioggia di complimenti (più che meritati ovviamente) che sarai ormai bagnato fradicio … io ci aggiungo una secchiata d’acqua gelata che va anche di moda in questi giorni 🙂
Sono alle prime armi e sto sfruttando al massimo le tue risorse, spiegate in maniera semplice e pulita.
Ho notato che per i tutorial utilizzi lo stesso format di quei tutorial step by step in lingua inglese, il che mi fa pensare che ne avrai fatto di traduzioni inglese-italiano 🙂
Complimenti per tutto, sei nei miei preferiti e … come ci consigli tu “stiamo tuned!!”
Ciao Mattia, grazie dei complimenti,
non sono in grado di tradurre o scrivere articoli in inglese, utilizzo i format standard (più comunicativi) di questo settore.
Mi piacerebbe molto proporre tutorial anche in inglese ma per farlo (in maniera professionale) dovrei prendermi un periodo di studio considerevole,
ci sto pensando 🙂