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 hemsida är Peter och James, en online smycken återförsäljare.
Om du vill skicka din webbplats till en framtida designkritik tar det bara några minuter. Vi tar ut $ 34 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 Peter och James
? När det gäller fina smycken säljer Peter & James bara bäst. Från vackra ädelstenar i förgyllt sterling silver och vitt guld till vår berömda bländande italienska mesh diamantarmband kollektion, är varje enskild bit som du hittar på vår hemsida verkligen enastående. Vi är engagerade i att erbjuda våra kunder det allra bästa värdet, kvaliteten, servicen och valet av designer smycken som finns tillgängliga. Vi följer de hetaste stilarna och modetrenderna för att se till att vi alltid erbjuder de senaste och mest efterfrågade smycken online.?
Här är en skärmdump av hemsidan:
Initial Impression
Mitt första intryck här är definitivt positivt. Peter och James är en snygg webbplats. Hemsidan är extremt enkel, vilket är perfekt för att dra uppmärksamheten på kvinnans hårda effekt med armbandet.
De ändringar som jag föreslår idag är ganska små i ljuset av den övergripande designen. Även stora designers kan alltid använda en extra uppsättning ögon för att kamma igenom och föreslå sätt att förfina design och användbarhet för ett projekt.
Låt oss börja med att peke runt i rubriken för att se vad vi kan förbättra.
Header Alignments
Det första problemet jag märker när jag tittar på toppen av sidan är att den horisontella inriktningen för objekten på både vänster och höger sida känns lite slumpmässig.
I själva verket ser jag vad designern gör och det är faktiskt ganska avsiktligt. De lägre objekten är avsedda att vara indragna något, vilket är en vanlig praxis i layout. Problemet med det här är dock att sidan är så enkel att det bara finns några föremål på sidan. Om det fanns mer att anpassa sig till under det här kan det fungera bättre men som det står nästan verkar varje föremål ha sin egen unika horisontella position, vilket leder till en lite rörig känsla.
Den enkla lösningen är att använda den primära bilden som en stark kant som kan följas på båda sidor. Knapparna längst upp till höger kan förmodligen stanna där de är men jag rekommenderar att du flyttar navigationen till vänster och sökfältet rätt så att rubrikelementen ser ungefär ut som bilden nedan.
Navigation Hover
En annan liten möjlig förändring är att lägga till en märkbar svepseffekt på navigeringslänkarna. Detta är inte så mycket en estetisk förändring som en liten ökning i användbarheten. Att se en signifikant förändring sker på en svängare ger positiv feedback till användaren och säkerställer att de gör det rätta. Du vill att de ska sväva på navigeringen och klicka längre in på webbplatsen, så lägg till en liten effekt som förstärker denna åtgärd.
För tillfället ändras markören men jag är inte säker på att det här räcker. Färg är alltid ett annat alternativ, men jag är inte säker på att det är lämpligt här. En enkel understrykning kan implementeras med minimal CSS och kommer att behålla designens eleganta integritet samtidigt som du lägger till tydlig visuell återkoppling.
Primärbild
Den verkliga estetiska appellen på den här sidan kan hänföras till den stora bilden som ses ovan. Detta ställer perfekt tonen för webbplatsen och ger sidan en tydlig kontaktpunkt. Mitt enda problem med den här bilden är att jag vill ha mer!
Den här webbplatsen säljer örhängen, halsband, armband och ringar. Den här bilden visar bara armbandet. Jag tror att det finns mycket potential här för att både göra webbplatsen mer dynamisk och snagging några klick till andra avsnitt.
Jag rekommenderar att du efterliknar denna stil och förgrenar den till fyra olika bilder, en för varje sektion. Härifrån har du två val. Den första är ett enkelt bildspel. Ingenting fancy eller distraherande, bara en långsam upplösning till nästa bild efter flera sekunder. Om du inte är ett fan av bildspel, är ett möjligt alternativ att slumpmässigt ha en av de fyra bilderna som visas när sidan laddas. Jag föredrar det tidigare alternativet, men det senare kan göra några intressanta A / B-test för att se vilket scenario som leder till bättre köpresultat.
Utvalda Produkter
Avsnittet presenterade produkter visas direkt under den primära bilden. Det finns gott om att tycka om det här avsnittet, men det är också lite grovt i vissa områden. Först och främst är svängningseffekten med armband stor. När du svävar över ett armband, vrider bilden för att visa dig den andra sidan. Det här är en fantastisk och rolig lösning för visning av en tredimensionell produkt i ett tvådimensionellt utrymme.
Som du kan se i bilden ovan, dyker popup också upp den här lilla pris- / informationsrutan. Jag älskar den här tanken, men utförandet känns lite av. Sammantaget används rymdutrymmet på ett besvärligt sätt. Priset och beskrivningen pressas för långt till kanterna och har inte mycket utrymme att andas. Också, de två knapparna i botten pressas märkligt till höger, inte hela vägen, bara tillräckligt långt för att inte exakt vara antingen rätt eller mittlinjeformat.
Min rekommendation här är att bara spendera lite tid med att spela med dessa element för att se hur du bättre kan utnyttja detta utrymme. Ordna om varje objekt, justera storleken på några element och se om du inte kan komma med något lite mer attraktivt och läsbart.
Bilden nedan är mitt snabba två minuters försök. Det är inte bäst, men det visar åtminstone en bra allmän uppfattning om hur man använder utrymmet lite mer effektivt.
Produktbilder
Min senaste kommentar i detta område överförs till produktsidorna också. Jag är inte en stor fan av hur produkterna för närvarande visas. Det finns flera skäl till detta. Först och främst är Photoshop Drop Shadows lite grova. Jag är inte säker på om de är för mörka, inte tillräckligt mjuka eller båda, men de kan se mycket mer realistiska ut med en liten investering. Just nu ser de bara lite ostliknande och sätter ner sidans kvalitet lite.
Gradienterna är också lite besvärliga. De verkar bryta mot det övergripande visuella systemet på sidan. Det är svårt att precisera varför det här är men jag tror att det kan vara att de helt enkelt är för mörka på undersidan av gradienten. Försök lätta upp det här och göra lutningen mer subtil.
Dessutom är fotografiet över webbplatsen inte så lika tilltalande som det borde vara. Dessa är avancerade produkter som kostar hundratals och till och med tusentals dollar, men bilderna är så mörka och fula. Lyckligtvis tycker jag inte att fotograferingen behöver redone. Jag är ganska säker på att bilderna helt enkelt behöver lite efterbehandlings kärlek.
Webbdesignen ber om högkvalitativ fotografering, och dessa bilder faller helt enkelt inte över det. Även om det finns ett ton som du kan och borde göra för att klä varje bild upp, men även en enkel nivåjustering går långt genom att lysa upp dessa midtoner och lägga till lite kontrast. Här är en annan snabb och smutsig förhandsvisning med ljusare gradienter och ljusare bilder.
Kontrast nu till det vi började med och du kan tydligt se effekten av de förändringar som vi har gjort.
Se hur mycket av en skillnad gör några små justeringar? Föreställ dig hur mycket bättre varje produkt skulle tyckas med en seriös insats för att förbättra den estetiska kvaliteten. Många av bilderna är så lika att du kan spela in ett Photoshop-arbetsflöde på en av dem och snabbt tillämpa dem på alla i sekunder istället för att fitta runt i timmar på varje enskilt skott.
Slutsats
Som jag nämnde ovan är de flesta av de föreslagna ändringarna ganska minimala. Nudginginriktningar, lägger till svängareffekter, det här är helt enkelt möjliga förbättringar som inte nödvändigtvis är nödsituationer.
Om du bara har tid och resurser för att ta itu med något av problemen ovan rekommenderar jag att du går efter presentationen av produkterna. Jag tror bestämt att bilderna i deras nuvarande tillstånd inte behöver dra ner kvaliteten på webbplatsen långt under vad det har potential att vara. I en webbutik är produktbilderna en av de viktigaste sakerna att få rätt och ändå tror jag att de är de mest saknade områdena.
Du behöver inte nödvändigtvis följa mina förändringar exakt, bara försök att förstå vad kärnproblemen är med hur produkterna ser ut och hitta egna lösningar för att öka den upplevda kvaliteten på dessa områden.
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.