Sta imparando le basi del web design ancora sulla vostra lista “un giorno”? Perché non hai ancora iniziato? Abbiamo messo insieme 30 suggerimenti e risorse per aiutarti a iniziare a imparare il web design questo mese (e forse anche trovare te stesso un nuovo percorso di carriera!)

I grafici, i progettisti di stampa e i creativi che cercano di imparare qualcosa di nuovo o di entrare nel sito web devono smettere di procrastinare. Ogni giorno che non fai quel primo passo ti lascia un giorno più indietro di 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!

Avvia 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 <per> Hacker.

Ti consiglio di iniziare un blog. Ho iniziato un blog solo per avere un parco giochi di web design, e 7 anni dopo, ho lanciato un libro best-seller sul tema. Avere un progetto personale, come un blog, ti dà un posto dove puoi provare cose nuove, e il tuo capo non ti licenzierà se incasini.

Non devi iniziare con un sito Web massiccio o un design pazzo; inizia in piccolo. Gioca con il sito web, capire cosa fa funzionare le cose. (E assicurati di ispezionare il codice, in modo da poter iniziare a familiarizzare con ciò che sta facendo funzionare il tuo sito web.)

Vuoi iniziare rapidamente? Un costruttore di siti web come Wix può aiutare a dare un vantaggio con un design elegante sito web, come si inizia a imparare i concetti e gli elementi costitutivi di ciò che va in un sito web.

Leggi tutto ciò che puoi

Inizia a leggere. Perché siete su questo blog, probabilmente siete abituati a tenere traccia di ciò che sta accadendo nel mondo del design. Continua a leggere.

Leggi tutto il possibile sulla progettazione di siti web, tendenze, tecniche e best practice. Segui i designer che ammiri sui social media.

Lanciare una vasta rete per il vostro sito web design lettura pure. Leggi le basi per imparare un po ‘ di codice, leggi la teoria del design e leggi tutorial e articoli attuali.

Sii un comunicatore efficace

Se non sei la persona più articolata, rispolvera 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 risolvere il design; devono comunicare tali soluzioni e implementarle.

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, fino agli ultimi approcci e sviluppi avanzati. E ‘ completamente auto-ritmo, insegnato da istruttori esperti. Avrai anche accesso a Envato Elements, che è una grande risorsa per trovare grafica, modelli e altro ancora da collegare al tuo lavoro di web design.

Pensare in HTML

HTML, o hypertext markup language, è una pietra angolare della progettazione di siti web. HTML è lo scheletro che aiuta a creare la struttura di un sito web e una volta che si può leggere la lingua, il mondo del design del sito web avrà molto più senso.

W3Schools ha un ottimo tutorial di avvio HTML con centinaia di esempi HTML con cui puoi giocare sullo schermo per vedere cosa succede ed esattamente come funziona. (Potresti trovarlo più intuitivo di quanto immaginassi.)

Gioca con il codice in Codeacademy

Mentre l’HTML è 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 iniziare e interrompere se necessario. Scegli un argomento da imparare-sviluppo web, programmazione, scienza dei dati – o linguaggio su cui concentrarti – HTML & CSS (un ottimo punto di partenza), Python, Java, SQL, Ruby e altro ancora.

Imparare a capire CSS

CSS, o cascading style sheets, definire la presentazione di un documento scritto in HTML, o XML e SVG.

Come definito da Mozilla

Il CSS descrive come gli elementi devono essere renderizzati su schermo, su carta, a voce o su altri supporti.

Mozilla ha anche una grande collezione di risorse CSS per iniziare, con una solida introduzione di come funziona CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS all’HTML, come specificare lunghezza, colore e altre unità in CSS, cascata ed ereditarietà, basi del modello box e debug CSS. Quindi i moduli passano a spiegare il testo e le caselle di stile.

Applica le tue abilità di progettazione al Web

Se stai già lavorando in un campo di progettazione creativa o grafica, pensa alle cose che già sai che puoi applicare anche alla progettazione di siti web. I principi che rendono qualcosa di visivamente accattivante non cambiano in base al mezzo e tutto ciò che la teoria del design sarà utile anche nello spazio digitale.

Mentre elementi come l’apprendimento del codice potrebbero non sembrare naturali, avere uno sfondo di progettazione è un enorme bonus. A che serve un sito web splendidamente codificato se non si vuole interagire con esso?

Presta attenzione ai siti Web che ami

