Progettazione: le buone regole by Lauryn

Ispirata dal nostro amico Paolo Galli, il quale cita questo articolo, oggi vi racconto un po’ come inizio ad ideare i siti che creo.

Sia ben chiaro che non si tratta di regole fissate da qualcuno, ma si tratta di "buone" regole che ho imparato qua e là. Alcuni sono proprio principi che ho imparato al corso di webdesign e pertanto li rendo pubblici per vostra utilità.

bozza1. Innanzitutto guardarsi in giro, sia sul web ma anche no! Chi l’ha detto che guardare fuori dalla finestra non può essere un momento di creatività? 😉 Dopodichè stendete su carta le vostre idee, prendete appunti, abbozzate, pensate…brainstorming!! Cosa può piacere al cliente? Cosa deve attirare un potenziale utente del sito? Chi sono gli utenti del sito? E’ meglio usare questo colore o quest’altro? Cosa interessa trovare come prima cosa? E così via…

Quando cominciate ad avere le idee più chiare potete anche stendere un layout più definito con spazi e colori quasi definitivi, usando righelli e matite colorate.

ps2. Trasporre tutto su Photoshop creando, su una pagina che abbia la risoluzione-tipo di un video 1024×768 o maggiori, il vostro layout. Che potrebbe essere benissimo essere progettato per un 800×600, ma usate sempre una pagina più grande e aiutatevi con i righelli, poichè è utile creare la grafica di un ipotetico sfondo di riempimento per le risoluzioni maggiori.

Create la grafica fin nei minimi particolari, poichè sarà quella che "sezionerete" e userete per il vostro sito finale! Simulate anche del testo togliendo l’antialias e usando ovviamente i font browser-safe, di modo da rendere il risultato molto simile alla realtà.

In questa fase normalmente si passa il layout o i layout al cliente per una prima visione. Scelto il layout definitivo verranno eventualmente apposte correzioni poste dal cliente (purchè siano fattibili) ed eventualmente creare simulazioni delle pagine interne, etc

html3. Cominciate a creare l’html sezionando idealmente il sito in box. Se necessario fatelo prima su carta, cercando di proiettarvi già nella creazione del css e delle immagini da usare come background, etc. A volte infatti, a causa di una grafica particolarmente elaborata, potrebbe rendersi necessaria la creazione di più box contenitivi ed è meglio ipotizzarla fin dal principio, non credete?

layout4. Infine cominciate a lavorare sul vostro css, tenendo ben presente le regole studiate e la pulizia. Sezionate le immagini che vi servono e cominciate a guardare il risultato tramite il vostro html. Testate già in questa fase su più browser per verificare la compatibilità, e in caso di problemi create fin dal principio dei file css a parte per i diversi tipi di browser (solitamente vi sarà bisogno solo di un file css in più per i problemi causati da explorer 6 e basta).

Che ne dite? Voi come vi comportate?

Laura Gargiulo, web designer freelance e blogger.
Autrice di “Come diventare web-coso” e “Consigli di webdesign base“,
moglie dal dicembre 2010 e madre dal dicembre 2012.
Portfolio personale: Lauryn.it
Parlo anche di viaggi ed expat su: Myplaceintheworld.it e do consigli su come espatriare a Edimburgo sul mio blog Lovin’Edinburgh

12 Commenti

  1. Luca

    procedimento mio:
    -brainstorming ( molto 😐 ) ;
    -bozza su carta con relativi colori x ogni parte del sito;
    -la bozza prende vita in photoshop;
    -passo tutto sotto forma di codice html,css,asp o chi per esso

    Risposta
  2. Lauryn (Autore Post)

    ottimo, quindi grosso modo confermi il mio metodo 😀

    Risposta
  3. Marco

    Vediamo:

    Brainstorming
    wireframe (bozza su carta/ps)
    design
    html + css + fix ie

    passo a chi di dovere.

    Ovviamente il wireframe viene mostrato al cliente, anche io faccio la grafica molto dettagliata perchè da quella creo l’html, non creo l’html e poi i pezzi della grafica 😀

    Risposta
  4. nitinpai

    Hi Lauryn,

    I just read your article by translating it and thanks for citing my article. You have good points and yes I missed out on brainstorming. Thats probably because I was considering a design by a single person and not by a group. 🙂

    Risposta
  5. Lauryn (Autore Post)

    @Marco: ottimo, anche io faccio grafica piuttosto dettagliata, sia perchè nei confronti del cliente è più facile dare l’idea del risultato finale, sia perchè a volte la grafica necessita di ulteriori accorgimenti css che è impossibile prevedere se facessi l’inverso. è quello che cerco di dire a nitinpai sul suo blog 😀

    @nitinpai: brainstorming can be done also by yourself!! 😀 I have many person inside of me that tell me what to do ahahha

    Risposta
  6. nitinpai

    Well, I just knew one meaning about brainstorming from the dictionary which says,

    “A group problem-solving technique in which members sit around a let fly with ideas and possible solutions to the problem”

    😀

    Risposta
  7. Lauryn (Autore Post)

    😛

    Risposta
  8. Pegasus

    Il lavoro perloppiù seguendo questi punti:

    -brainstorming
    -bozza su carta
    -nuovo giorno
    -nuova bozza su carta
    -photoshop
    -HTML e tante tabelle, ma tante tante
    -il risultato non è quello sperato
    -photoshop
    -ricerca su forum per realizzare lo stesso progetto in CSS, improvvisamente tutto diventa più semplice … decido di riutilizzare le tabelle
    -HTML (ottengo l’impatto cercato)
    -upload
    -post-it sulla scrivania: “da domani abbandono le TAB”.

    😛 😛 😛

    Risposta
  9. patrick91

    se c’è ispiriazione 😀
    -eventualmente bozza su carta
    -inkscape 🙂
    -css e html

    altrimenti solo css e html

    Risposta
  10. Lauryn (Autore Post)

    @Pegasus: ahahah bellissima

    @patrick91: bene bene 😉

    Risposta
  11. cirio

    molto utile, comunque io principalemente mi baso sul brainstorming e sulla scelta di indirizzamento per quanto riguardo gli utenti finali.

    Risposta
  12. Ale

    Lavorando spesso da solo, seguo esattamente tutti i tuoi passi Lauryn… 😉

    – analisi competitors
    – target
    – brainstorming
    – bozza grafica (su carta e poi su ps)
    – html, css, ecc.

    Succede a volte ke dp il brainstorming sia necesario preparare prima un wireframe da far vedere al cliente, altre volte sono libero di lavorare subito sulla bozza grafica… 😉

    Risposta

Lasciaci un tuo commento!

%d blogger hanno fatto clic su Mi Piace per questo: