10 regole di progettazione Web che è possibile interrompere
Poiché il web design e il design in generale si sono evoluti, sono state stabilite regole per garantire design coerenti e utilizzabili.
Alcune di queste regole sono state create semplicemente perché i creatori di siti web hanno abusato di alcuni principi senza riguardo per i loro utenti.
Ma queste regole non sono applicate da nessuno e dovrebbero essere rotte quando necessario, specialmente quando si rompono porterebbe a un design sorprendente.
In questo articolo, presentiamo 10 regole che puoi interrompere se soddisfano le tue esigenze di progettazione.
Regola n. 1: non visualizzare la barra di scorrimento orizzontale
Un numero significativo di mouse non ha una rotellina del mouse orizzontale. Ciò rende difficile lo scorrimento a sinistra o a destra quando il contenuto di una pagina web si estende oltre i lati del browser.
Può essere fastidioso dover portare il cursore del mouse in fondo alla finestra e trascinare la barra di scorrimento solo per vedere una parola o due che si trova oltre l'area visibile della pagina. Detto questo, ecco alcuni siti ben progettati che consentono alla barra di scorrimento di funzionare in modo efficace.
Benek
Benek usa JavaScript per cambiare la direzione di scorrimento della rotellina del mouse da verticale a orizzontale. Ogni elemento nel portafoglio di Benek è separato nella sua colonna. Il sito ha un aspetto sorprendentemente fresco e scorre senza intoppi.
Guru di scarpe
Guru di scarpe scappa con lo scrolling orizzontale perché sfrutta il modo in cui le persone guardano le scarpe. Le persone guardano la maggior parte dei prodotti dall'alto verso il basso, ma le scarpe sono diverse. Gli occhi delle persone di solito si muovono su tutta la lunghezza della scarpa. Usando questa abitudine a proprio vantaggio, Shoe Guru fa fluire il design del proprio sito web nella stessa direzione, rendendo naturale il movimento.
Stephane Tartelin
Stephane Tartelin usa la barra di scorrimento orizzontale per far apparire la sua opera d'arte come se fosse in una galleria d'arte. Sebbene la rotellina del mouse verticale non funzioni come negli esempi sopra, l'effetto funziona sorprendentemente bene. Si potrebbe anche obiettare che l'effetto sarebbe diminuito se la rotellina del mouse fosse ricodificata per scorrere orizzontalmente.
Terapia grafica
Mentre Terapia grafica non mostra una barra di scorrimento orizzontale sulla sua pagina, consente comunque lo scorrimento orizzontale facendo clic e trascinando sullo schermo. La teoria grafica utilizzava la navigazione orizzontale perché tutte le sue immagini hanno la stessa altezza ma non la stessa larghezza. La navigazione orizzontale aiuta il sito a scorrere senza intoppi.
La via orizzontale
La via orizzontale è una vetrina di siti Web che utilizzano lo scorrimento orizzontale. La grafica sgangherata è bellissima e questo sito è unico per quanto riguarda le gallerie CSS.
Regola n. 2: utilizzare un numero minimo di facce carattere
Troppi caratteri di solito sono in conflitto tra loro e sopraffanno l'osservatore. Ogni carattere ha una personalità e troppe personalità possono creare disordine.
Per utilizzare efficacemente più di un paio di font, un design deve essere molto orientato al testo e il resto del design deve essere relativamente silenzioso. Ecco alcuni esempi di siti che utilizzano questo senso di conflitto e disordine per coinvolgere l'utente.
Link LA
Link LA usa molti tipi di carattere in un layout non lineare per creare un senso di energia. La pagina è difficile da leggere rapidamente ma attira l'utente. Vale anche la pena notare che nessuno dei caratteri è eccessivamente decorativo; ogni parola è leggibile, mantenendo il design nitido e pulito.
Geo Elements Design Studio
Usare una varietà di caratteri di solito trasmette un senso di energia e caos, ma Geo Elements Design Studio Il sito web è molto aperto e pulito. A ogni font viene assegnato il proprio spazio in modo che il visualizzatore non lo associ a un altro font. L'immagine del cielo sullo sfondo aiuta a rinforzare il senso di apertura.
Richard Stelmach
A differenza dell'ultimo esempio, Richard Stelmach spinge i suoi diversi caratteri vicini. Il design funziona perché solo un font non sembra disegnato a mano e gli altri due funzionano bene con l'illustrazione. I caratteri disegnati a mano di solito funzionano bene insieme, anche quando ci sono molte facce di caratteri diversi.
Satsu
Satsu sembra avere un sacco di caratteri diversi, ma in realtà ne ha solo tre (escluso l'articolo del portfolio Sport Council). Distanziando ogni cosa con attenzione, Satsu associa determinate righe di testo tra loro, anche se il testo potrebbe essere in caratteri diversi.
Il titolo del logo è in un font, ei due sottotitoli hanno ciascuno il proprio carattere, ma lo spettatore raggruppa naturalmente questi tre elementi di testo. Satsu è in grado di creare energia senza travolgere la pagina con personalità.
Regola n. 3: non usare troppi colori
La paura di andare troppo lontano con un design è ciò che separa i professionisti dai debuttanti e dai debuttanti dall'oblio. L'ignaro tentativo di rendere i loro progetti il più estremo possibile, con parole in fiamme, testo lampeggiante e quanti più colori possibili.
I Rookies vogliono mantenere i loro disegni sottili e facili per gli occhi, ma alla fine i loro disegni possono a volte sembrare senza vita. I seguenti disegni accattivanti sono da veri professionisti che stanno spingendo i confini.
Matt Mullenweg
Matt Mullenweg's il design splendidamente colorato sembra un dipinto ad acquerello (il sito è stato aggiornato da quando è stato scritto questo articolo). Tutti i colori sullo sfondo catturerebbero l'attenzione di chiunque.
In generale, i buoni disegni con una tonnellata di colori avranno questi colori sullo sfondo, con una tavolozza più semplice in primo piano. Leggere il testo è molto difficile quando ci sono troppe cose in corso.
Travic Isaacs
Travis Isaacs's il design ha una sfumatura verticale colorata sullo sfondo che rende il disegno colorato. Questo sito Web ha il rosa acceso come colore di collegamento, che è un'ottima scelta per i designer che desiderano creare un effetto colorato.
James De Angelis
James De Angelis ' il sito web mostra che il testo può essere colorato senza apparire come da principiante. Il design è molto scarno e la tagline è sicuramente al centro dell'attenzione.
Regola n. 4: rendere evidente l'obiettivo del sito
Qualcosa che viene davvero affollato nelle orecchie dei giovani designer è che un design dovrebbe dire immediatamente agli spettatori cosa stanno guardando prima di leggere qualsiasi testo.
Il riconoscimento del marchio è importante per le grandi aziende, ma a volte i ragazzi più piccoli devono essere un po 'più intelligenti per attirare l'attenzione dello spettatore. Trattenere le informazioni può incuriosire lo spettatore e "stuzzicare" le persone nel volere saperne di più.
L'applicazione di questa tecnica al web design può aumentare notevolmente il tempo che gli utenti rimangono sul tuo sito.
Cetrotrees
Sulla maggior parte dei portafogli oggi, il libero professionista o l'azienda di solito si presenta e spiega il loro lavoro. Cerotreees mette invece alcuni collegamenti vagamente etichettati sulla sinistra e esempi del suo lavoro sulla destra, ma nulla spiega l'idea o la persona dietro di essa.
L'aria di mistero che circonda il sito attira l'utente a rimanere.
L'ultimo mixtape
L'ultimo mixtape è un altro portfolio che mostra il suo lavoro e nient'altro. Tali disegni emanano una sensazione di estrema sicurezza. Non provano mai a vendersi; si aspettano solo che l'utente venga spazzato via e venga a chiedere l'elemosina per un contratto.
Peter Pearson
L'uso di una schermata iniziale è un buon modo per rallentare il processo di pensiero dell'utente e ispirarlo a scavare più a fondo. L'obiettivo della pagina iniziale è in genere quello di spiegare rapidamente il sito con foto o un breve testo.
Ma in Di Peter Pearson caso, il suo obiettivo è quello di evocare un sentimento. Il grande cielo e l'effetto testo splatterato fanno un ottimo lavoro a evocare la curiosità perché queste cose di solito non appaiono insieme. Questo sito fa anche un ottimo lavoro nel continuare l'emozione creata dalla pagina iniziale nel contenuto reale.
Il movimento a scorrimento laterale e le linee animate che seguono l'utente sono davvero efficaci.
Piepmatzel
Un ottimo modo per aggirare la barriera linguistica è non usare parole. Piepmatzel è una galleria CSS e le persone che hanno già visto una galleria CSS probabilmente la riconosceranno subito.
Coloro che non hanno possono essere abbastanza incuriositi da dare un paio di miniature di un click nella speranza di capire il modello. La piccola quantità di testo in fondo alla pagina aiuta nell'ordinamento ed è superflua.
Regola n. 5: la navigazione dovrebbe essere facile da capire
La navigazione non dovrebbe essere il collo di bottiglia di un sito. Gli utenti dovrebbero essere in grado di trovare rapidamente ciò che vogliono. A volte, tuttavia, una navigazione non intuitiva ma coinvolgente può aiutare l'utente a sentirsi connesso al sito e a cosa sta promuovendo.
Alvin Tang
Come accennato nella sezione precedente, si trasmette un'aria di fiducia quando un portfolio non si sillaba. Questo è il caso in Alvin Tang's portfolio fotografico. Quando arriva sul sito per la prima volta, l'utente non riconosce immediatamente le parole che vedono come link.
Questa incertezza dovrebbe spingerli a fare un po 'di giro. Muovendo il mouse sopra una parola si scopre che si tratta in effetti di un collegamento, e dopo averlo fatto clic, viene caricata una foto stupenda. La foto attirerà gli utenti a continuare la navigazione.
Per vedere più foto, gli utenti devono fare clic sul pulsante "Indietro" sul browser (qualcosa che la maggior parte delle persone capisce di fare) e quindi fare clic su un altro collegamento. Non c'è una presa a mano nel design e funziona molto bene. Questo non è un "design splendido" convenzionalmente, ma offre esattamente ciò di cui ha bisogno.
Kasulo
Kasulo 'S la navigazione non è difficile da capire, ma l'utente medio potrebbe non sapere esattamente cosa fare all'arrivo sul sito. Dopo il primo clic, però, tutto diventa ovvio.
L'utente naviga i pezzi del portfolio in stile 3D e gli ultimi elementi appaiono più vicini all'inizio. Usare la rotellina del mouse è ancora più divertente.
Marcio Kogan
Marcio Kogan's il sito è un altro esempio di grande navigazione che non è immediatamente evidente. L'istruzione "Drag me" è difficile da resistere e, una volta che l'utente lo fa, è sulla buona strada per girare gli oggetti del portfolio. Le anteprime di passaggio del mouse sono un piccolo dettaglio ma davvero impressionante.
Ceranco
Se un cliente chiedesse a un designer di realizzare il proprio sito in 3-D, come un videogioco sparatutto in prima persona, la maggior parte dei progettisti riderebbe in silenzio a se stessi, farà un respiro profondo e poi lentamente spiegherà perché sarebbe una cattiva idea .
Mentre il sito Web per Ceranco non è esattamente uno sparatutto in 3-D, potrebbe facilmente essere confuso per una sorta di gioco per computer indie. Siti come questo sono ottimi per coinvolgere gli utenti. Sebbene il lungo tempo di caricamento e la scarsa ottimizzazione dei motori di ricerca rendano questo aspetto non ideale per la maggior parte dei progetti, vale sicuramente la pena di pensarci due volte.
Regola n. 6: Usa colori diversi per il testo e lo sfondo
Questa regola forse non è scritta dappertutto, ma molti principianti hanno così tanta paura di rendere illeggibile il testo che non considerano l'utilizzo dello stesso colore di base sia per lo sfondo che per il font stesso. Puoi seguire alcune semplici tecniche per far funzionare i colori simili.
Linksys
Il Linksys il sito è pulito a causa di come ha un blu per tutti i suoi collegamenti, anche se il colore di sfondo è varie sfumature di blu. Sebbene sia un rischio e forse non la più grande decisione sul colore, funziona.
Brad Colbow
Brad Colbow's il design è simile a quello di Linksys a causa del testo blu su sfondo blu. Il blu sul blu è difficile da ottenere bene, specialmente con tanti blu diversi in tutto il sito.
Powerset
Finora in questa sezione abbiamo visto solo siti Web blu, perché il testo blu è più difficile da leggere per l'occhio umano e il tipo di blu così leggibile è sempre impressionante. Se un effetto di testo funziona in blu, molto probabilmente funzionerà con qualsiasi colore.
Powerset usa uno stile tipografico per il suo carattere per creare un effetto 3D che separa efficacemente il testo dallo sfondo.
Artista In Design
Artista In Design non solo ha il testo verde su sfondo verde e il testo giallo / beige su uno sfondo giallo, ma ha il testo direttamente sopra una foto.
Mentre alcune singole lettere possono essere difficili da leggere, le parole nel loro complesso rimangono leggibili. Questo tipo di effetto dovrebbe quasi sempre essere al centro di un progetto.
Horacio Bella
Horacio Bella usa un altro effetto 3-D sul suo portafoglio. In questo caso, le lettere sembrano spuntare piuttosto che essere ammaccate verso l'interno. Senza questo effetto, la leggibilità sarebbe stata notevolmente ridotta. Un altro buon effetto usato qui è la stretta crenatura delle lettere, che migliora ulteriormente la leggibilità.
Regola # 7: non mettere l'animazione nel modo dei tuoi contenuti
Seriamente, non far apparire piccoli annunci Flash proprio dove l'utente sta leggendo. Lo stesso vale per le caselle di sondaggio che appaiono quando l'utente si trova nel mezzo di una frase. Gli utenti non amano essere distratti quando sono a metà di una frase. Salvo che…
È davvero difficile non rimanere incantati dal piccolo ragno ABA il sito Il design è pulito, e anche se il ragno è una distrazione, va bene. Finora, questo sito credo sia l'unica eccezione alla regola.
Regola n. 8: attenersi ai caratteri Web-Safe
Sebbene le tecniche di sostituzione della faccia dei caratteri siano ancora giovani, stanno già facendo un grande successo. sIFR è stato il primo e di recente Cufon e Typefasce.js è emerso.
Diseñorama
Sul Diseñorama sito web, il testo rosso "Recientemente" è selezionabile. Uno svantaggio è che se il sito non viene caricato istantaneamente, l'utente vedrà brevemente il carattere semplice originale.
Un altro svantaggio è che se l'utente ha disabilitato JavaScript o Flash, vedrebbe solo il font originale. Tutto sommato, è ancora abbastanza bello. Speriamo che sia un'anteprima di ciò che accadrà nei prossimi anni.
Cactuslab
Cactuslab usa anche sIFR per i sottotitoli blu (come "Winter Work"). Sebbene sIFR sia la più complicata delle tecniche di sostituzione dei font, il testo può essere copiato e incollato, offrendo un grande vantaggio rispetto alle altre due tecniche.
Regola n. 9: Non avere una splash / pagina di destinazione
Molti designer hanno avuto la stessa vecchia discussione con i loro clienti sul perché una splash page non è una buona idea. Google tende a classificare tali pagine più in basso, e rallentano l'utente dall'ottenere il contenuto che stanno cercando. Ma possono essere incredibilmente belli e stimolanti se fatti bene.
Postproduzione lucida
Lo scopo dell'esempio di portfolio visualizzato nella pagina iniziale di Postproduzione lucida Il sito Web è quello di suscitare una reazione emotiva da parte dell'utente.
Ad ogni visita, viene caricata una foto casuale dal portfolio. Cliccando sulla foto lo ridimensiona e lo mette al suo posto tra gli altri pezzi del portfolio sul sito. L'effetto di ridimensionamento e movimento fornisce una continuazione e aiuta a trasferire l'emozione dell'utente al resto del lavoro dell'azienda.
Issa London
Quando un sito è completamente realizzato in Flash, la barra di caricamento può fungere da pagina iniziale. Quando un utente vede una barra di caricamento, chiuderà la pagina e andrà da qualche altra parte o passerà a un'altra scheda e cercherà altrove mentre aspettano.
Una volta caricata la pagina, è meglio attendere che l'utente torni prima di iniziare. In Issa London Nel caso, il cancello è una metafora perfetta per dire che il sito è pronto e l'utente può entrare.
Quando l'utente fa clic sul cancello, il cancello si apre e compaiono vari modelli illustrati. L'uso del gate nella splash page è una grande idea di design perché, una volta entrati, l'utente si sente coinvolto.
Regola n. 10: non usare tabelle
Qualsiasi web designer che usa le tabelle nei loro progetti sarà immediatamente chiamato un novellino da designer esperti. Le tabelle non sono le stesse in tutti i browser e possono rendere il codice sorgente un po 'disordinato, ma per lo meno saprai che cosa stai ottenendo. Ecco alcuni esempi di design che incorporano tabelle.
Questo tavolo è un po 'difficile da vedere ma è nascosto tra le due sedie. È un bel tavolino ma purtroppo non contribuisce molto al design di questo sito.
Le tabelle sono molto sullo sfondo di questo progetto Lavora su Play ma mantengono portatili e altri oggetti dei lavoratori a portata di mano. Senza questi tavoli, la stanza si sentirebbe molto più vuota e la foto di sfondo non avrebbe lo stesso effetto.
Sebbene questo design sia per lo più dotato di sedie, nella parte in alto a destra dell'anteprima viene visualizzato un bel tavolino. Sembra che ci sia una pentola su di essa.
Per quanto riguarda i disegni con tabelle, questo è uno dei migliori. Con due tabelle presenti in questa animazione Flash, il design offre loro molta attenzione. Questo sito dovrebbe essere sulla lista di tutti i designer di ogni grande design che usano le tabelle.
Rompere le regole!
Rompere le regole va bene quando un progetto lo richiede. Molte delle scelte di progettazione recensite qui non saranno considerate dal progettista medio. Questo è ciò che separa i grandi designer da quelli medi.
Coloro che hanno il coraggio di andare contro ciò che hanno insegnato si distinguono sempre.
Scritto esclusivamente per WDD bt Eli Penner. Gestisce il proprio sito web all'indirizzo SleepyHero.com
Rompi le regole nei tuoi progetti web? Perché o perché no? Per favore condividi le tue opinioni con noi ...