Basix errori comuni nel web design

Tutti commettiamo errori. È la natura umana. Tuttavia, nel settore del web design, molti elementi possono essere messi in atto in modo errato con solo alcune modifiche necessarie per renderli stellari. Questi vanno dalla tipografia al padding, dove una singola cifra può danneggiare drasticamente il tuo web design. Fortunatamente, una volta che sei in grado di identificare quali sono gli errori più comuni, pochi clic e alcuni tocchi sulla tastiera possono salvare un disegno che affonda. Oggi daremo un'occhiata ad alcuni errori del web design che ogni designer dovrebbe fare attenzione.


Tutti commettiamo errori? alcuni sono più miti di altri.

Informazioni su Basix

I nostri post Basix sono incentrati su come iniziare con il web design. Che tu sia nuovo di zecca per il web design o che tu stia progettando sul web da un po 'e sei interessato a un po' di formazione "formale", gli articoli e le esercitazioni in questa libreria sono dedicati ad aiutarti a ottenere un po 'di esperienza sotto di te cintura in modo da poter iniziare a dondolare su progetti più difficili in seguito!


Tipografia

La tipografia è una delle caratteristiche più importanti di un design. Nella maggior parte dei progetti, il testo domina la maggior parte della pagina in modo che la tipografia pulita e ben adattata possa essere la chiave per sbloccare il potenziale del tuo tema. Ci sono molti errori che i designer nuovi o esperti possono fare, che possono solo degradare l'attrattiva altrimenti interessante della tipografia di una pagina.

Sans Serif vs Serif

Per il bene di questo articolo, presumo che il lettore sappia cos'è un font serif. C'è una certa eleganza nei caratteri serif utilizzati su una pagina web, e un tocco più moderno quando un designer utilizza la vasta gamma di caratteri sans-serif. Tuttavia, questi due effetti non si mescolano per diventare l'epitome della buona tipografia se usati in concomitanza. In effetti, mescolare i due in circostanze normali può creare risultati ibridi che, per essere sinceri, semplicemente non sembrano buoni.

Questo non vuol dire che si uniscano font serif e sans-serif mai lavori. In alcuni casi, infatti, funziona piuttosto bene, soprattutto quando i tipi di carattere vengono utilizzati su diversi livelli di una gerarchia. Ad esempio, A List Apart usa un font serif per un titolo, mentre usa un font sans-serif per il contenuto principale del corpo.

Numero di caratteri

Un altro errore enorme in cui alcuni progettisti camminano sta utilizzando molte famiglie di font diversi, piuttosto che una coppia selezionata. L'utilizzo di più tipi di carattere può comportare una progettazione disconnessa che interrompe la leggibilità del contenuto. Invece di contenuti multi-font, il tentativo di utilizzare una famiglia di font per livello della gerarchia visuale del design crea generalmente uno schema di font più bello che sembra molto più unito di un mucchio di stili casuali qua e là.

Allo stesso modo, troppe variazioni nella dimensione del carattere e nella spaziatura di righe / lettere possono creare un'esperienza di lettura disconnessa e un'esperienza utente negativa complessiva. Mantienilo costante e familiare.

Mancanza di contrasto

Un grosso problema che può presentarsi è la mancanza di contrasto tra la tipografia e lo sfondo. Ciò può portare a problemi di leggibilità reale poiché alcuni utenti troveranno difficile distinguere tra i due gruppi di colori. Prendi l'esempio prima, per esempio. Quale è più facile da leggere, a sinistra oa destra? Giusto, a sinistra!

Non c'è una teoria complessa dietro al contrasto. Non metterei la scrittura nera su uno sfondo nero perché non puoi determinare cosa sta scrivendo e quale è lo sfondo. L'unico suggerimento è quello di avvicinare il colore del testo all'estremo opposto allo sfondo, senza danneggiare altre qualità estetiche, per evitare frustrazione alla fine dell'utente finale. Il tema Ellipsis mostra un buon contrasto nella parte superiore dell'intestazione. Ci sarebbe una luce rosa o viola invece lì?


