Benvenuti alla nostra trentesima critica del design! Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene che quelle che potrebbero utilizzare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Gray Ang, il portfolio personale di un web designer in Malesia.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 24 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
Informazioni su Grey Ang
? Il mio nome è Gray, e sono un web designer e sviluppatore front-end con sede a Kuala Lumpur, in Malesia. Ricerca, programma, progetta e codifico siti web. Sono un buon amico di Photoshop e HTML / CSS / jQuery, e faccio felici clienti, utenti e macchine.?
Ecco uno screenshot della homepage:
Come puoi vedere, il sito è costruito su uno sfondo colorato con una nuvola di tag a opacità ridotta che contiene cose come? Web design? e? CSS3 ?. Quello che non ottieni dallo screenshot è che anche lo sfondo ha un elemento animato. Ci sono diversi cerchi sfocati che galleggiano e sfreccano dietro il contenuto. Fai clic su uno degli screenshot qui sotto per fermarti al sito e vederlo in azione.
Questo sito è in realtà abbastanza piccolo e semplice, quindi daremo un'occhiata a ciascuna delle pagine e analizzeremo come l'estetica influisce sull'esperienza dell'utente.
Casa
Apprezzo decisamente il lavoro svolto nell'estetica del sito. L'ambientazione è piuttosto bella. Tuttavia, il problema con la creazione di uno sfondo così complesso è che alla fine è necessario posizionare il contenuto su di esso e questo può essere un compito molto difficile.
Le parole grandi e sbiadite in background riducono la leggibilità del testo sulla home page. Il paragrafo principale non è assolutamente impossibile da leggere, ma il design è piuttosto impegnato nell'area del testo, costringendo gli utenti a lavorare un po 'più difficile di quanto farebbero normalmente.
Inoltre, il rosso usato come colore al passaggio del mouse e punto di enfasi tende a perdersi sullo sfondo. Questo è comprensibile in quanto semplicemente non è facile trovare un colore che contrasti bene con uno sfondo multicolore. Tuttavia, vuoi comunque evitare la dissonanza visiva.
La soluzione più semplice a tutti questi problemi, e anzi la maggior parte di quelli di cui discuteremo oggi, potrebbe consistere semplicemente nel posizionare uno sfondo nero leggermente trasparente dietro a tutto il contenuto. Questo darà al contenuto più di un solido terreno su cui stare e permetterà al designer di mantenere lo sfondo attuale.
Potresti anche considerare l'aggiunta di una sorta di grafica dell'intestazione a questa pagina. Mi è davvero piaciuto come la foto sul? pagina spiccava e penso che l'idea potrebbe essere duplicata qui.
Di
Qui vediamo un'altra pagina che è abbastanza attraente, ma soffre degli stessi problemi sopra menzionati. Mi piace però l'interessante layout al lavoro qui. La navigazione rimane fissa mentre l'altro contenuto scorre e la pagina viene suddivisa in colonne chiaramente separate e ben disposte.
La pagina Informazioni su si divide in tre pagine secondarie separate: introduzione, curriculum e? Cose che faccio? Ciò consente al progettista di adattarsi a un bel po 'di contenuti mantenendo la navigazione primaria super semplice.
Lavori
I lavori? pagina è una fantastica disposizione di miniature e testo che a sua volta conduce a pagine di progetto dedicate come quella mostrata di seguito. Le miniature hanno un bel trattamento per bordi spessi che li aiuta a distinguersi dallo sfondo e la citazione in alto a sinistra è grande e abbastanza audace da essere leggibile.
Trovo però che il giusto allineamento della grande citazione sia un po 'scomodo. Tutto sulla pagina ha un forte allineamento a sinistra, e anche se spesso è efficace rompere intenzionalmente una regola come questa, non penso che funzioni qui. La forma generale del paragrafo è irregolare, rendendo piuttosto difficile la lettura con un allineamento corretto.
Contatto
L'ultima pagina del sito è il? Contatto? pagina. Questo contiene alcuni paragrafi di testo e un modulo di contatto semplice ma elegante. La prima cosa che ho notato qui è che la citazione nella parte superiore della pagina si sente un po 'fuori. Potresti provare ad allinearlo a sinistra indipendentemente dalle virgolette in modo che il? T? nel? e loro? in? miglia? formare una linea dura. Questo dovrebbe aiutare l'allineamento sinistro a sentirsi un po 'più forte di quello che fa attualmente.
Inoltre, i campi nella forma sono così trasparenti da essere quasi invisibili. Ancora una volta, questo può sembrare carino ma l'usabilità ne risente. Ricorda che l'estetica di una pagina ha un obiettivo primario: evidenziare il contenuto in modo attraente. Il tuo design dovrebbe servire ad aumentare l'usabilità, non a sacrificarla in nome dello stile.
Quando fai clic su un campo per iniziare a digitare, l'opacità aumenta e diventa molto più evidente. Vorrei suggerire di impostare questa opacità allo stato predefinito e aumentarla ulteriormente quando è selezionata.
Il tuo turno!
Ora che hai letto i miei commenti, inseriscici e dacci una mano dando al designer qualche ulteriore consiglio. Facci sapere cosa pensi sia importante per il design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso nei confronti del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti ostili.