Grazie a Internet, la progettazione grafica e la programmazione stanno diventando campi sempre più sovrapposti.

Come programmatore, mi trovo costantemente a necessitare di conoscenze di base di Graphic Design, ma ho difficoltà a individuare risorse di apprendimento per la progettazione grafica complete ma concise, e invece di solito trovo frammenti di conoscenza applicabili all'attività da svolgere.

Ragazzi, potete offrire qualche consiglio o raccomandare alcuni buoni libri, tutorial, blog e siti Web che offrono una panoramica a livello principiante del web design che sono stati, nella vostra esperienza, materiali di apprendimento efficaci e di alta qualità. Non sto cercando consigli su come utilizzare gli strumenti di modifica delle immagini, ma assumendo una comprensione di base di quelli, quali risorse e consigli aiuteranno meglio un nuovo designer a creare design dall'aspetto professionale?

• Resta semplice : non provare a fare qualcosa di troppo stravagante o avventuroso all'inizio. Prendi prima le basi, quindi puoi iniziare a sperimentare. Non tentare di emulare l'interfaccia del computer di Star Trek.
• Sii coerente - Un design coerente fa parte delle fondamenta di un buon design. Tieni traccia dei tuoi margini, dimensioni e posizionamento e mantienili per tutto il design.
• Rimuovi disordine : includi solo gli elementi necessari al disegno. Rimuovi tutto il resto.
• Priorità : qual è lo scopo principale del design? Enfatizzare quello scopo. Rendilo ovvio.
• Usa spazi bianchi : consente margini corretti. Grandi blocchi di testo con margini piccoli o nulli non sono molto leggibili. Idem per altri elementi di design.
• Usa una tavolozza colori - Non dovresti usare più di 4-5 colori in totale.
• Caratteri coerenti : attenersi a uno o due caratteri. Usali in modo coerente, di solito uno per i titoli, uno per il testo del paragrafo. Calcola e mantieni coerenti le dimensioni dei caratteri, le altezze delle linee e l'interlinea. Non usare Comic Sans se non riesci a respingere gli zombi rabbiosi del velociraptor.
• Design First - Il design non dovrebbe essere un ripensamento; dovrebbe essere un membro di prima classe della fase di pianificazione. Il design sarà il modo in cui i tuoi utenti interagiranno con la tua programmazione e formeranno le loro opinioni in primo luogo e in gran parte in base al tuo design. Dai al design la sua giusta importanza.

Per quanto riguarda le risorse, dai un'occhiata a uno dei seguenti siti Web:

• Smashing Magazine
• Tutorial PSD
• Abuzeedo
• UX Booth
• Adoro la tipografia
• Jason Santa Maria

L' indice delle basi del design di Jim Krause mi ha dato un ottimo riassunto delle basi della composizione, del colore e del tipo. Non ero un grande fan della maggior parte dei suoi esempi, ma illustrano i suoi punti molto bene e tocca alcune cose preziose che non ho visto menzionato altrove. E forse, soprattutto, leggerlo mi ha fatto davvero emozionare uscire e sperimentare le idee che stava introducendo.

A volte c'è una leggera sovrapposizione tra lo sviluppo web e il web design, ma non penso che gli sviluppatori web dovrebbero cercare di essere designer a tempo pieno a meno che non siano disposti a fare lo stesso sforzo come hanno imparato a programmare. Non è qualcosa in cui puoi semplicemente dilettarti nei fine settimana ed essere bravo.

Se è così puoi imparare ad essere il tuo web designer (ad esempio, fai il tuo web design per tutti i siti su cui lavori), quindi ti consiglio vivamente di ricevere una formazione formale (anche se sta solo seguendo alcuni corsi di design universitario) per apprendere i fondamenti del visual design e della composizione. Un libro di design in stile libro di testo come quello pubblicato da Damon potrebbe aiutare, ma dovrai effettivamente fare tutti gli esercizi nel libro e assicurarti di capire il materiale. Ma soprattutto, è necessario passare molto tempo a guardare (sfogliare gallerie di design online, sfogliare riviste e annunci di riviste, ecc.) E creare progetti (scaricare alcuni brief di progettazione pratica online o partecipare a concorsi di progettazione online).

Se è per aiutarti a comunicare con i web / graphic designer con cui lavori, allora semplicemente ottenere un libro che ti insegna il vocabolario (ad esempio concetti di tipografia) e concentrarsi su usabilità , accessibilità e design UX è probabilmente il miglior uso del tuo tempo. In questo modo, puoi essere coinvolto nella direzione creativa del progetto e aiutare a progettare le interfacce, ma il progettista è colui che crea il "look" o l'estetica del sito.