Imbottitura, margini e spaziatura

Non stiamo più lottando con monitor piccoli (stiamo pensando principalmente alla navigazione sul desktop qui, non allo smartphone). Invece, stiamo vivendo su schermi da 21 "+ e navigando su risoluzioni superiori all'HD che danno ai designer molto più spazio per lavorare. Pertanto, non dovresti sentirti schiacciati e dedicare più spazio a padding e margini per migliorare l'estetica di il tuo design. Prendi ad esempio il design di Apple: utilizza molto spazio bianco concentrando tutto il colore e l'azione sul contenuto a cui tiene. bianca spazio, ma i tuoi progetti potrebbero trarre vantaggio dall'essere spostati a parte più visibilità, in modo che si distinguano facilmente l'uno dall'altro.

È importante mantenere la spaziatura omogenea e omogenea in tutto il tuo progetto nel miglior modo possibile sia nella spaziatura interna che nei margini esterni. Per un esempio, controlla lo schema qui sotto. L'ultima metà sembra molto meglio perché tutti i margini sono lo stesso spazio 18px. Tutto è allineato alla stessa griglia. È chiaro e ogni area è distinguibile da un'altra, ma non significa necessariamente sprecare spazio.

Sistemi di rete

Allo stesso modo, la griglia è una caratteristica importante dei designer web di maggior successo. L'utilizzo di una griglia mantiene tutto in ordine e ripulisce i progetti con grondaie coerenti da utilizzare. Il design basato sulla griglia rende tutto molto più organizzato. Questa sezione non è in questo articolo perché è un errore non usarne una, considerandola una soluzione se ritieni che i tuoi progetti non stiano funzionando in un'area che contribuisce a.


Mantenimento dei valori antichi

L'industria del web design ha un ritmo incalzante, con nuovi sviluppi che appaiono costantemente. Una delle cose peggiori che possono danneggiare il tuo design è continuare a sviluppare e progettare in modi popolari anni fa. Nel 2003, Microsoft Frontpage aveva uno strumento per "tabelle di layout", ma nessuno sviluppatore dovrebbe mai osare aprire un tag table nel nome del layout. Allo stesso modo, le incredibili GIF animate e la musica di sottofondo del decennio sono un immenso no-no. Oh, e non pensare di usare i frame come parte del tuo web design. Tutti questi presentano usabilità e altri problemi e non è solo il modo in cui facciamo le cose.

Speider Schneider ha un grande articolo su "The Stone Age of Web Design" qui su Tuts +. Assicurati di controllare per un tutorial su ciò che il tuo sito web non dovrebbe Assomiglia a.


Le tecniche più vecchie come l'uso di tabelle o iFrame potrebbero sembrare allettanti, ma spesso c'è un modo più aggraziato per fare le cose se si guardano intorno ad approcci più moderni.

Proporzione e dimensioni

I tuoi progetti dovrebbero sempre attenersi a una sorta di gerarchia a cui si contribuisce per dimensioni e proporzioni. In termini semplici, i tuoi elementi più importanti dovrebbero essere i più grandi e lasciarli diminuire di dimensioni man mano che vai avanti. Ciò non significa che l'elemento meno importante debba essere alto 4 px, ma dovrebbe essere la tua tabella di marcia verso la scala di elementi in una pagina. Dovrebbero comunque essere proporzionati alla precisione di input del dispositivo che si sta progettando e abbastanza facili da vedere. Se sono lì, saranno lì per un motivo.

Tutto ciò deriva da una prospettiva di usabilità che suggerisce che ogni elemento dovrebbe essere facilmente accessibile e non ha bisogno di giustificazione: non fare in modo che l'utente faccia qualcosa in più rispetto al semplice guardare qualcosa. Nessuno strabismo, niente zoom, nessun tentativo eccessivo di fare clic su qualcosa che è più piccolo di un filo d'erba.

