Cosa si intende con (buon) web design?

Progettare un sito web

Indice

  1. Lo sviluppo del design web
  2. Principi di web design
  3. Le migliori pratiche di web design
  4. Tendenze nel web design

1. Sviluppo del design web

La bellezza sta negli occhi di chi guarda.

L’aspetto dei siti web si è evoluto negli ultimi 30 anni. Ricordi la fine degli anni ’90 e le prime pagine del millennio? Sono finiti i tempi di quando dovevi collegarti ad Internet con accesso telefonico per ottenere una connessione che ti consentisse di leggere le notizie o accedere a Myspace. Stili squadrati, colori sgargianti, caratteri limitati e nessun posizionamento chiaro del testo hanno reso questi primi siti simili a collage di documenti Word e foto attaccati a una bacheca.

Webdesign agli inizi

Webdesign nel passato

Nel 1991, dietro le sacre porte del CERN, nasceva la prima homepage in assoluto. Ci ha accolto con un semplice testo su sfondo bianco. I siti web dei primi anni ’90 erano basati sulla funzione, ma aprivano anche opportunità per far emergere qualcos’altro: il Web Design.

Il web design comprende ciò che un visitatore vede e con cui interagisce su un sito web. Nei primi anni 2000, gli elementi principali di un sito Web includevano la barra di navigazione con schede per le sottopagine, i titoli delle pagine e un logo. La pagina iniziale veniva spesso nominata come prima pagina per mostrare al visitatore che era atterrato sulla pagina principale. Il primordiale web design era basato su tabelle, descrittivo e incentrato sul testo. Rappresenta il “web di sola lettura” noto come Web 1.0.

Negli ultimi 14 anni, tra Web 3.0 e Web 4.0, stiamo ancora utilizzando il Web 2.0; concentrandosi su guardare, leggere e scrivere.

Schema dello sviluppo di Internet nel tempo

Il Web 3.0 fa un ulteriore passo avanti, consentendo l’esecuzione. Ciò significa che un visitatore può interagire con un sito Web come un programma o un’applicazione. In questo momento, il web si sta spostando verso un web simbiotico (Web 4.0) che consente un’interazione personalizzata e di autoapprendimento dell’utente con siti web, app e piattaforme. Insieme al Web 2.0 e al crescente utilizzo di dispositivi mobili, è arrivato il web design responsivo.

Web design responsivo

Quando il tuo sito web adatta automaticamente il suo aspetto a tutte le dimensioni dello schermo di tutti i dispositivi, è un web design reattivo. Consente alla composizione tipografica e al flusso del testo di passare da uno schermo ampio con meno interruzioni di riga a uno schermo stretto e un testo con molte interruzioni di riga. Le foto in formato orizzontale vengono adattate al formato verticale senza perdere qualità o significato.

Per descrivere il comportamento del web design reattivo, immagina che tutti gli elementi del tuo sito web siano disposti come pezzi degli scacchi su un tavolo da gioco flessibile. Il tabellone può essere schiacciato e allungato in qualsiasi momento a qualsiasi dimensione rettangolare mentre i pezzi si spostano nelle nuove posizioni relative ai cambiamenti nelle dimensioni del tabellone.

Su Webnode, tutti i nostri modelli di siti Web sono automaticamente programmati come responsivi. L’editor del sito web formatta automaticamente il testo in modo che fluisca correttamente, senza la necessità di implementare interruzioni di riga aggiuntive.

Design con priorità mobile (mobile first)

Questo va di pari passo con il design responsivo. Piuttosto che progettare un sito Web tradizionalmente, con le versioni desktop e laptop progettate per prime, i siti Web di progettati mobile first vengono adattati alle versioni desktop e laptop dopo la creazione delle versioni mobili. Le persone che hanno utilizzato il proprio dispositivo mobile per visitare siti Web hanno raggiunto i 4,3 miliardi a livello globale nell’ottobre 2020, numeri in continua crescita.

