L'apprendimento delle nozioni di base del web design è ancora sul tuo? elenco? Perché non hai ancora iniziato? Abbiamo messo insieme 30 consigli e risorse per aiutarti a iniziare a studiare il web design questo mese (e forse anche a trovare te stesso un nuovo percorso di carriera!)
I progettisti grafici, i designer di stampa e i creativi che cercano di imparare qualcosa di nuovo o di entrare nel sito Web devono smettere di rimandare. Ogni giorno che non fai quel primo passo ti lascia un giorno più indietro rispetto a tutti gli altri!
Segui questi passaggi per iniziare a imparare come creare il tuo primo sito web, le migliori pratiche del settore e molto altro ancora - tutto in 30 giorni!
1. Avviare un sito Web
Il modo migliore per iniziare a imparare il web design è iniziare a farlo. Questo è il consiglio di David Kadavy, autore di Design Hackers.
Ti consiglio di iniziare un blog. Ho aperto un blog solo per avere un parco giochi per il web design e, 7 anni dopo, ho lanciato un libro best-seller sull'argomento. Avere un progetto personale, come un blog, ti dà un posto dove puoi provare cose nuove, e il tuo capo non ti licenzierà se sbagli.
Non devi iniziare con un sito Web massiccio o un design pazzo; inizia piccolo. Gioca con il sito web, scopri cosa fa funzionare le cose. (E assicurati di controllare il codice, in modo da poter iniziare a familiarizzare con ciò che sta facendo funzionare il tuo sito web.)
2. Leggi tutto ciò che puoi
Inizia a leggere. Dato che sei su questo blog, probabilmente sei abituato a tenere traccia di ciò che sta accadendo nel mondo del design. Continua a leggere.
Leggi tutto ciò che puoi sul design del sito web, sulle tendenze, sulle tecniche e sulle migliori pratiche. Segui i designer che ammiri sui social media.
Crea una vasta rete per la lettura del tuo sito web. Leggi le basi per imparare un po 'di codice, leggere la teoria del design e leggere i tutorial e gli articoli correnti.
3. Sii un comunicatore efficace
Se non sei la persona più articolata, rispondi a quelle abilità. Una grande parte del design del sito web è la comunicazione.
I progettisti di siti Web devono comunicare regolarmente con i clienti per capire quale problema deve essere risolto dal progetto; devono comunicare quelle soluzioni e implementarle pure.
4. Iscriviti a Tuts + & Envato Elements
Considera un abbonamento a Envato Elements, che ti consente anche di accedere all'eccellente risorsa di apprendimento Tuts +.
Tuts + pubblica regolarmente corsi di grafica e web design, dalle tecniche di base, ai più recenti approcci e sviluppi avanzati. È completamente autonomo, insegnato da istruttori esperti. Avrai anche accesso a Envato Elements, che è una grande risorsa per trovare grafici, modelli e altro ancora da inserire nel tuo lavoro di web design.
5. Pensa in HTML
HTML, o linguaggio di markup ipertestuale, è una pietra miliare del design del sito web. L'HTML è lo scheletro che aiuta a creare la struttura di un sito Web e una volta che puoi leggere la lingua, il mondo del design del sito web avrà molto più senso.
W3Schools ha un grande tutorial di avvio HTML con centinaia di esempi HTML che puoi giocare sullo schermo per vedere cosa succede e come funziona esattamente. (Potresti trovarlo più intuitivo di quanto immaginassi).
6. Gioca con Code su Codeacademy
Sebbene l'HTML sia un buon inizio, puoi imparare quasi tutti i linguaggi di programmazione da Codeacademy. Il set gratuito di strumenti ti insegna a codificare utilizzando attività e giochi interattivi.
Puoi prendere un corso Codeacademy dove e quando ne hai bisogno e avviare e interrompere secondo necessità. Scegli un argomento da apprendere: sviluppo web, programmazione, data science o linguaggio su cui concentrarti: HTML e CSS (un ottimo punto di partenza), Python, Java, SQL, Ruby e altro ancora.
7. Impara a capire i CSS
CSS, o fogli di stile a cascata, definiscono la presentazione di un documento scritto in HTML o XML e SVG.
Come definito da Mozilla
I CSS descrivono come gli elementi dovrebbero essere visualizzati sullo schermo, su carta, in parlato o su altri media.
Mozilla ha anche una grande collezione di risorse CSS per iniziare, con una solida introduzione su come funzionano i CSS, inclusi i selettori e le proprietà, scrivere regole CSS, applicare CSS a HTML, come specificare lunghezza, colore e altre unità in CSS, a cascata ed ereditarietà, basi di modelli box e debugging CSS. Quindi i moduli si spostano per spiegare il testo e le scatole di stile.
8. Applica le tue abilità di progettazione al Web
Se lavori già in un campo di progettazione creativa o grafica, pensa alle cose che sai già che puoi applicare anche alla progettazione di siti web. I principi che rendono visivamente accattivante qualcosa non cambiano in base al medium e tutto ciò che la teoria del design tornerà utile anche nello spazio digitale.
Mentre elementi come il codice di apprendimento potrebbero non sembrare naturali, avere uno sfondo di progettazione è un enorme vantaggio. A che serve un sito Web magnificamente codificato se non si vuole interagire con esso?
9. Prestare attenzione ai siti Web che ami
Prendi nota dei siti web che ami. Cosa ne pensa di loro? (E come puoi imparare a replicare quegli elementi?) Presta attenzione a:
- Tipografia
- Navigazione
- Uso di immagini e spazio
- Progettazione di forme
- Animazione e effetti di scorrimento
- Colore
10. Disegna un wireframe
Wireframing è il brainstorming di un web designer.
Nella sua forma più pura, un wireframe è uno schizzo di ciò che sarà il sito web. Non è un contorno di elementi estetici, piuttosto un progetto del sito web. Disegnare un wireframe non riguarda l'aspetto di questo design, ma la struttura delle informazioni al suo interno.
Non sei sicuro di come creare un wireframe? Digital Telepathy ha una guida delle migliori pratiche per aiutarti a imparare.
11. Prenditi del tempo per imparare lo schizzo
Sketch è uno strumento di disegno vettoriale per Mac che semplifica la creazione di elementi di design. Molti designer si rivolgono a Sketch per creare elementi dell'interfaccia utente e blocchi di progettazione ripetuti.
È pieno di plugin e consente di esportare il codice per un facile utilizzo e accesso.È uno degli strumenti più potenti e popolari per venire in giro da Adobe Creative Suite e ne vale assolutamente la pena.
12. Rimani aggiornato con la tecnologia
AI, VR, AR, video a 360 gradi, robot.
Ci sono così tante nuove tecnologie e tendenze che può essere difficile tenere il passo. Ma devi fare un punto per rimanere al passo con questi cambiamenti.
Affrontali uno alla volta e inizia con tecnologie che sono le più direttamente correlate al lavoro che fai. Se hai un sito web con chat online, inizia imparando a conoscere i bot. Oppure se usi molti contenuti video, gioca con video a 360 gradi.
Elementi come l'intelligenza artificiale e la realtà virtuale o aumentata sono ancora più complessi, ma probabilmente diventeranno parte integrante del design del sito web lungo la strada. Come minimo, dovresti sapere cosa sono e quali potrebbero essere i potenziali usi.
13. Mettiti comodo con SEO
Mentre molti web designer pensano che uno specialista SEO possa gestire la preparazione di un sito Web pronto per essere letto dai motori di ricerca, c'è un sacco di lavoro di progettazione connesso alla SEO.
Dal modo in cui le immagini vengono caricate per creare codice pulito che è veloce ad includere meta descrizioni su pagine ed elementi, il progettista dovrebbe incorporare il pensiero di ricerca nel proprio flusso di lavoro.
Freelance, questo è di vitale importanza per voi. La maggior parte dei clienti è abbastanza esperta da chiedere un sito web ottimizzato per SEO. Se lavori da solo, devi conoscere abbastanza per creare un solido framework che Google può leggere (e poter indirizzare il cliente a uno specialista SEO se è necessario lavorare di più).
14. Gioca con un costruttore di siti web
Un costruttore di siti web può essere un ottimo modo per sentirsi a proprio agio con le migliori pratiche e su come iniziare a costruire e progettare siti web.
Molti di questi strumenti hanno un sacco di modelli e ti permettono di personalizzare gli elementi e persino aggiungere frammenti di codice. Per siti semplici, molti costruttori di siti Web hanno anche un piano gratuito in cui è possibile creare una pagina di portfolio personale o un sito Web di base che funge da parco giochi per te.
Quindi seleziona i pezzi all'interno del costruttore del sito web. Guarda come sono progettati e codificati per farti un'idea di come tutto si concilia. Rimarrai sorpreso da ciò che riesci a trovare solo scegliendo un altro design a parte.
15. Trova un mentore
C'è qualcuno con cui lavori che ammiri come web designer? Portali a pranzo e scegli il loro cervello per l'industria.
Trovare un mentore che sia disposto a lavorare con te e aiutarti a pensare al campo e a come imparare il web design da solo può essere prezioso. E mentre probabilmente puoi trovare un mentore in una comunità online, niente è meglio di una persona viva che puoi incontrare faccia a faccia periodicamente. (Forse vale la pena avere mentori online e di persona.)
16. Unisciti alla community di CodePen
Una volta che inizi a familiarizzare con codice e programmazione, vuoi unirti alla community di CodePen. La community open source ti consente di condividere e modificare frammenti di codice in una rete sociale di sorta.
Ecco un po 'di più dai fondatori del sito:? CodePen è un ambiente di sviluppo sociale. Al suo centro, ti consente di scrivere codice nel browser e di vederne i risultati mentre costruisci. Uno strumento utile e liberatorio per gli sviluppatori di qualsiasi competenza, in particolare per le persone che imparano a programmare. Ci concentriamo principalmente su linguaggi front-end come HTML, CSS, JavaScript e sintassi di pre-elaborazione che si trasformano in quelle cose.
17. Segui una lezione
Per alcuni studenti, l'impostazione di classe più formale è la migliore.
Ci sono un sacco di classi disponibili - di persona e online - per imparare le basi del web design. Inizia con un college locale o un centro di apprendimento online come Udemy o Coursera. Raccogli una classe al tuo attuale livello di abilità e continua semplicemente ad andare avanti.
18. Vuoi fare qualcosa? Google It
Per chi non è così tradizionale, trova la risposta al problema del web design su Google. Ci sono così tanti tutorial e video disponibili che possono aiutarti a risolvere qualsiasi problema e soluzione.
La chiave è cercare esattamente ciò che è necessario sapere e cercare una fonte attendibile per la risposta. Ecco un altro consiglio quando si tratta di tutorial e video: i contenuti più recenti probabilmente daranno una risposta migliore, più completa e più pertinente. (Ricorda, alcune di queste cose stanno cambiando velocemente.)
19. Prestare attenzione all'esperienza utente
Niente può creare o distruggere un sito web come la progettazione dell'esperienza utente. È necessario pianificare e comprendere.
Ecco come l'Interaction Design Foundation descrive il design UX:
La progettazione dell'esperienza utente (UX) è il processo di creazione di prodotti che forniscono esperienze significative e personalmente rilevanti. Ciò comporta l'attenta progettazione dell'usabilità di un prodotto e del piacere che i consumatori deriveranno dall'utilizzarlo. Si occupa anche dell'intero processo di acquisizione e integrazione del prodotto, inclusi aspetti del marchio, del design, dell'usabilità e della funzione.
I progettisti di UX, oi designer che sono consapevoli del processo di formazione dell'esperienza, cercano di creare e modellare i fattori che influenzano deliberatamente il processo. Per fare ciò, un progettista di UX considererà il perché, cosa e come dell'uso del prodotto.
20. Prestare attenzione alle tendenze del design
Come si presenta il design del sito web moderno? Non è una domanda trabocchetto. Per progettare siti Web moderni e esperienze utente, è necessario sapere cosa vogliono gli utenti e in che modo interagiscono con esso. Se l'ultima volta che hai scaricato un'app o guardato un sito Web sul tuo telefono era il 2016, hai un sacco di cose da fare.
La creazione di design di siti web che abbiano tocchi e tendenze moderni integrati nel design aiuterà i tuoi progetti a distinguersi. Come fai a sapere che cosa è di tendenza? Continua a leggere siti come questo e fai attenzione a ciò che fanno gli altri designer.Prendi nota dei colori, degli stili e delle funzionalità inclusi nei siti Web che visiti frequentemente.
21. Crea senza colore
Inizia ogni disegno senza colore. Un grande designer una volta mi ha detto che se il tuo design funziona in bianco e nero, sarà impeccabile nel colore.
Questo potrebbe non essere sempre vero, ma è un ottimo punto di partenza.
Creando disegni in bianco e nero, puoi vedere dove gli elementi contrastano e come giocano insieme. Hai eliminato tutte le associazioni emotive con il movimento dei colori o degli occhi che accade a causa di esso. Questa semplice forma di design ti darà un'idea se qualcosa funziona come concetto prima di passare alla sua finalizzazione.
22. Impara ad amare i caratteri di Google
Google Fonts è tuo amico.
Indipendentemente da come ti senti su Google, la capacità di sfogliare, ordinare e selezionare i caratteri che sai funzioneranno nei progetti di siti web è importante. Non devi pensare alla licenza o se i caratteri tipografici sono compatibili con browser specifici o no.
La limitazione è che hai solo ciò che è nella libreria di Google Fonts con cui lavorare. Ma se ci provi puoi trovare qualcosa che si adatta a quasi tutti i progetti. Ti farà risparmiare molto tempo a lungo termine.
23. Scegli un kit UI
Scarica un'interfaccia utente o un kit di icone e selezionalo separatamente.
Proprio come è possibile esaminare il codice di un sito Web, guarda come sono costruiti gli elementi di design per il web. Prendi nota della scala e della griglia, osserva i mix di colori e il modo in cui i file sono organizzati in Photoshop o Illustrator.
Cerca un kit da scaricare che includa elementi in più formati per display ad alta risoluzione. (Il download di un gruppo di file JPEG non ti servirà molto bene).
Quindi prova a creare o personalizzare un elemento o due dei tuoi.
24. Diventa un tipografo
Il design moderno del sito web è fortemente focalizzato sulla tipografia? buona tipografia Da intestazioni di eroi con parole giganti a livelli di testo che disegnano un utente nel design, è fondamentale comprendere i principi su come accoppiare elementi di testo e costruire blocchi di testo accattivanti.
Inizia con Ellen Lupton's Thinking with Type. (C'è anche un libro con lo stesso nome.) Lupton è l'autorità della tipografia e le sue informazioni ti faranno pensare come un tipografo in pochissimo tempo.
25. Salta in JavaScript
Quando inizi a sentirti abbastanza bene a dilettarti con il web design, sfidati ancora per imparare JavaScript. Dopo HTML e CSS, è la lingua più importante del web.
JavaScript è lo strumento che consente ai progettisti di implementare cose complesse e l'interazione su pagine web. È ciò che fa animare una diapositiva a scorrimento o quella animazione parallasse.
Learn JS ha un tutorial interattivo per aiutarti a iniziare.
26. Aggiorna il tuo portafoglio
Una volta che inizi a progettare per il web, assicurati di aggiornare il tuo portfolio con progetti di web design. Questa semplice azione ti aiuterà a mostrarti? e altri? quel web design è parte del tuo repertorio.
Un portafoglio aggiornato può aiutare i potenziali clienti a vedere quale sia il tuo? Stile? sembra. Assicurati di mostrare layout, colori, tipografia e tecniche diverse che mostrano cosa puoi fare.
27. Sfida te stesso
Con così tante scorciatoie e frammenti di codice per aiutarti a risolvere quasi tutti i problemi del sito web che stai avendo, non farti pigro. Ricordati di sfidarti continuamente per imparare nuove abilità, nuove tecnologie e continua a migliorare il tuo gioco di web design.
L'unica cosa su questo campo è che è in continua evoluzione; c'è sempre qualcosa di nuovo da imparare o provare.
28. Massimizza la tua esperienza
Esci e progetta. Devi iniziare a progettare siti web per diventare un web designer.
Inizia in piccolo, ma intraprendi progetti con altri. Chiedi di unirti a un progetto con un team al lavoro. Affrontare un piccolo sito Web per un amico. Più esperienza costruisci i siti web, migliore sarà la tua velocità.
Che cosa state aspettando? Smettere di procrastinare.
29. Chiedi un feedback
Usa la tua rete per raccogliere feedback sui progetti di design del tuo sito web, non importa quanto tu pensi che siano piccoli. Ascolta questo feedback, anche se non ti piace e vedi cosa puoi imparare.
A parte le preferenze visive, la persona che ha fornito feedback ha suggerito suggerimenti per migliorare il funzionamento del sito web? Potrebbero facilmente capire l'obiettivo del design? Si sono collegati alla messaggistica?
30. Continua a imparare cose nuove
Per essere un grande designer di siti web, devi solo continuare a giocare, provare e imparare cose nuove. Stabilire un punto di rete e comunicare con gli altri sul campo in modo da poter rimanere al passo con le tecniche e i cambiamenti visivi che sono richiesti.
Se stai cercando di imparare il design del sito, probabilmente questo è già qualcosa che fai regolarmente. Ma questo è un campo in evoluzione e continua a cambiare quasi ogni giorno. Basta chiedere a chiunque lo stia facendo.