Virtuosi Media elenca molte buone risorse (la rete Tutsplus è ottima in generale e Smashing Magazine è una lettura obbligata per qualsiasi sviluppatore / designer web), a cui aggiungerei:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - ospita i portafogli di molti designer di livello mondiale da cui trarre ispirazione

Sono un programmatore me stesso e per me i seguenti libri sono stati molto utili per me:

• Il libro di design del non designer di Robin Williams: questo libro tratta le basi del design grafico.
• Disegnare sul lato destro del cervello di Betty Edwards: il libro per sviluppare le tue abilità di disegno.
• The Humane Interface di Jef Raskin: questo libro provoca alcune riflessioni sulla progettazione dell'interfaccia utente.

Forse non è rilevante in tutti i casi, ma per i programmatori del web una delle cose più importanti che mi distingue, che forse colma un po 'il divario, è imparare i CSS dentro e fuori, poiché essere in grado di progettare bene non significa nulla se non riesci a integrarlo nel tuo progetto che stai creando.

Nel 2004 mi sono trovato a metà strada tra i due mondi, come lo ero stato per la maggior parte della mia vita - avevo fatto il web da HTML 3.2 ai tempi della dot-com; cresciuto con una Apple // e dai genitori (un coreografo e un educatore) che mi ha permesso e incoraggiato a passare molto tempo con l'arte. Il design non è arte, e in effetti alcuni dei suoi schemi più algoritmici si allineano perfettamente con la programmazione, sia che tu stia facendo il web o altro.

• Istogramma dello scaffale - una stampa che ho fatto nella scuola di specializzazione che è sia design-y che developer-y.

Ma così sì, 2004: ho diviso la differenza quando sono andato alla scuola di specializzazione, dove ho prima ricevuto un'educazione tipografica di prima classe, e poi la latitudine da esplorare - durante la quale in seguito le mie inclinazioni geekier sono tornate utili.

Quindi forse prendi in considerazione l'istruzione superiore, o qualsiasi altra cosa ti stia impegnando in modo consumante per te. Buona fortuna in entrambi i modi.

Impara molto sulla tipografia.

Dai classici ...

^{Jan Tschichold}

Non i pagliacci ...

^{David Carson}

La tipografia strategica ed efficace è una delle qualità più comunemente assenti in questo campo (ed è sempre stata).

Di solito posso reclutare un designer basato interamente sulla sua gestione dei tipi. Circa l'80% della storia è proprio nell'impostazione del curriculum.

Un buon inizio (gratuito) è questo adattamento dettagliato della risorsa essenziale di Robert Bringhurst per l'applicazione sul web.

^{Gli elementi di stile tipografico, Bringhurst}

Questa è una considerazione più ampia che riguarda l'interazione di tipo e layout.

^{Grid Systems in Graphic Design, Brockmann}

1. Pensa in modo critico agli oggetti progettati intorno a te

   Quasi tutto nell'ambiente creato dall'uomo ha dietro una sorta di design, che si tratti di una grafica, di un sito Web o di un accessorio di moda.

   Notare quanto funzioni bene il design per lo scopo previsto e come appare.

2. Pensa al design come a un modo per soddisfare un'esigenza o risolvere un problema

   Mentre si sforza di rendere le cose belle, il design differisce da altri tipi di arte in quanto ha un'applicazione pratica.

   Un logo, ad esempio, è un tipo di design grafico che aiuta a rendere rapidamente riconoscibile un marchio o un'azienda.

   Un capo di abbigliamento ha lo scopo di coprire il corpo, oltre a rendere più attraente chi lo indossa.

3. Esercitati a comunicare visivamente.

   I progettisti devono essere in grado di realizzare disegni o altre rappresentazioni dei loro progetti al fine di perfezionarli e spiegarli ad altre persone, come colleghi di progettazione e produttori.

   Il disegno è uno strumento potente per i designer, ma non preoccuparti se non puoi disegnare fotorealisticamente. I disegni dei designer non devono essere capolavori, solo un modo per catturare rapidamente idee che porteranno al prodotto finito. Anche la traccia è totalmente accettabile.

   Oltre ai disegni, i progettisti usano anche cose come prototipi, prototipi e immagini al computer per visualizzare i loro progetti.

4. Scopri come sono fatte le cose

   Quando lavori come designer, non devi solo considerare ciò che è piacevole per gli occhi, ma devi sempre considerare come verrà implementato il tuo design.

   Per un oggetto come una custodia per cellulare, i progettisti industriali devono pensare al tipo di processi di plastica e stampaggio che verranno utilizzati e al modo in cui ciascuna parte verrà collegata insieme.