Google dà già la priorità al web design mobile friendly. Il design mobile first non è solo design responsivo, ma incorpora anche una struttura e una navigazione semplici e una velocità di caricamento rapida. Quest’ultimo è uno degli elementi più importanti del web design moderno, ne parleremo meglio nella sezione successiva.

2. Principi di web design

Stili

Lo stile di un sito web è fondamentale, ne fornisce la struttura. Descrive come gli elementi di un sito sono posizionati l’uno rispetto all’altro. Gli ingredienti più importanti che compongono lo stile sono:

  • barra di navigazione
  • intestazione (con intestazioni e logo opzionali)
  • piè di pagina
  • (opzionale) sezioni

Principali elementi di un sito web, esempio di barra di navigazione. intestazione e piè di pagina

Questi elementi sono disposti rispetto alla barra di navigazione in un cosiddetto stile standard. Ci sono 4 tipi di stili standard. Una barra di navigazione in alto o a sinistra è la più comune. Webnode ti fornisce modelli che soddisfano tutti gli stili standard.

Esempi di barre di navigazione

Partendo da in alto a sinistra: tre lineette (hamburger), barra di navigazione in alto, barra di navigazione in basso e barra di navigazione a sinistra

Non importa quale modello hai selezionato, puoi sempre cambiare tra questi stili standard in seguito.

Sebbene la barra di navigazione sia ancora posizionata nella parte superiore di oltre l’80% di tutti i siti Web, la flessibilità sta crescendo. Il posizionamento pulito di un pulsante hamburger (tre linee orizzontali in grassetto) nell’angolo in alto a destra, aprendo tutte le altre pagine in un menu a discesa, è un approccio più moderno, oltre a posizionare la navigazione in basso al centro delle pagine.

Di solito, il piè di pagina del sito Web è riservato a informazioni legali, disclaimer, contatti sui social media e altri collegamenti. Mezzo mondo visualizza le informazioni di contatto a destra della barra di navigazione. Questo è il motivo per cui i modelli di siti Web contengono già uno spazio nel menu di navigazione per la pagina dei contatti.

Mentre i nostri occhi si spostano da sinistra a destra, qualunque cosa sia posizionata sul lato destro attirerà più attenzione. Proprio come nei primi tempi, oggi consideriamo i loghi che si trovano in alto a sinistra come una pratica standard o ce li aspettiamo almeno nella sezione centrale in alto.

L’idea alla base dello stile standard è quella di fornire al visitatore una panoramica completa. Tutti gli elementi di una pagina hanno uno spazio dedicato, allontanandosi dallo stile utilizzato nella progettazione dei primi siti Web che assomigliava a un motivo patchwork.

Disposizione

Il layout descrive lo spazio che i principali elementi di un sito Web dovrebbero occupare sullo schermo.

Possono essere posizionati al centro con bordi o occupare l’intero schermo. Come un’intestazione in un documento word con spazi larghi o stretti tra le parole posizionate al centro o a sinistra.

Design a colonna singola

Il contenuto di una pagina è disposto in un’unica colonna che occupa la maggior parte dello schermo. Per la sua semplicità, è il tipo di layout più comunemente usato.

È particolarmente adatto per la visualizzazione di contenuti su dispositivi mobili. Questo lo rende molto popolare nel web design contemporaneo.

Design a colonna singola

Design a schermo diviso

A volte è necessario presentare più di un contenuto di uguale o simile importanza uno accanto all’altro.

Molto comune in questo layout è completare una casella di testo con un’immagine o dividere il testo in colonne. Altrettanto bene funzionano due immagini con una casella di testo in alto o in basso per dividere lo schermo.

È possibile ottenere variazioni di questo tipo di layout dividendo lo schermo in diversi rapporti, ad esempio 50:50.

Spesso possiamo vedere questo tipo di layout nei negozi online in cui le informazioni sono importanti quanto l’immagine stessa del prodotto.

Design a schermo diviso

Design a griglia o a schede

Questo tipo di design è diventato popolare con siti come Pinterest, Facebook o Twitter.

Il design a schede ricorda le carte disposte in file su un tavolo. Le carte sono immagini o simboli con didascalie di testo brevi che conducono il lettore a pagine più dettagliate con un clic.

