Web Design Critique # 29: MadeFreshly
Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De site van vandaag is MadeFreshly.
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We rekenen $ 24 voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over MadeFreshly
“Een winkelwagentje met smaak. Trends veranderen en dat geldt ook voor uw online winkel. MadeFreshly biedt u een fris ontwerp voor uw winkelwagen. ”
Hier is een screenshot van de homepage:
Eerste indruk
Ik kan meteen zeggen dat ik het ontwerp van MadeFreshly erg mooi vind. Er zijn verschillende coole ontwerpideeën en eigenaardigheden die we hieronder zullen bespreken. Ik heb zeker een paar suggesties voor verbetering, maar voor het grootste deel is het een geweldige site gemaakt door zeer getalenteerde ontwerpers.
Mijn grootste probleem is waarschijnlijk vanuit conceptueel oogpunt. Dit is absoluut een subjectieve kritiek, dus voel je vrij om het volledig te negeren, maar ik vind het vreemd dat de beelden van de site in tegenspraak zijn met de metafoor die is ingesteld door de naam van de site. 'MadeFreshly' kan een aantal dingen betekenen: eten in het algemeen, gebakken producten die heet uit de oven komen (dit is waar mijn geest naar toe gaat), iets dat door de natuur is geïnspireerd of zelfs iets nieuws en glanzend.
De ontwerper heeft echter gekozen voor een lichte grunge-look voor de site. De achtergrond is een verouderde textuur en op de koppen is ook wat grunge aangebracht. Nogmaals, dit zorgt voor een goed uitziende pagina, maar het staat haaks op het concept van "Fresh".
Inhoud moet altijd voorafgaan en het ontwerp bepalen. Ontwerpen rond, of op zijn minst niet in tegenspraak met, de naam en de vooraf vastgestelde metafoor voor een site helpt alles met elkaar te verbinden en voelt zich gewoon 'goed'.
Bekijk bijvoorbeeld een zeer vergelijkbare situatie op de site "Formee", die "vers gebakken vormen" levert. De visual is een vriendelijk chef-personage dat de slogan versterkt.
Kopieer dit idee niet, maar u kunt overwegen hoe u het concept van 'fris' ook kunt koppelen aan de beelden op de pagina.
Het logo
Ik vind het MadeFreshly-logo geweldig. Het lettertype is best aantrekkelijk en voelt nog steeds uniek aan en het nette gekreukte stickereffect voegt een gevoel van diepte toe aan de site. Goed gedaan!
De koptekst
De koptekst is mooi en eenvoudig met een navigatie met platte tekst en een gemakkelijk te herkennen login-tabblad. Kom langs en bekijk dit gebied op ware grootte en je zult zien dat er gewoon veel ruimte boven dat logo zweeft.
Ik vind witruimte niet erg en moedig ontwerpers zelfs aan om het vrij royaal te gebruiken, maar een groot leeg gebied is een erg ongemakkelijke manier om de site te starten. De oplossing hier is doodeenvoudig, verklein die ruimte gewoon met de helft en het zou er geweldig uit moeten zien. Je behoudt nog steeds veel ruimte, alleen niet zozeer dat het afleidt.
Een ander probleem dat ik hier zie, is dat het logo zich op een vreemde horizontale positie bevindt. De inhoud aan de rechterkant van de pagina komt allemaal uit op de rechterkant, wat geen gecentreerde maar een gerechtvaardigde lay-out suggereert. Het logo komt echter niet overeen met de inhoud aan de linkerkant en is ook niet gecentreerd op het element eronder (een andere gerechtvaardigde positie). In plaats daarvan zweeft het ongemakkelijk naar rechts om links uitgelijnd te zijn en naar links om uitgelijnd te zijn.
De eenvoudige oplossing hier is om het logo naar links te schuiven, zodat het in lijn komt met de inhoud eronder. Het is er al bijna en heeft nog een goede duw nodig.
De aanbevolen sectie
De sectie onder de koptekst, die ik willekeurig 'de aanbevolen sectie' noem, is het gedeelte van de pagina dat echt uw aandacht trekt. Het heeft meer visueel gewicht dan de inhoud eromheen, dus het voelt belangrijker en je ogen worden er bijna meteen door aangetrokken (allemaal goede dingen).
De knop 'Nu winkel maken' is mooi en helder en dient als een sterke oproep tot actie. Nadat je de knop hebt gezien, als je nog een keer rondkijkt, worden je ogen er door de pijl naar terug getrokken, een leuke aanraking die nog meer aandacht vestigt op een van de belangrijkste elementen op de hele pagina. Je zou kunnen overwegen om een zweefeffect aan de knop toe te voegen, net als een beetje een UX-boost, maar verder is het een solide ontwerp.
Mijn enige dilemma hier is de koptekst. Aan de ene kant is het aantrekkelijk en brengt het een mooie herhaling van de tekst in het logo. Aan de andere kant is het gewoon niet snel te lezen, simpelweg vanwege de complexiteit van het lettertype.
Dit is een van die situaties waarin esthetiek en leesbaarheid op gespannen voet staan. Als u het lettertype hier hebt gewijzigd, ben ik er vast van overtuigd dat de site er minder aantrekkelijk voor zou zijn, maar u zou het aantal gebruikers dat de kop daadwerkelijk leest, kunnen verdubbelen.
U kunt overwegen om te experimenteren met het achterlaten van één woord van de kop in het script en de rest om te zetten in iets leesbaars. Zo kan bijvoorbeeld "een winkelwagentje met" kleiner zijn en in een eenvoudig schreefloos lettertype, terwijl "smaak" kan worden benadrukt door zowel een grotere grootte als door het gebruik van het scriptlettertype.
Uiteindelijk is het acceptabel hoe het nu is en dit zijn slechts suggesties om te overwegen. Het zou geweldig zijn om een aantal AB-tests op dit element uit te voeren om te zien of het leesbaarder maken een meetbaar effect heeft op conversies. Zo niet, bewaar dan zeker het script.
Three Up Sectie
Onderaan de pagina staan drie screenshots met de woorden fris, gemakkelijk en efficiënt. Dit is pakkend en gedenkwaardig en de sectie ziet er geweldig uit. Ik vind het geweldig dat de achtergrondtextuur eindigt en de miniatuurframes elkaar overlappen in het nieuwe gebied. Nogmaals, de ontwerper voegt wat meer diepte toe aan zijn ontwerp om het veel realistischer en diverser te laten voelen.
Alle vetgedrukte alinea's
Normaal gesproken houden we ons aan de homepage voor Design Critiques, maar deze keer heb ik wat rondgekeken op de andere pagina's. Een ding waarvan ik denk dat het de moeite waard is om op te wijzen is de alineatekst op de "Tour" -pagina.
De beslissing om de alinea's vetgedrukt te maken, werkt gewoon niet. De letters zien eruit alsof ze tegen elkaar zijn gepropt en zijn vrij moeilijk te lezen. Verder, door de body-kopie te versterken, vermindert u de impact van een vetgedrukte koptekst (contrast is de sleutel). Ik zou aanraden om deze tekst dezelfde stijl te geven als de niet-vetgedrukte tekst onder de drie miniaturen op de startpagina.
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