Probabilmente hai anche sentito parlare di proporzioni divine, o "The Golden Ratio". Sebbene non tutti i progetti debbano essere concepiti in base a questo principio, la maggior parte dei modelli standard dovrebbe probabilmente tentare a tutti i costi. Il rapporto tra 1 e 1,62 (in forma arrotondata) è comunemente noto come il Golden Ratio e non è solo usato nel web design, anche se meritiamo un po 'di credito per utilizzarlo.

Il Golden Ratio presenta un equilibrio in un web design dato che noi umani siamo abituati; il rapporto tra l'avambraccio e la mano è da 1 a 1,62, come il sorriso umano. Trovare qualcuno attraente può anche essere basato sul Golden Ratio, motivo per cui riteniamo che il Golden Ratio sia "naturale". Mantenere tutto ciò che è così equilibrato può dare un tocco di design e fortuna al web in quanto è più naturale per l'utente.

Puoi leggere di più sul Golden Ratio e su come la matematica influenzi il web design qui.


Dimenticando perché stai facendo questo

Dimenticare lo scopo principale del tuo design è sempre negativo. Se stai progettando per l'e-commerce e hai questa brillante idea per un dispositivo di scorrimento che non si adatta al progetto attuale, non integrarlo solo per il gusto di farlo. Allo stesso modo, se hai l'abitudine di usare questo fantastico menù a tendina su cui hai lavorato per innumerevoli ore, ma degrada solo l'usabilità di quel particolare sito, non usarlo. Non farti distrarre da qualcos'altro, a parte quello per il quale il tuo progetto verrà alla fine usato. Esegui un passo indietro a intervalli regolari e considera se l'obiettivo corrisponde al design attuale e, in caso contrario, manipolalo per farlo.


Per ThemeForest Inclined

Certo, c'è una maggiore possibilità che tu possa essere un autore di ThemeForest se stai leggendo questo articolo. Pertanto, ho alcuni suggerimenti da condividere con voi, sulla base dei fattori di rifiuto comuni con cui il team di revisione deve confrontarsi regolarmente.

  • Altezza della linea - il wiki suggerisce che molti modelli di design inviati mancano di una buona quantità di altezza e / o spaziatura della linea. Avere un'altezza di linea di circa 1,3-1,6 cm contribuisce alla migliore usabilità del design, ma anche a renderlo più pulito. L'utilizzo del valore "em" per misurare l'altezza della linea aiuta anche a mantenerlo in proporzione al testo.
  • Gerarchia visiva - come accennato in precedenza, avere una gerarchia visiva forte e distinguibile può anche essere vantaggioso in quanto aiuta l'utente a determinare prima cosa dovrebbe leggere e poi a lasciarli scendere lungo la gerarchia. Questo può essere particolarmente utile su siti che vogliono vendere qualcosa, in quanto aiuta ad attrarre l'attenzione del lettore verso uno specifico elemento della pagina, come le cose incredibili che un prodotto può fare, o è catturato con attenzione, mantenendo le cose meno attraenti - come il prezzo - leggermente più nascosto.
  • Compatibilità del browser - Una delle cose peggiori che puoi fare è alienare parte del pubblico potenziale del tuo sito web facendo sì che un sito web non funzioni sul browser scelto. Le probabilità sono, l'utente lascerà il sito invece di passare del tempo frustrato mentre tentano di progredire attraverso il design. Assicurarsi che, almeno, tutti i principali browser siano coperti è sempre consigliabile, e dovrebbero essere assicurati test appropriati. Se non hai un Mac, trascinati in un Apple Store e prova il tuo sito là fuori se contribuisce al tuo progetto definitivo guardando meglio.

Spero che tu abbia qualche spunto di riflessione su cosa non dovresti fare. Ora, torna alla pagina iniziale e scopri cosa dovrebbero star facendo!