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 è MadeFreshly.
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 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 della spesa.
Ecco uno screenshot della homepage:
Prima impressione
Subito, posso dire che mi piace molto il design di MadeFreshly. Ci sono molte idee di design interessanti e stranezze qui di cui parleremo di seguito. Ho sicuramente alcuni suggerimenti per migliorare, ma per la maggior parte, è un sito di grande effetto creato da designer di grande talento.
La mia più grande preoccupazione è probabilmente da un punto di vista concettuale. Questa è sicuramente una critica soggettiva, quindi sentitevi liberi di ignorarla completamente, ma trovo strano che le immagini del sito contraddicano la metafora impostata dal nome del sito. ? MadeFreshly? potrebbe implicare un certo numero di cose: cibo in generale, prodotti da forno caldi fuori dal forno (questo è dove va la mia mente), qualcosa ispirato alla natura, o anche qualcosa di nuovo e lucido.
Tuttavia, il designer ha scelto un aspetto leggermente grunge per il sito. Lo sfondo è una trama invecchiata e ai titoli viene anche applicato del grunge. Ancora una volta, questo rende una pagina di grande effetto, ma è in contrasto con il concetto di "Fresh."
Il contenuto dovrebbe sempre precedere e determinare il design. Progettare in giro, o perlomeno non in contraddizione con, il nome e la metafora prestabilita per un sito aiuta a legare e sentire semplicemente "giusto"?
Ad esempio, controlla una situazione molto simile nel sito? Formee ,? che offre? forme fresche al forno.? Il visual è un personaggio amichevole che rafforza lo slogan.
Non copiare questa idea, ma potresti considerare come puoi anche legare il concetto di? Fresco? alle immagini sulla pagina.
Il logo
Penso che il logo MadeFreshly sia fantastico. Il carattere tipografico è piuttosto attraente mentre si sente ancora unico e l'effetto adesivo stropicciato aggiunge un senso di profondità al sito. Ottimo lavoro!
L'intestazione
L'intestazione è semplice e intuitiva con una semplice navigazione di testo e una scheda di accesso facilmente riconoscibile. Fermati e guarda quest'area a schermo intero e vedrai che c'è solo molto spazio sopra quel logo.
Non mi interessa lo spazio bianco e nemmeno incoraggiare i designer a usarlo abbastanza liberamente, ma una grande area vuota è un modo terribilmente scomodo per iniziare il sito. La soluzione qui è semplicemente semplice, basta ridurre lo spazio di circa la metà e dovrebbe sembrare fantastico. Avrai comunque un sacco di spazio, non tanto da distrarre.
Un altro problema che vedo qui è che il logo si trova in una strana posizione orizzontale. Il contenuto sul lato destro della pagina è allineato a destra, suggerendo non un layout 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 fluttuante alla destra di essere allineato a sinistra ea sinistra di essere allineato al centro.
La semplice soluzione è quella di spostare il logo a sinistra in modo che si allinei con il contenuto sottostante. È quasi già lì e ha solo bisogno di una spinta in più.
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 un peso visivo maggiore del contenuto che lo circonda, quindi sembra più importante e i tuoi occhi sono quasi immediatamente attratti da esso (tutte cose buone).
Il? Creare il negozio ora? il pulsante è bello e luminoso e funge da forte richiamo all'azione. Dopo aver visto il pulsante, se hai un'altra occhiata in giro, i tuoi occhi sono attratti dalla freccia, un bel tocco che porta ancora più attenzione a uno degli elementi più importanti su tutta la pagina. Potresti considerare di aggiungere un effetto hover al pulsante proprio come un potenziamento UX, ma altrimenti è un design solido.
Il mio dilemma qui è il testo del titolo. Con una mano, è attraente e porta una bella ripetizione al testo utilizzato 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 disaccordo. Se hai cambiato il carattere qui, credo fermamente che il sito sarebbe meno attraente per questo, ma potresti raddoppiare il numero di utenti che effettivamente leggono il titolo.
Potresti considerare di sperimentare lasciando una sola parola del titolo nella sceneggiatura e convertendo il resto in qualcosa di un po 'più leggibile. Quindi per esempio? Un carrello con? potrebbe essere più piccolo e in un semplice font sans-serif mentre? taste? potrebbe essere evidenziato sia con una dimensione maggiore che con l'uso del font 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 effetti misurabili sulle conversioni. In caso contrario, quindi mantenere la sceneggiatura.
Three Up Section
Il fondo della pagina mostra tre schermate con le parole fresche, facili ed efficienti. Questo è accattivante e memorabile e la sezione sembra fantastica. Mi piace il fatto che la texture di sfondo finisca e che i fotogrammi delle miniature si sovrappongano alla nuova area.Ancora una volta, il progettista aggiunge un po 'più di profondità al suo design per farlo sembrare molto più reale e vario.
Tutti i paragrafi in grassetto
Normalmente ci atteniamo alla pagina iniziale per i Critici di design, ma questa volta ho cercato un po 'sulle altre pagine. Una cosa che penso valga la pena sottolineare è il testo del paragrafo sul? Tour? pagina.
La decisione di rendere tutti i paragrafi in grassetto non sta funzionando. Le lettere sembrano essere stipate l'una contro l'altra e sono piuttosto difficili da leggere. Inoltre, mettendo in grassetto la copia del corpo si riduce l'impatto di un'intestazione grassetto (il contrasto è la chiave). Consiglierei di dare a questo testo lo stesso stile del testo non grassetto sotto le tre miniature sulla home page.
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.