Varje vecka tittar vi på en ny webbplats och analyserar designen. Vi pekar på både de områden som görs bra och de som kan använda lite arbete. Slutligen avslutar vi genom att be dig att ge din egen feedback.
Dagens webbplats är den personliga portföljen av Scott Block, en webbdesigner från Maryland.
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 Scott
? Jag bor i Columbia Maryland, bara en kort bilresa från både Baltimore och landets huvudstad. När jag var tolv kombinerade jag min passion för Baltimore Ravens med mitt växande intresse för teknik och började göra webbplatser om Ravens. Sedan dess har jag noggrant förfinat mina färdigheter och gör nu webbplatser för olika individer och organisationer. Jag är nu skicklig i att kombinera html med css, javascript, php och ajax, för att skapa vackra, funktionella webbplatser. ?
Här är webbplatsens hemsida:
Även om det finns en viss potential här finns det många saker jag skulle fixa på den här sidan. Låt oss titta på dem en efter en.
Färgschema
Färgerna som används på Scotts webbplats skapar en ganska fin palett när de avlägsnas individuellt enligt nedan.
Men jag är inte galen på fördelningen av färgerna. De verkar implementeras slumpmässigt i fläckar på sidan helt enkelt för variationens skull i stället för att användas med syfte och logik. Tänk på varje färgval du gör och hur det knyter till resten av innehållet på sidan.
Logotyp
Dess position längst upp till vänster på webbplatsen gör den här logotypen det första användarna ser när de besöker scenen. Du vill ta tillfället i akt för att få ett starkt första intryck. Tyvärr tycker jag att den här logotypen kommer upp kort.
Jag kan se hur blockformer bearbetas i bokstäverna, förmodligen att knyta till designerns efternamn, men det fungerar bara inte. SB har ganska dålig läsbarhet och känns lite daterad.
Navigation och Header som helhet
Navigationsområdet är ganska enkelt, bara lite text med horisontella delare och en underlinje för att indikera den aktuella sidan. Jag är allt för att hålla navigationen enkel så jag tycker att det här området är bra gjort.
När du sveper över en länk i navigeringen dyker en ikon upp under Scott Block-logotypen. Det här är en snygg effekt som jag aldrig någonsin sett exekverat så här (med svepseffekten så långt borta från länken).
När du tar in rubrikområdet som helhet finns det några anmärkningsvärda problem som kan använda adressering. Som jag sa ovan är ikonhöljningseffekten snyggt, men det orsakar några problem. När du inte svävar över en länk i navigeringen finns det en stor tom plats bredvid rubrikkopian som gör att du undrar varför den inte är anpassad till någonting.
Ett möjligt sätt att hjälpa till här är att ange en ikon till standardstatus som ändras till en annan ikon när du sveper över en länk och återgår till originalikonen när svängaren slutar. Tyvärr, när ikonhöljningseffekten är närvarande, skapar logotypen och ikonen en obekväm vertikal stapel.
Sammantaget kan det negativa utrymmet i detta område använda en fullständig omstrukturering. Utöver problemet med den försvunna ikonen tar huvudlogotypen upp för mycket vertikalt utrymme och skapar konstiga luckor.
Utvalda område
Jag gillar upprepning i en design, och jag kan se hur vinklarna i det här avsnittet speglar logotypen, men eftersom det inte fungerar riktigt i logotypen gäller samma sak här. Den sneda naturen på rubrikerna känns lite udda, liksom det korsformade mönster som här skapas av färgerna.
Omedvetet vill din hjärna ansluta de två objekten som är av samma färg, men här är de två områdena inte relaterade.
Vidare finns det ett antal svävarpåverkningar på detta område som inte tjänar någon anledning. När du sveper över ett avsnitt skapas en droppskugga. Webben har lärt oss att känna igen sådan aktivitet som en indikation på att det vi svänger över är ett klickbart område. Dessa områden är dock inte klickbara och får dem att känna som om de bara skapade förvirring för användaren.
sidfot
Th footer är ganska enkelt, men igen ser vi att det kan använda ganska lite raffinering.
Först och främst är knappen på en besvärlig plats. När du utformar, var alltid försiktig med att bara hålla saker i hål bara för att du har utrymme. En stark vänsterjustering upprättas här med texten men förstörs sedan genom att placera knappen.
Vidare är knapphängningsanimationen lite för mycket. En bildsprite används här och det finns en animering mellan de två knappstaterna där du kan se en del av bilden glida ut som den andra glider in. Det är inte lätt att berätta vad som händer först och det är därför lite oroväckande.
Övergripande rekommendationer
Jag presenterade en hel del hårda kritik ovan och jag tycker att det vore bäst att försöka knyta allt ihop. Här är mina förslag:
För att starta, redesign logotypen till något mer modernt och horisontellt. Skapa sedan en hård vänsterjustering helt ner på sidan. Rikta upp navigationsområdet och kopieringsblocket under det till vänster på sidan och flytta kanske den nya logotypen till höger.
Variera storleken på texten på sidan för att skapa tydliga rubriker och stödjande kopia. Allt är för närvarande mycket stort. Kom ihåg: När du gör allt speciellt är ingenting speciellt.
Släng ut de aktuella formerna i den utvalda delen och den gigantiska punktlistan (inkludera dina tjänster någon annanstans). Skapa en enda storprojektförhandsgranskning som sträcker sig hela vägen över innehållsområdet.
Ändra omedelbart sidfoten så att vänsterjusteringen ovan är hedrad.Med andra ord, ta den knappen ur höger hörn.
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.
Intresserad av att ha din egen webbplats kritisk? Du kan läsa mer här.