Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

Prima di tutto: pianifica

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

Prima di iniziare dovrai rispondere a questi domande:

  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

Fare uno schizzo del design

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

Scegliere le tue risorse

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

Testo

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

Colori del tema

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

Immagini

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

  1. Quando trovi l'immagine che desideri, premi sull'immagine.
  2. Premi sul bottone Visualizza immagine.
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

Font

Per scegliere un font:

  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.

 

 

In questo modulo

 

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: PyQio
Ultima modifica di: PyQio,