100 punti da sapere su...
Eco-Design Web Development

Possiamo sviluppare una struttura di wireframing di successo per la progettazione mobile-first seguendo 6 passi:

1. Creare un inventario dei contenuti

Scrivendo i contenuti che ritenete essenziali per il wireframing, filtri gli elementi non necessari.
Attenzione! L'obiettivo non è eliminare gli elementi, ma ordinare i contenuti in base al loro livello di priorità in primari, secondari e terziari.

2. Progettare secondo la gerarchia visiva

Utilizzando le informazioni ricavate dall'inventario dei contenuti, stabilisci come visualizzare i diversi elementi in base al loro livello di priorità. Ricorda che gli elementi considerati di priorità "primaria" devono essere visualizzati in modo più evidente sul vostro sito web!

3. Mantenere la semplicità

Non sai come visualizzare i contenuti dopo aver eliminato gli elementi non essenziali? Ecco alcuni consigli di design per una corretta presentazione:

• Non ingombrare il menu di navigazione con troppi link.
• Indipendentemente dall'argomento, utilizza il minor numero possibile di pagine per visualizzare i contenuti.
• Struttura i contenuti in due colonne al massimo.
• Attieniti a un tipo e a una dimensione di carattere per il testo (la scelta migliore è un carattere di sistema e una dimensione di 16pt per il testo del corpo).
• Utilizza lo spazio bianco per aumentare la leggibilità e diminuire il disordine.

Ricorda! La pagina web non deve impiegare più di 3 secondi per essere caricata: è più probabile che gli utenti abbandonino un sito che impiega più tempo a caricarsi. Mantenere un design semplice ridurrà il tempo di caricamento del vostro sito web.

4. Attenzione alle dimensioni

Poiché il design mobile-first deve adattarsi a degli schermi di dimensioni ridotte, le dimensioni degli elementi avranno un impatto sulle prestazioni del sito e sull'esperienza dell'utente. Sarà necessario ingrandire alcuni elementi, dato che le dita umane sono meno precise del cursore del mouse. È il caso dei pulsanti e delle funzioni interattive che possono apparire più piccoli sui desktop. Tuttavia, per alcuni elementi di design essere più grandi non è sinonimo di migliori! Ad esempio, quando si aggiungono immagini, è meglio evitare quelle troppo grandi perché non verranno visualizzate correttamente.

5. Test su dispositivi reali

Una volta completata una versione beta del tuo progetto, il modo migliore per stabilire se è utilizzabile o meno, è quello di verificarlo di persona. Carica le pagine del tuo sito web dal tuo cellulare e da quelli che ti circondano.
Nel farlo, chiediti:

• Le pagine web si caricano rapidamente?
• I contenuti più importanti vengono visualizzati per primi?
• Il contenuto (testo e immagini) è leggibile?
• C'è abbastanza spazio bianco intorno agli elementi?
• Gli elementi interattivi sono facilmente attivabili al tatto?

6. Usa il tuo design come base per andare oltre

Se hai seguito i passaggi sopracitati e sei soddisfatto del funzionamento del tuo sito web sui telefoni cellulari, congratulazioni: hai creato con successo una soluzione di design elegante e sostenibile compatibile, puoi iniziare a pensare "in grande" e creare la versione desktop del tuo sito web ampliando e completando le tue soluzioni di design.