Web Design Critique # 60 Mogo Style

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 Mogo Style, en plats för beställning av en personlig logotyp.

Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 49 för att kritisera din design - betydligt mindre än du skulle betala för en konsult för att kolla på din webbplats! Du kan läsa mer här.

Om Mogo Style

En mogo är det perfekta verktyget för ditt personliga varumärke, som görs för individer som vill sticka ut från mängden. Använd dem för ditt visitkort, e-postmeddelanden och profiler. Personligt som ett foto men ändå professionellt som en logotyp. Gör ett fantastiskt intryck varje gång.

Här är en del av hemsidan:

Initial Impression

Först av allt måste jag kommentera tjänsten. Det är en riktigt intressant idé. Vad de gör är att ta ett foto av dig och göra det till en illustration som i huvudsak är en iPhone-ikonliknande kvadrat. Så i grund och botten är det en digital avatar tjänst som ger dig en snygg liten personlig ikon för Facebook, Twitter, visitkort och mer.

Webbplatsens hemsida kommunicerar så bra. Trots att företaget har ett mycket unikt koncept tog det mig bara en sekund att förstå det. Det är så högt ett mål som du kan hoppas på här och de spikade det.

Den övergripande designen är ren och minimal, vilket verkligen uppmärksammar bildspelet och förklarar tjänsten och visar exempel. Jag skulle säga att webbplatsen är ganska nära perfekt men jag har definitivt några rekommendationer. Låt oss ta en närmare titt.

Inriktning

Anpassningen är en av de få saker som jag verkligen tycker behöver lösas. Det är nästan perfekt, men jag är ett kontrollfreak när det gäller anpassning och det enda av det här elementet här buggar mig verkligen. Mogo Style-texten är inriktad mot resten av elementen, men det lilla hjärtat är sorts flytande i ingenmans land.

Problemet här är att logotypen och texten är en visuell enhet. Du uppfattar dem inte som två separata element utan en. Hela logotypen ska rada upp på vänster sida med resten av innehållet på sidan. Lösningen här är lätt, bara flytta logotypen till höger så att hjärtat för närvarande sitter där texten gör.

Berättelsen

Som jag nämnde ovan gör webbplatsen ett bra jobb att kommunicera sitt koncept. Detta beror till stor del på det stora bildspelet på hemsidan, som introducerar dig till Mogo Style och vad de gör. Här är de fyra bilderna som du ser, presenterade i utseende.

Det första du ser är några exempel på den produkt som de levererar. I det här fallet är bilden verkligen värd tusen ord eller mer. Ingen tydligare förklaring av tjänsten kunde erbjudas. Därefter imponerar de på dig. Den första bilden blir intresserad men nu är det dags att kommunicera kvalitet. Här hävdar de att varje logotyp är handritad. Det är svårt att motivera att betala någon för att hålla ditt foto i ett auto-spårprogram men en anpassad handritad illustration är en annan sak helt och hållet. De följande två bilderna är dedikerade till att visa dig varför du behöver produkten genom att visa några användarfall.

Inställningen här är en bra försäljningsnivå: Här är vad vi säljer, varför är det bra och det är därför du behöver det. Varje gång du strukturerar ett bildspel för en hemsida borde du hålla liknande kommunikationsmål i åtanke.

Läsbarhet

Nu ska jag säga att jag inte är galen om textens läsbarhet över de fotografiska bilderna. Designern försökte förbättra situationen med fet text och en droppe skugga, men det kan fortfarande vara mycket bättre. Bilderna här är helt enkelt för upptagna för att lätt läsa texten över. Om du inte har ett stort fält av ganska solid färg, borde du nästan inte ens prova den.

Lyckligtvis är lösningen nästan alltid lätt: om du inte har ett solidfärgsfält, gör en! En enkel svart bar går långt här. För att göra saker lite snyggare minskade jag den svarta barens opacitet och suddade bilden bakom den.

Jämför den här texten med det exakta exemplet och du kan genast se att läsbarheten har förbättrats drastiskt och det ser fortfarande ganska snygg ut, kanske ännu mer.

The? Lär dig? Sida

Hoppa över till? Lär dig? sidan ser vi ett annat väldesignat utrymme, den här gången med en mycket mer linjär layout som innehåller tre primära sektioner och en bakgrundsberättelse längst ner.

Jag tycker att den här sidan är bra, jag gillar utbyggnaden av detaljer om viktiga punkter och användningen av olika men närbesläktade bilder. Det hade varit lätt att göra detta område helt överflödigt med hemsidan men det gör ett bra jobb att stå på egen hand.

Jag är benägen att tro att de sociala logotyperna efter varje stycke är lite överflödiga. Visuellt ser det bra ut men konceptuellt finns det verkligen inte mycket skäl att upprepa detta element så många gånger. Jag tror att denna sida skulle ha stor nytta av ett något minskat fokus på sociala medier och ett ökat fokus på att få användare till inköpsidan. A? Få din nu? knappen eller något liknande skulle hjälpa till.

Var är vanliga frågor?

Min sista kommentar om webbplatsen är att det inte är tillräckligt med teknisk information om produkten från en designers synvinkel. Är det här raster eller vektor? Om det är raster, vad är upplösningen och storleken på den levererade filen och kommer den på en transparent bakgrund? Hur lätt är det att byta färg? Vilka filformat kommer det in?

Visst, mest av den här webbplatsens kundbas kommer inte att ha en aning om vad dessa frågor handlar om men det finns ett grått område av människor som inte är riktigt designers men vet fortfarande tillräckligt för att få frågor om den produkt som ska levereras.

En annan fråga som kommer att tänka på att alla kommer att fråga: Vad är vändningstiden? Pratar vi timmar, dagar eller veckor? Jag tycker att det finns en enkel och elegant lösning på allt detta: en FAQ-sida. Dessa är prefekt för att placera alla de slumpmässiga bitarna av information som vissa kunder oundvikligen kommer att fråga om. Det tjänar också ett viktigt syfte för kunder som helt enkelt inte är tillräckligt informerade för att ställa sådana frågor men är helt kapabla att förstå svaren.

Slutsats

Sammanfattningsvis är Mogo Style en bra liten webbplats och en mycket unik tjänst. Hemsidan kommunicerar konceptet mycket bra och behöver bara en liten anpassningsjustering och kanske en omarbetande av texten på bilderna. The? Lär dig? sidan ser också bra ut men kan använda några mindre sociala ikoner och några fler samtal till handling när det gäller inköp. Slutligen tycker jag att webbplatsen skulle ha stor nytta av en FAQ-sida.

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.