Idag fortsätter vi vår nya serie av webbdesignkritik, där vi tar en djupgående titt på en levande webbplats och pekar på både sina starka punkter och de områden som kan förbättra sig.
Top Test Prep, den sida vi ska titta på idag var vår allra första kund men begäran har hällt i så var noga med att komma på listan snart!
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.
Top Test Prep
Möt Top Test Prep, ett privat studieföretag som kan skryta med att ha några av de bästa och ljusaste handledarna runt. Deras hemsida design är ganska enkel; en centrerad layout tydligt uppdelad i flera sektioner.
Innan vi får veta vad som kan vara bättre med designen, låt oss ta en titt på några saker som har blivit bra.
Skjutreglage & Fotografi
Jag är en sucker för jQuery bildreglage. De lägger till en dynamisk nivå i en design och bara tillräckligt med rörelse för att få en statisk sida till liv utan att skapa för mycket av en distraktion.
Fotograferingen som används i skjutreglaget är riktigt bra. De leende ansikten tar omedelbart uppmärksamhet och de ljusa färgerna med ett grunt skärpedjup indikerar en professionell fotograf. Den tredje bilden av de tre akademikerna ser lite stock photo-ish men det kommunicerar starkt meddelandet du går för så det fungerar.
Faktum är att jag skulle vilja se en version där bildreglaget tar upp hela utrymmet i den horisontella rutan högst upp. The? Prata med en expert? info kan flyttas omedelbart under den. Detta kan hacka några av användbarhetens folk men jag tror att det skulle stötta upp den estetiska vädjan lite.
Inriktning
Layouten kan använda lite arbete men de flesta objekten på sidan är tydligt anpassade och sektionerna är ganska visuellt separata. Det här låter litet men du skulle bli förvånad över hur många professionella designers som vet lite om någonting om korrekt anpassningsteknik.
Förbättring
Låt oss nu titta på några förändringar som kan göras för att stärka webbplatsens visuella överklagande.
Logo och sidram
Först och främst är logotypen lite ögonblicklig och kan använda en visuell uppdatering. Om du inte vill ompröva din bild just nu, åtminstone uppmärksamma den nuvarande logotypen. Kärningen måste vara hårdare efter huvudbokstäverna och de två raderna av texten ska lämnas i linje. Den nuvarande centruminriktningen lämnar tagline strängad i ingen mans land och är lite besvärlig.
Så långt som sidramen verkar det lite inkonsekvent. Jag gillar den djärva färgen som används i navigeringen, men det verkar konstigt att det sträcker sig över hela sidan och sidfoten inte gör det. Mitt råd är att du ska släppa skuggorna och skapa fauxramen helt och sträcka både sidhuvud och sidfot över hela sidan.
För att ge webbplatsen en ännu starkare kontrastpunkt och en klar rubrik, skulle jag sträcka navigationsgradienten överst på sidan och vända ut logotypen / kopian. Här är en förenklad mockup av vad jag menar:
Att eliminera sidramen kan ge mycket mer utrymme att rymma saker lite ut och ge designen lite andningsrum genom att öka det vita utrymmet.
The? Prata med en expert? Låda
Jag kände att detta område kunde använda en översyn. Jag gillar verkligen stilen och utformningen av knappen som en fristående bit, men det verkar inte passa bra med resten av sajten. Jag skulle överväga att minska radens avrundade hörn (eller bara göra dem 90 grader) och dra ner den mörkare färgen från rubriken.
Vidare är det flytande huvudet lite konstigt. Jag kan förstå begreppsmässigt varför ett ansikte behöver vara här, men design-vis, det fungerar inte bara. Jag tror att det här beror främst på den hörnstilskärning som händer på sin högra och nedre sida. Det ger denna annars sömlösa yta en ytlig ram som bara existerar på den ena platsen. Antingen gå ut och skapa en synlig ram eller nix det flytande huvudet helt.
De tre kolumnerna
Jag ser två primära problem med detta område, framhävs i bilden nedan.
Först och främst bör en punktlista anges aldrig vara centrerad. Det skiljer kulan och innehållet och är ett brott mot vad en punktlista är tänkt att uppnå: enkel och snabb läsbarhet. Eftersom all annan text på sidan är vänsterjusterad är det dessutom en bra idé att hålla trenden.
Slutligen verkar den lilla bokbilden längst till höger vara flytande i rymden. Det finns ingen förklaring till vad det är, varför det är där eller varför jag borde klicka på den. Just nu skriker eftertanke och behöver verkligen antingen fungera korrekt i sidlayouten eller kastas helt.
Din tur!
Sammanfattningsvis är Top Test Prep avstängd, men designern bör överväga att skapa en starkare sidhuvud, döma faux-sidramen och lösa uppställningsproblemen som nämns ovan.
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.
Intresserad av att ha din egen webbplats kritisk? Du kan läsa mer här.