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 Prezzybox, en online-återförsäljare. Låt oss hoppa in och se vad vi tycker!
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 Prezzybox
? Prezzybox.com är en komplett online presentlösning. Om du letar efter en unik eller spännande present till din mamma, pappa, brors syster, kompis, halv kusin eller dig själv (låt oss möta det - vi alla förtjänar något trevligt) är Prezzybox platsen. Från Elektronisk Cigarett till Chokladpizza, Retro Slush Maker till vår funky Silly Bandz. Prezzybox har en verklig snickeri av konstiga och underbara godsaker som väntar på din granskning.?
Här är en skärmdump av hemsidan:
Första intrycket
Förståligt, Prezzybox har mycket på gång i denna design. De har inte fördelen av att vara en fokuserad återförsäljare som kan visa upp en enda produkt. De försöker sälja alla typer av olika produkter och håller på att leta efter det bästa sättet att visa dem.
De har uppenbarligen tänkt det här ganska, och det är mycket att de får rätt. Men det finns också gott om utrymme för förbättringar. Sidan är en udda blandning av bra idéer och avrättningar som är lite på den slarviga sidan. Låt oss se om vi kan hjälpa till att förfina strukturen och peka på områden som bör adresseras för att hjälpa till att ge en hand till framgången för denna design.
Typografi Woes
En av de första sakerna jag märker om den här webbplatsen är att det verkar vara en mycket dålig förståelse för typografi som kör denna design. Överallt ser jag att jag ser några riktigt grova implementeringar av anpassad typ.
Till att börja med är blandningen av typsnittsvikt i logotypen ganska besvärlig:
Ibland verkar teckensnittet i samma ord inte ens matcha. Till exempel, den? 0? på "50%"? i bilden nedan har en helt annan vikt och look än? 5 ?.
Det finns också några viktiga kärnproblem på webbplatsen. Texten i exemplet nedan är en bild, så argument avseende hurckarna i kerning på nätet gäller inte. Detta var helt enkelt resultatet av att hoppa över ett steg i Photoshop-designprocessen.
Taggmoln är nästan aldrig det bästa sättet att rikta trafik till populära destinationer. Den här lider av bristen på tydlig separation mellan taggar. Till exempel,? Air Swimmers? och? barns gåvor? är två separata taggar men typsnittets vikter är så lika att du inte ens kan säga.
Hur man fixar det
Min rekommendation för typen på den här sidan är att börja om. Skrap alla olika textstilar och teckensnitt på den här sidan och ta en annan körning på den, den här gången är mycket avsiktlig för varje enskild karaktär.
? Ge lite noggrant övervägande till vilket koncept du försöker kommunicera och vilken typsnitt som bäst förmedlar den tanken.?Platsen att börja är att investera i vissa kvalitetsfonter. Premium teckensnitt kan vara ganska dyrt men att använda något billigt och ful kan inte ha någon annan effekt än att göra din webbplats ser billig och ful. Om du helt enkelt inte har budgeten, finns det många alternativ på nätet som är gratis och / eller billigt medan du fortfarande är attraktiv och elegant. FontSquirrel och Lost Type Co-op är bra ställen att börja.
Ta din tid och välj typsnitt noggrant. Låt dig inte frestas att bara fånga bildskärmar eftersom de ser roliga ut. I stället ger lite noggrant övervägande till vilket begrepp du försöker kommunicera och vilken typsnitt som bäst överför den ideen. Under denna process begränsar du dig till några bra typsnitt som fungerar riktigt bra tillsammans och implementerar dem över hela webbplatsen.
Du kan och förmodligen borde använda vanliga typsnitt för alla typer av webbtyper, men se till att allt är balanserat bra mellan typsnittstorlek, linjens höjd och textrutans bredd för att säkerställa maximal läsbarhet. Pearsonified har just skrivit en utmärkt skrivning om att använda den gyllene kvoten för att uppnå en välbalanserad typ. Läs den och använd Golden Ratio Typography Calculator som en anständig tumregel för att räkna ut typbehandlingar.
En plats där detta råd skulle förbättra din typ finns i avsnittet nedan. Här förtjänar innehållsbredd och teckensnittstorlek en ökad linjehöjd.
Navigering
Låt oss gå vidare till navigeringsområdet. Intrycket att jag kommer hit är att allt är så tungt. Varje objekt och element har mycket synvikt och det finns viss konkurrens om uppmärksamhet:
Också i vissa delar känns det som att det vertikala avståndet är för hårt, vilket leder till en proppfull och rörig utseende.
En sak som jag gillar är den produktkategorisering som används. Varje sektion är tydligt segmenterad och det är verkligen lätt att hitta presenter till den person du vill handla för. Detta dupliceras på ett fint och förenklat sätt längre ner på sidan:
Hur man fixar det
Jag tycker att navigationsområdet är anständigt, det behöver bara lite tweaking. En bra inspirationskälla att checka ut är Threadless, som använder en mycket liknande navigeringsmeny som är lite mer förfinad.
Lägg märke till hur liknande segmentering används här, men det hela känns ljusare och mycket bättre åtskilda. De ursprungliga nedrullningsmenyerna är helt enkelt färgade text på en vit bakgrund, med den tunga knappen ser selektivt applicerad endast på viktiga delar.
Innehållsorganisation
En annan fråga som jag ser med den här webbplatsen är att organisatoriska taktiken skulle kunna använda lite arbete.Till att börja med finns det massor av slumpmässiga bitar av information som verkar som om de fastnade i slumpmässiga ställen i sista minuten.
Webbplatsen använder horisontella staplar för att skilja de olika sektionerna, men områdena är inte tydligt definierade ur visuell eller konceptuell synpunkt. Avsnittet nedan är märkt? Prezzybox i pressen? och verkar omfatta två stora? Om oss? stil stycken, populära gåva sökningar, kundrecensioner etc., ingen av dem hör verkligen till i detta avsnitt.
Dessa problem sträcker sig till sidfoten, vilket kan använda en viss större visuell omorganisation. Jag är inte heller en fan av det besvärliga snittet som skiljer det från huvudområdet. Om hans upprepades någon annanstans på sidan skulle det inte se så ur sin plats, men som en fristående designfunktion känns det fel.
Hur man fixar det
Varje avsnitt måste definieras tydligare med både grafik och innehåll. En källa till god inspiration för denna typ av design är teman Kingdom. I skärmbilden nedan har detta område på webbplatsen massor av saker som händer. Emellertid har konstruktörerna använt vissa riktigt tydliga och moderna innehållsseparationsmetoder.
Att verkligen nagla innehållsorganisationen hjälper till att hela denna sida tjänar mer effektivt. Det kan innebära att man omorganiserar och omställer mycket av föremålen på webbplatsen och till och med skär ner mycket fett från hemsidan, men i slutändan blir det värt det.
Slutsats
E-handel är ett intressant djur för designers. Anledningen till detta är att estetiken inte korrelerar så tätt till framgång som killar som jag skulle vilja att de skulle. Till exempel är Amazon en rotig röra som gör mitt huvud snurrande, men det är den mest framgångsrika online-återförsäljaren runt. Men det betyder inte att vi kan rabatt attraktiva visuella som något viktigt för webbbutiker. Inte alla kan vara Amazon och ett tydligt sätt att sticka ut ur tävlingen är med solid design.
Bortsett från visuell identitet är det ännu mer kritiska användningsområdet, vilket spelar stor roll i nätbutiker. Många av de ändringar som jag har föreslagit ovan syftar till att hjälpa sidflödet bättre så att användarna lättare kan titta på den här sidan och hitta vad de letar efter. Attraktiva visuella stödjer bara denna aktivitet och hjälper besökarna att vara intresserade.
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.