5 siti per un web design migliore

La pagina bianca è il momento più difficile di un progetto.

Il cliente vuole un sito "moderno, pulito, che si distingua". Tre aggettivi che possono voler dire cento cose diverse.

Prima di aprire un programma di design, conviene fare quello che fa chiunque progetti qualcosa: guardare come altri hanno risolto lo stesso problema. Non per copiare, ma per capire cosa funziona e perché.

In questa guida trovi 5 siti di riferimento, ognuno utile in un momento diverso del lavoro.

01. Curated: trovare lo stile prima di iniziare

Curated è una raccolta di siti reali, scelti uno per uno: oggi sono quasi 3.000. Ogni scheda mostra uno screenshot e porta direttamente al sito vero, così puoi vedere animazioni, caricamento e comportamento su mobile.

Il suo punto forte sono i filtri. Puoi cercare per settore (agenzie, e-commerce, formazione, finanza, portfolio) e per stile, e capire in pochi minuti come si presentano gli altri nel settore del tuo cliente.

C'è anche una sezione dedicata alle singole parti di pagina, come hero, prezzi e footer. La consultazione è libera; i filtri avanzati e le ricerche salvate sono nel piano Pro, a 9 dollari al mese.

Quando usarlo: all'inizio, per mettere d'accordo te e il cliente su una direzione visiva prima di disegnare.

02. Hoverstates: quando tutto sembra uguale

Dopo un po' di tempo passato sulle raccolte di siti, la sensazione è sempre la stessa: hero centrale, tre colonne di vantaggi, pulsante arancione. Tutto ordinato, tutto uguale.

Hoverstates va nella direzione opposta. Si presenta come la casa del design, del codice e dei contenuti alternativi sul web, e raccoglie siti sperimentali: navigazioni insolite, tipografia animata, griglie fuori dagli schemi. Ogni scheda ha una breve descrizione di cosa rende interessante quel sito.

Non sono modelli da replicare per il sito di un ristorante. Sono idee da cui prendere un dettaglio: un modo diverso di mostrare un portfolio, un cursore che cambia in base al contenuto, un uso coraggioso del testo.

Quando usarlo: quando il progetto è corretto ma anonimo, e serve un elemento che lo renda riconoscibile.

03. Unsection: quando una sezione non funziona

A volte il problema non è il sito intero. È una parte: la hero non convince, la tabella dei prezzi confonde, il footer è un elenco di link senza ordine.

Unsection raccoglie proprio questo: singole sezioni di siti, divise per tipo, come intestazioni, footer e call to action. Puoi filtrarle per stile e per tag, e ci sono anche una raccolta di effetti al passaggio del mouse e una libreria di forme SVG.

Mettere a confronto dieci hero diverse dello stesso tipo è il modo più rapido per capire cosa manca alla tua.

Quando usarlo: quando hai già il sito e devi sistemare un blocco preciso.

04. Page Flows: quando il problema è il percorso

Una pagina può essere bellissima e far perdere comunque clienti. Succede quando il percorso è sbagliato: troppi passaggi per registrarsi, un checkout che chiede dati inutili, un'iscrizione che si interrompe a metà.

Page Flows raccoglie i percorsi utente di app e servizi molto usati, con registrazioni e schermate passo per passo: registrazione, onboarding, accesso, checkout, pagine di abbonamento. Vedi non solo come sono fatte le schermate, ma in che ordine arrivano e quanti passaggi servono.

È un servizio a pagamento, con una prova gratuita: il piano individuale parte da circa 8 dollari al mese con pagamento annuale.

Quando usarlo: quando progetti un'app, una prenotazione o un acquisto online, e vuoi contare i passaggi prima di disegnarli.

05. Cosmos: quando i riferimenti sono ovunque

Screenshot sul telefono, link nei preferiti, immagini salvate su Pinterest, foto scattate per strada. I riferimenti si accumulano in dieci posti diversi e, quando servono, non si trovano.

Cosmos serve a raccoglierli in un posto solo. Salvi immagini e pagine con un'estensione del browser, le organizzi in raccolte e le ritrovi cercando per parola, per codice colore o per somiglianza visiva. Puoi importare quello che hai già su Pinterest.

Non ha pubblicità né like, funziona da web, su iOS e Android, e il piano gratuito copre salvataggio, ricerca e raccolte condivise. Il piano Premium costa 8 dollari al mese.

Quando usarlo: sempre, come archivio personale da cui partire per ogni nuovo progetto.

Dal riferimento al progetto

I cinque siti coprono momenti diversi dello stesso lavoro:

Cosmos
  raccogli i riferimenti
  ↓
Curated
  scegli la direzione visiva
  ↓
Unsection
  studia le sezioni
  ↓
Page Flows
  conta i passaggi
  ↓
Hoverstates
  aggiungi un dettaglio
  ↓
Progetto

Studiare, non copiare

Un riferimento è utile solo se capisci perché funziona. Davanti a un sito che ti piace, chiediti:

• come è costruita la gerarchia: cosa vedo per primo, cosa per secondo;
• quanto spazio c'è tra gli elementi, e quanto è costante;
• quanti caratteri e quante dimensioni di testo usa;
• quanti colori, e dove usa quello più forte.

Se un colore ti colpisce, puoi ricavarne il codice esatto con il Color Picker di Hash42 Tools e controllare subito il contrasto: un colore bello che non si legge non serve.

Checklist prima di disegnare

Prima di aprire il file di design, verifica almeno questi cinque punti:

• Hai raccolto i riferimenti in un unico posto, non in dieci.
• Hai condiviso con il cliente due o tre direzioni visive, non una sola.
• Per ogni sezione importante hai guardato più esempi dello stesso tipo.
• Hai contato i passaggi dei percorsi principali: contatto, prenotazione, acquisto.
• Per ogni riferimento sai dire cosa ti piace e perché.

Il buon design parte da buoni riferimenti

Nessuno progetta da zero. Anche i siti più originali nascono da qualcosa che il designer ha visto, smontato e capito.

La differenza la fa il metodo: raccogliere con ordine, guardare con attenzione, prendere un'idea e farla diventare propria. I riferimenti giusti non sostituiscono il progetto. Lo rendono più veloce e più sicuro.

Fonti

• Curated
• Hoverstates
• Unsection
• UI UX Showcase, Unsection
• Toolradar, Page Flows pricing
• Cosmos, llms.txt
• Creative Bloq, What is Cosmos, the Pinterest alternative for creatives?