Välkommen till vår 25: e designkritik! Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på både de områden som görs bra förutom dem som kan använda lite arbete. Slutligen avslutar vi genom att be dig att lägga in och ge din egen feedback. Rösta i omröstningen längst ner på denna sida och / eller lämna en kommentar med dina tankar!
Dagens webbplats är Highwire.com, en personlig online-butik plattform.
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 Highwire
Att skapa din egen e-handelsbutik har aldrig varit så lätt och prisvärd. Anmäl dig till en kostnadsfri försök idag och börja bygga din butik på bara några minuter !?
Här är en skärmdump av hemsidan:
Helhetsintryck
Om du slutade med idag för att höra mig rippa på dålig design, kommer du att bli besviken. Jag tror att det här kanske bara är den bästa webbdesignen som lämnats in ännu för en designkritik.
Highwire är helt enkelt en underbar webbplats och är så bra gjort att vi kommer att bli tvungna att använda den som mer av ett positivt undervisningsverktyg än en negativ. Fortsätt läsa eftersom det finns ett ton som vi kan lära oss genom att analysera denna design. Och oroa dig inte, det finns några små saker som jag föreslår att förbättra på vägen.
Färgpalett
Det djärvaste påståendet på denna sida är färg. Kvaliteten på bilderna är utmärkt men det är färgen som verkligen tar tag i din uppmärksamhet så snart du laddar sidan. De grundläggande färgerna som används här bryter inte just formen: grön, röd, blå, grå och lite orange, men de är blandade på ett mycket attraktivt sätt.
Observera att de har valt en super ljus nyans av varje färg som verkligen hoppar precis utanför sidan. En blandning av radiella och linjära gradienter gör att färgerna ser ut som mycket mer levande och levande samtidigt som man får ett subtilt förslag på textur.
Layout och inriktning
Layouten på den här webbplatsen är rockfast och använder verkligen korrekt användning av whitespace och visuell viktfördelning. Notera i den modifierade bilden nedan hur starka vertikala linjer har upprättats för att se till att allt är snyggt och tätt.
Observera också att konstruktören valde en vänsterjustering och fastnat på den. All text är left-alined och även knapparna under miniatyrerna följer denna trend. Dina mönster tenderar att se mycket mer sammanhängande och konsekventa när du undviker att byta justeringar i slumpmässiga inervaler genom hela konstruktionen.
Trots att det är olika delar av koden, använder rubriken och sidfoten samma gradient så att du får en illusion av en kontinuerlig bakgrund som innehållet flyter över. Det känns som om de bara har stylat kroppslabeln men har semantikfördelen att faktiskt upprätthålla en stark rubrik och sidfot.
Skuggor och reflektioner
Reflektioner, gradienter och mjuka skuggor har nyligen givit plats för solid färg och ofta hårda, icke-fjädrade skuggor. När vi börjar lämna den slagna och missbruka web 2.0 ser bakom och går vidare till vårt nästa offer, är det fortfarande trevligt att se någon dra av stilen som den var tänkt att vara.
Både skuggorna och reflektionerna här är ganska subtila och har strukturerats med omsorg för att se realistiska och helt enkelt vackra. Om du ska lägga till visuell känsla till ett element, är det värt att ta sig tid att tweak och experimentera tills du får något som verkligen lägger till finess och glans på en sida i motsats till en slarvig kläd av smink.
The Burst: Evolved
En sak du lär dig när du designar för ett större marknadsföringsföretag är att marknadsförare absolut älskar skurar. Något stort och punktligt som bryter mot designen och tar därför uppmärksamheten hos kunden. Om marknadsföringsavdelningar, och faktiskt många designers hade sitt sätt, så skulle allt se ut så här:
Bara så du vet, ur ett designperspektiv är det cliche, ful, överdriven, föråldrad och alla andra negativa adjektiv du kan tänka dig. Som en allmän tumregel, aldrig sätta en starburst på någonting.
Den här designern lyckades med glädje förstå denna regel och kom fram till en mycket mer modern och attraktiv lösning, som visas nedan. Detta 3D-band wraps runt en stapel som beskriver den nya funktionen. Det strider väsentligt mot designen nog för att fånga uppmärksamheten, men inte tillräckligt för att billigare hela sidan.
Föreslagen förbättring
Som jag har sagt flera gånger redan är det så bra att det är svårt att hitta någonting fel med det. Det finns dock ett par saker jag skulle vilja överväga att förbättra.
Till att börja med använder webbplatsen Cufon för anpassad typografi. Jag klagade över detta i vår senaste kritik och kommer fortsätta att göra samma argument överallt där jag ser Cufon som används. @ font-face är en bättre lösning, period. @ font-face-text är helt valbar, Cufon är inte. @ font-face använder ren CSS, Cufon kräver att JavaScript är aktiverat. Som jag påpekade förra gången, när Cufon-webbplatsen föreslår att du använder @ font-face istället vet du att det är dags att kasta in handduken och hoppa ombord.
Det andra som stör mig är Facebook-fältet på toppen. Om du ritar en rad i mitten av texten i den här fältet, så som jag har gjort nedan kan du se att Facebook-logotypen är besvärligt utanför mitten. Jag är inte säker på om det här var avsiktligt eller en olycka, på något sätt skulle jag stöta på det nära centrum.
Andra sidor
Vi avslutar genom att ge dig en snabb titt på några av de andra sidorna på webbplatsen. Som du kan se är de lika attraktiva och mycket väl utformade. Jag gillar särskilt pris tabellerna!
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 några hårda förolämpningar.