Contenuto

• Al passo
• Metodo 1 di 2: le 3 regole di base
• Metodo 2 di 2: linee guida
• Suggerimenti
• Avvertenze

Progettare un ottimo sito Web può sembrare un compito arduo, ma finché tieni a mente le basi, troverai il processo interessante e divertente. Non si tratta solo di un bell'aspetto! Ti mostreremo le basi e alcune linee guida generali per aiutarti a progettare siti web che le persone visiteranno ancora e ancora.

Al passo

Metodo 1 di 2: le 3 regole di base

1. Regola 1:Ascolta il tuo cliente. Potresti progettare "il sito web più grande del mondo nella storia dell'universo e oltre", con neri intensi, caratteri raffinati e colori vivaci e artistici per un sito che urla "esplorami adesso!" Sfortunatamente, il tuo cliente voleva una barra dei menu arancione con lettere rosa e arancioni brillanti. Sei stato licenziato e il tuo miglior sito web in assoluto, di cui il cliente ha i diritti, è da qualche parte sul disco di backup, senza che nessuno lo veda mai più.
   • Studia l'identità aziendale del tuo cliente. Chiedi al cliente di mostrarti alcuni siti web che ama. Questo non solo ti darà un'idea di cosa gli piace, ma ti darà anche alcune idee di design a cui potresti non aver pensato.
   • Se pensavi che stessimo scherzando sul sito arancione e rosa, considera questo sito interessante e sofisticato:
2. Regola n. 2:Conosci il tuo pubblico e cosa sta cercando e adatta il tuo design di conseguenza. Il motivo per cui le persone hanno siti Web è perché vogliono che altre persone li vedano. Può essere informativo, commerciale o per intrattenere un pubblico di destinazione specifico. Il tuo lavoro come designer è sapere per chi stai progettando e tenerli sulla pagina quando arrivano lì.
   • Potresti pensare: "Se sembra buono, rimarranno". Ma questo non deve necessariamente essere il caso. Prendiamo ad esempio il settore immobiliare. Ecco un sito con un design pulito e divertente. Ha molto spazio bianco che conferisce un aspetto aperto, colori vivaci e un moderno formato widescreen con collegamenti in un posto prominente:
   • Ora dai un'occhiata a questo approccio alla vendita di immobili nella stessa area: disordinato e molto affollato, colori spenti e coperto di pubblicità.
   • Indovina quale funziona meglio per chi cerca casa? Esatto, quello in cui case! Quando le persone cercano "case in vendita a Santa Monica", non si preoccupano dell'aspetto di un sito. Non vogliono leggere dell'agente immobiliare o vedere belle foto della città. Vogliono vedere le case.
