Web Design Critique # 27: Idea Arts
Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo entrambe le aree che hanno funzionato bene oltre a quelle che potrebbero usare un po 'di lavoro. Infine, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Idea Arts.
Esplora risorse di progettazione
Se desideri inviare il tuo sito Web per essere presentato in una futura critica al design, bastano pochi minuti. Facciamo pagare $ 24 per criticare il tuo design - molto meno di quanto pagheresti per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
Informazioni su Idea Arts
Idea Arts è il portfolio personale Goran Ilic, un graphic designer con una passione per la vita per la tecnologia. Il suo sito mette in mostra il suo recente lavoro e i servizi offerti dalla sua azienda.
Ecco uno screenshot della homepage:
Prima impressione
Idea Arts è, per la maggior parte, un sito attraente. Ci sono alcune buone idee al lavoro qui che mettono il design in un inizio davvero forte. Il contenuto è suddiviso in sezioni chiaramente definite e segue una progressione logica. Ci sono anche alcuni interessanti elementi grafici che catturano efficacemente l'attenzione dell'utente.
Tuttavia, ci sono molte opportunità di perfezionamento. Il design è abbastanza solido che non consiglio di ricominciare da capo, ma diversi aspetti potrebbero usare un po 'più di attenzione per portarli alla pari. Di seguito daremo uno sguardo ad alcuni di questi.
Tipografia
Il problema più grande che vedo con questo sito è la tipografia. Per i principianti, nella sola homepage vediamo circa dieci diverse varianti di dimensione, larghezza, stile del carattere, ecc. Questa è quasi sempre una caratteristica negativa. È una buona regola empirica mantenere i caratteri tipografici a circa 2-3 varianti per disegno.
Decidi i caratteri tipografici che puoi usare su intestazioni, sottotitoli e body copy. Quindi rendili coerenti in tutto il tuo progetto piuttosto che trattare ogni sezione come un'area indipendente che può avere le sue caratteristiche uniche.
Inoltre, trascorri davvero un po 'di tempo a costruire il tipo in modo che appaia attraente. Ciò comporta un'attenta pianificazione delle opzioni come altezza della linea, colore e persino le interruzioni di linea. Tutti questi sono piuttosto approssimativi nell'esempio qui sotto.
Per cominciare, l'azzurro non contrasta bene con lo sfondo. Questo può essere facilmente risolto oscurando quel colore fino a quando non si separa realmente dal colore chiaro dietro di esso. Inoltre, la copia più piccola potrebbe usare un po 'più di respiro. L'altezza della linea è semplicemente troppo bassa e rende difficile la lettura, aumentalo leggermente qui e la leggibilità aumenterà notevolmente.
Tuttavia, fai attenzione perché in altre aree del sito l'altezza della linea sembra stranamente alta. Ti consiglio di utilizzare uno strumento online gratuito come Typograph - Scale & Rhythm (mostrato sotto) per aiutarti con il flusso dei tuoi paragrafi.
Infine, osserva le interruzioni di linea. È interessante notare che non solo devi guardare per le pause imbarazzanti nella formulazione, ma dovresti prestare attenzione alla forma del paragrafo. Quello sopra sembra un po 'strano e potrebbe facilmente essere ricondotto a qualcosa di simile alla versione seguente.
Lo spazio bianco
Un'altra area del design che potrebbe utilizzare alcune modifiche è l'uso di spazi bianchi. Come per la tipografia, questo può essere complicato ed è in gran parte soggettivo. Tuttavia, ci sono alcuni principi di base che possono guidarti lungo il percorso.
Ad esempio, ogni volta che si dispone di una raccolta distribuita di elementi, sia verticali che orizzontali, provare prima a raggruppare visivamente gli oggetti e quindi a spaziarli uniformemente. Ad esempio, nell'esempio seguente, la versione originale ha una spaziatura diversa tra le icone e il testo e gli elementi che dovrebbero essere distinti si incontrano un po '. Con un po 'di regolazione, creiamo un'istruzione grafica molto più chiara.
La differenza è sottile ma molto importante. Notare quanto sia facile dire quale riga di testo corrisponde a quale icona. Vi sono alcune altre aree del progetto che potrebbero utilizzare una dose analoga di analisi spaziale. Ad esempio, il testo in basso quasi si arresta in modo anomalo alla fine del suo dispositivo di contenimento. Assicurati sempre di dare molto spazio a elementi come questo.
Come abbiamo visto con i numeri precedenti, questo va in entrambi i modi. Il logo, ad esempio, sembra avere troppo spazio bianco incorporato nello spazio tra le parole.
Tweak, Tweak, Tweak
La morale della storia qui è che anche se decidi di aver creato una bella pagina, il diavolo è nei dettagli. Non correre mai attraverso le piccole cose come la tipografia e la spaziatura. In effetti, potresti dover dedicare più tempo a ottenerli giusti che a martellare il tuo concetto visivo iniziale!
Vale sicuramente la pena investire tempo per completare il tuo sito nel modo giusto. L'abitudine costante a questa abitudine renderà i tuoi progetti molto più raffinati e darà loro una maggiore resistenza al controllo.
Il tuo turno!
Ora che hai letto i miei commenti, chiedi aiuto e dai ulteriori consigli al designer. Facci sapere cosa pensi sia fantastico del design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso del progettista del sito e di offrire chiari consigli costruttivi privi di insulti aspri.
