Critica di web design n. 71: la zampa più carina
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 è Cutest Paw, una galleria fotografica mondiale di animali. Facciamo un salto e vediamo cosa ne pensiamo!
Esplora Envato Elements
Se desideri inviare il tuo sito Web per essere presentato in una futura critica al design, bastano pochi minuti. Facciamo pagare $ 49 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 sulla zampa più carina
Questo sito prende sicuramente il premio per la nostra critica del sito più "awwww" che induce mai. Questo sito è letteralmente nient'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 proprie braciole di web design. Stai indietro cuccioli, abbiamo un lavoro da fare.
Ecco uno screenshot della homepage:
Prima impressione
Ogni volta che valuto un design, vado oltre l'estetica e chiedo quale sia lo scopo del pezzo e se il design completato raggiunga o meno tale obiettivo. L'obiettivo qui per un utente è semplice: visualizzare un sacco di foto. Il sito di Cutest Paw sembra servire al suo scopo abbastanza bene. Il layout è ottimizzato per sfruttare al massimo lo spazio e non spreca troppi pixel in un piacere per gli occhi superfluo non critico.
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 alcuni feedback che credo aiuteranno il designer a migliorare il sito. Facciamo un salto e iniziamo.
disposizione
Questo sito è un ottimo esempio dell'utilità di jQuery Masonry, un fantastico plug-in di layout che rende veramente semplici i layout altrimenti impossibili da configurare. Il bello della Massoneria è che rinuncia al comportamento CSS che imposta un layout orizzontale prima di distribuire il contenuto in verticale. Invece, crea una bella pila verticale stretta, simile a come vengono posati i mattoni.
Il risultato in questo caso è una griglia incredibilmente stretta di immagini 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 si sposta verso il basso la pagina.
La combinazione di layout in stile muratura e scorrimento infinito è stata recentemente resa molto popolare da Pinterest, di cui non puoi fare a meno a pensare quando usi questo sito. La combinazione di queste due tecniche garantisce una facilità di navigazione senza precedenti. In confronto, l'impaginazione richiede un grande sforzo da parte dell'utente. Qui basta scorrere e scorrere fino a quando non si è visto tutto ciò che c'è da vedere o si decide di passare a qualcos'altro.
Sidebar
Poiché il contenuto continua a scorrere per sempre, diventa necessario disporre di una navigazione in qualche modo fissa. Pinterest utilizza una barra nella parte superiore del loro sito, Cutest Paw fa a modo suo e implementa una barra laterale in ritardo che raggiunge rapidamente man mano che scorri la pagina. Questo è abbastanza efficace, ma devo ammettere che l'animazione, che all'inizio è in qualche modo affascinante, diventa rapidamente fonte di distrazione e un po 'di fastidio.
La barra laterale è ben progettata e chiaramente organizzata, dal punto di vista dell'usabilità (animazione a parte) è abbastanza ben fatta. È bello vedere un pulsante "Torna all'inizio" implementato qui, non appena ho iniziato a scorrere ho subito cercato uno di questi e l'ho trovato facilmente. Tuttavia, potrebbe essere più efficace come una sorta di sosta sulla parte superiore o inferiore del lato destro della pila di foto, questo lo collocherebbe dove è probabile che l'attenzione dell'utente sia focalizzata e riduca la necessità di cacciarlo.
Tema
Vale la pena discutere dell'estetica generale della pagina, in effetti 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 risaltare davvero. D'altra parte, lo sfondo e persino quegli aggettivi che ho appena usato sembrano tutti sbagliati per questo sito web.
Parole come "carino" e "sfocato" sono il modo in cui le persone descrivono il contenuto, eppure il tema visivo del sito è una trama grunge nera. Questi due concetti sembrano opposti polari e creano una sorta di dissonanza visiva. Come ho già detto, 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 sbagli quella personalità, diminuisce l'impatto e il successo del progetto. La giustapposizione di concetti in questo disegno è molto simile a vedere un motociclista rivestito in pelle da 300 libbre, coperto di tatuaggi, che insegna a una classe in età prescolare, i due sembrano semplicemente in contrasto tra loro.
Il designer ha inchiodato il layout, che è onestamente spesso la parte più difficile di 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 una sensazione morbida (senza essere brutto e di cattivo gusto). Dai un'occhiata ai modelli sottili per alcune grandi risorse.
Logo
Il logo è mostrato nello screenshot 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 dentro una zampa, forse la prima cosa su 99 su 100 non progettisti verrebbe fuori con le istruzioni per creare un logo di zampa.
Il problema è che non puoi proprio possederlo. Se guardi abbastanza duramente, probabilmente potresti trovare qualcosa di simile per tonnellate di aziende e siti Web. Forse non stai cercando di costruire un marchio globale, ma il punto centrale di un logo è ancora avere qualcosa che dia un volto al tuo marchio (per quanto piccolo) e renderlo 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 detto all'inizio di questo articolo, questo sito è piuttosto semplice, quindi lo concluderemo a breve. L'ultima cosa di cui vorrei discutere è la pagina in cui gli utenti possono andare per 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 molto simile. È inclinato, quindi si distingue un po ', ma è ancora una combinazione inquietante. Il problema qui è che lo sfondo della pagina e l'immagine sono essenzialmente gli stessi, quindi l'immagine non è davvero separata in modo significativo. Consiglio vivamente di esaminare un effetto tratto e ritagliare quella griglia di immagini in una vista ancora più ingrandita. Come semplice via d'uscita, potresti semplicemente mettere qui un animale grande e carino che in qualche modo trasmette 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: rende la navigazione senza sforzo
- Navigazione semplice ma efficace
Ha bisogno di lavoro
- Estetica generale: troppo scura e sgangherata
- Logo: troppo generico
- Pagina di iscrizione: lo screenshot non funziona
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 eventuali insulti aspri.