Prendi nota dei siti web che ami. Che dire di loro è attraente per voi? (E come puoi imparare a replicare quegli elementi? Attenzione:

• Tipografia
• Navigazione
• Uso di immagini e di spazio
• Design delle forme
• Animazione e effetti di scorrimento
• Colore

Disegnare un Reticolo

Wireframing è un web designer di brainstorming.

Nella sua forma più pura, un wireframe è uno schizzo di ciò che il sito web sarà. Non è un contorno di elementi estetici, piuttosto un progetto del sito web. Disegnare un wireframe non riguarda l’aspetto di questo design, riguarda la struttura delle informazioni in esso.

Non sai come creare un wireframe? La telepatia digitale ha una guida delle migliori pratiche per aiutarti a imparare.

Prenditi un po ‘ di tempo per imparare Sketch

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 ripetere i blocchi di progettazione.

E ‘ ricco di plugin e consente di esportare il codice per un facile utilizzo e l’accesso. E ‘ uno dei più potenti, e popolare, strumenti per venire in giro dal Creative Suite di Adobe e vale la pena il vostro tempo.

Rimani aggiornato con la tecnologia

AI, VR, AR, video a 360 gradi, bot.

Può essere difficile tenere il passo con così tante nuove tecnologie e tendenze. Ma è necessario fare un punto per rimanere in cima a 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. O se si utilizza un sacco di contenuti video, giocare con il video a 360 gradi.

Elementi come l’intelligenza artificiale e la realtà virtuale o aumentata sono ancora più complessi, ma rischiano di diventare parti integrate del paesaggio di progettazione del sito web lungo la strada. Come minimo, dovresti sapere cosa sono e quali potrebbero essere i potenziali usi.

Mettiti comodo con SEO

Mentre molti web designer pensano che uno specialista SEO in grado di gestire ottenere un sito web pronto per i motori di ricerca per leggere, c’è un sacco di lavoro di progettazione che è collegato al SEO.

Dal modo in cui le immagini vengono caricate alla creazione di codice pulito che è veloce per includere meta descrizioni su pagine ed elementi, il progettista dovrebbe incorporare il pensiero di ricerca nel proprio flusso di lavoro.

Liberi professionisti, questo è di vitale importanza anche per te. La maggior parte dei clienti sono abbastanza esperti da chiedere un sito web ottimizzato per SEO. Se si lavora da soli, è necessario conoscere abbastanza per creare un quadro solido che Google può leggere (ed essere in grado di indirizzare il cliente a uno specialista SEO se più lavoro deve essere fatto).

Gioca con un costruttore di siti Web

Un costruttore di siti web può essere un ottimo modo per mettersi a proprio agio con le migliori pratiche e come iniziare a costruire e progettare siti web.

La maggior parte di questi strumenti hanno un sacco di modelli e consentono di personalizzare gli elementi e anche aggiungere frammenti di codice. Per i 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 generatore di siti web. Guarda come sono progettati e codificati per avere un’idea di come tutto viene insieme. Sarete stupiti da ciò che si può capire solo scegliendo un altro disegno a parte.

Trova un mentore

C’è qualcuno con cui lavori che ammiri come web designer? Portali a pranzo e scegli il loro cervello sull’industria.

Trovare un mentore che è disposto a lavorare con voi e aiutarvi a pensare al campo e come imparare web design da soli può essere prezioso. E mentre probabilmente si può trovare un mentore in una comunità online, niente è meglio di una persona dal vivo che si possono incontrare faccia a faccia periodicamente. (Forse vale la pena avere mentori online e di persona.)

Unisciti alla comunità CodePen

Una volta iniziato a familiarizzare con un po ‘ di codice e programmazione, vuoi unirti alla comunità CodePen. La comunità open-source 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 permette di scrivere codice nel browser e vedere i risultati di esso mentre costruisci. Uno strumento utile e liberatorio per gli sviluppatori di qualsiasi abilità, e in particolare che abilita per le persone che imparano a codice. Ci concentriamo principalmente su linguaggi front-end come HTML, CSS, JavaScript e sintassi di pre-elaborazione che si trasformano in quelle cose.”

Prendere una classe

Per alcuni studenti, un ambiente di classe più formale è la cosa 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 centri di apprendimento online come Udemy o Coursera. Prendi una classe al tuo attuale livello di abilità e continua ad andare avanti.

Vuoi fare qualcosa? Google It

Per il non-così-tradizionale-studente, trovare la risposta al problema di web design su Google. Ci sono così tanti tutorial e video disponibili che si può camminare attraverso quasi tutti i problemi – e la soluzione.

La chiave è cercare esattamente ciò che devi sapere e cercare una fonte affidabile per la risposta. Ecco un altro suggerimento quando si tratta di tutorial e video: i contenuti più recenti probabilmente ti daranno una risposta migliore, più completa e più pertinente. (Ricorda, alcune di queste cose stanno cambiando velocemente.)

Prestare attenzione alla User Experience

Nulla può fare o rompere un sito web come user experience design. Devi pianificarlo e capirlo.

Ecco come la Fondazione Interaction Design descrive UX design:

User experience (UX) design è il processo di creazione di prodotti che forniscono esperienze significative e personalmente rilevanti. Ciò comporta l’attenta progettazione sia dell’usabilità di un prodotto che del piacere che i consumatori trarranno dall’utilizzo. Si occupa anche dell’intero processo di acquisizione e integrazione del prodotto, compresi gli aspetti del branding, del design, dell’usabilità e della funzione.

I progettisti UX, o i designer che sono consapevoli del processo di formazione dell’esperienza, cercano di creare e modellare deliberatamente i fattori che influenzano il processo. Per fare ciò, un progettista UX prenderà in considerazione il perché, cosa e come utilizzare il prodotto.

Presta attenzione alle tendenze del design

Che aspetto ha un moderno sito web? Non è una domanda trabocchetto. Per progettare siti Web moderni ed esperienze utente, è necessario sapere cosa vogliono gli utenti e come interagiscono con esso. Se l’ultima volta che hai scaricato un’app o guardato un sito Web sul tuo telefono è stato il 2016, hai un sacco di terreno da recuperare.

Creare progetti di siti Web con tocchi moderni e tendenze integrati nel design aiuterà i tuoi progetti a distinguersi. Come fai a sapere cosa fa tendenza? Continua a leggere siti come questo e prestare attenzione a ciò che altri designer stanno facendo. Prendere nota di colori e stili e le caratteristiche che sono inclusi nei siti web visitati di frequente.

Crea senza colore

Avvia ogni disegno senza colore. Un grande designer una volta mi ha detto che se il tuo design funziona in bianco e nero, sarà impeccabile a colori.

Che potrebbe non tenere sempre, ma è un ottimo punto di partenza.

Creando disegni in bianco e nero, puoi vedere dove gli elementi contrastano e come giocano insieme. Hai spogliato qualsiasi associazione emotiva con il colore o il movimento degli occhi che accade a causa di esso. Questa forma più semplice di design ti darà un’idea se qualcosa funziona come un concetto prima di passare alla finalizzazione.

Imparare ad amare Google Fonts

Google Fonts è tuo amico.

Indipendentemente da come ci si sente su Google, la possibilità di sfogliare, ordinare e selezionare i caratteri tipografici che si sa funzionerà nella progettazione di siti web è importante. Non devi pensare alle licenze o se i caratteri tipografici sono compatibili con browser specifici o meno.

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 un sacco di tempo nel lungo periodo.

Scegli un kit UI

Scarica un’interfaccia utente o un kit di icone e selezionalo.

Proprio come puoi ispezionare il codice di un sito web, guarda come gli elementi di design sono costruiti per il web. Prendi nota della scala e della griglia, guarda i mix di colori e come 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 JPEG non ti servirà così bene.)