3. Regola n. 3:Ascolta te stesso. Capisci cosa vuole il cliente e sai cosa sta cercando il tuo mercato. Ora è finalmente arrivato il momento di prestare attenzione a te, designer!
   • Costruisci un modello nel software di grafica di tua scelta. Crea gli elementi della tua pagina su diversi livelli (in modo da poter modificare le cose in seguito senza distruggere l'intero modello). Questi elementi possono essere:
     • Intestazione. Questo è un elemento che è lo stesso in ogni pagina del tuo sito. L'intestazione è composta dal titolo e dal logo del sito, nonché dai collegamenti alle altre parti del sito (es. Chi siamo, Contatti, ecc.). Visivamente e praticamente questo legherà tutto insieme. È buona norma ricollegare il primo pulsante su una barra dei menu alla home page.
     • Ad esempio, diamo un'occhiata ad Apple:
     • Come con la maggior parte delle cose di Apple, la loro homepage ha un design molto pulito e semplice. Nota la barra dei menu in alto, con argomenti logici per ogni pulsante, oltre a un campo di ricerca: sempre una buona idea se il tuo sito lo supporta. Ora diamo un'occhiata a una pagina di destinazione per uno dei pulsanti, l'iPad, per vedere alcuni elementi:
     • La barra dei menu cambia solo oscurando il pulsante dell'iPad.
     • L'oggetto della pagina di destinazione viene visualizzato in grandi lettere nere.
     • Apparirà un nuovo sottomenu per saperne di più sul prodotto. Se fai clic su uno di questi pulsanti, vedrai che ogni pagina offre nuovi contenuti a seconda dell'argomento, ma sarà identica per layout e design.
     • Spesso, ogni argomento principale nella barra dei menu avrà sottotitoli diversi da compilare. Invece di creare una seconda barra dei menu, puoi utilizzare menu popup come questo esempio da Musicians Friend:
     • Sidebar. Apparirà in molte pagine del tuo sito, ma non necessariamente in tutte: il contesto lo determina. Tuttavia, è un elemento molto importante e deve essere progettato con cura per essere intuitivo e non troppo ingombrante. A differenza della barra dei menu, il contenuto di una barra laterale può essere molto dinamico. Dai un'occhiata a queste due barre laterali del marketer immobiliare Trulia La prima è per gli acquirenti:
       
       

Metodo 2 di 2: linee guida

1. Progettare una buona interfaccia utente. Posiziona i vari elementi del sito web come il titolo, le barre laterali, i loghi, le immagini e il testo nello stesso punto in ogni pagina per rendere il tuo sito navigabile e intuitivo.
   • Mantieni la stessa intestazione nella parte superiore di ogni pagina. Indipendentemente dal fatto che il contenuto del tuo sito consenta o meno molti elementi ripetuti, assicurati che la parte superiore di ogni pagina sia la stessa.
   • Usa la logica nel tuo progetto. Gli elementi su una singola pagina dovrebbero essere ordinati logicamente per importanza o argomento; dovrebbero esserlo anche le diverse pagine del sito.
2. Crea uno stile coerente. Laddove il layout dovrebbe dare coerenza strutturale al tuo sito, lo stile dovrebbe fornire armonia tematica.
   • Attenersi a due o tre colori principali e assicurarsi che stiano bene insieme.
   • Evita di usare troppi stili o dimensioni di carattere; se vuoi alternarne alcuni, usali allo stesso modo su ogni pagina.
   • Usa Cascading Style Sheets (CSS) per mantenere uno stile uniforme e per semplificare la modifica degli elementi in un intero sito web senza dover andare a ciascuna pagina separatamente.
3. Massimizza la leggibilità. Per rendere il tuo testo più facile da leggere, puoi dividerlo in parti più piccole.
   • Usa i sottotitoli e la spaziatura corretta per separare ciascuna delle parti.
   • Usa lettere in grassetto o dimensioni diverse per mostrare la gerarchia e l'importanza degli argomenti.
   • Presta attenzione a come tratti il ​​testo. Non rendere il carattere troppo piccolo e aumentare l'interlinea per rendere più facile la lettura di grandi parti di testo. Le porzioni di testo di grandi dimensioni sono più difficili da leggere; suddividerlo in paragrafi più piccoli.
4. Rendi il tuo sito web universalmente leggibile. Utilizza HTML standard ed evita tag, funzioni e plug-in disponibili solo per un marchio o una versione di un browser.
   • Sebbene la maggior parte dei browser e dei computer moderni sia in grado di gestire immagini complesse, tutto sembrerà più fluido se riduci e ottimizzi le tue immagini per il web. Pesa l'importanza della qualità contro l'importanza della velocità.
5. Testa il tuo sito web. Assicurati che ogni collegamento funziona come ti aspetteresti e le immagini vengono visualizzate correttamente.
   • Potresti voler organizzare alcuni test utente chiedendo ai membri del tuo pubblico di destinazione di testare la chiarezza e la facilità d'uso del tuo design e fornire feedback sul tuo sito web.
6. Pubblica il tuo sito web. Acquista un nome di dominio se non l'hai già fatto. Controlla periodicamente se i link funzionano ancora e ascolta i suggerimenti che i visitatori ti inviano tramite posta elettronica.

Suggerimenti

• Mentre sei libero di progettare il layout in base alla tua visione personale o alle cose che hai visto su altri siti, può essere più facile acquistare un design già pronto.
• Non bombardare il visitatore con immagini carine e speciali. Animazioni flash, colori vivaci, sfondi con motivi e musica che viene riprodotta automaticamente al caricamento della pagina sono stati esperimenti divertenti negli anni '90, ma ora spaventeranno gli utenti. Attenersi a sfondi semplici in contrasto con il colore del testo per la massima leggibilità.
• Puoi sempre utilizzare CSS per ottimizzare la spaziatura dei paragrafi.
• Per i visitatori con problemi di udito o di vista, è possibile sottotitolare video, trascrivere l'audio e aggiungere un messaggio di accessibilità. Sebbene le tabelle possano essere un modo efficiente per organizzare le informazioni, i visitatori non vedenti che utilizzano un software di lettura dello schermo potrebbero non sentire il materiale nell'ordine corretto.
• Consenti ai tuoi visitatori di risparmiare inchiostro: usa un foglio di stile separato per le pagine di stampa.
  • Disattiva le immagini di sfondo durante l'impostazione dei parametri di stampa.
  • Usa testo nero su sfondo bianco.
  • Rimuovi la barra dei menu e le immagini non necessarie.

Avvertenze

• Evita il plagio e rispetta tutte le leggi sul copyright. Non includere immagini casuali che trovi online o anche elementi strutturali senza approvazione. Tutto ciò che utilizzi sul tuo sito deve essere sia legale che etico.