Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på båda områdena som görs bra förutom de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.
Dagens webbplats är MadeFreshly.
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi debiterar $ 24 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att ta en titt på din webbplats! Du kan läsa mer här.
Om MadeFreshly
? En kundvagn med smak. Tendenser förändras och så ska din webbutik. MadeFreshly erbjuder dig en ny design för din varukorg.?
Här är en skärmdump av hemsidan:
Första intrycket
Mitt emot fladdermusen kan jag säga att jag verkligen gillar designen MadeFreshly. Det finns flera fina designidéer och quirks här som vi kommer att prata om nedan. Jag har definitivt några förslag till förbättring men för det mesta är det en snygg webbplats skapad av mycket begåvade designers.
Min största kvalm är troligen från en konceptuell synvinkel. Det här är definitivt en subjektiv kritik, så glöm inte att helt ignorera det, men jag tycker det är konstigt att webbplatsens visuella motsäger metaforen som är inrättad av webbplatsens namn. ? MadeFreshly? kan innebära ett antal saker: Mat i allmänhet, bakverk varma ut ur ugnen (det här är mina tankar går), något naturinspirerat, eller till och med något nytt och glänsande.
Emellertid har designern valt en liten grunge utseende för webbplatsen. Bakgrunden är en åldrig konsistens och rubrikerna har också lite grunge applicerat på dem. Återigen ger detta en bra sida, men det står i strid med begreppet "Fresh."
Innehållet bör alltid föregås och bestämma designen. Att utforma runt, eller åtminstone inte i motsats till, namnet och den förinställda metaforen för en webbplats hjälper allt att hålla ihop och bara känna? Rätt.?
Som exempel, kolla in en mycket liknande situation på webbplatsen? Formee ,? vilken levererar? färska bakade former.? Den visuella är en vänlig kockkaraktär som förstärker tagline.
Kopiera inte den här tanken, men du kan överväga hur du också kan koppla in begreppet "friskt"? till bilderna på sidan.
Logotypen
Jag tror att MadeFreshly-logotypen är stor. Tecknet är ganska attraktivt medan det fortfarande känns unikt och den snygga veckade klistermärkeffekten ger en känsla av djup till webbplatsen. Bra jobbat!
Rubriken
Rubriken är snygg och enkel med en vanlig textnavigering och en lätt märkbar inloggningsflik. Sluta med och titta på det här området i full storlek men du ser att det finns bara mycket utrymme som flyter ovanför logotypen.
Jag har inget emot whitespace och till och med uppmuntrar designers att använda det ganska liberalt, men ett stort tomt område är ett väldigt besvärligt sätt att starta webbplatsen. Lösningen här är död enkel, bara sänka det med ungefär hälften och det ska se bra ut. Du kommer fortfarande att behålla mycket utrymme, inte så mycket att det är distraherande.
Ett annat problem jag ser här är att logotypen befinner sig i en konstig horisontell position. Innehållet till höger på sidan rader upp till höger, vilket tyder på att inte en centrerad men en motiverad layout. Emellertid stämmer inte logotypen med innehållet till vänster, det är heller inte centrerat över elementet under det (en annan motiverad position). I stället är det olyckligt flytande till höger om att vara vänsterjusterat och till vänster om att vara centrerad.
Den enkla lösningen här är att scoot logotypen till vänster så att den stämmer överens med innehållet under det. Det är nästan där redan och behöver bara en mer bra shove.
Det utvalda avsnittet
Avsnittet under rubriken, som jag vedergälligt hänvisar till som? Den delade delen? är den del av sidan som verkligen tar tag i din uppmärksamhet. Den har mer synvikt än innehållet runt den så det känns viktigare och dina ögon är nästan omedelbart dras till det (alla bra saker).
The? Skapa butik nu? knappen är fin och ljus och tjänar som ett starkt handlande. När du har tittat på knappen, om du tittar igen, drar dina ögon tillbaka på pilen, en fin touch som ger ännu mer uppmärksamhet åt en av de viktigaste elementen på hela sidan. Du kan överväga att lägga till en svängningseffekt på knappen som en bit av en UX-boost, men annars är det en solid design.
Min enstaka här är huvudtexten. Ena handen är det attraktivt och ger en fin upprepning till texten som används i logotypen. Å andra sidan är det helt enkelt inte en snabb läsning helt enkelt på grund av typsnittets komplexitet.
Det här är en av de situationer där estetik och läsbarhet står i strid. Om du ändrade teckensnittet här tror jag starkt att webbplatsen skulle vara mindre attraktiv för den, men du kan dubbla antalet användare som faktiskt läser rubriken.
Du kan överväga att experimentera med att lämna ett ord i rubriken i manuset och konvertera resten till något lite mer läsbart. Så till exempel, en kundvagn med? kan vara mindre och i en vanlig sans-serif-typsnitt medan? Smaka? kan markeras genom både en större storlek och användningen av manusfonten.
I slutändan är det acceptabelt hur det för tillfället är och det här är bara förslag att överväga. Det skulle vara bra att köra några AB-test på detta element för att se om det blir mer läsbart att det har någon mätbar effekt på omvandlingar. Om inte, behåll definitivt skriptet.
Tre upp avsnitt
Nederst på sidan visas tre skärmdumpar med orden färska, enkla och effektiva. Detta är catchy och minnesvärt och sektionen ser fantastisk ut. Jag älskar att bakgrundsstrukturen slutar och miniatyrbilderna överlappar varandra till det nya området.Återigen lägger konstruktören lite djupare på sin design så att den känns så mycket mer verklig och mångsidig.
Alla fetaste stycken
Normalt håller vi oss till hemsidan för Design Critiques, men den här gången stötte jag lite på de andra sidorna. En sak som jag tycker är värt att påpeka är stycktexten på "Tour"? sida.
Beslutet att göra punkterna alla djärva bara fungerar inte. Bokstäverna ser ut som om de är crammed mot varandra och är ganska svåra att läsa. Vidare dämpar du kroppskopian, reducerar effekten av en fet rubrik (kontrast är nyckeln). Jag skulle rekommendera att ge denna text samma stil som den fetstilta texten under de tre miniatyrerna på hemsidan.
Din tur!
Nu när du har läst mina kommentarer lägger du in och hjälper till med att ge designern ytterligare råd. Låt oss veta vad du tycker är bra om designen och vad du tycker kan vara starkare. Som alltid ber vi att du också respekterar webbplatsens designer och erbjuder tydliga konstruktiva råd, utan att det blir några svåra förolämpningar.