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 Annual Design Awards.
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 Annual Design Awards
? Årliga Design Awards (smeknamnet ANNDAS) är ett globalt erkännande av avancerad visuell kommunikation, inrättad för att belöna utestående bidrag inom designbranschen. Vi har samlat några av de mest fantastiska talangerna och respekterade figurer från hela världen för att döma denna globala händelse som syftar till att bli de främsta designprisen och sätta internationella standarder.?
Här är en skärmdump av hemsidan:
Övergripande Design
Jag vill börja med att säga att detta redan är en snygg webbplats. Jag älskar svart i samband med apelsinpoppar. Denna enda upprepning av en ljus färg hjälper till att dra användarnas ögon mot de viktiga delarna av sidan.
Layouten är solid och innehåller gott om vitt utrymme. Den visuella volymen hos föremålen är också väl dispergerad så att viktiga områden framhävs.
Lyckligtvis verkar det som om folk bedömer att andras design har en stark känsla av design själva! Nu när vi har analyserat helheten, låt oss bryta ner det stycke för bit.
Logo Area
Låt oss börja på det mest uppenbara stället: den övre vänstra. Här ser vi årliga Design Awards-logotypen en sorts strålande cirkeldiagram.
Logotypen är enkel men effektiv. Det föreslår en ung och spetsig publik som inte är för angelägen om rena linjer och tråkig minimalism (platsen är faktiskt ganska ren, men på en snygg sätt).
Cirklarna är en djärv idé som utförs på ett subtilt sätt (smakfullt gjort). Det är ett väldigt enkelt designelement som hjälper till att uppmärksamma logotypen och följaktligen namnet på webbplatsen. Detta skulle inte fungera på en rörig plats, men den här sidan är enkel att det inte ger en visuell röra och i stället fullgör dess syfte perfekt.
Navigering
Navigationsområdet är ganska enkelt, bara lite text ovanför en horisontell stapel med raster för varje sektion.
Jag gillar verkligen typsnittet här. Det känns som något custom gjort med @ font-face så jag blev förvånad när jag kikade på koden och såg att det var helt enkelt Georgia kursiv.
Hovering över en sektion belyser baren i orange. Det här är trevligt men det känns lite konstigt att texten inte heller gör något (det här är ganska nitigt, men på snygga webbplatser måste jag prata om någonting!).
Jag kan förstå varför konstruktören inte ändrade texten så bra som det skulle troligen bli lite svårt att läsa liten orange text på en svart bakgrund. Kanske en mycket liten CSS-transformation för att rotera texten på svävar skulle hjälpa. Det är inte så mycket om det ignoreras på äldre webbläsare och det skulle vara en trevlig nod till logotypstilen.
Bildspel
Jag älskar JavaScript-bildspel så jag tycker att det här avsnittet är bra. Bilden glider kvar som en ny som dyker upp och texten har en fin uttoningseffekt. Jag gillar verkligen de genomskinliga gränserna och grödorna.
Spel- och pausknappen här skärs dock inte bara för mig. Jag såg en grafik gå genom att jag ville titta på igen men hade inget sätt att gå tillbaka. Följaktligen var jag tvungen att vänta på att den skulle komma igen (vilket tog ett tag).
Jag rekommenderar att du lägger en rad små cirkelikoner som länkar till varje bild. Det är enkelt och subtilt och ger användaren både en känsla av var de befinner sig i bildspelet och viss kontroll över att se specifika bilder.
Ingångssektion
Nästa avsnitt är där användarna normalt skulle anmäla sig för att komma in, men det är stängt för tillfället, vilket anges av notebildet.
Den klibbiga bryter helt och hållet mot designen (avsiktligt) och gör det så att du inte kan missa det faktum att inlagorna är stängda. Det fungerar bra och informerar omedelbart användarna om den information som de behöver veta.
Grafiken under den klibbiga är dock lite distraherande. Priserna förefaller märkligt placerade, med en bumpning in i den rektangeln låda till vänster och den andra inte stöta på den. Inte säker exakt vad som händer här men det verkar lite av.
Footer och kontaktformulär
Det sista området vi tittar på är längst ned på sidan där du kan registrera dig för att få information. Det finns också de vanligaste sidfotarna och sociala uppgifter under kontaktformuläret.
Jag gillar att kontaktformuläret ligger här istället för på en dedikerad sida och att det bara finns två fält att fylla i. Jag märkte att fältetiketterna försvinner när du klickar i rutan och kommer inte tillbaka när du klickar ut utan att skriva något. Detta presenterar lite användbarhetsfråga när jag klickade på sidan men då visste jag inte vilken box som var för namnet och som var för e-post när jag kom tillbaka.
Slutligen ser footerområdet bra ut, men jag skulle vilja se lite utrymme mellan orden? Följ oss? och den medföljande ikonen. Just nu är de lite knäppta ihop.
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.