Quali sono i passaggi nella progettazione di un sito Web?

Chiamando tutti i web designer :)

Sto iniziando a creare un sito Web per una piccola impresa nella mia città natale e sarà il mio primo vero progetto. Ho creato siti in passato, cosa che ho fatto per piacere. Sono fluente in HTML e CSS. Ho i requisiti dei clienti e ciò che vuole sul sito Web ecc. Sono bloccato su quali passi devo seguire dopo aver finalizzato i requisiti. Ho cercato sul web e non sono riuscito a trovare nulla di rilevante alle mie domande perché le informazioni non sono aggiornate.

Le mie domande sono:

Cos'è un flusso di lavoro dei web designer nel 2014? (Perché tutto sta cambiando così in fretta) Creo wireframe del sito e poi li disegno in Photoshop e quindi codifico i disegni?

Voglio solo sapere come funzionano i processi di "progettazione", ad esempio quali passi devo prendere per realizzare il sito web.

Grazie in anticipo.

Scoperta e ambito di applicazione

Siediti con il cliente per determinare, obiettivi, scopi e bisogni. Avresti dovuto redigere una citazione del sito designato e anche discutere i tempi di risposta. Assicurati di aver scritto in tutto il necessario che non puoi fornire. Devi capire come sarà strutturato il sito. Come reattivo, solo tablet e telefono, solo desktop, solo desktop e tablet. È necessario capire se il design è un obiettivo di design multi-fase, ad esempio il client vorrà rilasciare una versione desktop e desidera successivamente un'app mobile completa.

Mappatura dei contenuti

Spero che ti sia stato dato tutto il contenuto desiderato per il sito. È necessario mappare il sito e le sue funzionalità. Decidi come è la scalabilità per future modifiche, decidi come strutturare il codice se è per un CMS o un'app.

Esempio:

Modello

Dopo aver completato il tuo "albero" o "mappa" con l'approvazione del cliente, lavorerei su uno schizzo manuale o uno strumento di simulazione. Ci sono molte domande su questo argomento se fai una ricerca in alto a destra

Esempio:

Piastrella di stile

Progettare in Photoshop per il web design sconfigge lo scopo dell'età di oggi. Non conosco molte persone che usano ancora Photoshop perché la quantità di tempo necessaria per creare un pulsante di fantasia che potresti aver trascorso la stessa quantità di tempo e codificato nel browser. Se devo usare un'applicazione per una richiesta speciale, la distribuirò in Illustrator o InDesign. Consiglierei la migrazione per progettare una tessera di stile come:

Con lo scopo della tessera non stai consegnando a un cliente un disegno e ti stai mettendo in un angolo di "questo non assomiglia al disegno che mi hai dato". Inoltre, se stai pianificando un sito non c'è motivo di dedicare il tempo a predisporlo in Photoshop per la reattività, perché passerai molto tempo a progettare per determinati dispositivi, ecc. Se dovessi progettare l'intero sito, lo farei considera Illustrator, come affermato, per il suo SVG e la capacità di esportare elementi per il tuo sito rispetto a Photoshop. In un certo senso potresti persino usare InDesign per la formattazione del contenuto, ma userei Photoshop solo per la manipolazione delle immagini e, se lo farò, probabilmente rotolerei con ImageMagick. Prendo il riquadro di stile un livello più lontano degli altri e lo codice in una singola pagina, quindi ho eliminato un compito preliminare del mio maestro.css file.

Wireframe

Preferisco distribuire la progettazione nel browser se non l'hai notato. Ora in questi giorni posso usare Illustrator per uno schizzo del sito o un mockup del sito, ma di solito distribuisco un .cssfile modello predefinito con non più di 6 colori in scala di grigi e codifico tutto per la struttura del sito poiché la maggior parte delle persone non può ottenere una comprensione del design e vuoi qualcosa con cui giocare. A volte vado avanti e lo faccio in PHP poiché è più facile da implementare per un CMS. Svilupperò quindi un semplice sottodominio con i caratteri FORNITI dal cliente in modo bianco e nero, in modo che sia presente l'intera funzionalità del sito e che possano attraversarlo. Da quando non ho trascorso il tempo ad aggiungere tutto il contenuto o i colori (perché uso un riferimento al testo fittizio: "Alternativa a Lorem Ipsum (testo fittizio) per i siti Web") Posso facilmente modificare qualsiasi modifica presente se non gli piace un determinato elemento basato su un dispositivo.

Colorazione e contenuto

Una volta che il cliente ha firmato la struttura del sito e le funzionalità, scriverò il resto del CSS e aggiungerò le animazioni richieste o le specifiche di JavaScript. Dato che ho approvato il riquadro di stile e se l'ho sviluppato correttamente, posso semplicemente copiare il CSS ed essere impostato.

Debug, Debug, Debug

