Il web design è una componente cruciale del processo di sviluppo web. Se sei interessato al web design, supponiamo che tu abbia una vena creativa. E come potresti non essere entusiasta di saltare e realizzare il tuo primo sito web? Il web design riguarda la creazione di un’opera d’arte funzionale, ma da dove inizi? Se ti stai chiedendo cosa devi sapere prima di iniziare, questa guida ti aiuterà.
Scegli qualcosa di semplice per il design del tuo primo sito
Sembra un gioco da ragazzi, giusto? Ma a volte possiamo diventare eccessivamente ambiziosi e finire per scoraggiarci. Per il tuo primo progetto, è una buona idea scegliere qualcosa di semplice e divertente. Un sito di e-commerce è più complicato e sarebbe meglio affrontarlo una volta che hai più esperienza.
Un blog è un ottimo punto di partenza. Sarà un buon esercizio di progettazione e imparerai come funziona un sistema di gestione dei contenuti (CMS), che sarà importante sapere per i progetti futuri del sito. La cosa migliore è che non devi ricominciare da capo. Ci sono molti modelli di blog che ne facilitano la creazione.
I modelli sono un prezioso strumento di apprendimento. Guardare come gli elementi HTML, CSS e Javascript sono disegnati e si uniscono ti darà una visione più approfondita di ciò che fa funzionare un design. Puoi utilizzare i modelli come base per apportare modifiche e personalizzazioni.
Forse non vuoi aprire un blog: prova a prendere spunto dalle tue attività creative o dai tuoi hobby. Che ne dici di costruire una vetrina per le tue abilità fotografiche o per la tua raccolta di racconti? Creare un design per caratterizzare una tua passione rende il primo progetto divertente.
Trova l’ispirazione da altri designer
Senza dubbio ti sei imbattuto in siti Web che ti hanno entusiasmato con il loro design straordinario.
Crea un documento di ispirazione con collegamenti ai siti che ami o aggiungili ai preferiti mentre procedi. Pinterest è un ottimo posto per trovare un ottimo design del sito: puoi trovare e appuntare illustrazioni, copertine di libri, poster, blog e altri tipi di lavori di progettazione a cui fare riferimento. I designer usano il termine “mood board” per queste collezioni. I moodboard sono una risorsa di riferimento rapido se ti trovi in difficoltà.
Al di fuori delle scoperte che fai da solo, ci sono alcune collezioni curate che dovresti controllare.
- Awwwards ha sempre un lavoro nuovo e fresco e una varietà di collezioni a tema
- Behance è una fantastica raccolta di lavori di progettazione di siti Web, in cui l’attenzione è rivolta alla qualità e alla creatività
- Dribbble si concentra sui singoli designer, fornendo un forum per ottenere feedback e comunicare con gli altri sul loro lavoro
E, naturalmente, vai alla vetrina Webflow . Ci sono così tante cose interessanti da controllare e così tanti modelli disponibili da clonare.
Cerca fonti di ispirazione fuori dal web
Sviluppa un occhio per riconoscere un buon design e inizia ad analizzare perché qualcosa funziona o non funziona, qualunque sia il mezzo.
Presta attenzione alla tipografia
Spesso leggiamo senza nemmeno essere a conoscenza dei caratteri tipografici. Presta attenzione al tipo di effetto che ha quando consumi i contenuti. Quel carattere nel menu è leggibile? Cosa fa funzionare così bene quell’insegna scritta a mano per l’azienda locale? Le lettere sono ovunque. Prendi nota degli usi buoni e cattivi della tipografia.
Typewolf è un’ottima risorsa per tenere sotto controllo i caratteri più diffusi. Ha un sacco di elenchi da esplorare, un sito in primo piano del giorno e lookbook con combinazioni di caratteri spettacolari. È utile vedere esempi reali di tipografia in uso e siti Web come Typewolf sono un ottimo posto per vedere le loro applicazioni pratiche. Acquisire familiarità con diversi tipi di carattere ti aiuterà a scegliere il tipo giusto per la progettazione del tuo primo sito.
Lascia che le belle arti ti influenzino
Oh, abbiamo detto che c’è un’intera storia dell’arte da cui attingere? Tanti movimenti e artisti modellano ancora oggi il lavoro dei creativi, in particolare i web designer. Fai una passeggiata su questo sito web e troverai un design unico. Scoprirai molte realizzazioni artistiche monumentali. Non solo è pieno di informazioni preziose, è un eccellente esempio di come il contenuto e l’arte possono unirsi per raccontare una storia.
Imparare la storia dell’arte amplierà ulteriormente la tua conoscenza del design.
Ricerca diversi tipi di design
Ci sono così tante discipline del design con cui avere familiarità. Una conoscenza del design del prodotto, dell’illustrazione e persino del marchio può sviluppare ulteriormente i tuoi sensi creativi.
Per l’ispirazione che va oltre il web design, Abduzeedo offre brillanti esempi. Che si tratti di poster art, valigie o mobili, vedrai fantastici esempi di design fatto bene. Sii aperto a diversi tipi di design e cerca attivamente l’ispirazione . Più conoscenze hai, più facile sarà progettare il tuo primo sito web . L’istruzione informa l’intuizione.
Prepara i contenuti prima di iniziare
Mettere i contenuti al primo posto significa avere dei contenuti pronti per lavorare prima di iniziare a progettare il tuo primo sito web.
Progettare con contenuti reali ti offre una migliore rappresentazione di come apparirà e funzionerà il sito web. Ti dà anche l’opportunità di apportare modifiche nelle prime fasi del processo di progettazione.
Mantieni il tuo design semplice e intuitivo
Che si tratti di scrittura, navigazione o CTA, nessuno vuole lottare con il tuo design.
Il tuo approccio al design dovrebbe essere radicato nella semplicità e nell’ordine. La logica dovrebbe guidare qualcuno attraverso il sito con facilità.
Comprendere le basi dell’esperienza utente (UX)
Un sito web è più di un semplice testo fluttuante nello spazio. La combinazione di colori, il contenuto, la tipografia, il layout e le immagini si uniscono per servire il tuo pubblico e suscitare emozioni. Qualcuno che vaga per lo spazio digitale che hai creato dovrebbe avere un percorso chiaro e privo di ostacoli.
L’UX si concentra sulla comprensione del tuo pubblico. Cosa stanno cercando e in che modo il tuo design renderà facile trovarlo? UX significa entrare nella testa del tuo pubblico e vedere il tuo design attraverso i loro occhi.
Quando crei il tuo primo sito web, tieni presenti questi principi guida UX:
- Rendi le cose semplici e intuitive
- Comunica i concetti in una successione logica
- Soddisfa le esigenze del tuo pubblico e resisti alla tentazione di mostrare le tue abilità a scapito dell’usabilità
Imparare a conoscere il tuo pubblico ti aiuterà a creare un design su misura per i suoi desideri e bisogni.
Comprendere le basi dell’interfaccia utente (UI)
Se sei nuovo nel web design, potresti essere confuso dalla differenza tra UI e UX . La maggior parte di noi lo era. Sappi questo: sono due concetti distinti.
Laddove l’UX riguarda l’aspetto generale di un design, l’interfaccia utente riguarda le specifiche. Se fossi in un ascensore, l’interfaccia utente sarebbe la dimensione e la disposizione dei pulsanti del pavimento, mentre la UX comprenderebbe i colori, le trame e altre scelte di interior design dello spazio dell’ascensore. L’interfaccia utente consiste nel fornire a qualcuno gli strumenti di cui ha bisogno per sperimentare il tuo sito web senza complicazioni.
Quando crei il tuo primo sito web, tieni presenti questi principi dell’interfaccia utente:
- La funzionalità degli elementi interattivi dovrebbe essere ovvia
- L’uniformità deve guidare l’usabilità: le azioni dovrebbero seguire schemi logici
- Le scelte progettuali dovrebbero essere fatte con uno scopo chiaro
Usa i principi del design per guidare il tuo processo di web design per principianti
Un design efficace è guidato da determinate regole ed è importante comprendere le competenze essenziali del web design prima di iniziare. Esistono pratiche standard che semplificheranno il processo e renderanno il prodotto finale più raffinato.
disposizione
Se vuoi progettare e costruire siti web, capire un buon layout è fondamentale. Suggeriamo di mantenere le cose minime e di lavorare con pochi elementi per concentrarsi sul posizionamento perfetto.
Quando inizi a progettare per la prima volta, pensa alle griglie. Le griglie allineano gli elementi, come i blocchi div e le immagini su una pagina web, in un modo che crea ordine.
La struttura di un layout dovrebbe seguire una gerarchia visiva. Quali sono le idee importanti che vuoi che le persone vedano e in quale ordine? La gerarchia visiva deve aderire ai modelli comuni che le persone usano durante la lettura. Ci sono due percorsi che gli occhi delle persone seguono generalmente sul web: il modello F e il modello Z. Avere familiarità con il funzionamento di questi modelli ti aiuterà a organizzare i tuoi contenuti.
Il modello F è più comune per i progetti con densi blocchi di contenuto. Gli occhi delle persone scansioneranno il lato sinistro di un layout finché le cose non cattureranno la loro attenzione e quindi leggeranno da sinistra a destra. Immagina di guardare il menu di un ristorante: potresti saltare i nomi in grassetto dei piatti allineati a sinistra fino a quando non arrivi a qualcosa che ti afferra, che ti chiederà di leggere i dettagli di supporto che spiegano quel piatto specifico.
La maggior parte delle persone leggerà qualcosa come un post sul blog in questo modello F. Con il testo allineato a sinistra e le frasi puntate, Nelson Abalos sfrutta questa tecnica di progettazione, rendendo i suoi post facili da navigare e seguire.
Il modello Z è associato a un design meno pesante di testo. Molte pagine di destinazione sono conformi a questo modello. Tutti gli elementi principali sul sito Conversatio-guide aderiscono al modello Z. Se sei un web designer principiante, questo è un semplice trucco di layout per aiutare l’usabilità.
Colore
Hai a disposizione i colori dell’arcobaleno e oltre. E sappiamo tutti che “da un grande potere derivano grandi responsabilità”. Il potere del selettore di colori può essere esercitato nel bene o nel male.
Ecco un paio di approcci semplici nella scelta di una combinazione di colori per il tuo primo sito web.
Monocromo
Usa un unico colore come base, varia la quantità di saturazione, includi luci e ombre e gioca con varie tonalità per uno schema di colori uniforme. Indipendentemente dalla tua nicchia, un sito monocromatico è una scelta di design intelligente. E ricorda, qualunque sia il colore scelto per il testo, assicurati di essere attento alla leggibilità .
In questo esempio di Unique , ogni sezione è delineata da uno schema di colori monocromatici. Non devi avere questa fantasia nei tuoi progetti per principianti, ma è bello vedere il loro uso di diverse variazioni di colore monocromatiche. Notate come ogni sezione è composta dai colori relativi alle borse presenti? Questo è un bel trucco di design che crea una combinazione di colori armoniosa.
Complementare
Prendi i colori opposti sulla ruota dei colori e combinali. Abbastanza facile, vero?
Usa i colori complementari con cura. In questo disegno qui sotto dal sito web Ignisis , il designer ha utilizzato il blu e l’arancione in diverse combinazioni insieme a spazi bianchi e grigi per un layout che non stanca mai gli occhi. Il contrasto è nitido e rinfrescante.
Tipografia
La tipografia è un’architettura bidimensionale, basata sull’esperienza e sull’immaginazione, guidata da regole e leggibilità.
-Hermann Zapf
Allora quali sono le regole che tu, designer neofita, devi conoscere?
La tipografia informa il tono
Pensa a un invito a nozze o all’annuncio di un funerale. Entrambi sono eventi della vita profondi: uno una celebrazione gioiosa e l’altro tipicamente più cupo. Dove un carattere tipografico fiorito ornato funziona bene per un matrimonio, non è adatto per un funerale.
Quando progetti il tuo primo sito web, tieni presente il tono. Se stai cercando un’atmosfera spensierata, come un blog di cucina, ha senso tessere caratteri giocosi. Ma se stai realizzando un sito web per uno studio legale, attieniti a caratteri tipografici più professionali.
Serif contro non serif
Un errore comune dei nuovi designer è quello di mescolare i caratteri serif e non serif. Puoi distinguerli perché le estremità delle lettere serif hanno una linea o un tratto extra aggiunto verticalmente o orizzontalmente.
Controlla le differenze tra PT Serif e PT Sans (senza il serif).
Ecco PT Serif:
Ed ecco PT Sans:
I serif sono un artefatto dei tempi delle macchine da stampa, quando la maggior parte delle parole che leggevamo erano stampate con inchiostro su carta. I serif ancoravano le parole alla pagina e le rendevano più facili da leggere. Nei primi giorni del web, i serif venivano evitati dai web designer perché risoluzioni dello schermo inferiori li diluivano. Ora che gli schermi sono ottimizzati meglio per la tipografia con serif, sono tornati.
Quelle piccole linee fanno un’enorme differenza. Noterai che il carattere tipografico PT Serif sopra sembra più formale e la versione sans-serif sembra più leggera e più ampia.
Poiché i caratteri serif sono più complicati, è meglio usarli con moderazione. Le intestazioni sono il luogo ideale per i caratteri serif e blocchi di contenuto più grandi beneficiano di un carattere più semplificato senza serif.
Ornamento contro praticità
I loop e le spirali di un font fiorito aggiungeranno personalità ed eleganza a un design, ma non abusare di questi font . Un sito web riguarda la comunicazione a un pubblico attraverso il contenuto. Come ha detto Hermann Zapf, la leggibilità è una delle caratteristiche più importanti di un carattere.
Tecnicità tipografica
C’è molto da imparare con la tipografia. Man mano che progredisci come designer, dovrai sapere come utilizzare l’altezza della linea, la crenatura e diversi pesi nella tua tipografia. Ma non farti prendere troppo dal modificare tutte le complessità per il tuo primo sito. Concentrati sull’assicurarti che tutto sia leggibile: puoi sperimentare la messa a punto dei dettagli in un secondo momento.
Dai un’occhiata a ” Web Typography 101 ” per saperne di più sulla tipografia e su come può essere disegnata.
Inizia a progettare
Tutorial e ricerche sono inestimabili per il tuo apprendimento, ma alla fine dovrai solo approfondire e iniziare a progettare. Anche se crei qualcosa che nessuno vedrà mai, è comunque un esercizio per risolvere i problemi e applicare ciò che hai imparato. Non preoccuparti se non è sorprendente. Ma sii orgoglioso di aver varcato quella soglia da aspirante designer a esserlo davvero: sei sulla buona strada!
Ottieni feedback
Hai finito il tuo primo progetto – congratulazioni! Hai lavorato sodo e sei pronto a mostrarlo al mondo. Ma prima di pubblicare, ottieni una prospettiva esterna su ciò che hai fatto.
Ricevere critiche costruttive può essere scomodo. Creare qualcosa, che si tratti di un saggio, di un dipinto o di un sito web, è un atto di vulnerabilità. Le cose che metti nel mondo sono un’estensione di ciò che sei e di ciò di cui sei capace. Sentirsi dire quello che hai fatto potrebbe essere migliore o sbagliato potrebbe sembrare un attacco personale.
Nel web design, il feedback è una parte normale e necessaria del processo. Impara come mettere da parte il tuo ego e separare il feedback dalla tua autostima. Man mano che acquisisci esperienza, sarai in grado di identificare e implementare feedback pratici e utili e lasciare andare il resto. Scoprirai che i designer più esperti sanno cosa vuol dire essere un principiante: sono entusiasti di vedere i designer meno esperti avere successo.
Condividi il tuo lavoro nella vetrina Webflow o richiedi aiuto nel forum di progettazione di Webflow . Man mano che avanzi , ti consigliamo di sottometterti a luoghi come Dribbble e Behance per avere più occhi sul tuo lavoro. Non solo riceverai critiche costruttive, ma riceverai feedback su ciò che stai facendo bene, il che è sempre fantastico.
Se sei una web designer contattami per sviluppare i tuoi progetti.
Se hai domande prima di immergerti nel tuo primo progetto, pubblicale nei commenti qui sotto. Siamo qui per aiutare.
