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 è il portfolio personale di Owain Lewis, un web designer freelance.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 49 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.
A proposito di Owain Lewis
Sono web designer freelance e sviluppatore web front end di Cardiff. Realizzo siti web puliti, moderni e professionali usando HTML5. Negli ultimi anni ho lavorato con un gran numero di clienti tra cui agenzie di web design, grandi aziende, start-up e privati, creando siti Web che aiutano le persone a ottenere risultati migliori online.
Ecco uno screenshot della homepage di Owain:
Impressione iniziale
La mia impressione iniziale di questa pagina è estremamente positiva. Mi piacciono il layout, la grafica e il testo. Inoltre, il contenuto è tutto organizzato in sezioni chiare, sia attraverso il posizionamento che con sottili cambiamenti di sfondo. È un lavoro davvero stupendo che mi ricorda pesantemente alcune delle pagine nere che Apple ha sul loro sito.
Per la maggior parte, la nostra critica sarà positiva. Daremo un'occhiata a ciascuna sezione e discuteremo su cosa è andato bene! Tuttavia, ci sono alcune cose davvero piccole che penso possano essere modificate e le indicherò lungo la strada.
Intestazione
L'intestazione è tutta una questione di tipografia. Fa un'introduzione forte e amichevole che ti consente di sapere di cosa tratta il sito. Nelle ultime settimane ho iniziato a lavorare sui designer per aver quasi nascosto la spiegazione di base dei loro siti web e sono fermamente convinto a lanciarlo allo scoperto, quindi non c'è confusione. Subito vediamo questo sito per Owain Lewis, un web designer freelance.
L'intestazione imposta anche un forte allineamento giustificato che imposta il tono per il resto della pagina da seguire. Questo allineamento viene quindi rigorosamente rispettato fino in fondo attraverso il piè di pagina.
L'unico problema che ho in questa sezione è la mancanza di coerenza con la tipografia nel titolo. Qui il designer ha usato il principio del contrasto e del colore con leva, l'audacia e la scelta del carattere tipografico per distinguere alcune parole. Tuttavia, i punti di enfasi utilizzano tre diversi trattamenti.
Il primo utilizza il carattere semplice sottile utilizzato nel resto del titolo, il secondo utilizza una e commerciale molto stilizzata e piuttosto spessa e l'ultimo utilizza una versione in corsivo del carattere del titolo. Consiglio di fare Owain Lewis? e? progettazione di siti Web? incontro. Che siano chiari o in corsivo non importa così tanto, ma assicurati che siano entrambi uguali. Vorrei anche considerare di renderli entrambi una versione in grassetto del font per contribuire ad aumentare la differenziazione.
Inoltre, come nota piccola, la prima riga del titolo potrebbe utilizzare l'attenzione di punteggiatura.
Sezione introduttiva
La prossima sezione è quella che attira davvero la tua attenzione quando carichi la pagina. Tutto ciò che nero fa immediatamente i tuoi occhi al punto di contrasto: la grande miniatura bianca, che poi ti fa rimbalzare un po 'in quella sezione e procedere fino alle altre miniature. La pagina si legge molto bene e il designer ha fatto un buon lavoro guidando l'utente attraverso il layout.
Mi piace anche il piccolo galleggiante? Assumimi Me? tag sul lato destro della pagina. In qualsiasi punto della navigazione attraverso il sito se decidi che questo ragazzo è così bravo che vuoi assumerlo, c'è un percorso diretto verso questo obiettivo che non puoi assolutamente perdere! Si noti che rimane ben lontano e comunque fuori mano, i trucchi del genere sono estremamente fastidiosi quando si sovrappongono effettivamente ai contenuti (sto guardando Twitter per iPhone).
Non sono sicuro che questa sezione abbia bisogno di qualche cambiamento, anche se sono un po 'catturato dal titolo: "Web Designer Portfolio Freelance Web." Questa è ovviamente un'affermazione ridondante e sembra rumore SEO (il titolo della pagina fa la stessa cosa ma molto peggio). Le tattiche SEO si avvicinano rapidamente alle aree grigie, quindi ogni progettista deve decidere cosa sia e cosa non sia una buona idea, ma personalmente, sento che c'è qualche fastidioso fenomeno di parole chiave in questa pagina.
Sezione in primo piano
Il flusso di questo sito mentre scorri è interessante, l'hai preso? La prima area è una colonna ampia, la seconda area è due colonne, questa sezione in primo piano è composta da tre colonne e il footer è quattro (tutti mantengono il forte allineamento). A volte i designer lottano molto con l'idea di variare il layout e mantenere lo stesso in tutta la pagina o tentare un drastico cambiamento e rovinare il flusso. Owain ha fatto un buon lavoro di facilitare l'utente nel contenuto e offrire una variazione sufficiente per ridurre la ridondanza visiva.
Come l'ultima, questa sezione è piuttosto interessante. Mi piace il trattamento visivo dei titoli e gli effetti hover animati sulle miniature. Tutto sembra liscio e di alta classe.
Un piccolo cambiamento: mai capitalizzare il? I? in iPhone. Sembra insignificante, ma le persone sono pignoli su questa roba e alcuni non ti assumeranno per costruire il loro sito iPhone se non ne sai abbastanza del prodotto per ottenere il nome giusto.
footer
Per me, questa sezione è l'unica parte del sito in cui il layout diventa un po 'scomodo. Per i principianti, il flusso delle colonne si sente strano con la grande quantità di spazi bianchi goffi nel mezzo. Non sono sicuro che sia l'idea migliore per allineare la sezione a quattro colonne con la suddivisione della sezione a tre colonne sopra di essa.Questo potrebbe avere più senso se le colonne fossero distribuite uniformemente nello spazio come le tre sopra (quindi segui il metodo della sezione precedente, non il posizionamento esatto).
Infine, il giusto allineato? I miei collegamenti? la sezione è un po 'strana dato che tutte le altre colonne sono allineate a sinistra. Questo è un classico caso in cui il design è uno di quei luoghi in cui è possibile seguire ogni regola e avere ancora qualcosa che non è giusto. Continuo a divagare su come sia importante seguire rigorosamente il layout che hai stabilito, ma qui sto suggerendo che forse quest'ultima colonna non ha bisogno di seguire il layout giustificato e può solo avere un bordo destro irregolare.
Essere un designer significa imparare tutte le regole e poi capire quando è accettabile romperle. Il problema è ovviamente che ogni designer deciderà diversamente. Sto sicuramente dividendo i capelli con questa discussione di colonne mentre molti designer non vedranno alcun problema con il layout del footer! Mi limito a incoraggiare Owain a dare un'altra occhiata al layout qui e decidere da solo se non potrebbe essere reso più forte in qualche modo.
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.