Design Shack è nato come una semplice galleria CSS, con siti Web ben disegnati che hanno catturato la mia attenzione. Decine di migliaia di disegni sono stati presentati negli ultimi anni e ognuno è stato considerato attentamente per l'inclusione. Il fatto triste è che solo il 5% circa delle presentazioni si distingue dalla massa.
Ciò potrebbe essere dovuto a qualsiasi numero di fattori; il sito non aveva le nozioni di base giuste, non aveva nulla di notevole da mostrare, o (occasionalmente) era deluso dal contenuto. Questa guida ti guiderà su come assicurarti di avere una grande possibilità di inclusione, evitando tutte le insidie che sono state comunemente trovate dai designer. In ogni fase, daremo un'occhiata a un grande esempio, e uno che non è così buono.
Unghie le basi
È comune vedere un sito cadere al primo ostacolo, non inchiodando le basi di un buon design. Tra le aree che meritano il tempo necessario per andare bene ci sono tipografia, spaziatura e colori (o in genere una combinazione di tutte e tre!).
Se stai cercando una panoramica completa degli elementi costitutivi del design, dai un'occhiata a Five Simple Steps. Vale ogni centesimo e mi ha insegnato molto sui principi di design che in precedenza trascuravo.
Tipografia
La tipografia è probabilmente l'elemento più comunemente trascurato di un design. Ha una grande importanza e può creare o distruggere un sito web.
Pensa attentamente al tipo che vorresti usare nei titoli e nel corpo del tuo sito. Anche se qualche anno fa eri severamente limitato a una manciata di? Web safe? i caratteri, usando un sistema come Cufon o SIFR significa che le possibilità di caratteri sono infinite.
L'importante è selezionare due o tre tipi di carattere e rispettarli in una gerarchia ragionevole in tutto il sito. Crea un post di esempio che mostri come sono diversi i vari tag, per assicurarti di aver stilizzato tutto correttamente. Questo potrebbe includere:
- Intestazioni (h1 e successive)
- elenchi
- Citazioni
- Collegamenti (e collegamenti titolo / immagine)
- Acronimi
- Enfasi / Corsivo / Grassetto / Forte
- Formattazione del codice
Spaziatura
È fondamentale posizionare gli oggetti correttamente nella pagina con spazio sufficiente per garantire che tutto sia leggibile. La conformità ad alcuni tipi di struttura della griglia è importante, con il sistema a griglia 960 una scelta popolare.
Assicurati che lo spazio sia ampiamente utilizzato e attiri l'attenzione del lettore su elementi importanti della pagina.
Colori
Scegliere una combinazione di colori per un sito è tutt'altro che semplice (e copriremo alcuni strumenti per aiutarti in un prossimo articolo). È difficile trovare uno schema di colori unico, che non toglie nulla alla leggibilità della pagina.
Se sei bloccato per l'ispirazione, Color Lovers è un ottimo sito per sfogliare rapidamente diversi campioni e combinazioni.
Aggiungi qualcosa di creativo
Mentre colpire tutte le basi può essere sufficiente per ottenere un sito in evidenza, fare il miglio in più con un design nuovo e innovativo può davvero aiutare a catturare l'attenzione. Questo potrebbe essere un layout interessante, uno sfondo o un'attenzione incredibile ai dettagli su ogni ultimo elemento della pagina.
Il web design spesso diventa incredibilmente? Bloccato in un solco ?, con un certo stile che diventa pervasivo per alcuni mesi prima che qualcosa di nuovo aumenti di popolarità. Siti che si liberano di questo? Trend-following? hanno molte più probabilità di essere presenti, in quanto hanno molto più potenziale da ispirare.
Elementi grafici
Il luogo più ovvio per l'innovazione da cui provengono sono gli elementi grafici su una pagina. Detto questo, la grafica ha bisogno di migliorare coerentemente l'aspetto di una pagina, piuttosto che sentirsi disgiunti e ingombri. Questi due esempi sono grandi illustrazioni di immagini e illustrazioni usate per l'effetto buono e cattivo:
Aggiungere una grafica unica e interessante è un ottimo modo per inserire la personalità nel tuo sito e far sentire i lettori a casa.
Animazione
Con le possibilità di animazione fornite da sistemi come jQuery, non c'è motivo di mantenere un sito statico. Adesso è anche possibile farlo in modo usabile e semantico senza dover ricorrere a Flash.
Non sto parlando di un'animazione appiccicosa, piuttosto degli effetti che fanno sembrare una pagina? e più fluido. Un ottimo esempio di questo è il sito personale di Tim Van Damme, che è un vero piacere usare:
Prova ad aggiungere un semplice effetto alla proprietà rollover dei tuoi link, per offrire una transizione graduale da uno stato all'altro.
Navigazione
Lo scopo principale della navigazione del sito web dovrebbe essere sempre quello di fornire un modo chiaro per il lettore di accedere ai contenuti. Tuttavia, ciò non significa che è necessario attenersi a una lista standard di collegamenti. Sia che tu stia andando per la navigazione verticale o orizzontale, è facile aggiungere interesse con alcuni elementi grafici:
Mi rendo conto di essere molto ipocrita qui (guarda la nostra noiosa lista di link!), Ma sento che Design Shack si adatta meglio con uno stile di navigazione semplice. Siti diversi hanno requisiti diversi!
Potresti dare un'occhiata a uno dei nostri siti partner, 13 Styles per alcuni menu interessanti da scaricare gratuitamente.
Pensa due volte al contenuto
Molte persone pensano che dovrebbe essere possibile mantenere il design e il contenuto del tuo sito relativamente separati. Questo è raramente il caso, e il contenuto di una pagina può avere un impatto importante sul fatto che sia adatto all'inclusione.
Copia mal scritta, errori di ortografia e imprecisioni grammaticali sono abbastanza imperdonabili. Se speri di proporre un'immagine professionale con il tuo sito web, dedicare del tempo per perfezionare la copia è davvero importante. Dice molto della tua attenzione ai dettagli e la maggior parte delle gallerie è improbabile che ti mostri se una pagina è piena di errori di ortografia.
Annunci
Molti siti si basano sulla pubblicità per generare reddito e mantenere un progetto in corso (noi inclusi!).Ciò non significa che gli annunci debbano venire a scapito di un buon design e che debbano essere usati con parsimonia. Se hai abbastanza richieste per riempire ogni pollice libero di spazio sul tuo sito con la pubblicità, semplicemente non stai caricando abbastanza!
In generale, è meglio (anche se non necessariamente altrettanto redditizio) evitare di confondere i lettori. Non vendere link pubblicitari all'interno del testo della tua pagina e non cercare di camuffare pubblicità. Collaborare con aziende che ti piacerebbe trattare con te stesso e mostrare il loro prodotto con orgoglio. Aiuta anche se puoi assicurarti che gli annunci siano ben progettati (anche se questo è raramente possibile!)
Un esempio di una rete di siti che fanno bene questo è Tuts +. Hanno una chiara distinzione tra contenuto e pubblicità, anche se offrono ancora una posizione di rilievo per i loro sponsor:
Quantità
Una regola generale era che il contenuto non doveva andare oltre la piega? In realtà, questa? Piega? non è così importante come una volta le persone pensavano. Ora gli utenti sono completamente abituati a scorrere e si aspettano di visitare il tuo sito.
La cosa importante da raggiungere è trasmettere il messaggio principale di una pagina il prima possibile. Sii ragionevole con il numero di post o la quantità di contenuti visualizzati su ciascuna pagina per due motivi: (1) visualizzare i 30 post più recenti significa che la tua pagina prende un lungo tempo per caricare, e (2) una colonna di contenuti molto lunga è improbabile che? equilibrio? con la lunghezza altre colonne sulla tua pagina.
Vale la pena?
Una domanda senza dubbio in corso a questo punto è se tutto questo lavoro valga la pena. Perché vorresti essere incluso in una galleria CSS? Buona domanda.
- Promozione e consapevolezza: Tutti amano un po 'di traffico verso un nuovo design, e il fatto di essere presenti è un modo infallibile per far visitare un certo numero di persone al tuo sito. Il tuo compito è convertirli in abbonati, fedeli fan o clienti paganti.
- Prestigio: Essere presenti in una gamma di diverse gallerie è un grande richiamo di fiducia. Detto questo, non renderlo il tuo unico obiettivo (e per favore, per favore, non elencarli tutti nel footer)
- Lavoro futuro: Ho scoperto che i potenziali clienti utilizzano spesso le gallerie di design come un modo per trovare un designer con uno stile particolare che stanno cercando. Essere presenti può essere un buon modo per portare nuovi affari.
In bocca al lupo!
Come bonus per arrivare alla fine di questo articolo, vorrei offrirti la possibilità di inviare un sito a Design Shack gratuitamente (di solito costa $ 3,50). Una volta esaminati i punti precedenti, inviami un'email a [email protected]. Vedrò la tua richiesta e - si spera - vedrai presto il tuo sito su Design Shack!
Questo indirizzo email è valido per una settimana, dopodiché lo spegneremo!