Generalmente un progetto viene generato o progettato (graficamente) prima?

Naviga le tue risposte
5

Supponi di voler costruire un sito web abbastanza grande.

Tutte le pagine dovrebbero essere progettate prima di essere costruite, o tutte le pagine saranno costruite e funzionanti prima di essere progettate graficamente?

Sono un programmatore e un grafico. Quando costruisco un nuovo sito web, di solito ho una descrizione approssimativa di tutte le pagine di cui ho bisogno e di come funzioneranno. Di solito inizio a costruire le pagine, mentre costruisco le pagine tendo a progettare l'interfaccia grafica allo stesso tempo.

Sto iniziando a pensare che questo sia male perché ogni pagina finisce per sembrare buona, ma non uniforme. O anche se sono appaiono uniformi, in realtà non lo sono. Ad esempio, nella pagina A e B l'intestazione è uguale ma sulla pagina A ha un 50px margin mentre su la pagina B ha un 50px padding . Lo stile per l'intestazione su pagina A è definito in un file CSS e lo stile per l'intestazione su pagina B è definito in un altro. Col passare del tempo può diventare un gran casino.

Ho bisogno di un nuovo approccio.

Ci sono molti modi in cui ho imparato a mantenere questo tipo di cose che accadono nel codice (DRY). Non so davvero come applicarli in quest'area però. O forse non ho ancora la disciplina.

Un'idea è, dopo che il profilo del progetto è stato completato, di creare disegni grafici di come tutte le pagine appariranno prima di costruirne. Quindi dovrei essere in grado di progettare gli stili prima di costruire le pagine, quindi non introdurrò definizioni di stile duplicate durante la creazione.

Il problema è che prima di progettare una pagina con HTML / CSS, la disegno in Photoshop. Tuttavia, non sempre funzionano esattamente come li ho progettati in Photoshop. A volte devo apportare delle modifiche per farlo apparire sulla pagina. A volte le modifiche necessarie variano da una pagina all'altra. Non vedo come posso pianificare in anticipo.

Qual è il normale flusso di lavoro per qualcosa di simile?

    
posta JD Isaacks 24.05.2011 - 20:01
fonte

5 risposte

8

Quello che stai cercando è l'idea di Wireframing .

Uso WireframeSketcher con grande successo su tutti i componenti grafici di tutti i progetti su cui lavoriamo.

Che si tratti di un sito Web, un'applicazione desktop o un'applicazione mobile, la fase di wireframing è fondamentale.

Il passo successivo è Mock Ups in cui qualcuno effettivamente fa la grafica e altre cose in Photoshop o qualche altro strumento, per mostrare come saranno la grafica, i colori e i caratteri.

Quindi fai il tuo sviluppo dai prototipi.

    
risposta data 24.05.2011 - 20:32
fonte
3

L'approccio tipico è progettare preventivamente i wireframe (cioè i contorni approssimativi di tutte le pagine) e poi uno sviluppatore e un designer lavorano in parallelo:

link

Per quanto riguarda il tuo problema specifico ti consiglio di fare una sorta di "design bibbia" tra wireframe e sviluppo di qualsiasi cosa. Un termine per quello che sto ottenendo è "linguaggio del design":

link

Fondamentalmente, progettare alcune pagine di esempio generiche per stabilire temi e regole visive generali (ad esempio, i pannelli sono sempre delineati con bordi blu arrotondati) ma non impantanarsi nella specifica funzionalità e non preoccuparsi di provare a costruire qualsiasi pagine specifiche. Quindi puoi fare riferimento a queste regole stabilite quando prendi decisioni sul design più tardi.

    
risposta data 24.05.2011 - 20:34
fonte
1

Mi piacerebbe avere l'idea di avere una versione mini del sito, ad es. solo 5-10 pagine e vedere cosa si sovrappone. Che tipo di semplificazione potrebbe essere fatta per mantenere il sito snello? Perché non potresti applicare DRY all'HTML / CSS del sito?

Il tentativo di fare tutte le pagine prima in entrambe le forme potrebbe essere travolgente per la mia mente. Farei un po 'di ciascuno piuttosto che provare a fare tutto entrambi prima di passare a qualcos'altro. Si tratta di un'idea agile di avere un piccolo prototipo funzionante che altre cose vengano aggiunte nel tempo in quanto potrebbero esserci modifiche a quanto originariamente previsto.

    
risposta data 24.05.2011 - 20:14
fonte
0

iterazione.

A volte alternando design per parlare dell'idea, mockup rapidi e sporchi in modo che gli elementi di lavoro possano essere provati dagli utenti di test per creare feedback sulle funzionalità, e quindi progettare di nuovo per creare ancora più feedback in termini di appeal e usabilità . Risciacqua e ripeti.

    
risposta data 24.05.2011 - 21:11
fonte
0
  1. Dividi il tuo progetto in grandi blocchi meta.
  2. Definisci le interfacce generali.
  3. Costruisci piccole versioni di prototipi per tutte queste scatole che non hanno tutti i requisiti di funzionalità / scala / concorrenza.
  4. Crea l'interfaccia utente in alto. Per l'interfaccia utente, i wireframe funzionano in qualche modo: ho realizzato wireframe con Visio / PPT / mspaint (gulp!) E tutti hanno risolto il problema iniziale di avvio.
  5. Una volta che si ottiene qualcosa attivo e funzionante - e ripetutamente interagire / migliorare.

Questo è il modo migliore IMO.

    
risposta data 25.05.2011 - 05:36
fonte

Leggi altre domande sui tag

Perchè la maggior parte usa Cygwin e non Uwin? Classe statica contro classe Singleton in C # [duplicato]