In che modo i "Pro" progettano e codificano i siti web?

Question

Come fa la maggior parte dei moderni web designer "pro" a iniziare/progettare/codificare un sito?

Mi rendo conto che le tecniche variano e differiscono drasticamente, sto solo cercando alcune tattiche o approcci solidi e affidabili. Ad esempio, "So che la maggior parte disegna un progetto approssimativo con il client, quindi entra in Photoshop e lo crea, quindi lo affilo, quindi lo codifico a mano ..." ecc. Ovviamente una risposta non deve essere questo generico

So che i programmatori non sono sempre i progettisti, ma mi piacerebbe sentire gli approcci tipici di entrambi gli spettri.

Sto imparando il web design e la codifica in questo momento, e il mio problema principale è conoscere le parti, ma non la somma di tutto - non sapere come si "suppone" fare per creare un vero e proprio sito paginato.

Grazie!

Answer 1

Mi piace progettare i miei siti web/applicazioni dal basso verso l'alto. Cioè, comincio analizzando il dominio del problema e traducendolo in un modello di dati (ad esempio un database SQL). Poi costruisco un livello di accesso ai dati e una logica aziendale oltre a quella logica di presentazione (in genere un codice generico che può richiamare funzioni di business logic e pompare dati semplici attraverso una sorta di modello) e infine i modelli e i fogli di stile che definiscono il guardare e sentire.

Per la progettazione grafica effettiva; o lo faccio da solo, nel qual caso tendo a scrivere direttamente HTML e CSS, o qualcun altro lo fa per me, offrendo HTML statico che trasformo in modelli.

Answer 2

Questa è una domanda molto ampia, che non ha una risposta semplice e chiara. Tuttavia, sei sulla strada giusta. Tutto inizia e finisce con gli utenti ... quali sono i loro obiettivi e come si prevede che raggiungano il loro obiettivo? Dovrebbero completare le attività o trovare informazioni?

• Ogni processo di progettazione inizia con una strategia . Chiediti qual è lo scopo del sito e quali sono le esigenze dell'utente. Senza una strategia chiara, i progetti hanno maggiori probabilità di fallire.
• In secondo luogo, si definisce lo scope del sito. Quali requisiti del contenuto e specifiche funzionali hanno il sito.
• Passare alla struttura del sito. Ora ci occupiamo di Information Architecture (Labelling, Navigation, Organization and Search) e Interaction Design. Sul mercato ci sono varie tecniche e strumenti per scoprire come l'utente relaziona le etichette alle informazioni, come navigare e così via. I test iniziali dell'utente possono essere eseguiti in questa fase iniziale per verificare che il progetto sia sulla strada giusta.
• Quando tutto quanto sopra è stato fatto, è tempo di iniziare a disegnare il sito su un pezzo di carta. Dove saranno determinati elementi e in che modo gli utenti interagiranno con il sito. È inoltre possibile utilizzare uno strumento di disegno come Balsamiq Mockup per creare lo scheletro .
• Infine, si implementa la superficie ; iniziano i colori, le immagini e il vero codice. La visualizzazione avviene e, si spera, più test utente.

Ricorda però che il design non è un processo semplice.È necessario scorrere tutte le fasi di progettazione, spostandosi avanti e indietro tra questi livelli, fino a ottenere un buon risultato.

Infine, eseguire alcuni test del sito rivolti al pubblico desiderato. I test degli utenti fanno la differenza.

Riferimento e altro da leggere: Jesse James Garrett: The Elements of User Experience.

Answer 3

C'è un mondo di differenza tra un sito Web e un'applicazione web. Molti clienti del sito Web non sanno cosa vogliono dire, vogliono solo avere una qualche forma di presenza sul web. Scoprire quale contenuto mettere lì di solito è la parte difficile.

Quindi per il sito Web comincio con l'estetica. Faccio un mockup in Photoshop e solo dopo che è stato approvato, inizio a codificarlo in html e css. Questo rende il secondo mockup, che viene quindi sottoposto nuovamente al client. Poi comincio a scrivere qualsiasi logica dietro (se necessario, dato che spesso è sufficiente la staticità).

Per le web-app è spesso il contrario. Di solito non mi occupo veramente degli sguardi, quindi iniziamo con il dominio logico e il collaudo delle unità. Dopo che il back-end è stato testato correttamente, iniziamo a serrare il front-end su di esso. In queste app, l'estetica di solito passa in secondo piano rispetto alla funzionalità, quindi il mocking è meno importante (almeno sui miei progetti). Di solito sono tutti i pannelli, i pulsanti e i combobox, ad eccezione del masthead.

Quindi, di nuovo, non sono un designer professionista.