Share
Benvenuti all'ottava lezione della nostra serie Web Design for Kids, "Nozioni di base sul design"!
In tutta questa serie ci siamo concentrati sulla realizzazione di un progetto, ma non abbiamo ancora parlato delle decisioni prese in quel progetto. In questo tutorial vedremo alcune delle basi concetti di design che fanno parte del fare un buon sito web.
Non dimenticare di porre domande nella sezione commenti in fondo a questa pagina!
Qualcos'altro di cui abbiamo parlato tanto finora è il utente (o visitatore). Ogni decisione che prendiamo nel web design e in ogni concetto di design di cui parliamo in questo tutorial hanno tutti lo stesso obiettivo: rendere il sito Web facile da usare e capire il più possibile.
Questo utente è felice?Il design è tutto per risolvere i problemi. Se i nostri utenti trovano difficile utilizzare il nostro sito web, se ne andranno semplicemente. Il nostro compito è quello di sbarazzarsi di qualsiasi difficoltà per loro, renderlo facile da leggere e regalare loro un'esperienza estremamente piacevole. Le nostre decisioni riguardano cose come il contenuto, l'organizzazione, il layout, lo spazio vuoto, la grafica, il colore e la tipografia.
Soddisfare è la parte più importante del web design. Non importa quanto sia bello il nostro sito se non abbiamo il contenuto che gli utenti vogliono leggere. Una cosa che possiamo chiederci quando vogliamo costruire un sito è "Le persone hanno bisogno di questo?" E in tal caso, "Quali informazioni sono essenziale?”.
Può essere allettante includere il maggior numero di contenuti possibile su un sito web. Ripulire e restringere i contenuti in realtà aiuterà l'utente a ottenere più informazioni alla fine, perché ciò che è importante non perderà sulla pagina.
Una volta pronti i nostri contenuti, dobbiamo organizzarli in categorie o gruppi pertinenti, in modo che l'utente possa trovare tutto senza problemi.
Il miglior sito web scorrerà in modo molto naturale e assicurerà che l'utente non debba pensare troppo a dove potrebbe essere.
Il sito web Tuts + Town non ha molti contenuti, quindi siamo stati in grado di allineare il tutto e mettere in risalto le nostre belle immagini. Se dovessimo avere più testo sul sito, tuttavia, questo particolare layout potrebbe non funzionare altrettanto bene.
Per assicurarci che il nostro sito sia facile da navigare e piacevole per l'utente, dobbiamo pensarci guardare e sentire. Qui è dove le immagini, la gerarchia (chiarendo quanto sia importante tutto, rispetto a tutto il resto), la tipografia e il colore entrano.
A questo punto sappiamo tutto sull'uso delle immagini su un sito web. Abbiamo incluso quattro immagini sul nostro sito Tuts + Town e abbiamo analizzato i diversi tipi di immagini da utilizzare sul Web in un precedente tutorial.
quando e dove usare queste immagini e la grafica è anche importante a cui pensare. Tutte le immagini incluse nel nostro sito Tuts + Town avevano senso accanto al contenuto con cui erano state collocate. Ad esempio, il nostro sito web parla di Tuts + Town, quindi abbiamo un'immagine chiara in cima a un edificio importante nella nostra città. Le tre immagini da seguire sono legate ai gruppi di aziende adiacenti: hotel, ristoranti e shopping in generale.
Abbiamo usato queste immagini per dare all'utente un migliore senso del sentire della città, così come lo sarà lo shopping nei nostri bellissimi edifici. È importante non catturare l'attenzione di un utente con un'immagine che non ha nulla a che fare con il contenuto reale con cui è.
Le icone sono piccole grafiche a cui sono abituati rappresentare qualcosa.
Una buona icona è ben compresa e può rendere molto più veloce la ricerca di informazioni importanti su un sito web.
Ecco alcuni esempi di icone particolarmente utili:
Sai cosa significano queste icone??C'è così tanto che possiamo comunicare senza usare del testo e usare icone al posto del testo nella giusta situazione ci darà un sito più pulito e facile da usare.
La gerarchia visiva consiste nello scegliere ciò che spicca e nel mostrare la relazione tra le informazioni. La gerarchia delle parti di un sito web può essere mostrata attraverso una serie di diverse scelte di stile, come ad esempio: colore, dimensioni, uso dello spazio vuoto e posizionamento. Tutte queste scelte aiuteranno a dire all'utente cosa è super importante, cosa non è importante e quali informazioni sono correlate.
La gerarchia non è mostrata solo dalla dimensione del nostro testo e delle immagini, ma anche dalla loro distanza l'una dall'altra. Contenuti simili dovrebbero essere raggruppati insieme e distanziati da contenuti non correlati.
Questa immagine di Tuts + Town sky è stata progettata per assicurarsi che il palloncino catturi l'attenzione dello spettatore per primo, seguito dalle nuvole. Tutto il resto delle immagini è stato reso meno chiaro per far sì che il palloncino e le nuvole si distinguano di più.
L'immagine sopra mostra un cambiamento in ciò su cui ci concentriamo per prima. Trovi che vedi le nuvole prima questa volta, poi il pallone?
Ci sono molte cose in questa immagine e non siamo abbastanza sicuri su dove guardare prima. Non c'è alcun cambiamento di colore, nessuna organizzazione e nessuna spaziatura per dirci cosa è importante, rendendolo un po 'difficile da seguire.
Whitespace è lo spazio vuoto su un sito; non è così avere essere bianco però! Sono quei punti in cui non c'è testo e nessuna immagine. Dove scegliamo di avere questo spazio vuoto è davvero importante perché determina quali parti di un sito si distinguono e quanto bene possiamo leggere il contenuto.
L'immagine sopra è un esempio di un sito che non usa bene gli spazi bianchi. C'è un sacco di contenuti e immagini e non c'è abbastanza spazio tra loro per mostrarci cosa è più importante.
Quindi, vediamo se possiamo pulire questo!
Molto meglio. Abbiamo buttato via alcuni contenuti non essenziali e creato un gerarchia con molto più spazio bianco e una migliore organizzazione, rendendo più facile la lettura.
Lo spazio bianco che abbiamo usato sul nostro sito Tuts + Town è in realtà giallo chiaro.
Abbiamo ampie macchie di spazio vuoto a destra e a sinistra della pagina, nonché tra le immagini. Questo spazio aiuta a evidenziare i nostri contenuti assicurandoci che nulla sia troppo confuso.
Ricorda! È altrettanto importante pensare a ciò che è non sul sito come ciò che è, ed è qui che entrano in gioco gli spazi.
La tipografia e il colore sono così importanti per il web design che avranno i loro tutorial per seguirlo, quindi li toccheremo velocemente qui.
La tipografia è l'arte di selezionare e organizzare il testo in un modo che lo rende il più accattivante e leggibile possibile. Mentre il nostro sito Tuts + Town non ha molto testo, in realtà c'era un sacco di pensiero che andava nella scelta del font e nella sua disposizione.
La scelta dei colori è anche una parte molto potente del design. I colori hanno senso e può aiutare a dare agli utenti certi sentimenti su un marchio o un sito. I colori Tuts + Town contribuiscono a creare un'atmosfera divertente e accogliente per la nostra città.
Ma di nuovo, ne parleremo molto più presto!
In questo tutorial abbiamo toccato alcuni concetti di design davvero importanti. Una volta pronti i contenuti, dobbiamo presentare questo contenuto ai nostri utenti nel modo più semplice e più ordinato possibile.
Il design è tutto per rendere le cose facili e divertenti per le persone. Abbiamo raggiunto questo obiettivo con il nostro sito web Tuts + Town attraverso il layout, le immagini, il colore e gli spazi bianchi.
Ora discuteremo tipografia, l'arte di selezionare e organizzare il tipo; una delle parti più interessanti e divertenti del design.
Ci vediamo in giro per la città!
Accentsconagua