ISCRIVITI AI FEED RSS
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à.
1. 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.
2. 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
3. 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?
4. 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?
Italianwebdesign© - Da un'idea di Laura Gargiulo - mail:
12 Commenti
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
ottimo, quindi grosso modo confermi il mio metodo
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
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.
@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
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”
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”.
se c’è ispiriazione
-eventualmente bozza su carta
-inkscape
-css e html
altrimenti solo css e html
@Pegasus: ahahah bellissima
@patrick91: bene bene
molto utile, comunque io principalemente mi baso sul brainstorming e sulla scelta di indirizzamento per quanto riguardo gli utenti finali.
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…
Trackback
Lascia un commento