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 è Cutest Paw, una galleria fotografica di animali di tutto il mondo. Entriamo e vediamo cosa pensiamo!
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.
Circa la zampa più carina
Questo sito prende decisamente il premio per il nostro più? Awwww? indurre la critica del sito di sempre. Questo sito non è letteralmente altro che un flusso infinito di foto di animali carini e divertenti. Come possiamo sopportare di guardare una cosa del genere ed essere ancora in grado di offrire un feedback costruttivo senza essere distratti dai cuccioli addormentati? Fortunatamente, ci dedichiamo al 100% ad aiutare i creativi a migliorare le loro abilità nel web design. Stai indietro ai cuccioli, abbiamo un lavoro da fare.
Ecco uno screenshot della homepage:
Prima impressione
Ogni volta che valuto un progetto, vado oltre l'estetica e mi chiedo quale sia lo scopo del pezzo e se il progetto completato stia raggiungendo o meno quell'obiettivo. L'obiettivo qui per un utente è semplice: visualizzare tantissime foto. Il sito di Cutest Paw sembra che funzioni piuttosto bene. Il layout è ottimizzato per il massimo utilizzo dello spazio e non spreca troppi pixel su effetti speciali superflui non critici.
Come la critica del design della scorsa settimana, questa sarà piuttosto breve. Il sito Web di Cutest Paw è molto semplice, quindi non c'è molto da criticare. Tuttavia, come sempre, ho un feedback che ritengo possa aiutare il progettista a migliorare il sito. Entriamo e iniziamo.
disposizione
Questo sito è un ottimo esempio dell'utilità di jQuery Masonry, un fantastico plug-in di layout che rende davvero improbabili i layout altrimenti impossibili. La bellezza della Massoneria è che rinuncia al comportamento CSS che imposta un layout orizzontale prima di distribuire il contenuto verticalmente. Invece, crea una bella pila verticale stretta, simile a come sono posati i mattoni.
Il risultato in questo caso è una griglia di immagini incredibilmente stretta che, come ho detto sopra, massimizza davvero il numero di foto che possono essere visualizzate in un piccolo spazio. Il sito utilizza anche una tecnica di scorrimento infinito che continua a caricare il contenuto mentre scorri verso il basso la pagina.
La combinazione di layout in stile massoneria e scrolling infinito è stata recentemente resa molto popolare da Pinterest, che non puoi fare a meno di pensare quando usi questo sito. La combinazione di queste due tecniche offre una facilità di navigazione senza precedenti. Per confronto, la paginazione richiede così tanto sforzo da parte dell'utente. Qui basta scorrere e scorrere finché non hai visto tutto quello che c'è da vedere o decidere di passare a qualcos'altro.
Sidebar
Poiché il contenuto continua a scorrere per sempre, diventa necessario avere una navigazione in qualche modo fissa. Pinterest utilizza una barra lungo la parte superiore del loro sito, Cutest Paw va per la sua strada e implementa una barra laterale in ritardo che raggiunge rapidamente mentre scorri verso il basso la pagina. Questo è abbastanza efficace, ma devo ammettere che l'animazione, che è alquanto affascinante all'inizio, diventa rapidamente fastidiosa e un po 'fastidiosa.
La barra laterale è ben progettata e chiaramente organizzata, dal punto di vista dell'usabilità (a parte l'animazione) è abbastanza ben fatta. È bello vedere un? Back to Top? pulsante implementato qui, non appena ho iniziato a scorrere ho immediatamente cercato uno di questi e lo ho trovato facilmente. Tuttavia, potrebbe essere più efficace come una sorta di layover nella parte superiore o inferiore del lato destro dello stack fotografico, questo lo posizionerebbe dove è probabile che l'attenzione dell'utente sia focalizzata e riduca la necessità di cercarla.
Tema
L'estetica complessiva della pagina vale la pena di essere discussa, infatti, potrebbe essere uno dei punti più importanti da considerare. Da un lato, la pagina è attraente. Lo sfondo nero è elegante, di classe e aiuta le foto a distinguersi. D'altra parte, lo sfondo e anche quegli aggettivi che ho appena usato sembrano tutti sbagliati per questo sito.
Parole come? Carino? e? fuzzy? è come le persone descrivono il contenuto, eppure il tema visivo del sito è una trama grunge nero. Questi due concetti sembrano opposti polari e creano una sorta di dissonanza visiva. Come ho già affermato, sono un grande sostenitore dell'uso del design non solo come piacere per gli occhi, ma per rafforzare uno scopo e un messaggio. Il design della tua pagina trasmette una personalità e quando ottieni quella personalità sbagliata, diminuisce l'impatto e il successo del progetto. La giustapposizione di concetti in questo design è molto simile a quella di vedere un motociclista coperto di tatuaggi da 300 chili che insegna una classe prescolare, i due semplicemente sembrano in disaccordo tra loro.
Il designer ha inchiodato il layout, che è onestamente spesso la parte più difficile in un sito come questo. Ora è il momento di ridisegnare completamente l'aspetto del sito mantenendo la struttura principale. Inizia con una combinazione di colori più amichevole e / o usa una trama molto meno spigolosa. Forse qualcosa che trasmette un sentimento morbido (senza essere brutto e scadente). Dai un'occhiata a Pattern sottili per alcune grandi risorse.
Logo
Il logo è mostrato nella schermata precedente. È ovviamente molto appropriato per il sito, la zampa è un simbolo immediatamente riconoscibile. Come logo, tuttavia, ha un grosso difetto nel fatto che è così generico. È un cerchio con una zampa in esso, forse la prima cosa che 99 su 100 non-designer avrebbero escogitato dato l'istruzione di creare un logo della zampa.
Il problema con questo è che non puoi davvero possederlo.Se guardi abbastanza, probabilmente potresti trovare qualcosa di simile per tonnellate di aziende e siti web. Forse non starai cercando di costruire un marchio globale, ma l'intero punto di un logo deve ancora avere qualcosa che dia un volto al tuo marchio (per quanto piccolo) e lo renda identificabile. Questo non è in cima alla lista delle priorità, ma a lungo termine consiglierei di esplorare qualcosa di un po 'più unico.
Invia pagina
Come ho accennato all'inizio di questo articolo, questo sito è piuttosto semplice, quindi concluderemo a breve. L'ultima cosa di cui vorrei parlare è la pagina in cui gli utenti possono andare a inviare le proprie foto:
Il problema che ho con questa pagina è il tipo di effetto Inception che sta accadendo. Hai uno screenshot di una pagina web lanciata in una pagina web che sembra molto simile. È inclinato in modo da risalire un po ', ma è ancora una combinazione inquietante. Il problema qui è che lo sfondo della pagina e l'immagine sono essenzialmente le stesse, quindi l'immagine non è realmente distinta in alcun modo significativo. Mi raccomando magari di guardare in un effetto di colpo e ritagliare quella griglia di immagini in una vista ancora più ingrandita. Come semplice via d'uscita, potresti semplicemente mettere un animale grande e carino qui che trasmette in qualche modo l'idea di condividere, caricare, ecc.
Conclusione
Per riassumere, ecco una breve lista di controllo dei miei pensieri sul design.
Buono
- Layout: questo è un uso perfetto per jQuery Masonry
- Scorrimento infinito: facilita la navigazione
- Navigazione semplice ma efficace
Ha bisogno di lavoro
- Estetica generale: troppo scuro e sgangherato
- Logo: troppo generico
- Pagina di registrazione: lo screenshot non funziona
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.