9 Pro Suggerimenti per la progettazione Sito Ognuno deve leggere

1. Precedenza (L'arte di Controllo del Eye)
buon web design, forse ancor più che altro tipo di disegno, è tutto informazioni. Uno dei principali strumenti nel vostro arsenale per fare questo è la precedenza. Quando si percorre una buona progettazione, l'utente deve essere portato sullo schermo dal progettista. Io chiamo questo la precedenza, e &';. S su quanto peso visivo diverse parti del disegno hanno
Un semplice esempio di precedenza è che nella maggior parte dei siti, la prima cosa che si vede è il logo. Questo è spesso perché &'; s grande e fissato a ciò che è stato dimostrato in studi di essere al primo posto le persone guardano (in alto a sinistra). Questa è una buona cosa dato che probabilmente si desidera che un utente di sapere immediatamente quale sito è che stanno visualizzando.
Ma la precedenza dovrebbe fare molto di più. Si consiglia di indirizzare l'utente &'; s occhi attraverso una sequenza di passi. Ad esempio, si potrebbe voler vostro utente a passare da logo /marchio ad una dichiarazione di posizionamento primario, accanto ad un'immagine incisivo (per dare personalità posto), poi per il corpo del testo principale, con la navigazione e una barra laterale di prendere una posizione secondaria .. la sequenza
Che cosa il vostro utente dovrebbe guardare dipende da voi, il Web designer, a capire
Per raggiungere quello che io chiamo la precedenza avete molti strumenti a vostra disposizione:
1. Posizione — dove qualcosa è in una pagina influisce chiaramente in quale ordine che l'utente vede.
2. Color — utilizzando colori audaci e sottili è un modo semplice per comunicare al vostro utente dove guardare.
3. Contrasto — essere diversi rende le cose si distinguono, pur essendo lo stesso li rende secondario.
4. Dimensioni — grande ha la precedenza su poco (a meno che non tutto è grande, nel qual caso poco potrebbe distinguersi grazie a Contrasto)
5. Elementi di design — se vi è una gigantesca freccia che punta a qualcosa, indovinate dove l'utente avrà un aspetto?
2. Spaziatura
Quando ho iniziato a disegnare, ho voluto riempire ogni spazio disponibile con roba. Ho pensato che lo spazio vuoto sembrava uno spreco. Tuttavia, ho trovato è vero il contrario.
Spaziatura rende le cose più chiare. A Web design ci sono tre aspetti dello spazio che si dovrebbe essere prendendo in considerazione:
Interlinea: When you lay testo fuori, lo spazio tra le linee influisce direttamente come leggibile appare. Troppo poco spazio rende facile per l'occhio per fuoriuscire da una riga a quella successiva; troppo spazio significa che quando hai finito una riga di testo e andare al prossimo tuo occhio può perdersi. Quindi, è necessario trovare una via di mezzo tra i due. È possibile controllare interlinea in CSS con il &'; line-height &'; selettore. In generale trovo il valore di default è di solito troppo poco spaziatura per i miei gusti. Interlinea viene tecnicamente chiamato leader, che deriva dal processo che stampanti utilizzate da utilizzare per separare le righe di testo ai vecchi tempi — inserendo barre di piombo tra le righe
Imbottitura:. testo in generale non dovrebbe mai toccare altri elementi. Immagini, per esempio, non dovrebbe essere il testo toccante, né dovrebbe bordi o tabelle.
Riempimento è lo spazio tra gli elementi e il testo. La semplice regola qui è che si dovrebbe sempre avere spazio lì. Ci sono eccezioni, naturalmente, in particolare se il testo è una sorta di rubrica /Grapic. Ma, come regola generale, mettendo spazio tra il testo e il resto del mondo lo rende infinitamente più leggibile e piacevole
spazio bianco:. Prima di tutto, lo spazio bianco doesn &'; t bisogno di essere bianco. Il termine si riferisce semplicemente a vuoto su una pagina (o spazio negativo in quanto &'; s talvolta chiamato). Lo spazio bianco è usato per dare equilibrio, proporzione e il contrasto di una pagina. Un sacco di spazio bianco tende a rendere le cose sembrano più elegante e lussuosa, così per esempio se si va a un sito architetto costoso, si &'; ll quasi sempre vede un sacco di spazio. Se volete imparare ad usare gli spazi in modo efficace, passare attraverso una rivista e vedere come annunci sono disposti. Annunci di grandi marchi di orologi e automobili, essi tendono ad avere un sacco di spazio vuoto utilizzato come elemento di design.
3. Navigazione
Una delle esperienze più frustranti che si possono avere su qualsiasi sito web è essere in grado di capire dove andare o dove ti trovi. I &'; piacerebbe pensare che per la maggior parte dei web designer, la navigazione è un concetto che &'; ve riuscito a maestro, tuttavia, c'è sempre uno che dimostra me sbagliato. Ci sono due aspetti della navigazione da tenere a mente:
navigazione:? Dove si può andare
Ci sono alcune regole di buon senso da ricordare qui. Pulsanti per viaggiare intorno a un sito dovrebbe essere facile da trovare – verso la parte superiore della pagina e facili da identificare. Dovrebbero assomigliare pulsanti di navigazione ed essere ben descritto. Il testo di un pulsante dovrebbe essere abbastanza chiaro da dove &'; s che vi porterà. A parte il buon senso, it &'; s anche importante per rendere la navigazione utilizzabile. Ad esempio, se si dispone di un sottomenu rollover, assicurando una persona può raggiungere le voci di sottomenu senza perdere il rollover è importante. Allo stesso modo cambiare il colore o l'immagine su rollover è un ottimo riscontro per un utente
Orientamento:. Dove sei adesso
Ci sono molti modi si può orientare un utente in modo non vi è alcuna scusa per non?. In siti di piccole dimensioni, potrebbe essere solo una questione di un grande titolo o di un &'; giù &'; versione del pulsante appropriato nel menu. In un sito più grande, si potrebbe fare uso di sentieri briciola di pane, sotto-rubriche e una mappa del sito per i veri perduta.
4. Progetto per costruire
vita ha ottenuto molto più facile da web designer la transizione al layout CSS, ma anche adesso &'; s ancora importante pensare a come si sta andando a costruire un sito in cui si &'; re ancora in Photoshop. Considerare le cose come:
Può essere effettivamente fatto
Potreste aver scelto un tipo di carattere straordinario per la vostra copia corpo, ma è in realtà un tipo di carattere standard HTML? Si potrebbe avere un design che sembra bello ma è 1100px di larghezza e si tradurrà in un scrollng orizzontale per la maggioranza degli utenti di Internet. E &'; s importante sapere che cosa può e can &'; t essere fatto, che è per questo che credo tutti i Web designer devono anche costruire siti, almeno qualche volta
Cosa succede quando uno schermo è ridimensiona Perché avete bisogno di ripetere.? sfondi? Come faranno a lavorare? È la progettazione centrata o allineato a sinistra? Quali sono state facendo tutto ciò che è tecnicamente difficile?
Anche con il posizionamento CSS, alcune cose come l'allineamento verticale sono ancora un po 'doloroso e talvolta meglio evitare del tutto.
Potrebbero piccolo modifiche apportate al progetto semplificano notevolmente come si costruisce?
A volte lo spostamento di un oggetto intorno a un progetto può fare una grande differenza nel modo in cui è necessario codificare il CSS in seguito. In particolare, quando gli elementi di un disegno trasversale sopra l'altro, si aggiunge un po complessità alla configurazione. Così, se il disegno ha, dire quattro elementi e ogni elemento è completamente separato l'una dall'altra, sarebbe davvero facile da costruire. D'altra parte se tutti e quattro sovrappongono reciprocamente, potrebbe ancora essere facile, ma sarà probabilmente un po 'più complicato. Si dovrebbe trovare un equilibrio tra ciò che sembra buona e piccoli cambiamenti che possono semplificare il build. Compra di siti di grandi dimensioni, in particolare, si può semplificare le cose?
Ci fu un tempo in cui ho usato per creare pulsanti di immagine per i miei siti. Quindi, se ci fosse un pulsante di download, per esempio, vorrei fare immaginetta un download. Nell'ultimo anno o giù di lì, io &'; ve passato ad usare i CSS per fare le mie pulsanti e non ho mai guardato indietro. Certo, questo significa il mio pulsanti don &'; t ha sempre la flessibilità che potrei desiderare, ma il risparmio in tempo di costruzione da non dover fare decine di piccole immagini dei pulsanti sono enormi
5.. Typography
testo è l'elemento più comune di progettazione, in modo che &'; s non è sorprendente che un sacco di pensiero è andato in esso. E &'; s importante considerare le cose come:
Font Scelte: Diversi tipi di font dire cose diverse su un disegno. Alcuni sembrano moderno, un po 'look retrò. Assicurarsi che si sta utilizzando lo strumento giusto per il lavoro
dimensioni dei caratteri:. Anni fa era di moda avere veramente piccolo testo. Fortunatamente, in questi giorni le persone hanno iniziato a rendersi conto che il testo è pensato per essere letto, non solo guardato. Assicurarsi che i formati di testo sono coerenti, abbastanza grande per essere letto, e proporzionata in modo che voci e sottovoci si distinguono in modo appropriato
Distanza:. Come discusso sopra, spaziatura tra le righe e lontano da altri oggetti è importante considerare. Si dovrebbe anche pensare di spaziatura tra le lettere, anche se sul Web è di minore importanza, come don &'; t ha molto controllo
Lunghezza della linea: Non esiste una regola dura e veloce, ma in generale le linee di testo. shouldn di &'; t è troppo lungo. Più a lungo sono, più difficile sono da leggere. Piccole colonne di lavoro testo molto meglio (pensare a come un giornale espone testo)
Colore:. Uno dei miei peggiori abitudini sta facendo testo a basso contrasto. Sembra buono ma doesn &'; t leggere così bene, purtroppo
Paragraphing: Prima di iniziare la progettazione, mi è piaciuto per giustificare il testo in ogni cosa.. E 'fatta per bordi belle su entrambi i lati delle mie paragrafi. Purtroppo, testo giustificato tende per creare pause strane tra le parole dove sono stati auto-distanziati. Questo isn &'; la t piacevole per l'occhio durante la lettura, quindi continuate a sinistra allineato a meno che non vi capita di avere un corpo magia di testo che accade nello spazio perfettamente
6.. Usabilità
Web design isn &'; t solo di belle immagini. Con così tante informazioni e di interazione per essere effettuato su un sito Web, e' s importante che voi, il progettista, fornire per tutto. Ciò significa fare design del tuo sito web usabile
Noi &';. Ve già discusso alcuni aspetti di usabilità – navigazione, la precedenza, e il testo. Qui ci sono tre quelli più importanti:
Aderendo agli standard: Ci sono alcune cose che la gente si aspetta, e non dando loro provoca confusione. Ad esempio, se il testo ha una sottolineatura, ci si aspetta che sia un collegamento. Fare altrimenti non è una buona pratica di usabilità. Certo, si può rompere alcune convenzioni, ma la maggior parte del tuo sito web dovrebbe fare esattamente quello che la gente si aspetta che faccia
Pensate a ciò che gli utenti saranno effettivamente fare: Prototyping è uno strumento comunemente usato nel design realmente &'; try &';! un disegno. Ciò avviene perché spesso quando si utilizza effettivamente un disegno, si nota piccole cose che fanno una grande differenza. ALA ha pubblicato un articolo un po 'indietro chiamato Mai utilizzare un avviso quando si intende Undo, che è un eccellente esempio di una decisione di progettazione piccola interfaccia che può rendere la vita succhiare per un utente
Pensateci task utente:. Quando un utente arriva a il vostro sito che cosa stanno realmente cercando di fare? Elencare i diversi tipi di compiti persone potrebbero fare su un sito, come li raggiungeranno, e quanto sia facile si vuole fare per loro. Questo potrebbe significare avere compiti veramente comuni sulla tua home page (ad esempio, &'; iniziare lo shopping &' ;, &'; conoscere quello che facciamo, e' etc.) o potrebbe significare garantire qualcosa come avere una casella di ricerca sempre facilmente accessibile. Alla fine della giornata, il vostro Web design è uno strumento per le persone a utilizzare, e la gente don &';! T come l'utilizzo di strumenti di fastidiosi
7. Allineamento
Mantenere le cose in fila è importante in Web design come è nel design di stampa. Che &'; s non vuol dire che tutto dovrebbe essere in linea retta, ma piuttosto che si dovrebbe passare attraverso e cerca di mantenere le cose in modo coerente posti su una pagina. Allineamento rende il design più ordinata e digeribile, oltre a rendere sembra più lucido. Pagina 8. Clarity (Nitidezza)
Mantenere il proprio disegno nitide e taglienti è super importante in Web design. E quando si tratta di chiarezza, e'. È tutto sui pixel
nel CSS, tutto sarà perfetto pixel quindi non s 'nulla di cui preoccuparsi, ma in Photoshop non è così. Per ottenere un design tagliente si deve:
Rimanere bordi forma scattarono ai pixel. Questo potrebbe comportare manualmente pulizia forme, linee e caselle se si &';. Re creandoli in Photoshop
Assicurati di ogni testo viene creato utilizzando l'impostazione anti-alias appropriato. Uso &'; Sharp &'; un sacco.
 Garantire che il contrasto è alto in modo che i confini sono chiaramente definiti.
 Over-enfatizzando i confini solo leggermente a esagerare il contrasto.
9. Coerenza
Coerenza significa fare tutto partita. Rubrica dimensioni, scelte di carattere, colorare, stili dei pulsanti, spaziatura, elementi di design, stili di illustrazioni, scelte fotografiche, ecc Tutto dovrebbe essere a tema per rendere il vostro disegno coerente tra le pagine e nella stessa pagina.
Mantenere il proprio disegno coerente è di circa essere professionale. Incongruenze in un disegno sono come errori di ortografia in un saggio. Hanno appena abbassare la percezione di qualità. Qualunque sia il vostro disegno assomiglia, mantenendolo coerente porterà sempre su una tacca. Anche se &';. Sa cattiva progettazione, almeno fanno un cattivo disegno coerente
Il modo più semplice per mantenere la coerenza è quello di rendere rapide decisioni e bastone a loro. Con una davvero grande sito, però, le cose possono cambiare nel processo di progettazione.
Avere un buon set di fogli di stile CSS possono anche andare un lungo cammino per rendere un disegno coerente. Provare per definire i tag di base, come e

in modo tale da rendere le vostre impostazioni predefinite corrispondono correttamente ed evitare di dover ricordare i nomi delle classi specifiche per tutto il tempo Hotel  .;