Percorso da sviluppatore a designer: come

Essendo uno sviluppatore che vuole essere un designer, sono davvero interessato a imparare a creare un'interfaccia utente di prim'ordine per siti Web, app mobili, ecc. Tuttavia, non so nulla di Photoshop o qualsiasi cosa relativa al design, le mie competenze principali sono HTML e CSS .

Dove dovrei iniziare? Come imparo a creare bellissimi siti Web e interfacce?

Come ex sviluppatore diventato designer, ci sono alcune cose che suggerirei. Innanzitutto, inizia a lavorare sui disegni! Se hai la capacità, trova un mentore che è già un designer UI / UX e inizia a lavorare con loro su progetti. Ho scoperto di aver appreso di più lavorando effettivamente su progetti e assorbendo la conoscenza delle persone che lo fanno da anni di quanto non abbia mai fatto leggendo un libro.

Detto questo, se vuoi leggere su UI / UX / ecc., Darei un'occhiata a questo eccellente thread: libro di interfaccia utente da leggere? Penso che il mio preferito sia "Don't Make Me Think" di Steve Krug, ma sono sicuro che alla fine troverai il tuo preferito.

Infine, per quanto riguarda strumenti come Photoshop, Illustrator, ecc ... non preoccuparti! Alla fine troverai gli strumenti che funzionano meglio per te. Personalmente, inizio con i modelli di carta e matita, quindi a seconda del progetto mi sposterò a qualcosa in Balsamiq , o Axure , o a volte in HTML e CSS - dipende davvero dalle dimensioni del progetto, dall'ambito, ecc. Usa qualunque cosa sia più comodo per te. Alla fine, tutto ciò che conta è che tu comunichi chiaramente la tua visione per il tuo design, non quale strumento hai usato per farlo.

Mescolo design e sviluppo da molto tempo. All'inizio ho trascorso più tempo a imparare gli strumenti di modifica rispetto a ciò che rende un buon design. Ci sono molti tutorial da scoprire per imparare a usare Photoshop, Illustrator, Fireworks, ecc. Ma è bello avere un senso del design e una direzione. Questo è qualcosa in cui voglio ancora migliorare.

Una delle mie ispirazioni è un ragazzo di nome Robby Ingebretsen, perché fa lo sviluppo e il design estremamente bene. Il suo sito Web è su nerdplusart.com .

Ci sono alcune cose che darei un'occhiata da lui ...

• La mia (molto) breve lista di libri da leggere per designer
• Fondamenti di progettazione per gli sviluppatori
• 10 modi per attaccare un problema di progettazione e uscire vincenti

Mentre parla in tutte le sue presentazioni, penso che sia fondamentale trovare ispirazione per i tuoi progetti. Anche i migliori designer non escono semplicemente con queste cose dal nulla. Uno dei miei segnalibri è una raccolta di "New Graphic Design" , per lo più vista nelle stampe. Molti di questi sono molto semplici, spesso usando la tipografia stessa come elementi grafici principali. Per quanto possa sembrare semplice, sfogliare cose come queste può aiutarti a modellare il tuo design.

Proprio come l'apprendimento di Visual Studio non rende uno un buon sviluppatore di software, né l'apprendimento di Photoshop ne renderà uno un buon progettista dell'interfaccia utente.

Se vuoi seguire la strada formale, un'educazione in Arte / Graphic Design, Fattori umani, Psicologia, Scienze dell'Architettura / Biblioteche informative sarebbe il posto giusto.

Informalmente, mettiti al lavoro! ;) Il modo migliore per imparare è semplicemente farlo.

Sono un graphic designer formalmente addestrato che ha acquisito competenze di sviluppo software sul posto di lavoro. Ho iniziato per pura necessità.

Personalmente, penso che i migliori membri del team UX siano quelli che hanno un mix di entrambe le abilità. Quindi, penso che tu sia sulla buona strada.

Comincerei con la lettura del libro "Head First Web Design" di Watrall & Siarto (pubblicato da O'Reilly). È piuttosto semplice, facile da digerire e ti guida attraverso tutto ciò che un designer deve considerare. Non è uno studio approfondito, ma ti fa iniziare a sapere a quali domande devi rispondere successivamente. Comprende navigazione, organizzazione, layout, scrittura, colore e accessibilità.

Inoltre, prima di passare a Photoshop, Adobe Illustrator o qualsiasi altra cosa, wireframe il tuo design per assicurarti che tutto sia nel posto giusto prima di dedicare il tempo extra per farlo sembrare bello. Puoi disegnarlo su carta o lavagna o puoi usare uno strumento. Uno strumento che ho trovato davvero utile in questo passaggio è Balsamiq Mockups . Ti consente di pensare prima all'organizzazione e al layout del sito.

In realtà ho adottato l'approccio opposto da UX Designer a UI Developer, tuttavia, quando si prende in considerazione Design, consiglierei un paio di aree per iniziare:

Darei un'occhiata al libro "Non farmi pensare!" di Steve Krug , che penso sia un grande libro sulla progettazione per la progettazione sul web.

Ci sono tonnellate di grandi risorse Web tra cui SmashingMagazine.com e PSDTuts.com, che forniscono articoli di grande attualità nel mondo del design e della tecnologia web.

Darei anche uno sguardo alla comprensione dei principi di HCI se stai cercando di diventare un UX Designer.

Buona fortuna e buon design!

Sono davvero interessato a imparare come creare un'interfaccia utente di alto livello per siti Web, app mobili, ecc.

Va bene, questo è un argomento ampio. Volete creare siti Web "belli", "di prim'ordine", dall'aspetto professionale. Quindi, dovete sapere cosa fa percepire le persone come "belle", giusto? Fortunatamente per voi, la bellezza non è davvero soggettiva.

Una delle chiavi di un bellissimo design visivo è l' armonia .

La mancanza di armonia è ciò che rende i tuoi disegni un aspetto amatoriale.

E la cosa migliore è che l'armonia visiva si riduce alla matematica. Non si tratta di avere un istinto.

Come altri hanno sottolineato, ti consiglio di progettare siti web da solo. Prova ad applicare i principi di progettazione che impari invece di utilizzare un framework pronto. All'inizio potrebbe essere difficile, ma ti aiuterà a migliorare.

Come incorporare l'armonia nel design di un sito Web

Di seguito è riportato un esempio pratico e un piccolo esercizio divertente che puoi fare ora.

Un modo che preferisco personalmente è utilizzare una scala modulare per dimensionare gli elementi del sito Web in proporzioni armoniose. Un sito Web che può aiutarti a generare una scala modulare è questo: modularscale.com

Il vantaggio dell'uso di una bilancia modulare è che può prendere decisioni di dimensionamento facili come scegliere un numero dalla bilancia.

Ad esempio, dimensioniamo le intestazioni di un sito Web (per comunicare la gerarchia visiva).

Diciamo che abbiamo questa scala modulare basata sulla dimensione del carattere del corpo di 19px che ho scelto (19px perché sembrava migliore con il carattere che stavo usando, ma puoi saltare questo passaggio e andare con la dimensione predefinita di 16px) e il rapporto 1.412 (No ho bisogno di entrare nei dettagli perché ho scelto questo rapporto. Qualsiasi rapporto farà meglio di nessun rapporto per i tuoi progetti.):

Guardandolo, sceglierei H1 come 2.815em, H2 per 1.994em e H3 per 1.412em. Primi 3 numeri più grandi della dimensione del carattere del corpo. Facile, giusto? Il testo del corpo sarebbe 1em (nel mio caso 19px). Quindi, dimensionerei H4-H6 a 1em e userei il contrasto (peso o stile del carattere diverso) per differenziarli dal testo del corpo.

Quindi, prova questo ora:

1. Genera la tua bilancia modulare
2. Ottieni un semplice documento HTML (contenuto reale, per favore no Lorem Ipsum)
3. Usa la scala per ridimensionare i titoli.
4. Quindi prova a utilizzare la scala per altre decisioni di dimensionamento (margini, imbottiture, ecc.)

Questo è solo un piccolo passo verso progetti migliori, ma spero che ti possa aiutare.

Se lo hai trovato utile, puoi leggere il mio altro elenco di 7 suggerimenti per i web designer principianti che conoscono HTML e CSS

PS: hai davvero molte letture da fare

Come altri hanno già detto, leggi:

• Gli elementi di graphic design di Alexander White
• Gli elementi dello stile tipografico di Robert Bringhurst
• Non farmi pensare di Steve Krug

Inoltre, qui un vasto elenco di risorse online come blog e community da tenere d'occhio: enboard.co/webdesign/