Sì, è perfettamente possibile insegnare a voi stessi di web design. Ho chiesto in giro questa settimana per vedere come le persone sono riuscite ad acquisire le competenze e ho cercato di ricordare cosa ha funzionato per me.
Ci sono tre modi principali si può insegnare a te stesso web design.
- Facendo. Le persone imparano creando effettivamente siti web.
- Utilizzando risorse online. Ognuno ad un certo punto trova risposte online su come progettare siti web.
- Leggendo. Questo mi ha sorpreso. La maggior parte dei designer dice di imparare il web design, in parte, leggendo libri.
Quindi, passiamo attraverso ciascuna di queste categorie per scoprire come insegnare a te stesso web design.
Imparare il web design facendo
Il modo migliore per iniziare a capire le pagine web è guardare come i siti Web esistenti vengono messi insieme e costruirli da soli.
Osserva come funzionano gli altri siti web
Per iniziare, la maggior parte delle pagine web su Internet sono scritte, almeno in parte, in HTML. Per vedere l’HTML che crea questa pagina è necessario “Visualizzare l’origine” nel browser che si sta utilizzando. Prova ad andare Cmd / Ctrl-U (per Firefox), vai Cmd/Ctrl-Alt/Opt-U (per Chrome), e se stai usando Internet Explorer, hai davvero bisogno di chiederti se il web design è il percorso di carriera giusto per te.
Prova a guardare attraverso l’HTML per vedere come sono contrassegnati i diversi elementi di una pagina web. Si può essere in grado di identificare alcuni tag subito. Ad esempio <p> è per il paragrafo, <h1,2,3> sono intestazioni, <img> è per un’immagine, ecc. Noterai che la maggior parte di questi tag funziona a coppie per indicare l’inizio e la fine del mark up, ad esempio <p>Text here</p> mostra l’apertura e la chiusura del tag paragrafo con la barra (/) che precede il tag di chiusura. Altri tag non funzionano in coppia, ad esempio il tag immagine si chiude <img src = "https://robcubbon.com/images/rob.jpg" /> questo indica al browser di visualizzare un’immagine con un particolare indirizzo Web come origine (src).
Un’altra cosa che potresti notare dalla fonte HTML è che tutte le pagine HTML hanno una struttura simile. Tutti iniziano con una dichiarazione <!DOCTYPE> che dice in quale versione di HTML si trova, seguita da una dichiarazione <HTML>, seguita da <head> del documento che è un contenitore di vari elementi inclusi collegamenti a script, fogli di stile, meta informazioni, ecc. Dopo il <head> arriva il <body> dove gli elementi della pagina web sono contrassegnati.
Esercizio: Selezionare tutto il codice sorgente di questa pagina in un blocco note (PC) o TextEdit (Mac) documento e salvarlo sul computer come “test.html ” o qualcosa del genere. Apri questo file in un browser e dovrebbe apparire esattamente come la versione online. Ora spegni la connessione a Internet e guarda come appare la pagina di test. Piuttosto diverso, eh? Cerca di capire perché.
Strumenti del mestiere
Mentre lo fai, ci saranno alcuni strumenti di cui avrai bisogno.
- Più browser e smartphone. Prova a testare i tuoi siti su diversi browser e telefoni (questo è dove inizierai una relazione di odio di lunga data con Internet Explorer).
- Editor di testo. È possibile utilizzare il blocco NOTE di base (PC) o TextEdit (Mac), o forse Coda (Mac) o Dreamweaver – non utilizzare Dreamweaver in modalità visiva, basta lavorare sul codice, è necessario capire come funziona questa roba sotto il cofano.
- Validatore. Convalida le tue pagine web con il validatore HTML e il validatore CSS (usa un plugin per il browser come Web Developer per Chrome per chiamarli rapidamente).
- Chrome Developer Tools e Firebug per Firefox. Questi strumenti ti aiutano a capire CSS e JavaScript che, se pensavi che l’HTML fosse difficile, richiedono un po ‘ di comprensione.
- Editor grafici e immagini. Centrale per il web design sono editor di immagini come Photoshop o Fireworks. Questi sono piuttosto costosi, ma c’è GIMP più una serie di editor di immagini online se sei appena agli inizi.
Creare i tuoi siti Web HTML statici
Mentre la tua comprensione di HTML, CSS e JavaScript cresce, dovresti creare siti HTML statici, localmente o su un server Web. Continuamente giocare con il codice per cercare di fare cose interessanti. Prova a ricreare determinati elementi in altri siti Web copiando bit del codice.
Anche se i siti web eventualmente creati non sono suscettibili di essere fatto da file HTML, è fondamentale capire come creare siti HTML statici prima di poter iniziare a utilizzare PHP e/o Content Management Systems (CMS) per creare HTML.
Creare i propri siti web con CMSs
La maggior parte dei siti web sono creati da CMSs – software in grado di creare pagine HTML all’interno di modelli specificati. I migliori sono WordPress, Joomla e Drupal, ma ci sono una serie di CMS open source più leggeri che puoi sperimentare, questi ti insegneranno come PHP e con altri CMS, ASP, sono usati per mettere insieme i siti web.
Utilizzare MAMP (Mac) o WAMP (Windows) sul computer per eseguire questi sistemi localmente in modo da poter ottenere una buona comprensione di come funzionano.
Usando gli editor di immagini
Dovrai sapere come usare Photoshop o qualcosa di simile. Avrete bisogno di questo per creare grafica per il sito, nonché per fornire immagini complete di come il sito apparirà una volta finito per aiutare il processo di progettazione.
Get designing
Naturalmente, non ho menzionato che i siti Web risultanti non solo dovranno convalidare, lavorare, essere trovati dai motori di ricerca, servire uno scopo ed essere commercializzati, ma anche … devono avere un bell’aspetto.
Al fine di migliorare il vostro occhio artistico, regolarmente produrre lavoro e poi cercare di migliorarlo. Disegni schizzo su carta poi lavorare su di loro in Photoshop o qualsiasi programma di grafica che avete. La pratica ti aiuterà a diventare un designer migliore. Raccomanderò più risorse in seguito che ti aiuteranno con i principi di progettazione.
Risorse online
Quando le persone vogliono risposte vanno su Internet e “Google it” o cercano YouTube. Web design non è diverso. Ci sono molte risorse che ti aiuteranno online. Prima di tutto ci sono le scuole W3 che i web designer si riferiscono a come la migliore risorsa di autoapprendimento online, c’è anche Tizag. Alcune persone raccomandano Lynda.com anche se non l’ho usato personalmente.
Blog
Ci sono un certo numero di grandi blog di design là fuori. Ci sono quelli grandi che possono aiutare come SmashingMagazine, WebDesignerDepot, 1stWebDesigner e la rete Envato.
Personalmente, ottengo di più dal web indipendente e graphic designer che blog. Ci sono, tuttavia, carichi che ho imparato da nel corso degli anni, quindi qui ci sono solo alcuni e mi scuso con tutti i blogger eccellenti che ho lasciato fuori dalla lista.
- Chris Colyer’s CSS Tricks è un sito web reattivo dall’aspetto eccezionale, ma ha anche grandi informazioni e trucchi sul web design
- Veerle Pieters ha ottimi tutorial su Photoshop e Illustrator sul blog di Veerle
- David Airey è qualcuno che ho seguito per un po ‘ sul suo blog omonimo, LogoDesignLove e IdentityDesigned. David è interessato all’identità generale delle organizzazioni, tra le altre cose.
- Chris Spooner mi ha insegnato molto con tutorial sul suo blog a SpoonGraphics e più informazioni e ispirazione a Line25
- Il sito meravigliosamente progettato di Fabio Sasso Abduzeedo offre grande ispirazione e stranezza.
- N. Design Studio di Nick La e WebDesignerWall hanno alcune informazioni fantastiche e grande ispirazione.
Non esitate a aggiungere il vostro blog di design preferito nei commenti qui sotto.
Forum
Quando si sta colpendo la testa contro un muro di mattoni forum sono luoghi ideali per ottenere risposte. Pubblica una descrizione del tuo problema e l’indirizzo web e molto spesso qualcuno ti risponderà con una soluzione. Ecco alcuni dei miei forum preferiti.
Mi piace Estetica Design Forum, DesignForums.co.uk, e Designer, s Parlare. Lì, s Digital Point e Sitepoint per le query che vanno più ampia, il forum WordPress è eccellente e lì, s il Forum Guerriero per internet marketing.
Libri
Molti web designer sostengono che i buoni libri fisici vecchio stile hanno contribuito a insegnare loro il web design. Qui ci sono alcuni dei miei preferiti e alcuni altri che sono stati raccomandati a me. I collegamenti sono Amazon.com link di affiliazione.
- Costruisci il tuo sito Web nel modo giusto Usando HTML & CSS 3th (third) edition di Ian Lloyd è un libro Sitepoint che ho letto anni fa. Mi ha davvero aiutato al momento in quanto si concentra sulle migliori pratiche di web design. Assicurati di acquistare un’edizione aggiornata (al momento la terza edizione che include molto su HTML5).
- CSS: Il manuale mancante di David Sawyer McFarland include spiegazioni, esempi e tutorial passo-passo. Questo libro è particolarmente consigliato in quanto ti dà lo sfondo ai CSS e include molto su CSS3.
- The Principles of Beautiful Web Design, 2nd Edition di Jason Beaird, sostiene che il design è un’abilità che può essere appresa e ti insegna i principi fondamentali del design.
- Cartella di lavoro di Color Design: una guida reale all’utilizzo del colore nella progettazione grafica di AdamsMorioka (editor) fornisce le informazioni vitali necessarie per applicare il colore in modo creativo ed efficace al lavoro di progettazione.
- Non farmi pensare: A Common Sense Approach to Web Usability, 2nd Edition di Steve Krug un classico istantaneo sull’usabilità del web, ricco di approfondimenti e consigli pratici.
- Getting Real: il modo più intelligente, più veloce e più semplice per costruire un’applicazione Web di successo di 37 Segnali potrebbe riguardare la creazione di applicazioni Web non di siti, ma ha un modo così meraviglioso di semplificare i processi web che ho trovato una lettura così utile.
- Scavando in WordPress da Chris Coyier & Jeff Starr viene altamente raccomandato come il grande libro di WordPress. Disponibile in versione PDF (utile per copiare il codice) e in versione fisica.
Ci sono molti altri libri che avrei potuto includere soprattutto sulla teoria del design. Se avete suggerimenti di libri che ti hanno aiutato con il web design, fatecelo sapere nei commenti.
Cosa puoi fare
Molti designer sostengono che il fallimento è in realtà il miglior insegnante. Quindi uscire da lì e progettare siti web! Quando, come senza dubbio accadrà, ci si imbatte in un muro di mattoni, è possibile utilizzare alcune delle risorse online qui per aiutarvi. E, quando non si può guardare lo schermo del computer più, si può leggere un libro su di esso!