C'è stato questo divario non scritto tra designer e sviluppatori finché abbiamo creato siti web. Le persone che fanno sembrare le cose buone contro le persone che lo fanno funzionare. Quei giorni sono finiti.
Ogni designer ha bisogno di imparare come funziona lo sviluppo nel panorama digitale. E ogni sviluppatore dovrebbe capire le teorie di progettazione di base. Qui, aiuteremo i progettisti a comprendere meglio il linguaggio degli sviluppatori, una competenza essenziale nel mercato di oggi. (Come bonus aggiuntivo, tutti gli esempi di design sono creati usando framework CSS.)
Interfacce utente e design
La spina dorsale dietro ogni sito web è una stringa di 1 e 0. Non è molto eccitante quando si tratta di design. Ma l'interfaccia reale e la connessione con un utente è.
Ogni piccolo dettaglio include elementi di design che qualcuno dovrebbe interagire con pulsanti, elementi di navigazione, moduli per guardare un video o comprare un paio di scarpe. L'obiettivo è creare qualcosa che sia bello, accattivante e facile da usare. Ecco dove si incontrano design e sviluppo.
Parole che devi sapere:
- Ajax: L'utilizzo di JavaScript asincrono e XML crea un'esperienza interattiva in cui nuove informazioni possono essere inserite sul lato utente di un sito Web senza aggiornamento. Un esempio comune è il caricamento continuo di post come un utente scorre attraverso una pagina di Twitter.
- API: Fornendo specifiche per routine, dati, classi di oggetti e variabili, e Application Programming Interface consente a diversi siti Web o software di parlare? tra di loro e lavorare insieme. Pensalo come un insieme virtuale di elementi costitutivi.
- CSS: Le Cascading Style Sheets sono la spina dorsale del linguaggio usato per disegnare siti Web e visualizzare visivamente gli elementi HTML.
- Query media: Un elemento CSS che crea regole specifiche per determinati dispositivi quando si tratta di renderizzare le immagini. (È la magia che rende la stessa foto di rendering con un aspetto razionale e ritaglio su un sito desktop e un altro modo su un dispositivo mobile.)
- Responsive web design (RWD): Una tecnica di progettazione Web che utilizza una griglia flessibile e immagini, contenuti multimediali e testo in modo che un singolo sito web si adatti a più dispositivi. (Questo è probabilmente uno dei fattori più importanti per il 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 utilizzano 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 nelle domande
? Ciascuna di queste interazioni dovrebbe sentirsi come una conversazione tra due persone che si fidano l'un l'altro e meritano fiducia l'un l'altro.?Ogni parte di un sito Web chiede agli utenti di impegnarsi o continuare a interagire con un'altra parte del sito. Sia che tu stia giocando, leggendo un articolo o acquistando un regalo, ogni azione ti porta a qualcos'altro. Ma come ci si arriva?
È qui che si pongono le domande. Se fai domande nel processo di progettazione, puoi creare collegamenti tra le azioni, creando un design più omogeneo con un flusso logico.
? Ben detto? di Nicole Fenton e Kate Kiefer Lee è un manuale per scrivere per il web. Fornisce anche una struttura di domande che funzionano per ogni parte dell'esperienza di progettazione web.
Domande da porre lungo la strada (più molte altre dalla guida alle risorse del libro):
- In che modo le persone utilizzano questo contenuto o funzionalità ora?
- Chi sta parlando qui?
- Quali problemi stiamo cercando di risolvere?
- In che modo questo contenuto serve i 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 caratteri?
Fenton ha scritto ancora di più su altre domande che i siti web? tutto il tempo. Stiamo parlando dei dettagli personali che aiutano gli utenti a relazionarsi con i siti con cui interagiscono. ? Ciascuna di queste interazioni dovrebbe sentirsi come una conversazione tra due persone che si fidano l'una dell'altra e meritano la fiducia l'una dell'altra? lei 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 dell'interfaccia utente-relazione e influenza notevolmente il design. Pensala in questo modo: se un utente non è disposto a dirti la loro 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. (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, facile da definire e descrivere. (Clicca per giocare, clicca per scorrere.) Se non riesci a renderlo comprensibile in una frase, potresti voler ripensare alla strategia di progettazione.
Impara il codice
Ora che stai pensando a cose nella metodologia di uno sviluppatore, devi uscire e sviluppare alcune capacità di codifica. Questo non vuol dire che devi essere un master coder, ma dovresti capirlo abbastanza per fare cambiamenti semplici e parlare coerentemente con altri designer e sviluppatori. (Inoltre puoi davvero creare alcuni effetti interessanti, come quelli sopra.)
Personalmente, ho iniziato con un piccolo HTML con uno scopo. Ho fatto una lista di cose che volevo sapere come fare e le ho imparate da dentro e fuori (es.come cambiare un colore di un elemento del sito usando un valore HEX nel CSS piuttosto che fare clic su una casella su un selettore di colori.) Ci sono molti strumenti disponibili dalle lezioni online e dai tutorial per la formazione di persona nella tua zona. Tutto quello che devi fare è iscriverti e iniziare.
Quattro grandi risorse per lo sviluppo del codice:
- Tuts +
- Codecademy
- Codice scuola
- Khan Academy
Conclusione
L'apprendimento dello sviluppo web non è solo l'apprendimento di quadri e codice. Riguarda il processo del pensiero. I progettisti possono pensare come sviluppatori in rotta verso la creazione di un sito web di successo. Devi solo essere aperto all'idea.
Capire che alcuni dei processi mentali sono simili - il pensiero visivo e le soluzioni e i risultati di pesatura - fanno parte di qualsiasi progetto o progetto di sviluppo. Siamo tutti designer / sviluppatori nel mercato di oggi.
Fonte immagine: Marjan Krebelj.