5. Trova buone fonti di informazione

   Oltre alle riviste di design, cerca libri sul processo, i principi e i metodi di progettazione.

   Prova a guardare libri di testo e video tecnici per la costruzione di articoli di abbigliamento, metodi di produzione e varie tecniche artigianali.

   Imparare a conoscere il design va più in profondità della lettura di riviste di moda e decorazione, sebbene si tratti di una buona risorsa per le tendenze attuali.

6. Sviluppare le tue capacità di progettazione

   Lo studio e la pratica sono buoni, ma la cosa che porterà davvero il tuo progetto al livello successivo è l'esperienza del mondo reale.

7. Fai errori rapidamente

   commetterai molti errori e più velocemente riesci a superarli, meglio è.

8. Siate sempre pronti a catturare idee.

   Cerca ispirazione ovunque. L'ispirazione non deve provenire da altri disegni o tendenze del design - spesso può provenire dalla natura o da cose che accadono per caso.

Libri e materiali

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

Tutorial PSD

Abuzeedo

UX Booth

Alcuni punti da tenere a mente:

1. Ogni progetto risolve un problema

Smetti di pensare al design in termini di "Come posso renderlo carino?" e iniziare a pensarci in termini "Come posso renderlo il più facile da usare il più umanamente possibile?"

Quando si creano siti Web, ciò significa che, nel senso più ampio, si sta risolvendo un problema aziendale .

Esiste un sito Web per realizzare un obiettivo aziendale .

Anche gli utenti di un sito Web hanno in mente il proprio obiettivo: potrebbero voler comprare qualcosa, confrontare prodotti, leggere un argomento, ecc.

Il tuo compito come designer è quello di aiutare l'azienda assicurandoti che il maggior numero possibile di utenti raggiunga l'obiettivo aziendale e aiuti gli utenti a navigare nel sito Web in modo che possano raggiungere il proprio obiettivo.

Ad esempio, stai progettando un negozio di e-commerce: l'obiettivo aziendale qui sarebbe quello di vendere i prodotti. E l'obiettivo degli utenti è quello di trovare esattamente ciò che vogliono acquistare, il più rapidamente possibile e controllare, il più rapidamente possibile.

Gran parte del processo di progettazione consiste nel capire il problema, costruire un profilo dell'utente, pensare a come realizzare l'obiettivo aziendale, ecc.

I colori, i caratteri, il layout e ogni decisione di design che prendi devono essere dettati dall'obiettivo del sito web .

2. È la ripetizione che rende le cose belle .

Ecco cos'è la coerenza.

Ad esempio, l'associazione dei caratteri. I caratteri sono associati sulla base di tratti simili, sulla ripetizione dei dettagli.

Ecco una partita: Farnham e Benton Sans.

Secondo questo post qui 2 questi due caratteri corrispondono perché:

[...] i volti sono simili nello spazio delle loro lettere minuscole, che hanno ascendenti e discendenti distintamente corti. [...] Le lettere minuscole di entrambi sono larghe.

La ripetizione di alcuni tratti fa sì che questi 2 caratteri funzionino bene insieme. Puoi vederli su una pagina Web qui 3 .

La ripetizione porta armonia in un design. E l'armonia rende il design bellissimo.

Ma, come puoi vedere, anche Farnham e Benton Sans sono in contrasto: Farnham è un font serif e Benton è sans serif.

Perché c'è bisogno di contrasto? Stiamo cercando di introdurre somiglianze in un design, giusto?

Bene, sì, ma troppe ripetizioni rendono i tuoi progetti noiosi e difficili da usare .

La cura è il contrasto.

3. Il contrasto aiuta l'utente a trovare la propria strada

Li aiuta a distinguere elementi diversi tra loro. Li aiuta a trovare gli elementi chiave come titoli, navigazione, pulsanti.

Più è importante l'elemento, più dovrebbe contrastare con l'ambiente circostante.

Usa la ripetizione per rendere coerenti i tuoi progetti. Come altri hanno già detto: 2 caratteri una tavolozza di colori limitata, ecc.

Usa il contrasto quando devi davvero separare un elemento dal resto.

Tutto ciò che è bello sapere, ma ... non ti aiuta ancora a progettare il tuo prossimo sito Web, giusto?

Bene, ho una soluzione anche per quello .

Il primo passo per migliorare il web design è osservare e assorbire il lavoro degli altri. Molto. Ecco da dove viene "l'ispirazione".

Guarda un centinaio di disegni che ti piacciono, analizzali e inizierai a individuare i modelli. Il tuo cervello ti aiuterà a combinare questi schemi nel tuo disegno, che sarà una variazione di tutti i disegni simili che hai visto. Non è necessario creare qualcosa di "unico".

Riepilogo: la prossima volta che inizi a progettare per il tuo progetto collaterale

