Come progettare un sito Web (con immagini)

Sommario:

Come progettare un sito Web (con immagini)
Come progettare un sito Web (con immagini)

Video: Come progettare un sito Web (con immagini)

Video: Come progettare un sito Web (con immagini)
Video: 5 Cose da NON FARE su PS5 2024, Maggio
Anonim

Questo articolo spiega come creare un sito web che appaia professionale e funzioni bene. Mentre la maggior parte del design del tuo sito web dipende da te, ci sono alcune cose fondamentali da fare ed evitare durante la creazione di un sito web.

Passi

Parte 1 di 2: come progettare il tuo sito web

Progettare un sito Web Passaggio 1
Progettare un sito Web Passaggio 1

Passaggio 1. Determina se desideri utilizzare un creatore di siti Web

I siti Web creati da zero richiedono una comprensione abbastanza dettagliata della codifica HTML, ma puoi creare facilmente un sito Web utilizzando un servizio di hosting gratuito come Weebly, Wix, WordPress o Google Sites. I creatori di siti Web tendono ad essere molto più facili da usare per i designer alle prime armi rispetto all'HTML.

  • Se decidi di codificare il tuo sito web, dovrai imparare sia la codifica HTML che CSS.
  • Se investire tempo ed energia per creare il tuo sito web non ti sembra allettante, puoi anche assumere un designer di siti web per creare il tuo sito per te. I designer freelance possono costare tra $ 30 l'ora e ben oltre $ 100 l'ora.
Progettare un sito Web Passaggio 2
Progettare un sito Web Passaggio 2

Passaggio 2. Mappa il tuo sito

Prima ancora di aprire un creatore di siti Web, dovresti sapere approssimativamente quante pagine vuoi che il tuo sito Web abbia, quale dovrebbe essere il contenuto di ciascuna di queste pagine e il layout generale di pagine importanti come la home page e il "Informazioni" pagina.

Le pagine del tuo sito web potrebbero essere più facili da visualizzare se disegnerai immagini approssimative di ciascuna di esse piuttosto che determinare semplicemente quale contenuto dovrebbe apparire

Progettare un sito Web Passaggio 3
Progettare un sito Web Passaggio 3

Passaggio 3. Usa un design intuitivo

Sebbene ci sia qualcosa da dire per nuove idee, il design di base del tuo sito web dovrebbe seguire linee guida stabilite come le seguenti:

  • Le opzioni di navigazione (ad es. schede per pagine diverse) dovrebbero trovarsi nella parte superiore della pagina.
  • Se utilizzi un'icona di menu (☰), dovrebbe trovarsi nell'angolo in alto a sinistra della pagina.
  • Se utilizzi una barra di ricerca, dovrebbe trovarsi nella parte in alto a destra della pagina.
  • I link utili (ad es., i link alla pagina "Informazioni" o alla pagina "Contattaci") dovrebbero trovarsi nella parte inferiore di ogni pagina.
Progettare un sito Web Passaggio 4
Progettare un sito Web Passaggio 4

Passaggio 4. Sii coerente

Qualunque sia il carattere del testo, la tavolozza dei colori, il tema dell'immagine e le opzioni di design che scegli, assicurati di utilizzare la stessa decisione in tutto il tuo sito web. Può essere incredibilmente sconcertante vedere un carattere o una combinazione di colori utilizzati per la pagina "Informazioni" quando ne è stato utilizzato uno completamente diverso per la home page.

  • Ad esempio, se utilizzi esclusivamente colori dai toni freddi per la home page del tuo sito, non implementare colori brillanti e forti nella pagina successiva.
  • Tieni presente che l'uso di colori forti o contrastanti, specialmente quando i colori vengono visualizzati in modo dinamico (ad esempio, in movimento), può evocare l'epilessia in un piccolo numero di utenti web. Se decidi di utilizzare tali colori sul tuo sito, assicurati di aggiungere un avviso di epilessia prima di qualsiasi pagina pertinente.
Progettare un sito Web Passaggio 5
Progettare un sito Web Passaggio 5

Passaggio 5. Aggiungi opzioni di navigazione

L'inserimento di collegamenti diretti a pagine importanti del tuo sito Web nella parte superiore della home page aiuterà a indirizzare i visitatori per la prima volta al contenuto che conta. La maggior parte dei creatori di siti aggiunge questi collegamenti per impostazione predefinita.

È importante assicurarsi che ogni pagina del tuo sito Web sia accessibile facendo clic sulle opzioni del tuo sito Web anziché essere accessibile solo tramite l'indirizzo della pagina