Il passaggio finale prima della firma del client è il debug e assicurati che il mio codice sia solido senza errori. Se tutto è corretto, dovrei avere un rilascio regolare. Questo passaggio include anche test di servizio e test di carico, se è quello che hai valutato e offerto. Personalmente, sono fermamente convinto che qualsiasi designer dovrebbe essere consapevole di ciò che sta sviluppando proprio come farebbe, si spera, quando si tratta di un design di stampa. Se il cliente non può permettersi un vero provider di hosting, potrebbe limitare le prestazioni del sito e tutti diranno che è colpa tua e hai fatto qualcosa di sbagliato.

Formazione

In genere offro nel mio breve / preventivo formazione sui siti CMS. Alcuni utenti non hanno idea di cosa stiano facendo, quindi farò un'offerta per un pomeriggio con un'ora di imbottitura per domande successive per assicurarsi di ripassare qualsiasi cosa o assicurarsi che stiano usando il mio design al massimo delle capacità.

Alcuni altri argomenti che potrebbero esserti utili dal momento che stai ponendo una domanda di base:

• Qual è la differenza tra wireframe e mockup?
• Come presentare mockup di web design a un cliente?
• Quali sono alcune buone pratiche di "derisione" nel web design?

Sono anche un web designer che ha appena iniziato nel settore. Tuttavia, ho realizzato alcuni progetti. Per me, il mio flusso di lavoro va così:

1. Riunione iniziale di progettazione e sviluppo
   Questo è quando raccolgo tutte le informazioni rilevanti, inclusa la data prevista per il completamento, faccio un elenco degli elementi necessari dal mio cliente, ecc.
   
2. Mockup di PhotoShop
   In questo momento, trovo un disegno o due o tre che si adattano al mio cliente e realizzo modelli in Photoshop usando il loro marchio, colori, stili, ecc. Li invio e discuto su cosa dovrebbe essere cambiato / tenuto su ognuno , quindi lascia che il cliente decida quale design preferisce.
   NOTA: se stai usando WordPress per costruire, puoi andare su http://themeforest.come controlla tonnellate di temi. Da lì, puoi prendere screenshot e fare i tuoi modelli, quindi puoi anche fornire una demo live (senza le personalizzazioni del cliente, ovviamente). Se al tuo cliente piace uno di questi modelli, allora acquisti il ​​tema e puoi modificarlo come è necessario. Questo è quello che tendo a fare. Non uso mai un tema (o qualsiasi altra cosa per quella materia) senza dare credito / pagamento / ecc. al creatore originale. :)
   
3. Sviluppo
   Quindi finalmente inizio a sviluppare effettivamente il sito in un ambiente di sviluppo (NON il sito Web live del client, ma un sottodominio se possibile - IE dev.clienturl.com) Mando gli aggiornamenti al mio client ogni volta che sento che una pagina si sta avvicinando per completare, in questo modo se ci sono problemi, possiamo risolverli immediatamente.
4. SEGUI SEMPRE
   Anche dopo che il sito Web del tuo cliente è diventato live e sembrano soddisfatti e non hanno richiesto ulteriori modifiche, assicurati di dare seguito. Assicurati solo che tutto funzioni come dovrebbe, secondo le loro aspettative. Consiglio anche di scrivere un piccolo sondaggio affinché ogni cliente finisca una volta che il sito Web è stato pubblicato per circa una settimana. Puoi utilizzare i commenti da qui come testimonianze sul tuo sito web.

Se hai bisogno di aiuto con qualcosa, contattami tramite il mio sito Web. Ho un sacco di risorse che posso condividere con te per cose come contratti, sondaggi di post-produzione, questionari iniziali, ecc. Http://anchorsawaydesigns.com/

prova a ottenere quante più informazioni possibili fin dall'inizio, quindi segui un approccio graduale qualcosa di simile al seguito. Cerca di informare il tuo cliente il più possibile, poiché non vorrai sviluppare qualcosa in isolamento solo per scoprire in seguito che non soddisfa le sue aspettative. Se investi in un buon strumento di wireframing (io uso balsamiq), metà del lavoro è fatto per te.

1. Raccolta dei requisiti
2. wireframing
3. Modelli di design
4. Design finalizzato
5. Sviluppo
6. Ospitando

In bocca al lupo.

Ciao amico è bello che stai iniziando un nuovo progetto.

Passi per le tue necessità:

1. per prima cosa decidi quale tecnologia vuoi usare per il tuo progetto intendo lo scorrimento di una sola pagina, più pagine ecc.

2. Quindi, di conseguenza, preparare uno schizzo per il layout e il flusso di lavoro.

3. Ora inizia a progettare il tuo layout nello strumento che ti piace fare con Photoshop, ma puoi usare i tuoi gusti.

4. Dopodiché è bene che tu mostri il tuo layout al client per eventuali cambiamenti, ad es. colore, caratteri ecc. in modo che tu possa farlo non crea mal di testa al momento dell'html.