Passa attraverso una dozzina di siti Web / app Web simili e fai rapidi schizzi dei loro progetti. Nota quale flusso di lavoro hanno usato. Perché l'hanno usato? Nota quali forme, colori e caratteri hanno usato.

Quindi segui questo processo per creare il tuo design:

1. Definire il progetto. Immergiti nel progetto e scopri di più su:

   1.Il suo scopo, i risultati previsti

   2. I suoi (futuri) utenti
   3. L'esperienza prevista per i suoi utenti / visitatori
   4. Il marchio dietro il progetto
2. Acquisire le risorse necessarie. Metti le mani su (campione) contenuto (prendi in prestito da siti simili)

3. Dai forma al contenuto

   1. Scegli un carattere nel quale comporre il contenuto (scegline uno che si adatti allo stato d'animo e al messaggio del sito)
   2. Scegli la dimensione del carattere per la copia del corpo
   3. Genera una scala modulare (una tabella di dimensioni armoniche proporzionali) dalla dimensione del carattere della copia del corpo (usando Scala del tipo - Una calcolatrice visiva)
   4. Disegna diversi layout in base ai requisiti del progetto
   5. Crea il layout (in HTML e CSS) con l'aiuto della scala modulare: larghezza della colonna, altezza della linea, dimensioni dell'intestazione, margini inferiori, colonne (se necessario)
   6. Applicare il colore secondo le linee guida del marchio

Puoi leggere di più su ogni passaggio di questo processo qui .

Un po 'di più:

1. Dai un'occhiata alle raccolte di siti Web di ispirazione per le idee. Una raccolta Motherload di Inspirational Website Collections elenca alcune raccolte. Altri due buoni siti sono siiimple.com e minimalsites.com .

2. Il suggerimento di "Rimuovi disordine" di Virtuosi Media è un ideale definito, ma un sito con disordine fatto da un principiante sembra migliore di un sito minimalista fatto da un principiante. Il disordine mimetizza in qualche modo gli altri elementi di design scadenti, distraendo i contenuti. Il tipico sito aziendale ha troppi ingombri, come quasi tutti i modelli, ma sono ancora abbastanza professionali.
   
   Ci vuole una connessione intima con caratteri, contrasto, spazio negativo, colorazione, densità, flusso, ... per creare un sito veramente ben progettato ed efficiente che respira bene.

3. Se tutto diventa un po 'travolgente, considera l'acquisto di un modello.

Solo per aggiungere un altro paio di collegamenti per persone provenienti da un background di programmazione interessato alla progettazione dell'interfaccia utente.

• Design For Hackers (libro stampato)
• Principi di progettazione dell'interfaccia utente (sito)
• Progettazione dell'interfaccia utente passo dopo passo (ebook)
• The Shape Of Design (versione online gratuita)

All'inizio dovrai affrontare problemi poiché alcune cose non ti ostacolano. Ma dovrai essere paziente e fare molta pratica. Quando ho iniziato a progettare e guardare indietro al mio lavoro di 4 anni fa, non posso credere di averlo fatto.

Hai davvero bisogno di cercare altri grandi designer che lavorano. Per questo dovresti seguire grandi designer su Dribbble . Un'altra cosa molto importante è guardare regolarmente gli ultimi progetti su siti di gallerie CSS come www.minimalistgallery.com o altri.

Ti auguro il meglio !!!

Iscriviti a http://sidebar.io/ per le newsletter giornaliere. Ogni articolo sarà utile in un modo o nell'altro. Un altro ottimo modo per autoapprendimento dei progetti è dribbling .

Questo potrebbe essere un suggerimento abbastanza generale, ma per me è qualcosa che dice davvero se qualcuno è un buon designer o no:

Spazi bianchi, margini e allineamento.

Sono la chiave per creare design eleganti e dall'aspetto professionale. Creano "uno spazio di respirazione" di un tipo e possono davvero determinare se il tuo design sembrerà unito o no. Proprio come con i caratteri, si desidera attenersi a determinati margini / spazi bianchi per mantenere un layout pulito.

Per tenere traccia di cose come questa, utilizzare una griglia o guide con cui progettare può essere molto utile.

La tua domanda è come "Come designer, mi trovo costantemente a necessitare di conoscenze di base sulla programmazione di app". Sono entrambe aree vaste, con supor regioni sovrapposte che hanno bisogno l'una dell'altra. La buona notizia: sei interessato e capisci l'importanza di loro. La cattiva notizia: non esiste un modo semplice per comprendere appieno ciò che serve per realizzare un buon design, senza un corso o una metodologia adeguati. MA per i primi passi, questo libro è in qualche modo buono per iniziare in modo sicuro a costruire sistemi visivi che abbiano un senso.

Libro di design per non designer