Progettare un sito Web Passaggio 6
Progettare un sito Web Passaggio 6

Passaggio 6. Usa colori che si completano a vicenda

Come qualsiasi altro tipo di design, il design del sito Web si basa su combinazioni di colori visivamente gradevoli; per questo motivo, è fondamentale scegliere i colori del tema che vanno insieme.

Nero, bianco e grigio sono una buona combinazione se non sai da dove cominciare

Progettare un sito Web Passaggio 7
Progettare un sito Web Passaggio 7

Passaggio 7. Considera l'utilizzo di un design minimalista

Il minimalismo incoraggia colori dai toni freddi, grafica semplice, pagine di testo in bianco e nero e il minor numero di abbellimenti possibile. Poiché il minimalismo richiede poco in termini di elementi fantasiosi, è un modo semplice per rendere il tuo sito Web professionale e attraente senza richiedere molto lavoro.

  • Molti creatori di siti web avranno un tema "minimalista" che puoi selezionare durante la configurazione del tuo sito web.
  • Un'alternativa al minimalismo è il "brutalismo", che utilizza linee più dure, colori brillanti, testo in grassetto e immagini minime. Il brutalismo ha meno seguito del minimalismo, ma a seconda del contenuto del tuo sito web, potrebbe adattarsi meglio alle tue esigenze di progettazione.
Progettare un sito Web Passaggio 8
Progettare un sito Web Passaggio 8

Passaggio 8. Fai scelte uniche

Le linee rette e gli elementi web bloccati dalla griglia sono scommesse sicure, ma prendere alcune decisioni stilistiche uniche conferirà personalità al tuo sito e lo aiuterà a distinguersi.

  • Non aver paura di contrastare le tendenze posizionando gli elementi del sito web in modo asimmetrico o utilizzando elementi sovrapposti per creare un aspetto a strati.
  • Mentre gli angoli eleganti e acuti e gli elementi squadrati (noti anche come presentazione "basata su carte") sono meno favorevoli degli elementi arrotondati e morbidi.

Parte 2 di 2: come massimizzare le prestazioni del sito web

Progettare un sito Web Passaggio 9
Progettare un sito Web Passaggio 9

Passaggio 1. Approfitta delle opzioni di ottimizzazione mobile

I browser mobili rappresentano più traffico web rispetto ai browser desktop, il che significa che la quantità di attenzione che presti alla versione mobile del tuo sito web dovrebbe almeno eguagliare lo sviluppo del tuo sito web desktop. La maggior parte dei servizi di creazione di siti web crea automaticamente una versione mobile del tuo sito, ma ti consigliamo di tenere a mente le seguenti informazioni per il tuo sito mobile:

  • Assicurati che i pulsanti (ad esempio i collegamenti ai siti) siano grandi e facili da toccare.
  • Evita di implementare funzionalità che non possono essere visualizzate su dispositivi mobili (ad es. Flash, Java, ecc.).
  • Prendi in considerazione l'idea di creare un'app mobile per il tuo sito web.
Progettare un sito Web Passaggio 10
Progettare un sito Web Passaggio 10

Passaggio 2. Evita di utilizzare troppe foto per pagina

Sia i browser desktop che quelli mobili possono avere difficoltà a caricare pagine che visualizzano un gran numero di foto o video. Sebbene le immagini siano importanti nel web design, l'utilizzo di più di alcune per pagina può causare tempi di caricamento inutilmente lunghi, che impediranno alle persone di visitare le pagine in questione.

In generale, vuoi che le pagine del tuo sito web si carichino in meno di quattro secondi

Progettare un sito Web Passaggio 11
Progettare un sito Web Passaggio 11

Passaggio 3. Aggiungi una pagina "Contatti"

Noterai che praticamente tutti i siti Web stabiliti hanno una pagina "Contattaci" che contiene informazioni di contatto (ad es. Un numero di telefono e un indirizzo e-mail); alcuni siti hanno anche un modulo di domanda integrato in questa pagina. L'aggiunta di una pagina "Contatti" darà ai visitatori del sito web una linea di comunicazione diretta con te, aggiungendo così una soluzione a potenziali frustrazioni.

Progettare un sito Web Passaggio 12
Progettare un sito Web Passaggio 12

Passaggio 4. Crea una pagina 404 personalizzata

