Se vuoi progettare e creare pagine web, questo processo sarà molto più semplice se pianifichi in anticipo. Nella fase di progettazione, il progettista e il cliente possono lavorare insieme per trovare un formato e un layout adatti alle loro esigenze. Il processo di pianificazione influenza lo stile o lo stile del sito, si potrebbe dire che questo è l'aspetto più importante nel web design, soprattutto se è per scopi aziendali.
Fare un passo
Parte 1 di 4: Creazione della struttura di base
Passaggio 1. Determinare la funzione del sito web
Se stai creando un sito personale, probabilmente conosci già la risposta. Tuttavia, se stai creando un sito per un'altra organizzazione, azienda o persona, devi scoprire cosa vogliono e le funzionalità del sito. Tutto ciò che specifichi qui avrà effetto al termine della pagina web.
- Il sito web richiede Storefront? I commenti degli utenti dovrebbero essere fatti? L'utente dovrà creare un account in un secondo momento? L'articolo del sito web è orientato? O orientato all'immagine? Tutte queste e altre domande ti aiuteranno nella progettazione e nella progettazione del sito.
- Questo processo di pianificazione può essere disegnato in un disegno, soprattutto se si tratta di una grande azienda e molte persone sono coinvolte nella creazione di questo progetto.
Passaggio 2. Creare un diagramma della mappa del sito (mappa del sito)
Un diagramma della mappa del sito è simile a un diagramma di flusso, che mostra come gli utenti si spostano da una pagina all'altra. Non hai bisogno di una pagina web in questa fase, solo un flusso generale di concetti. Puoi usare un programma per computer per creare diagrammi o disegnarne di tuoi su carta. Utilizzare questo diagramma per dimostrare i concetti di disposizione gerarchica e connettività delle pagine Web.
Passaggio 3. Prova il metodo di draft della carta
Un metodo popolare di sviluppo web di gruppo consiste nell'utilizzare un numero di schede per scoprire le aspettative di tutti. Prendi un certo numero di schede e scrivi il contenuto di base di una pagina web su ognuna individualmente. Organizza queste carte insieme al tuo team per trovare il concetto migliore. Questo metodo è adatto all'uso quando si collabora con altri alla creazione di pagine web.
Passaggio 4. Utilizzare carta e una bacheca o una lavagna
Questo è un metodo di pianificazione originale con un budget ridotto, puoi eliminare o spostare rapidamente i contenuti e modificare il flusso. Disegna il tuo web design su carta, quindi collega i fogli con il filo o disegna linee sulla lavagna. Questo metodo è molto adatto per l'uso in sessioni di brainstorming.
Passaggio 5. Creare un inventario dei contenuti
In effetti, tende ad essere più appropriato da utilizzare nella riprogettazione dei siti Web rispetto ai nuovi progetti Web. Inserisci ogni pezzo finito di contenuto o pagina web in un foglio di calcolo. Prendi nota dello scopo di ciascun contenuto o pagina, utilizzando questo elenco per determinare cosa rimuovere e cosa conservare. Puoi semplificare la struttura del Web e semplificare il processo di riprogettazione in un secondo momento.
Parte 2 di 4: creazione di uno schema HTML di base
Passaggio 1. Creare un wireframe per stabilire la gerarchia della pagina web
Il modello HTML di base è il progetto del sito che creerai, utilizzando solo i tag di base e il contenuto di esempio (blocchi/modelli). Questo framework risponde alla domanda "Cosa è visibile sul Web e dove?" La formattazione e lo stile non sono richiesti nella creazione di questo schema.
- Puoi vedere la struttura e il diagramma di flusso del contenuto con una struttura di base prima di scegliere un'impostazione di stile.
- I modelli HTML di base non sono statici come PDF o immagini, puoi scorrere rapidamente il contenuto di esempio per creare nuove strutture.
- Il framework di base è interattivo a vantaggio sia degli sviluppatori web che dei clienti. Poiché questo framework di base è scritto con un semplice codice HTML, puoi comunque navigare e sapere come funziona il cambio di pagina web. Questo non può essere fatto con PDF.
Passaggio 2. Prova il metodo Gray Box
Blocca o evidenzia il contenuto della tua pagina web in Gray Box, il contenuto più importante è in alto. Ordina i contenuti in una colonna. Ad esempio, se la pagina è "Informazioni sull'azienda", le informazioni dettagliate sull'azienda sono in alto, seguite da un elenco del personale, quindi le informazioni di contatto, ecc.
Questo non include intestazioni e piè di pagina. Gray Box è una rappresentazione visiva del contenuto che apparirà sul web
Passaggio 3. Prova un programma di creazione di schemi di base
Esistono vari programmi che è possibile utilizzare nel processo di creazione di un framework Web di base. La quantità di codice di programmazione web (lingua) che devi padroneggiare è diversa per ogni programma. Alcuni dei programmi che sono molto popolari includono:
- Laboratorio di modelli. Questo sito è dedicato al “design atomico”, ogni contenuto è considerato una “molecola” che compone una pagina web più grande.
- Jumpchart. Questa pagina Web fornisce servizi di pianificazione e inquadratura basati sul Web. Questi siti sono a pagamento e richiedono un abbonamento, ma puoi creare framework Web rapidamente senza dover padroneggiare molto codice di programmazione Web.
- Wirefy. Wirefy è un altro sito che offre "design atomico". Gli sviluppatori Web possono ottenere lo strumento gratuitamente.
Passaggio 4. Utilizzare un semplice markup HTML
Un buon modello di base si convertirà facilmente nel sito originale. Non pensare troppo allo stile web durante il processo di creazione di questo modello. Usa markup che possono essere facilmente compresi e modificati.
Un semplice framework di base è molto meglio. Lo scopo della creazione di un markup è costruire una struttura. L'aspetto visivo può essere regolato in seguito con CSS e markup avanzato
Passaggio 5. Creare uno schema di base per ogni pagina web
Potresti essere tentato di identificare ogni pagina web con uno schema di base. In effetti, questo renderà il tuo sito semplice e noioso. Crea uno schema diverso per ogni pagina, capirai che ogni pagina ha bisogno del suo design.
Parte 3 di 4: creazione di contenuti
Passaggio 1. Preparare il contenuto prima di creare una pagina web
Troverai molto più facile visualizzare in anteprima la tua visualizzazione web se disponi già di contenuti effettivi invece di utilizzare campioni o segnaposto. Non è necessario disporre di troppi contenuti, ma il tuo mockup avrà un aspetto molto migliore se utilizzi una copia dell'immagine originale.
Non è necessario disporre di tutto il materiale dell'articolo, ma almeno dovrebbe avere un titolo effettivo
Passaggio 2. Ricorda che un ottimo contenuto non è solo testo
Internet è molto più complesso di una semplice pagina web di testo. Hai bisogno di una varietà di contenuti diversi per creare un ottimo sito Web per attirare e invitare i visitatori. Per esempio:
- Foto.
- Voce.
- Video.
- Trasmissione web o webstream (Twitter)
- Integrazione Facebook
- RSS
- Feed web
Passaggio 3. Chiedi aiuto a un fotografo professionista
Se vuoi includere foto sul tuo sito, la prima impressione che otterrai dal tuo sito web sarà molto migliore se è pieno di fotografie professionali. Una buona foto vale più di venti foto di bassa qualità.
Cerca un neolaureato nell'arte della fotografia come soluzione più economica rispetto a un fotografo professionista che è nel settore da molto tempo
Passaggio 4. Scrivi articoli di qualità
Il contenuto scritto sulla pagina web determinerà la quantità del tuo traffico web. Anche se non devi preoccuparti troppo della creazione di contenuti in questo processo di progettazione, non fa male iniziare a pensarci perché avrai anche bisogno di contenuti su base regolare una volta che il tuo sito è attivo e funzionante.
Oltre al contenuto dell'articolo, c'è del materiale scritto che devi avere anche nel processo di compilazione di una pagina web. Ad esempio informazioni di contatto, nome dell'azienda o qualsiasi altra cosa che verrà utilizzata più volte sul sito
Parte 4 di 4: trasformare i concetti in siti web
Passaggio 1. Disporre gli elementi di base
Questa disposizione di elementi si applica a ogni pagina del tuo sito, come intestazioni, note a piè di pagina e menu di navigazione. Impostalo in uno stile molto semplice in modo da poter controllare l'aspetto di tutte le pagine. Ciò è particolarmente utile man mano che avanzi nel processo di layout web.
Non preoccuparti troppo dei dettagli, prova a visualizzare in anteprima (anteprima) l'aspetto dell'intestazione
Passaggio 2. Crea un layout semplice
Inizia spostando la posizione dell'orologio dalla colonna del contorno di base alla posizione effettiva sulla pagina. Ad esempio, potresti voler spostare il menu di navigazione di esempio a sinistra della pagina e l'elenco dei titoli a destra.
Continua a sperimentare layout web per più pagine, prima di passare al passaggio successivo. Consenti agli altri di dargli un'occhiata per vedere se il layout che crei sembra vivo
Passaggio 3. Crea un modello
Usa un programma come Photoshop per creare prototipi o pagine di esempio del tuo sito web. Usa il layout che hai compilato come guida. Puoi creare prototipi più velocemente e ottenere i risultati desiderati con un programma di elaborazione delle immagini. I risultati di queste immagini possono essere successivamente utilizzati come riferimento nel processo di scrittura del codice di programmazione web.
Metti il contenuto effettivo nel mockup per farlo sembrare bello
Passaggio 4. Sostituire il concetto di esempio con il contenuto originale
Aggiungi contenuti ed elementi alle pagine web. Non preoccuparti delle impostazioni dello stile web per ora, impila tutto nella posizione corretta. Questo ti aiuterà a rivedere le modifiche allo stile web che apporterai in seguito.
Passaggio 5. Crea una guida di stile web
È molto importante mantenere un mix di stili, soprattutto per i siti di grandi dimensioni. Se il sito è destinato a scopi commerciali e ha già un proprio marchio o stile, questo dovrebbe essere integrato nel design del sito. Aspetti da considerare quando si crea una guida allo stile di una pagina Web:
- Navigazione
- Nota di testa
- Paragrafo
- carattere corsivo
- carattere audace
- Collegamenti (attivi, inattivi, al passaggio del mouse)
- Utilizzo dell'immagine
- Icona
- Pomello
- elenco
Passaggio 6. Applicare lo stile web
Una volta trovato lo stile e il design giusti, implementalo. CSS è uno dei modi più semplici per implementare gli stili su una pagina web o in tutto il sito. Vedere le seguenti istruzioni per comprendere meglio i dettagli dell'utilizzo dei CSS.
