Come imparare il web design (in 9 passi)

Comprendere i concetti chiave di visual design

Linea

Ogni lettera, di confine, e la divisione in un layout è fatto di linee che compongono la loro maggiore struttura. Imparare il web design significa comprendere le applicazioni delle linee nel creare ordine ed equilibrio in un layout.

Forme

Le tre forme di base nel visual design sono quadrati, cerchi e triangoli. I quadrati e i rettangoli funzionano per i blocchi di contenuto, i cerchi funzionano per i pulsanti e i triangoli sono spesso usati per le icone che accompagnano un messaggio importante o un invito all’azione. Le forme hanno anche un senso di emozione, con quadrati associati alla forza, cerchi con armonia e comfort e triangoli con importanza e azione.

Texture

Texture replica qualcosa nel mondo reale. Attraverso la trama, abbiamo un’idea se qualcosa è ruvido o liscio. Le trame possono essere viste in tutto il web design. Dagli sfondi cartacei ai ciuffi colorati di una sfocatura gaussiana, sii consapevole dei diversi tipi di trame che possono rendere i tuoi disegni più interessanti e possono dare loro un senso di fisicità.

Colore

Per creare disegni che non sono un affaticamento degli occhi, si dovrebbe educare se stessi in teoria dei colori. Comprendere la ruota dei colori, i colori complementari, i colori contrastanti e le emozioni a cui sono legati i diversi colori ti renderà un web designer migliore.

Griglie

Le griglie hanno le loro radici nei primi giorni della progettazione grafica. Funzionano così bene nel portare ordine a immagini, testi e altri elementi in un web design. Scopri come strutturare i layout web utilizzando le griglie.

Conoscere le basi di HTML

Hypertext markup language (HTML) fornisce le indicazioni su come il contenuto, le immagini, la navigazione e altri elementi di un sito web vengono visualizzati nel browser web di qualcuno. Anche se non è necessario essere un esperto in HTML, aiuta comunque ad avere una certa familiarità con come funziona, anche se si utilizza una piattaforma di progettazione basata su visual come Webflow.

I tag HTML sono le istruzioni che un browser utilizza per generare un sito web. Intestazioni, paragrafi, link e immagini sono tutti controllati da questi tag. In particolare, vorrai sapere come vengono utilizzati i tag di intestazione come i tag H1, H2 e H3 per la gerarchia dei contenuti. Oltre a influenzare la struttura del layout, i tag di intestazione sono importanti nel modo in cui i web crawler classificano un design e influenzano il modo in cui vengono visualizzati nelle classifiche di ricerca organiche.

Per saperne di più sui concetti di base dell’HTML (c’è anche una sezione sui CSS), dai un’occhiata a questa lezione che abbiamo messo insieme in Webflow University.

Capire CSS

CSS (o cascading style sheets) fornisce lo stile e le istruzioni aggiuntive su come un elemento HTML sta per apparire. Fare cose come applicare i font, aggiungere padding, impostare l’allineamento, scegliere i colori e persino creare griglie sono tutte possibili attraverso i CSS.

Sapere come funziona CSS ti darà le competenze per creare siti Web dall’aspetto unico e personalizzare i modelli esistenti. Andiamo oltre alcuni concetti chiave di CSS.

Classi CSS

Una classe CSS è un elenco di attributi che si uniscono nello styling di un singolo elemento. Qualcosa come il testo del corpo potrebbe avere il carattere, la dimensione e il colore tutti una parte di una singola classe CSS.

CSS combo classes

Una classe combo è costruita su una classe base esistente. Eredita tutti gli attributi come dimensionamento, colore e allineamento che potrebbero essere già in atto. Gli attributi possono quindi essere modificati. Classi combo risparmiare tempo e consentono di impostare le variazioni di una classe che è possibile applicare ovunque sia necessario in un web design.

Sapere come funziona il CSS è essenziale quando si impara il web design. Come menzionato nella sezione su HTML, ti consigliamo di andare alla Webflow University per vedere di più su come funziona il CSS.

Impara le basi di UX

UX è la magia che dà vita a un sito web, trasformandolo da una disposizione statica di elementi in qualcosa che si impegna con le emozioni di qualcuno che lo scorre.

La combinazione di colori, il contenuto, la tipografia, il layout e le immagini si uniscono per servire il tuo pubblico. Il design dell’esperienza utente riguarda la precisione e l’evocazione di sentimenti. Offre a qualcuno non solo un viaggio agevole, ma un’esperienza che li collega con l’entità o il marchio dietro il web design.

Ecco alcuni principi UX che devi sapere.

User personas

Web design significa comprendere gli utenti finali. Dovresti imparare come fare ricerche sugli utenti e come creare personaggi utente. Inoltre, è necessario sapere come utilizzare queste informazioni nella creazione di un design ottimizzato per le loro esigenze.

Architettura delle informazioni

Senza un’organizzazione chiara, le persone si confonderanno e rimbalzeranno. L’architettura delle informazioni e la mappatura dei contenuti forniscono un modello per il modo in cui il sito Web e ogni sezione lavoreranno insieme per fornire un percorso chiaro al cliente.

Flussi utente

La costruzione di flussi utente può entrare in gioco quando si lavora fino a progetti di design più estesi, ma in futuro starai meglio se inizi a pensare a questi e a costruirli per i tuoi primi progetti. I flussi degli utenti comunicano come le persone si muoveranno attraverso un design. Ti aiutano a dare priorità alle sezioni più importanti e ad assicurarti che le persone possano accedervi.

Wireframe

Wireframe mostra dove su una pagina web intestazioni, testo, immagini, moduli e altri elementi verranno posizionati. Anche se stai costruendo un semplice web design di una pagina, mappare un wireframe ti darà una solida guida da cui lavorare. Mentre passi a siti Web più complicati, i wireframe sono essenziali per creare un’esperienza coerente, strutturare i layout e non perdere nulla che deve essere incluso.

Prototipazione

I prototipi possono avere diversi livelli di fedeltà ma fungere da rappresentazione di un progetto funzionante. Immagini, interazioni, contenuti e altri elementi importanti sono tutti a posto e replicano il design del mondo reale. I prototipi vengono utilizzati per ottenere feedback e mettere a punto un progetto durante tutto il processo.

Familiarizzare con UI

Un’interfaccia utente è un meccanismo che mette un pezzo di tecnologia in azione. Una maniglia è un’interfaccia utente. Il controllo del volume sulla tua autoradio che il tuo altro significativo non smetterà di scherzare è un’interfaccia utente. E la tastiera in cui inserisci il PIN in un bancomat è un’interfaccia utente. Proprio come i pulsanti e altri meccanismi nel mondo reale consentono a qualcuno di interagire con le macchine, gli elementi dell’interfaccia utente su un sito web consentono a qualcuno di mettere in moto le azioni.

Esaminiamo due principi chiave dell’interfaccia utente: design intuitivo e semplicità.

Come creare interfacce intuitive

Interagire e interagire con un sito web deve essere coerente e seguire schemi ripetibili. Le persone che atterrano su un sito Web dovrebbero comprendere immediatamente i sistemi che sono in atto nella navigazione attraverso di esso.

Rendi semplice l’interfaccia utente

L’interfaccia utente esiste per ottimizzare l’usabilità. Ciò significa rendere i controlli facili da usare, oltre che evidenti nella loro funzionalità. Che tu stia riducendo al minimo il numero di opzioni di navigazione, rendendo il processo di checkout rapido o integrando altri elementi interattivi che aumentano l’accessibilità, understanding UI ti aiuterà a semplificare l’esperienza di qualcuno nell’interazione con un sito web.

Naturalmente, l’interfaccia utente è un argomento vasto che non può essere catturato in pochi paragrafi. Ti consigliamo di controllare il post del blog “10 essential UI (user interface) design tips” come primer per l’interfaccia utente.

Letture correlate: UX vs UI: differenze chiave ogni designer dovrebbe conoscere

Comprendere le basi della creazione di layout

I nostri occhi si attaccano automaticamente a determinati modelli di progettazione, creando un percorso facile attraverso un web design. Intuitivamente sappiamo dove guardare perché abbiamo visto questi stessi modelli più e più volte come abbiamo consumato i media per tutta la vita. Conoscere i modelli di progettazione ti aiuterà a creare siti Web che hanno un flusso regolare al contenuto e alle immagini. Due modelli di layout web comuni che è necessario conoscere sono Z-patterns e F-patterns.

Z-pattern

Per i layout con un’economia di parole e immagini e generose quantità di spazio negativo, lo Z-pattern rappresenta un modo efficace per navigare attraverso un sito web. Quando inizi a prestare attenzione a dove i tuoi occhi stanno attraversando un disegno, riconoscerai subito quando un modello Z è a posto.

F-pattern

I disegni pesanti sul testo, come per una pubblicazione online o un blog, spesso seguono un F-pattern distinto. Sul lato sinistro dello schermo, vedrai un elenco di articoli o post, e nel corpo principale della pagina, vedrai righe di informazioni correlate. Questo modello è ottimizzato per dare alle persone tutte le informazioni di cui hanno bisogno, anche se stanno rapidamente guardando attraverso di essa.

Letture correlate: Layout di pagina Web: anatomia del sito web ogni designer ha bisogno di imparare

Conoscere la tipografia

I font possono impartire toni o emozioni diverse e influire sulla leggibilità. Se stai imparando a conoscere il web design, saper usare la tipografia è essenziale.

Tipografia serve a diversi scopi nel web design. In primo luogo, serve lo scopo utilitaristico di rendere leggibile il contenuto. Ma può anche servire come decorazione, e l’uso raffinato della tipografia stilizzata può aggiungere all’estetica generale.

Ecco tre concetti tipografici di base che dovresti conoscere.

Serif

I caratteri Serif hanno linee minuscole note come serif che abbelliscono ogni lettera. Questo stile tipografico può essere fatto risalire alla stampa.

Sans serif

Come suggerisce il nome, i caratteri sans serif non hanno le linee identificative dei caratteri serif. Questi caratteri tipografici si trovano attraverso il regno digitale di siti web e applicazioni.

Display

I caratteri di visualizzazione sono spesso utilizzati per i titoli e possono essere grandi e di grande impatto o fatti di linee sottili e nitide. Di solito hanno forme di lettere sofisticate e hanno lo scopo di attirare l’attenzione di qualcuno.

Related legge: design Tipografico: stili di carattere e di risorse per i progettisti

Mettere la vostra conoscenza in azione e di costruire qualcosa di

È possibile guardare i tutorial, leggere i post sul blog, iscriversi a corsi online, e di assorbire tutta la teoria e informazioni sul web design, ma l’unico modo per diventare un web designer è quello di iniziare la progettazione web.

Inizia con un semplice progetto. Forse qualcuno che conosci ha bisogno di aiuto nella creazione di un portafoglio o ha un trambusto lato che manca qualsiasi tipo di presenza sul web. Offri di progettarli qualcosa gratuitamente.

Un blog è anche un altro grande progetto per principianti. Questo ti darà un’esperienza pratica di progettazione nell’imparare a usare cose come un CMS, oltre a fornire una vetrina per le tue abilità di scrittura.

Costruire un sito web per un’azienda o un’azienda falsa è un altro divertente esercizio creativo nello sviluppo delle tue costolette di design. Inoltre, puoi aggiungerlo al tuo portafoglio.

Ottieni un mentore

I mentori sono preziosi perché sono stati dove sei — all’inizio — e hanno il desiderio di aiutarti attraverso le lezioni sudate che hanno imparato. Hanno un profondo pozzo di esperienza e conoscenza. Sono una grande risorsa per ottenere feedback sul tuo lavoro e trovare ciò che stai facendo bene e ciò che deve essere migliorato.

Nella ricerca del mentore appropriato, assicurati di trovare qualcuno che faccia il tipo di design che ammiri e si specializzi in ciò che vuoi imparare. Mentori possono dare un percorso chiaro da anni trascorsi nel campo in modo da non dover inciampare attraverso l’apprendimento web design.

Nessun codice fornisce un facile accesso al web design

C’è stato un tempo, non molto tempo fa, in cui si doveva avere una profonda comprensione di HTML e CSS per scrivere manualmente il codice dietro un web design. Oggi, senza strumenti di codice come Webflow, è possibile mettere insieme un sito web e lanciarlo in un breve lasso di tempo. Ciò che ha richiesto giorni o settimane può ora accadere in ore.

Naturalmente, tanto va nella creazione di un buon web design. Imparare i fondamenti dietro visual design, le basi di UI e UX, e sapere come la funzione front-end e back-end vi farà un designer più a tutto tondo.

Che tu stia appena iniziando o sia un esperto, Webflow offre una piattaforma intuitiva basata su visual per consentirti di realizzare la tua creatività. Insieme a un modo facile da usare per lanciare siti web, Webflow ha un’intera comunità per darti consigli e aiutarti a migliorare le tue abilità. Non vediamo l’ora di vederti lavorare nella nostra Vetrina.