L’immagine facilita l’identificazione dei diversi contenuti di una pagina. Rende la navigazione e la selezione delle informazioni più accessibile e piacevole.

Esempio di design a schede

Design a schede o a griglia

Esistono due tipi di layout a griglia:

  • basato su schede della stessa dimensione di una griglia quadrata
  • basato su schede di diverse dimensioni, in modo che le righe della griglia varino in altezza

“Sopra la piega” e “sotto la piega”

Una volta aperto un sito Web su uno schermo, vediamo la barra di navigazione, l’immagine principale dell’intestazione, un titolo e forse del testo introduttivo. Se vogliamo vedere di più, dobbiamo scorrere verso il basso.

Ciò che vediamo da un sito Web senza scorrere verso il basso viene definito “above the fold”, o “sopra la piega”. Tutto il resto è “under the fold” o “sotto la piega”. Il web design contemporaneo mette gli elementi più importanti sopra la piega.

Per catturare l’attenzione di un visitatore, posiziona gli elementi migliori e importanti di ciascuna delle pagine del tuo sito Web in alto in modo che siano visibili senza scorrere.

Gli stili e il layout standard danno un aspetto al sito web, ma il vero design deve anche essere pratico. Ci piace trovare rapidamente ciò che cerchiamo e presentarlo in modo facile e veloce. Pertanto, un buon web design significa funzionalità. I principali fattori che migliorano il web design sono:

Elementi di potenziamento SEO

Questi sono campi nell’editor del sito web per definire i termini rilevanti per il motore di ricerca, come:

  • meta descrizione
  • nome della pagina
  • indirizzo web o URL
  • utilizzo delle parole chiave nel testo e nei titoli

Google dà la priorità ai titoli all’interno del testo scritto sul sito web, dando la massima priorità ai titoli principali classificati come H1.

I moderni creatori di siti web definiscono già la funzione dei tipi di intestazione nella programmazione del codice, così fa anche Webnode.

Tutte le intestazioni sono codificate automaticamente come H1, quindi devi solo preoccuparti di quali parole usare.

Velocità

Questo va di pari passo con la facilità d’uso. Google ha cambiato il suo algoritmo nel gennaio 2021 per classificare i siti Web con una velocità di caricamento ottimizzata superiore a quelli che si caricano più lentamente.

I siti Web di Webnode sono semplici. Sono codificati in modo tale da raggiungere automaticamente una velocità massima di caricamento su tutti i dispositivi, purché le dimensioni delle immagini caricate personali siano tenute sotto controllo.

Facilità di utilizzo

Si riferisce a come siano strutturate le pagine all’interno del sito Web e quanto sia intuitiva la navigazione.

I modelli di Webnode enfatizzano una navigazione chiara e semplice, limitata nel numero di schede. Le sottopagine sono limitate a un massimo di 3 per raggiungere tutte le pagine e il loro contenuto più velocemente.

Inoltre, il percorso delle sottopagine è costruito in modo breve per rendere l’indirizzo web facile da leggere e ricordare. I percorsi lunghi con diversi trattini che riempiono la barra degli indirizzi del browser sono obsoleti.

Non importa se la tua pagina è una sottopagina di una sottopagina, l’indirizzo web della tua galleria verrà comunque mostrato come “ilmiosito.it/galleria”. L’obiettivo è che un minimo di clic porti il ​​lettore al contenuto desiderato.

3. Le migliori pratiche di web design

Un modello di sito web di un website builder ti fornisce una struttura di stile e funzioni per il tuo sito. Le immagini, i caratteri e i colori preselezionati sono un’ispirazione per come può apparire il tuo sito web aziendale. Il template è fondamentale, ma cosa lo rende un buon sito web?

Sta a te personalizzare il tuo sito. Qui ti mostriamo come strutturare il tuo sito per migliorarne il design.

Branding e webdesign

Questa è un’accoppiata vincente.

Pensa al tuo marchio, alla tua missione, all’obiettivo o alle intenzioni dell’azienda. I tuoi “cosa” e “perché” idealmente sono migliorati dal tuo design. Questo ti renderà unico, fedele a te stesso e autentico. Se vendi caramelle, osa con i colori. Vale la pena indagare sul potere dei colori, poiché trascendono i messaggi dipendenti dalla cultura. Trova i colori in armonia con il tuo marchio e la tua composizione e sii coerente con essi.

Composizione

Questa descrive lo sfondo delle tue pagine o degli elementi di testo. Non è necessario che sia bianco. Non è necessario che sia monocromatico. Può essere l’immagine di un paesaggio, un’acqua che scorre animata o solo un motivo. Nel CMS di Webnode hai una serie di diverse composizioni tra cui scegliere per i tuoi sfondi, e puoi sempre caricare le tue immagini.

Struttura ed orientamento

Rivela le pagine del tuo sito web come un menu italiano di 5 portate. Lascia che la pasta sia la tua pagina iniziale. Riduci le informazioni sulle pagine principali della gerarchia. Nascondi le pagine con informazioni dettagliate e collegale a quelle più in alto nella gerarchia.

Puoi visualizzare ciascuna delle pagine principali come un poster. Sii breve per aumentare l’interesse. Un’opzione per dare più struttura al tuo sito potrebbe essere l’aggiunta di una griglia di immagini seguendo il design a schede. Ogni immagine mostra un argomento o un servizio, che rimanda a pagine più dettagliate. In questo modo lasci il controllo ai tuoi visitatori e rendi la tua pagina interattiva.

Suddivisione in sezioni

Lascia che le sezioni guidino i tuoi visitatori. Nella prima sezione di una pagina più dettagliata che presenta il tuo personale potresti, ad esempio, iniziare con una breve storia di come tutto è cominciato. Successivamente, potresti portare il lettore a maggiori dettagli, ad es. traguardi aziendali, presentare i dipendenti chiave e così via.

Meno è meglio. Questo si riferisce a tutto il contenuto di una singola pagina, come la lunghezza del testo, il numero di sfondi, caratteri e colori variabili. I titoli non sono più un must nell’intestazione di una pagina, lascia che l’immagine parli da sola.

Dai ai tuoi lettori un po’ di tregua. Lo spazio bianco o spazio vuoto su una pagina, noto anche come spazio negativo, darà una pausa all’occhio. Questo spazio si presenta come una cornice bianca o colorata sottile, spazio tra le sezioni di una pagina. In questo modo il cervello recepisce il messaggio; come quando oggi ti alzi e ti allunghi per andare a prendere il tuo quinto caffè. Usa lo spazio negativo. Non è necessario che sia bianco, può essere il tuo sfondo strutturato.

Evita di confondere e sopraffare il visitatore dando struttura al tuo contenuto attraverso la geometria.

La regola dei terzi

Questa regola ha origine dalle belle arti e descrive il rapporto tra gli spazi in cui sono abbozzati i tratti. Dividi ciascun lato in terzi uguali di una pagina. Le linee che si intersecano sono le linee guida da seguire per gli occhi e dove si posiziona strategicamente un oggetto.

“La passeggiata sulla scogliera a Pourville” di Monet mostra due donne che guardano il mare della Normandia. Sono in piedi sul lato destro centrale con un perfetto cielo nuvoloso nel terzo superiore del dipinto.

La passeggiata sulla scogliera a Pourville (1882) di Claude Monet (Art Institute of Chicago)

La passeggiata sulla scogliera a Pourville (1882) di Claude Monet (Art Institute of Chicago) è l’esempio perfetto di come si applichi la regola dei terzi

Non è un caso che tali immagini siano equilibrate e di facile comprensione.

Concentrati sul collocare le tue informazioni più importanti in un terzo della pagina e bilancia il lato opposto con qualcosa di meno intenso ma complementare.

Regola dei terzi nell'editor Webnode

Esempio di regola dei terzi, la griglia indica le nove possibili aree dove si può collocare un oggetto.

