Il web design può essere ingannevolmente difficile, poiché implica il raggiungimento di un design che sia sia utilizzabile che piacevole, fornisca informazioni e costruisca un marchio, sia tecnicamente valido e visivamente coerente.
Aggiungete a ciò il fatto che molti web designer (me compreso) sono autodidatti, che il Web design è ancora abbastanza innovativo da essere solo un argomento secondario in molte istituzioni di design e che il medium cambia con la stessa frequenza con cui la tecnologia sottostante.
Così oggi ho messo insieme i miei 9 principi per un buon design del web. Queste sono solo le mie opinioni e ho cercato di collegarmi a più letture sugli argomenti in modo da non solo ascoltare la mia voce. Ovviamente, ho molti disclaimer: le regole sono fatte per essere infrante, i diversi tipi di design funzionano in modo diverso, e non sono sempre all'altezza del mio stesso consiglio. Quindi, per favore, leggi questi come sono intesi - solo alcune osservazioni che sto condividendo ...
Cattura la valle utilizza barre di colore per guidare l'occhio attraverso le sezioni dall'alto verso il basso ...
1. Precedenza (Guiding the Eye)
Il buon design Web, forse anche più di altri tipi di design, riguarda le informazioni. Uno dei più grandi strumenti nel tuo arsenale per fare questo è precedenza. Durante la navigazione di un buon design, l'utente dovrebbe essere guidato sullo schermo dal progettista. Chiamo questa precedenza, e riguarda il peso visivo di diverse parti del tuo design.
Un semplice esempio di precedenza è che nella maggior parte dei siti, la prima cosa che vedi è il logo. Questo è spesso perché è grande e impostato su ciò che è stato mostrato negli studi per essere il primo posto in cui la gente guarda (in alto a sinistra). la sua è una buona cosa dal momento che probabilmente vuoi che un utente sappia immediatamente quale sito stanno visualizzando.
Ma la precedenza dovrebbe andare molto oltre. Dovresti indirizzare gli occhi dell'utente attraverso una sequenza di passaggi. Ad esempio, potresti volere che il tuo utente passi da un logo / marchio a una frase di posizionamento primaria, accanto a un'immagine incisiva (per dare la personalità del sito), quindi al testo del corpo principale, con la navigazione e una barra laterale prendendo una posizione secondaria in la sequenza.
Ciò che il tuo utente dovrebbe guardare dipende da te, il web designer, per capire.
Per ottenere la precedenza hai molti strumenti a tua disposizione:
Posizione - Dove qualcosa si trova su una pagina influisce chiaramente sull'ordine in cui l'utente lo vede.
Colore - Usare colori audaci e sottili è un modo semplice per dire al tuo utente dove guardare.
Contrasto - Essere diversi fa risaltare le cose, mentre essere lo stesso le rende secondarie.
Taglia - Big ha la precedenza su poco (a meno che tutto sia grande, nel qual caso poco potrebbe risaltare grazie a Contrast)
Elementi di design - se c'è una gigantesca freccia che punta a qualcosa, indovina dove apparirà l'utente?
Ulteriori letture:
Puoi leggere più dei miei pensieri su Precedence in un vecchio post di Psdtuts chiamato Elements of Great Web Design: lo smalto. Joshua David McClurg-Genevese discute i principi del buon design e design del web in Digital-Web. Joshua ha anche il nome più lungo di sempre :-)
Marius ha un sito molto pulito, molto semplice con molto spazio
2. Spaziatura
Quando ho iniziato a disegnare, volevo riempire ogni spazio disponibile di cose. Lo spazio vuoto sembrava dispendioso. In realtà è vero il contrario.
Spacing rende le cose più chiare. Nel web design ci sono tre aspetti dello spazio che dovresti considerare:
Interlinea Quando estrai il testo, lo spazio tra le linee influisce direttamente sulla leggibilità che appare. Troppo poco spazio rende facile il passaggio degli occhi da una linea all'altra, troppo spazio significa che quando si finisce una riga di testo e si passa a quella successiva, l'occhio può perdersi. Quindi devi trovare un mezzo felice. Puoi controllare l'interlinea in CSS con il selettore "line-height". Generalmente trovo che il valore predefinito sia di solito troppo piccolo. Line Spacing è tecnicamente chiamato principale (pronunciato ledding), che deriva dal processo utilizzato dalle stampanti per separare le righe di testo nei giorni precedenti - posizionando barre di piombo tra le linee.
Imbottitura Il testo in generale non dovrebbe mai toccare altri elementi. Le immagini, ad esempio, non devono toccare il testo, né i bordi né i tavoli. Il riempimento è lo spazio tra gli elementi e il testo. La semplice regola qui è che dovresti sempre avere spazio lì. Ci sono ovviamente delle eccezioni, in particolare se il testo è una sorta di titolo / grafica o il tuo nome è David Carson :-) Ma come regola generale, lo spazio tra il testo e il resto del mondo lo rende infinitamente più leggibile e piacevole.
Spazio bianco Prima di tutto, lo spazio bianco non ha bisogno di essere bianco. Il termine si riferisce semplicemente allo spazio vuoto su una pagina (o allo spazio negativo come talvolta viene chiamato). Lo spazio bianco viene utilizzato per dare equilibrio, proporzione e contrasto a una pagina. Un sacco di spazio bianco tende a rendere le cose più eleganti e raffinate, quindi ad esempio se si visita un sito di architetto costoso, quasi sempre si vede molto spazio. Se vuoi imparare a usare gli spazi in modo efficace, passa attraverso una rivista e guarda come sono strutturati gli annunci. Gli annunci di grandi marche di orologi e automobili e simili tendono ad avere un sacco di spazio vuoto usato come elemento di design.
Ulteriori letture:
A WebDesignFromScratch c'è un grande articolo chiamato la guida al design how-to del Web 2.0, che tratta della semplicità, un concetto che utilizza molto la spaziatura. Ci sono un sacco di altre cose utili anche lì!
Noodlebox fa un buon lavoro usando gli stati on / off nella loro navigazione per mantenere l'orientamento dell'utente.
3. Navigazione
Una delle esperienze più frustranti che si possono avere su un sito Web è l'incapacità di capire dove andare o dove si trova. Mi piacerebbe pensare che per la maggior parte dei Web designer, la navigazione è un concetto che siamo riusciti a padroneggiare, ma trovo ancora alcuni esempi piuttosto negativi. Ci sono due aspetti della navigazione da tenere a mente:
Navigazione - Dove puoi andare? Ci sono alcune regole di buon senso da ricordare qui. I pulsanti per spostarsi all'interno di un sito dovrebbero essere facili da trovare: verso la parte superiore della pagina e facili da identificare. Dovrebbero sembrare pulsanti di navigazione e essere ben descritti. Il testo di un pulsante dovrebbe essere abbastanza chiaro su dove ti sta portando. A parte il buon senso, è anche importante rendere la navigazione utilizzabile. Ad esempio, se si dispone di un sottomenu di rollover, assicurarsi che una persona possa accedere alle voci del sottomenu senza perdere il rollover è importante. Allo stesso modo cambiare il colore o l'immagine sul rollover è un feedback eccellente per un utente.
Orientamento - Dove sei adesso? Ci sono molti modi in cui puoi orientare un utente, quindi non ci sono scuse per non farlo. Nei siti di piccole dimensioni, potrebbe essere solo una questione di una grande intestazione o di una versione 'down' del pulsante appropriato nel tuo menu. In un sito più ampio, potresti fare uso di tracce di briciole di pane, sottotitoli e una mappa del sito per i veri perdenti.
Ulteriori letture:
SmashingMagazine ha una selezione di stili di navigazione basati su CSS che sono belli da vedere, e # 3 è uno dei miei! A List Apart ha anche un buon articolo sull'orientamento chiamato Where Am I?
4. Design per costruire
La vita è diventata molto più semplice da quando i web designer sono passati ai layout CSS, ma anche adesso è ancora importante pensare a come costruire un sito quando sei ancora in Photoshop. Prendi in considerazione cose come:
Può davvero essere fatto? Potresti aver scelto un font sorprendente per la tua copia del corpo, ma in realtà è un font HTML standard? Potresti avere un design che sembra bello ma largo 1100 px e che si tradurrà in uno scroller orizzontale per la maggior parte degli utenti. È importante sapere cosa può e cosa non si può fare, ed è per questo che credo che tutti i web designer dovrebbero anche costruire siti, almeno qualche volta.
Cosa succede quando una schermata viene ridimensionata? Hai bisogno di sfondi ripetuti? Come funzioneranno? Il design è centrato o allineato a sinistra?
Stai facendo tutto ciò che è tecnicamente difficile? Anche con il posizionamento CSS, alcune cose come l'allineamento verticale sono ancora un po 'dolorose e talvolta meglio evitate.
È possibile che piccole modifiche nel design semplificino notevolmente la modalità di creazione? A volte spostare un oggetto in un disegno può fare una grande differenza nel modo in cui devi codificare il tuo CSS in un secondo momento. In particolare, quando elementi di un disegno si incrociano, aggiunge un po 'di complessità alla costruzione. Quindi se il tuo progetto ha, diciamo tre elementi e ogni elemento è completamente separato l'uno dall'altro, sarebbe davvero facile da costruire. D'altra parte, se tutti e tre si sovrappongono, potrebbe essere ancora facile, ma probabilmente sarà un po 'più complicato. Dovresti trovare un equilibrio tra ciò che sembra buono e piccole modifiche che possono semplificare la tua creazione.
Per i siti di grandi dimensioni, in particolare, puoi semplificare le cose? C'è stato un tempo in cui creavo i pulsanti immagine per i miei siti. Quindi, se ci fosse un pulsante di download, ad esempio, farei una piccola immagine di download. Nell'ultimo anno circa, sono passato all'utilizzo di CSS per creare i miei pulsanti e non ho mai guardato indietro. Certo, significa che i miei pulsanti non hanno sempre la flessibilità che potrei desiderare, ma i risparmi in termini di tempo di costruzione dovuti al non dover fare decine di piccole immagini a pulsante sono enormi.
Se qualcuno conosce il buon tipo è iLoveTypography!
5. Tipografia
Il testo è l'elemento più comune del design, quindi non sorprende che ci sia passato molto tempo. È importante considerare cose come:
Scelte dei caratteri - Diversi tipi di caratteri dicono cose diverse su un design. Alcuni sembrano moderni, altri sembrano retrò. Assicurati di utilizzare lo strumento giusto per il lavoro.
Dimensioni dei caratteri -Anni fa era di moda avere un testo veramente piccolo. Fortunatamente, in questi giorni le persone hanno iniziato a capire che il testo è da leggere, non solo da guardare. Assicurati che le dimensioni del tuo testo siano coerenti, sufficientemente grandi per essere lette e proporzionate in modo che le intestazioni e le sottotitoli si distinguano in modo appropriato.
Spaziatura - Come discusso in precedenza, è importante considerare la spaziatura tra le linee e lontano da altri oggetti. Dovresti anche pensare alla spaziatura tra le lettere, anche se sul Web è meno importante, dato che non hai molto controllo.
Lunghezza della linea - Non esiste una regola dura e veloce, ma generalmente le tue righe di testo non dovrebbero essere troppo lunghe. Più sono lunghi, più sono difficili da leggere. Piccole colonne di testo funzionano molto meglio (pensa a come un testo pubblica il testo).
Colore - Una delle mie peggiori abitudini è rendere il testo a basso contrasto. Sembra buono, ma non legge molto bene, sfortunatamente. Tuttavia, mi sembra di farlo con ogni progettazione di siti Web che abbia mai realizzato, per quanto mi riguarda.
paragraphing - Prima di iniziare a disegnare, mi piaceva giustificare il testo in ogni cosa. Ha fatto dei bei bordi su entrambi i lati dei miei paragrafi. Sfortunatamente, il testo giustificato tende a creare strani spazi tra le parole in cui sono stati auto-spaziati. Non è bello per i tuoi occhi quando leggi, quindi rimani allineato a sinistra a meno che tu non abbia un corpo magico di testo che capita di spaziare perfettamente.
Ulteriori letture:
Nick La di WebDesignerWall ha un grande articolo sulla tipografia online chiamato Typographic Contrast and Flow .
Happycog conosce l'usabilità al suo interno e il proprio sito è semplice e facile da usare.
6. Usabilità
Il web design non è solo una bella foto. Con così tante informazioni e interazione da effettuare su un sito Web, è importante che tu, il progettista, provveda a tutto. Ciò significa rendere utilizzabile la progettazione del tuo sito Web.
Abbiamo già discusso alcuni aspetti dell'usabilità: navigazione, precedenza e testo. Qui ci sono tre più importanti:
Aderendo agli standard Ci sono certe cose che le persone si aspettano, e non dare loro causa di confusione. Ad esempio, se il testo ha una sottolineatura, ti aspetti che sia un collegamento. Fare diversamente non è una buona pratica di usabilità. Certo, puoi rompere alcune convenzioni, ma la maggior parte del tuo sito Web dovrebbe fare esattamente ciò che le persone si aspettano che faccia!
Pensa a cosa faranno effettivamente gli utenti La prototipazione è uno strumento comune utilizzato nel design per "provare" un progetto. Questo perché spesso quando usi un design, noti piccole cose che fanno una grande differenza. ALA ha avuto un articolo un po 'indietro chiamato Never Use a Warning When You Mean Undo, che è un eccellente esempio di una piccola decisione di design dell'interfaccia che può rendere la vita risucchiare per un utente.
Pensa alle attività dell'utente Quando un utente arriva sul tuo sito, cosa sta effettivamente cercando di fare? Elencare i diversi tipi di compiti che le persone potrebbero svolgere su un sito, come raggiungerli e quanto è facile farlo per loro. Ciò potrebbe significare avere attività molto comuni nella tua home page (ad esempio "inizia a fare acquisti", "scopri cosa facciamo," ecc.) O potrebbe significare garantire che qualcosa come avere una casella di ricerca sia sempre facilmente accessibile. Alla fine della giornata, il tuo Web design è uno strumento per le persone da usare, e alle persone non piace usare strumenti fastidiosi!
Ulteriori letture:
AListApart ha molti articoli sull'usabilità web.
La poltiglia elettrica sembra ruvida, ma se guardi da vicino ti accorgi che c'è una rete solida e le cose in realtà sono tutte allineate.
7. Allineamento
Mantenere le cose in fila è importante tanto nel Web design quanto nella stampa. Questo non vuol dire questo qualunque cosa dovrebbe essere in linea retta, ma piuttosto che dovresti passare e cercare di mantenere le cose sistematicamente posizionate su una pagina. L'allineamento rende il tuo disegno più ordinato e digeribile, oltre a renderlo più lucido.
Potresti anche voler basare i tuoi disegni su una griglia specifica. Devo ammettere che non lo faccio consapevolmente - anche se ovviamente un sito come Psdtuts + in realtà ha una struttura a griglia molto solida. Quest'anno ho visto alcuni articoli davvero interessanti sulla progettazione della griglia, tra cui la progettazione di SmashingMagazine con approccio basato sulla griglia e un approccio al di fuori della griglia. In effetti, se sei interessato alla progettazione della griglia, dovresti assolutamente visitare la casa di DesignByGrid.com, opportunamente denominata, per tutte le cose griglie.
Il sito ExpressionEngine è l'anima della chiarezza. Tutto è nitido e pulito.
8. Chiarezza (nitidezza)
Mantenere il tuo design nitido e nitido è estremamente importante nel Web design. E quando si parla di chiarezza, si tratta di pixel.
Nel tuo CSS, tutto sarà pixel perfetto, quindi non c'è nulla di cui preoccuparsi, ma in Photoshop non è così. Per ottenere un design nitido devi:
Mantieni i bordi della forma spezzati in pixel. Ciò potrebbe comportare la pulizia manuale di forme, linee e riquadri se li stai creando in Photoshop.
Assicurati che qualsiasi testo venga creato utilizzando l'impostazione anti-alias appropriata. Io uso molto "Sharp".
Garantire che il contrasto sia elevato in modo che i confini siano chiaramente definiti.
Sovrapposizione dei bordi solo leggermente per esagerare il contrasto.
Ulteriori letture:
Ho scritto un po 'di più sulla chiarezza in Elements of Great Web Design: lo smalto. Ho notato che i designer di stampa che passano al web design, in particolare, non pensano in pixel, ma è davvero vitale.
Veerle fa un ottimo lavoro nel mantenere uniformi i più piccoli dettagli su tutta la linea.
9. Coerenza
Coerenza significa far coincidere tutto. Dimensioni dell'intestazione, scelte dei caratteri, colorazione, stili dei pulsanti, spaziatura, elementi di design, stili di illustrazioni, scelte fotografiche, ecc. Tutto dovrebbe essere a tema per rendere il tuo disegno coerente tra le pagine e sulla stessa pagina.
Mantenere il tuo design coerente significa essere professionisti. Incoerenze in un disegno sono come errori di ortografia in un saggio. Abbassano solo la percezione della qualità. Qualunque sia il tuo design, tenerlo coerente lo farà sempre notare. Anche se si tratta di un cattivo design, almeno renderlo un disegno coerente e pessimo.
Il modo più semplice per mantenere la coerenza è prendere decisioni tempestive e attenervisi. Con un sito molto grande, tuttavia, le cose possono cambiare nel processo di progettazione. Quando ho progettato FlashDen, ad esempio, il processo ha richiesto mesi e alla fine alcune mie idee per pulsanti e immagini erano cambiate, quindi ho dovuto tornare indietro e rivedere le pagine precedenti per adattarle esattamente alle successive.
Avere un buon set di fogli di stile CSS può anche fare molto per creare un design coerente. Prova a definire i tag di base come
e
in modo tale che i valori predefiniti corrispondano correttamente ed eviti di dover ricordare nomi di classi specifici per tutto il tempo.
Ulteriori letture:
L'articolo ThinkVitamin Come CRAP è il tuo design? discute la ripetizione andando giù per la pagina e quanto sia importante. L'articolo è scritto da Mike Rundle che disegna 9rules, quindi sai che vale la pena leggerlo!
Prendi il mio libro!
Ti è piaciuto questo articolo? Ho appena completato un libro sul freelance che puoi acquistare online come eBook. Andare oltre per saperne di più su Come diventare un Freelancer Rockstar.
Share
Accentsconagua