Quando qualcuno visita una pagina specifica del tuo sito web che non è stata impostata o non esiste, verrà visualizzata una pagina web "Errore 404". La maggior parte dei browser ha una pagina 404 predefinita, ma potresti essere in grado di personalizzare la tua dalle impostazioni del creatore del tuo sito web; in tal caso, assicurati di includere i seguenti dettagli:

  • Un messaggio di errore spensierato (ad es. "Congratulazioni: hai trovato la nostra pagina di errore!")
  • Un link alla home page del sito
  • Un elenco di link comunemente visualizzati
  • Un'immagine o un logo per il tuo sito web
Progettare un sito Web Passaggio 13
Progettare un sito Web Passaggio 13

Passaggio 5. Se possibile, utilizzare una barra di ricerca

Se il metodo di creazione del tuo sito web supporta l'aggiunta di una barra di ricerca al tuo sito web, ti consigliamo vivamente di farlo. Ciò garantirà che gli utenti possano navigare rapidamente verso una pagina o un elemento specifico senza dover fare clic sulle opzioni di navigazione.

Le barre di ricerca sono utili anche quando il pubblico desidera cercare un termine generico senza utilizzare tentativi ed errori

Progettare un sito Web Passaggio 14
Progettare un sito Web Passaggio 14

Passaggio 6. Investi la maggior parte del tempo nella tua home page

Quando qualcuno arriva sulla home page del tuo sito web, dovrebbe ottenere immediatamente l'essenza del tema del tuo sito web; oltre a questo, tutti gli elementi della home page dovrebbero caricarsi velocemente, comprese le opzioni di navigazione e le eventuali immagini. La tua home page dovrebbe avere i seguenti aspetti:

  • Un invito all'azione (ad es. un pulsante da fare clic o un modulo da compilare)
  • Una barra degli strumenti o un menu di navigazione
  • Una grafica invitante (ad esempio, una foto solida, un video o un piccolo gruppo di foto con testo di accompagnamento)
  • Parole chiave relative al servizio, argomento o focus del tuo sito web
Progettare un sito Web Passaggio 15
Progettare un sito Web Passaggio 15

Passaggio 7. Testa il tuo sito Web in più browser su più piattaforme

Questo è incredibilmente importante, poiché browser diversi possono gestire aspetti del tuo sito web in modo diverso. Prima di iniziare a promuovere il tuo sito web, prova a visitare e utilizzare il tuo sito web nei seguenti browser su piattaforme Windows, Mac, iPhone e Android:

  • Google Chrome
  • Firefox
  • Safari (solo iPhone e Mac)
  • Microsoft Edge e Internet Explorer (solo Windows)
  • Il browser integrato su diversi telefoni Android (ad es. Samsung Galaxy, Google Nexus, ecc.)
Progettare un sito Web Passaggio 16
Progettare un sito Web Passaggio 16

Passaggio 8. Continua ad aggiornare il tuo sito web man mano che invecchia

Le tendenze del design, i collegamenti, le foto, i concetti e le parole chiave cambiano con il passare del tempo, quindi dovrai continuare ad apportare modifiche al tuo sito Web per rimanere aggiornato. Ciò richiederà di controllare le prestazioni del tuo sito Web insieme ad altri siti Web simili almeno una volta ogni tre mesi (preferibilmente più spesso).

Guida HTML di base

Image
Image

Pagina Web di esempio con HTML

Sostieni wikiHow e sblocca tutti i campioni.

Image
Image

Foglio informativo HTML

Sostieni wikiHow e sblocca tutti i campioni.

Image
Image

Esempio di pagina Web semplice

Sostieni wikiHow e sblocca tutti i campioni.

Suggerimenti

  • L'accessibilità del sito web è un altro aspetto importante dello sviluppo del sito web. Ciò include cose come didascalie per il pubblico con problemi di udito, descrizioni audio per i visitatori non vedenti e avvisi di fotosensibilità se il tuo sito web utilizza effetti potenzialmente induttori di convulsioni.
  • La maggior parte dei creatori di siti Web ha una serie di modelli che puoi utilizzare per cementare il layout e il design del tuo sito prima di aggiungere i tuoi elementi preferiti.

Avvertenze

  • La maggior parte dei creatori di siti sono gratuiti; tuttavia, se desideri utilizzare il tuo dominio (es. "www.tuonome.com" invece di "www.tuonome.wordpress.com"), dovrai pagare un canone mensile o annuale.
  • Evita il plagio e osserva tutte le leggi sul copyright: non aggiungere immagini casuali dal web, o anche elementi strutturali, senza permesso.

Consigliato: