Tag: mockup

Continuiamo nella strada che porta dalla proposta grafica alla pagina finita. Lo scorso articolo abbiamo visto le proprietà del testo di Photoshop e come convertirle in proprietà del nostro foglio di stile.

Padroni degli strumenti di Photoshop visti nel precedente post apriamo il nostro file e visualizziamo le guide e tutti gli elementi di aiuto o chiarimento che il designer ci ha lasciato. Se ci sono livelli nascosti vediamo cosa contengono e controlliamo che non ci siano stranezze o incomprensioni da chiarire. Fatto questo iniziamo.

Come abbiamo visto nel post precedente, una volta identificata la struttura HTML, possiamo cominciare a lavorare sul CSS. Per farlo cominciamo con aprire il file PSD in Photoshop e a raccapezzarci nel mondo del programma che ha rivoluzionato il mondo dell’immagine digitale.

Continua il percorso per arrivare dalla grafica statica alla pagina web. Oggi parliamo di come derivare la struttura HTML dall’immagine proposta dal grafico. Una volta ottenuto il file a livelli per prima cosa dobbiamo cercare di individuare dal mockup quali sono gli elementi strutturali della pagina per organizzare il codice.

Ci sono principalmente due diverse scuole di pensiero sul workflow di progettazione di una proposta grafica: il primo, il più “antico e arcano” è quello di creare una proposta grafica come immagine, un mockup grafico, la seconda è quella di creare un mockup HTML studiando la grafica direttamente sulla struttura HTML.