Fortunatamente, l’editor di Webnode ti aiuta a posizionare i tuoi contenuti all’interno di una singola sezione permettendoti di scegliere il settore dei nove possibili posizionamenti quando applichi la regola dei terzi.

La coerenza è la chiave

Questo riguarda tutti gli aspetti, come il colore, la trama e i caratteri che scegli, la quantità di informazioni che desideri visualizzare e i tuoi argomenti. Ricorda, rendilo semplice e dai al lettore un argomento per pagina. Non di più.

Ad esempio, se hai un’azienda di falegnameria e vuoi presentare storie e suggerimenti relativi alla vita nella carpenteria, nessuno ha bisogno di vedere le foto dell’ultima serata fuori della compagnia. Invece, includi i video dei tuoi clienti che hanno provato il tuo prodotto o le tue dimostrazioni video. Sii un po’ creativo, ma sii coerente.

Design da evitare

Cos’è il buono senza il brutto e il cattivo? Questi erano “a la mode” qualche anno fa, ma sono sempre più evitati, come le faccende domestiche:

  • cursori
  • presentazioni
  • banners
  • carosello immagini
  • (troppo) contenuto sotto la piega

Il recente cambiamento per abbandonare queste funzioni fa parte della tendenza globale a semplificare, minimizzare e chiarire. Sottoporre i visitatori del tuo sito ad una presentazione introduttiva nella pagina iniziale o uno slideshow che visualizzi un’intera galleria è troppo da assorbire tutto assieme. I banner erano utilizzati quando i mezzi di pubblicità online erano limitati. Oggi la pubblicità avviene sulle piattaforme dei social media, con annunci video.

Negli ultimi decenni, la quantità di informazioni a nostra disposizione è cresciuta in modo esponenziale. Navighiamo e scorriamo, scorriamo e clicchiamo nei motori di ricerca, sui siti web, sui social media e sulle app. Abbiamo molti input da digerire. Riduci il carico.

Tenendo a mente le pratiche migliori, sottolineiamo questi ulteriori 6 tabù:

  • Troppo testo
  • Nessuna guida per il movimento dell’occhio
  • Cattiva qualità delle immagini
  • Struttura caotica tra le pagine
  • Monotono, senza contrasto tra gli elementi
  • Sfondi font e colori disarmonici

Hai l’essenziale per migliorare il design del tuo sito web, passiamo alle tendenze del web design da seguire nel 2021 e oltre, che lasceranno i visitatori del sito ancora più a bocca aperta.

4. Tendenze nel web design

Il web design oggi ha i seguenti scopi:

Rendere la visita di un sito Web coinvolgente, divertente e interattiva.

Inoltre, ci piace avere il controllo durante la navigazione tra le pagine e allo stesso tempo imparare e trovare qualcosa di pregevole.

Semplicità

Questa è regina. Il design piatto è una forma di minimalismo nel web design, che dà a ogni elemento più spazio e sfondo.

Mostra tutto con colori chiari e armoniosi. L’intensità dei caratteri, delle linee e degli sfondi del testo è più luminosa, più nitida e altamente definita. Pensa a Mies Van de Rohe e all’architettura aperta, ampia e leggera in stile Bauhaus degli anni ’20 e ’30.

3D

Oltre alle forme semplici, sono emersi gli effetti 3D. Il neomorfismo è un tipo di design che conferisce alle forme, come pulsanti e icone, sfumature per esaltarne i contorni. Crea un rilievo che eleva la forma rispetto al suo sfondo o viceversa.

Esempio di neomorfismo

Esempio di neomorfismo

Webnode incorpora tali sfumature dando la possibilità di aggiungere un bordo decorativo alle sezioni se desideri migliorare i tuoi contenuti e gli effetti di ombreggiatura per sollevare i pulsanti.

Bordi decorativi e effetti di ombreggio

Scuro o sfumato

Per quanto riguarda lo sfondo, predominerà il design scuro insieme ai colori sfumati. Le tonalità tenui che vanno dal chiaro allo scuro, i colori a contrasto o complementari e gli sfondi scuri sono più facili per i nostri occhi e rendono più sopportabile il nostro tempo sullo schermo in costante aumento.

Web design narrativo

Non è solo la parte visiva di un sito che lo renderà interessante. È anche la storia dietro le immagini. I creatori di siti web usano illustrazioni, mimi e meme per raccontare una storia.

Perché non raccontare la tua storia aziendale su come sei diventato uno chef, un falegname, un parrucchiere, un artigiano o un meccanico utilizzando la storia della vita di un personaggio eroe con immagini giocose?

Probabilmente hai già incontrato la gente senza volto con colori tenui sulle nostre pagine e post sui social media che ti parlano di una nuova caratteristica o funzione.

Meme ed emoji non sono più limitati ai social media e alle chat. Ci fanno vedere le cose con leggerezza, con un senso dell’umorismo e fanno capire il punto. I siti web si fondono quindi in modo più armonioso con ciò che viene presentato sui loro equivalenti dei social media.

Sezioni di testo semplici e combinazioni di colori accattivanti non sono più all’altezza. Ci piace essere catapultati nell’infanzia quando sfogliavamo il nostro fumetto o libro di fiabe preferito. Borchure, riviste intrattengono e portano idee. Un sito web non è un tomo di Goethe. Facilità e divertimento sono di primaria importanza.

Robot umani

Questi sono i piccoli aiutanti per il tuo sito per interagire con i tuoi visitatori in tempo reale. Anche tu potresti aver chiuso quella bolla con un chatbot, pensando scettico che tale automatizzazione sia impersonale. Tieni presente che questi robot sono programmati dagli umani. Hanno le tue preoccupazioni e le tue domande in mente. Inoltre, i programmi di chat bot consentono l’esecuzione automatica solo di un numero specifico di domande preprogrammate. L’interazione rimanente è diretta da un agente umano dell’assistenza clienti, che ti risponde istantaneamente e ti guida o ti aiuta con quello che sarà il tuo miglior acquisto

Webdesign interattivo

Qualsiasi sito web che crei un’interazione con il visitatore, sia attraverso un bot, un sondaggio, un quiz o un modulo, utilizza il web design interattivo. La vera interazione va oltre, facendo sentire il visitatore più in controllo. Sanno dove ottenere una navigazione intuitiva. Possono porre domande in qualsiasi momento o fornire feedback.

L’obiettivo è rendere l’interazione con il sito molto più fluida e allo stesso tempo più avanzata. Si va dall’analisi del percorso di un visitatore dall’apertura della pagina di destinazione, all’acquisto di un prodotto con programmi come Smartlook e Hotjar, all’inclusione dell’uso di robot umani e funzionalità simili ad app nel sito.

Dal punto di vista del marketing, il web design interattivo ha il solo scopo di avere invitare all’azione e di effettuare una conversione. L’invito all’azione facilita una conversione e quindi il pulsante per accedere a questa pagina specifica apre un modulo per l’iscrizione.

Stili non convenzionali

In un senso più ampio, il web design interattivo sta anche sfidando alcune idee nuove e non convenzionali sugli stili standard dei siti web. Ricordi, abbiamo parlato di scorrimento sotto e sopra la linea di piega? Il nuovo web design offre la possibilità di creare siti web con scrolling non tradizionale. Qui il movimento è come uno swipe; È diretto lateralmente anziché dall’alto verso il basso.

Il web design diagonale è l’altra tendenza in aumento che incorpora forme diagonali sullo sfondo per guidare l’utente da sinistra a destra e/o aiutare a scorrere in basso verso i punti di interesse. Ad esempio, una linea diagonale porta a un pulsante desiderato per incoraggiare un’azione.

Ti abbiamo presentato i principi del web design e ti abbiamo mostrato cosa puoi fare per migliorare il design dei tuoi siti web. Abbiamo anche fornito uno sguardo al futuro in modo che tu possa vedere cosa sta succedendo.

Hai già implementato alcuni dei principi di cui abbiamo parlato? Qual è la tua tendenza preferita da seguire?