Codifica per i non programmatori: i progettisti possono pensare come sviluppatori

C'è stato questo divario non scritto tra designer e sviluppatori da quando realizziamo siti Web. Le persone che rendono le cose belle rispetto alle persone che le fanno funzionare. Quei giorni sono finiti.

Ogni designer deve imparare come funziona lo sviluppo nel panorama digitale. E ogni sviluppatore dovrebbe comprendere le teorie di progettazione di base. Qui, aiuteremo i progettisti a comprendere meglio il linguaggio degli sviluppatori, un'abilità essenziale nel mercato di oggi. (Come bonus aggiuntivo, tutti gli esempi di design sono creati usando framework CSS.)

Esplora Envato Elements

Interfacce utente e design

La spina dorsale dietro ogni sito Web è una stringa di 1 e 0 secondi. Non è molto eccitante quando si tratta di design. Ma l'interfaccia attuale e la connessione con un utente è.

Ogni piccolo dettaglio include elementi di design con cui qualcuno dovrebbe interagire, dai pulsanti agli elementi di navigazione, dai moduli alla visione di un video o all'acquisto di un paio di scarpe. L'obiettivo è creare qualcosa di bello, accattivante e facile da usare. Ecco dove si incontrano design e sviluppo.

Parole che devi sapere:

• Ajax: l' utilizzo di JavaScript e XML asincroni crea un'esperienza interattiva in cui nuove informazioni possono essere popolate sul lato utente di un sito Web senza aggiornamento. Un esempio comune è il caricamento continuo di post mentre un utente scorre una pagina di Twitter.
• API: fornendo specifiche per routine, dati, classi di oggetti e variabili e l'interfaccia di programmazione dell'applicazione consente a diversi siti Web o software di "dialogare" tra loro e di lavorare insieme. Pensalo come un insieme virtuale di blocchi.
• CSS: Cascading Style Sheets è la spina dorsale del linguaggio utilizzato per lo stile dei siti Web e visualizzare visivamente gli elementi HTML.
• Media query: un elemento CSS che crea regole specifiche per determinati dispositivi quando si tratta di renderizzare le immagini. (È la magia che rende la stessa foto render con una razione di aspetto e ritaglia su un sito desktop e in un altro modo su un dispositivo mobile.)
• Responsive web design (RWD): una tecnica di web design che utilizzava una griglia flessibile e immagini, contenuti multimediali e testo in modo che un singolo sito Web si adattasse a più dimensioni del dispositivo. (Questo è probabilmente uno dei fattori più importanti nel web design in questo momento.)
• UI: l'interfaccia utente è tutto ciò che l'utente vede e interagisce con un progetto. Questo può essere tutto, dal modo in cui usano il sito Web e il dispositivo a ogni singolo elemento sullo schermo.
• UX: l'esperienza utente è ciò che ogni singolo utente toglie dalle interazioni con il sito. Questo tende ad essere espresso come una connessione emotiva e si riferisce al valore complessivo percepito.

Pensa alle domande

"Ognuna di queste interazioni dovrebbe sembrare una conversazione tra due persone che si fidano reciprocamente e meritano la fiducia reciproca".

Ogni parte di un sito Web chiede agli utenti di interagire o continuare a interagire con un'altra parte del sito. Che tu stia giocando o leggendo un articolo o comprando un regalo, ogni azione ti porta a qualcos'altro. Ma come ci si arriva?

È qui che entrano in gioco le domande. Se fai domande nel processo di progettazione, puoi creare collegamenti tra le azioni, creando un design più fluido con un flusso logico.

"Nicely Said" di Nicole Fenton e Kate Kiefer Lee è un manuale di scrittura per il web. Fornisce inoltre un quadro di domande che funzionano per ogni parte dell'esperienza di web design.

Domande da porre lungo il percorso (oltre a molte altre dalla guida alle risorse del libro):

• In che modo le persone utilizzano questi contenuti o funzionalità ora?
• Chi sta parlando qui?
• Quali problemi stiamo cercando di risolvere?
• In che modo questo contenuto serve ai nostri obiettivi? Qual è il suo scopo?
• Quali sono le caratteristiche del sito Web? Come si comporta?
• Qual è il formato finale?
• Ci sono vincoli tecnici o limiti di carattere?

Fenton ha scritto ancora di più su altre domande che i siti Web "pongono" continuamente. Stiamo parlando dei dettagli personali che aiutano gli utenti a relazionarsi con i siti con cui interagiscono. "Ognuna di queste interazioni dovrebbe sembrare una conversazione tra due persone che si fidano reciprocamente e si meritano la fiducia reciproca", scrive.

Alcune di queste domande includono:

• Come possiamo aiutarti?
• Dove sei adesso?
• Sei disposto a pagare per questo?

La risposta a queste domande stabilisce la natura della relazione interfaccia-utente e influisce notevolmente sulla progettazione. Pensala in questo modo: se un utente non è disposto a dirti la sua posizione, il design e l'interfaccia utente non saranno efficaci se si basa sulla geolocalizzazione; il design dovrebbe avvicinarsi all'utente in un altro modo.

Pensa alla semplicità e alla direzione

Quando i siti Web si uniscono, tutto tende a cadere da qualche parte su una mappa. Puoi tracciare il percorso da un'interazione utente a quella successiva. (Il che è fantastico per i pensatori visivi.) Quindi pensa al processo di progettazione / sviluppo in termini di A vs. B: qual è il prossimo passo, A o B?

Ogni elemento dovrebbe avere uno scopo semplice che è facile da definire e descrivere. (Fai clic per giocare; fai clic per scorrere.) Se non riesci a renderlo comprensibile in una frase, potresti voler ripensare la strategia di progettazione.

Impara il codice

Ora che stai pensando a cose nella metodologia di uno sviluppatore, devi uscire e sviluppare alcune abilità di codifica. Questo non vuol dire che devi essere un programmatore esperto, ma dovresti capirlo abbastanza per fare semplici cambiamenti e parlare in modo coerente con altri designer e sviluppatori. (Inoltre puoi davvero creare alcuni fantastici effetti, come quelli sopra.)

Personalmente, ho iniziato con un po 'di HTML con uno scopo. Ho fatto un elenco di cose che volevo sapere come fare e le ho imparate dall'interno (cioè come cambiare un colore di un elemento del sito usando un valore esadecimale nel CSS anziché fare clic su una casella in un selettore di colori). ci sono molti strumenti disponibili da lezioni online ed esercitazioni alla formazione di persona nella tua zona. Tutto quello che devi fare è iscriverti e iniziare.

Quattro grandi risorse per lo sviluppo di codice:

1. Tuts +
2. Codecademy
3. Code School
4. Khan Academy

Conclusione

L'apprendimento dello sviluppo web non significa solo conoscere framework e codice. Riguarda il processo di pensiero. I designer possono pensare come sviluppatori in viaggio verso la creazione di un sito Web di successo. Devi solo essere aperto all'idea.

Comprendere che alcuni dei processi di pensiero sono simili - pensiero visivo e soluzioni e risultati di valutazione - fanno parte di qualsiasi progetto di progettazione o sviluppo. Siamo tutti designer / sviluppatori nel mercato di oggi.

Fonte immagine: Marjan Krebelj.