Critica di progettazione Web n. 29: MadeFreshly
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 è MadeFreshly.
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 MadeFreshly
“Un carrello della spesa con gusto. Le tendenze cambiano e così dovrebbe essere il tuo negozio online. MadeFreshly ti offre un nuovo design per il tuo carrello. "
Ecco uno screenshot della homepage:
Prima impressione
Posso dire che mi piace molto il design di MadeFreshly. Ci sono diverse idee e stranezze di design qui di cui parleremo di seguito. Ho sicuramente alcuni suggerimenti per il miglioramento, ma per la maggior parte, è un sito fantastico creato da designer di grande talento.
Il mio più grande scrupolo è probabilmente da un punto di vista concettuale. Questa è sicuramente una critica soggettiva, quindi sentiti libero di ignorarla completamente, ma trovo strano che le visuali del sito contraddicano la metafora messa in atto dal nome del sito. "MadeFreshly" potrebbe implicare una serie di cose: cibo in generale, prodotti da forno caldi fuori dal forno (questo è dove va la mia mente), qualcosa ispirato dalla natura o persino qualcosa di nuovo e brillante.
Tuttavia, il designer ha scelto un leggero aspetto grunge per il sito. Lo sfondo è una trama invecchiata e anche i titoli hanno applicato del grunge. Ancora una volta, questo rende una pagina di bell'aspetto, ma è in contrasto con il concetto di "Fresh".
Il contenuto deve sempre precedere e determinare il design. Progettare intorno, o almeno non in contraddizione con, il nome e la metafora prestabilita per un sito aiuta tutto a legare insieme e semplicemente sentirsi "giusto".
Ad esempio, controlla una situazione molto simile nel sito "Formee", che offre "forme appena sfornate". Il visual è un personaggio cuoco amichevole che rafforza il motto.
Non copiare questa idea, ma potresti considerare come puoi anche legare il concetto di "fresco" agli elementi visivi sulla pagina.
Il logo
Penso che il logo MadeFreshly sia fantastico. Il carattere tipografico è piuttosto attraente pur sentendosi unico e l'effetto adesivo piegato e pulito aggiunge un senso di profondità al sito. Ottimo lavoro!
L'intestazione
L'intestazione è piacevole e semplice con una navigazione in testo semplice e una scheda di accesso facilmente visibile. Fermati e guarda questa area a grandezza naturale e vedrai che c'è solo un sacco di spazio che galleggia sopra quel logo.
Non mi dispiace lo spazio bianco e persino incoraggiare i progettisti a usarlo abbastanza liberamente, ma una grande area vuota è un modo terribilmente imbarazzante per iniziare il sito. La soluzione qui è semplicissima, riduci semplicemente quello spazio di circa la metà e dovrebbe sembrare eccezionale. Manterrai comunque molto spazio, non tanto da distrarre.
Un altro problema che vedo qui è che il logo è in una strana posizione orizzontale. Il contenuto sul lato destro della pagina è allineato a destra, suggerendo un layout non centrato ma giustificato. Tuttavia, il logo non si allinea con il contenuto a sinistra, né è centrato sull'elemento sottostante (un'altra posizione giustificabile). Invece, goffamente fluttua a destra di essere allineato a sinistra e a sinistra di essere allineato al centro.
La semplice soluzione qui è spostare il logo a sinistra in modo che si allinei con il contenuto sottostante. È già quasi arrivato e ha solo bisogno di un'altra buona spinta.
La sezione in primo piano
La sezione sotto l'intestazione, a cui mi riferisco arbitrariamente come "la sezione in primo piano", è la parte della pagina che attira davvero la tua attenzione. Ha più peso visivo del contenuto che lo circonda, quindi sembra più importante e gli occhi sono quasi immediatamente attratti da esso (tutte le cose buone).
Il pulsante "crea negozio ora" è bello e luminoso e funge da forte invito all'azione. Dopo aver visto il pulsante, se hai un'altra occhiata in giro, i tuoi occhi sono attratti da esso dalla freccia, un bel tocco che porta ancora più attenzione a uno degli elementi più importanti dell'intera pagina. Potresti considerare di aggiungere un effetto hover al pulsante come un po 'di potenziamento UX, ma per il resto è un design solido.
Il mio unico dilemma qui è il testo del titolo. Una mano è attraente e porta una bella ripetizione al testo usato nel logo. D'altra parte, semplicemente non è una lettura veloce semplicemente a causa della complessità del carattere tipografico.
Questa è una di quelle situazioni in cui l'estetica e la leggibilità sono in contrasto. Se hai cambiato il carattere qui, credo fermamente che il sito sarebbe meno attraente per questo, ma potresti raddoppiare il numero di utenti che leggono effettivamente il titolo.
Potresti prendere in considerazione la sperimentazione di lasciare una parola del titolo nella sceneggiatura e di convertire il resto in qualcosa di un po 'più leggibile. Ad esempio, "un carrello della spesa con" potrebbe essere più piccolo e con un carattere sans serif mentre "gusto" potrebbe essere evidenziato sia con una dimensione più grande che con l'uso del carattere dello script.
In definitiva, è accettabile come è attualmente e questi sono solo suggerimenti da considerare. Sarebbe bello eseguire alcuni test AB su questo elemento per vedere se renderlo più leggibile ha un effetto misurabile sulle conversioni. Altrimenti, mantieni la sceneggiatura.
Tre sezioni
La parte inferiore della pagina mostra tre schermate con le parole fresche, facili ed efficienti. Questo è accattivante e memorabile e la sezione sembra fantastica. Adoro il fatto che la trama di sfondo finisca e che le cornici delle miniature si sovrappongano alla nuova area. Ancora una volta, il designer sta aggiungendo un po 'più di profondità al suo design per farlo sembrare molto più reale e diversificato.
Tutti i paragrafi in grassetto
Normalmente ci atteniamo alla homepage di Design Critiques, ma questa volta ho dato un'occhiata un po 'nelle altre pagine. Una cosa che penso valga la pena sottolineare è il testo del paragrafo nella pagina "Tour".
La decisione di rendere i paragrafi tutti in grassetto non funziona. Le lettere sembrano stipate l'una contro l'altra e sono piuttosto difficili da leggere. Inoltre, mettendo in grassetto la copia del corpo riduci l'impatto di un'intestazione in grassetto (il contrasto è la chiave). Consiglierei di dare a questo testo lo stesso stile del testo non in grassetto sotto le tre anteprime sulla homepage.
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.