Quindi prova a creare o personalizzare un elemento o due di tuo.

Diventa un tipografo

Il design moderno del sito web ha una forte attenzione alla tipografia good buona tipografia. Dalle intestazioni eroe con parole giganti a strati di testo che attirano un utente nella progettazione, comprendere i principi di come accoppiare elementi di tipo e costruire blocchi di testo coinvolgenti è vitale.

Inizia con il pensiero di Ellen Lupton con il tipo. (C’è anche un libro con lo stesso nome. Lupton è l’autorità sulla tipografia e le sue informazioni ti faranno pensare come un tipografo in pochissimo tempo.

Salta in JavaScript

Quando stai iniziando a sentirti abbastanza bene nel dilettarti con il web design, sfida di nuovo te stesso per imparare JavaScript. Dopo HTML e CSS, è il linguaggio più importante del web.

JavaScript è uno strumento che consente ai progettisti di implementare cose complesse e l’interazione sulle pagine web. E ‘ ciò che rende una diapositiva cursore o che parallax animation animare.

Learn JS ha un tutorial interattivo per aiutarti a iniziare.

Aggiorna il tuo portfolio

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 mostrare a te stesso – e agli altri-che il web design fa parte del tuo repertorio.

Un portafoglio aggiornato può aiutare i potenziali clienti a vedere come appare il tuo “stile”. Assicurati di mostrare layout, colori, tipografia e diverse tecniche che mostrano cosa puoi fare.

Sfida te stesso

Con così tante scorciatoie e frammenti di codice per aiutarti a risolvere quasi tutti i problemi del sito Web che stai riscontrando, non diventare pigro. Ricordatevi di sfidare se stessi continuamente per imparare nuove competenze, nuove tecnologie e continuare a migliorare il vostro gioco di web design.

L’unica cosa di questo campo è che è in continua evoluzione; c’è sempre qualcosa di nuovo da imparare o provare.

Massimizza la tua esperienza

Esci e progetta. Devi iniziare a progettare siti web per essere un web designer.

Inizia in piccolo, ma intraprendi progetti con altri. Chiedi di partecipare a un progetto con un team al lavoro. Affrontare un piccolo sito web per un amico. Più esperienza hai la creazione di siti web, meglio e più velocemente otterrai.

Cosa stai aspettando? Smettila di procrastinare.

Chiedi feedback

Usa la tua rete per raccogliere feedback sui tuoi progetti di design del sito web, non importa quanto piccoli pensi che siano. Ascolta questo feedback-anche se non ti piace e vedi cosa puoi imparare.

Oltre alle preferenze visive, la persona che fornisce feedback offre suggerimenti per migliorare la funzione del sito web? Potrebbero facilmente capire l’obiettivo del design? Si sono collegati con i messaggi?

Continua a imparare cose nuove

Per essere un grande designer di siti web, devi solo continuare a giocare, provare e imparare cose nuove. Fare un punto di rete e comunicare con gli altri nel campo in modo che si può rimanere in cima tecniche e cambiamenti visivi che sono in-demand.

Se stai cercando di imparare il design del sito web, allora questo è probabilmente 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.