5. Ora, dopo la conferma dei clienti. È tempo di iniziare a scrivere codice con HTML e CSS.

6. Dopo di che è tempo di passarlo allo sviluppatore per ulteriori codici di base linguistica, ad es. PHP, .Net ecc.

Godere............

Nel settore Web, per semplificare il processo di sviluppo, la progettazione viene eseguita e prima che il progetto finale venga presentato per essere ulteriormente sviluppato o testato, sono coinvolti altri passaggi intermedi:

Passaggio 1: ottenere ispirazione:

Se osservi continuamente cosa stanno facendo gli altri progettisti o siti per i loro wireframe, otterrai lentamente un'immagine nella mente di come un wireframe aiuta a organizzare le informazioni per lo schermo.

e per questo puoi usare lo strumento Wireframing "Wirify", basta aggiungere il grande link al tuo segnalibro e accedere a qualsiasi sito Web desiderato, fare clic sul segnalibro, vedrai il sito Web trasformarsi in wireframe.

Passaggio 2: progettazione del processo:

Diversi designer si avvicinano al wireframing e alla sua traduzione in immagini o codice in diversi modi,

Qui non è solo il designer a scegliere il percorso da seguire, a volte i clienti preferiscono fare direttamente i modelli, e alcuni preferiscono più sistematici,

Sketch => Wireframe => Mockup => Codice

Passaggio 3: schizzo:

Ora, quando sei ispirato, hai delle idee approssimative e una pianificazione dell'approccio, è sempre bene iniziare con gli schizzi, non importa quanto sei bravo a controllare il tuo mouse / stilo o qualunque cosa tu usi, non possono battere carta, matita a semplicità.

Lo schizzo a mano su carta è sempre un buon punto di partenza per qualsiasi designer. Fornisce un modo rapido e semplice per focalizzare e organizzare. Se sei molto preciso con gli schizzi, potresti persino usarlo come wireframe finale.

Passaggio 4: Wireframing:

La creazione di un wireframe è uno dei primi passi che dovresti prendere prima di progettare.

Un wireframe ti aiuta a organizzare e semplificare gli elementi e i contenuti all'interno di un sito Web ed è uno strumento essenziale nel processo di sviluppo.

Un wireframe è sostanzialmente una rappresentazione visiva del layout del contenuto in un progetto .

Come le fondamenta di un edificio, deve essere fondamentalmente forte prima di decidere se dargli una mano di vernice costosa.

Scegli i tuoi strumenti

Ecco l'elenco di 10 strumenti gratuiti di Wireframing per i designer di Mashable

Impostazione di una griglia

Le griglie sono molto necessarie per ottenere un design simmetrico e parallelo.

ogni volta che guardi un sito web ben progettato, scoprirai che il suo contenuto inizia da un punto specifico nel corpo e termina in uno, quelli sono gestiti mediante griglie.

Determina il layout con le scatole

Definire la gerarchia delle informazioni con la tipografia

Cosa evitare durante il wireframing:

• Troppe cose accadono sulla pagina.
• Enfasi su colore e design
• Troppi dettagli

La creazione di un wireframe offre al cliente, allo sviluppatore e al progettista l'opportunità di dare uno sguardo critico alla struttura del sito Web e consente loro di effettuare revisioni facilmente nelle fasi iniziali del processo.

Wireframing offre i seguenti vantaggi chiave:

Passaggio 5: Mockup / Visual:

Ora Wireframe finale può essere convertito in Mockup o Visual finali:

Alcuni strumenti comuni per Mockuos sono Adobe Photoshop, Corel Draw e Sketch molto nuovo ma già populare, ecc.

Gerarchia dell'informazione

Potrebbe essere necessario prendere in considerazione ciò che deve essere evidenziato e quali informazioni collaterali e la combinazione di colori, il riposizionamento e la tipografia sono così decisi.

Tipografia

Scegli la tipografia visivamente accattivante e leggibile per il sito Web con la giusta combinazione di alternative. Dimensione del carattere, peso e colori svolgono un ruolo cruciale nella leggibilità.

Combinazioni di colori

Una combinazione di colori che rappresenta l'identità del marchio e i colori psicologici come rosso per il pericolo, verde per il successo, ecc.

Passaggio 6: prototipi :

Un prototipo è un primo esempio, modello o rilascio di un prodotto creato per testare un concetto o un processo o per agire come una cosa da replicare o da cui imparare.

I wireframe gestiscono la struttura, i mockup gestiscono le immagini e i prototipi gestiscono l'usabilità (nei prodotti web / app).

Viene realizzato un prototipo di prodotto, quindi questo viene testato e viene eseguito POC (Prof of concept). Ora possiamo passare al prodotto reale (ovviamente se non è necessario apportare modifiche)

Link all'articolo originale con immagini e altri link