Campaign Cool Websites Creare Un Sito eventi font Hot inspiration map One Page Scroll parallax Responsive Risorse Free Social viral

#Creare un sito

  1. Come costruire un Sito Web Responsive
  2. Come creare un sito Web: fasi e tutorial utili
  3. Come disegnare un sito web in photoshop con logica
  4. Come costruire un sito Web: da Photoshop al codice Html5 e Css3
  5. Come costruire un sito Web: Inserire lo Slider, animare i link e posizionare le icone Social
  6. Nivo Slider Responsive con testi HTML animati
  7. Come creare una pagina Web accattivante usando Html e Css
  8. Integrare uno Slider con WordPress
  9. Creare il tuo primo Tema WordPress Responsive
  10. Come disegnare il tuo primo sito in stile “App” e “Flat Design”
  11. Creare il tuo primo Sito/Layout con Foundation
  12. Creare un Parallax Design accattivante e Responsive con Bootstrap
Photoshop e codice

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://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

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!

By Andrea Marchetti - @AfMarchetti

Web Designer & Multimedia Developer di Pavia, sviluppa siti e condivide esperienze dal 2006. Scopri di più nella sezione Chi sono»

Commenti Facebook

4 Commenti

  1. Francesca scrive:

    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

    • Andrea Marchetti scrive:

      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:

      Esempio

      Potrebbe essere uno spunto per un articolo grazie ;-)

  2. Giovanni scrive:

    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.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>