Välkommen till vår 40: e designkritik! 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 webbplats är FanExtra, en fantastisk resurs webbplats för designers.
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 FanExtra
? Allt detta började med en lång sommar för över två år sedan, och en passion för design. Efter att ha njutit några av Photoshop-tutorialsna som publicerades då bestämde jag mig för att skriva några av mina egna. Jag satte upp en blogg för ändamålet (PSDFAN.com) och började använda den som mitt kreativa utlopp. Jag ville erbjuda mer för vårt växande samhälle, och kunna utveckla PSDFAN till något större. Idén till FanExtra blev snart född! FanExtra-nätverket är en plats för designers från hela världen att komma ihop och utforska sina idéer och kreativitet. Du kan gå med i diskussionerna på vårt forum eller verkligen lära dig mer genom vårt FanExtra medlemsprogram.?
Här är en skärmdump av hemsidan:
Initial Impression
FanExtra är ett av de mest intressanta fallen för en designkritik som vi har haft än. Anledningen till detta är att det verkligen är en riktigt attraktiv sida, men en som jag skulle rekommendera blir nästan helt omtänkt.
Varje avsnitt på sidan, från logotypen till miniatyrerna, ser bra ut. Men när du tar in sidan som helhet finns det några äkta problem med flödet av varje avsnitt utöver det största problemet, vilket är tydligheten i meddelandet av det primära meddelandet.
Detta problem är ganska vanligt och uppstår på grund av ett mycket smutsigt ord i webbdesign: antagande. Här är designaren troligen nära projektet och har därför naturligtvis svårt att se att en besökare kanske inte förstår vad som händer. Antagandet är att en besökare som hittar den här sidan kommer veta vad? FanExtra? är, vilket definitivt inte är något som bör antas här.
Kommunikationen
När du landar på en webbsida analyserar du instinktivt rubrikområdet på samma sätt som du skulle analysera menybrädet på en snabbmatrestaurang. Möjliga frågor är: Var är jag? Vad kostar det? Vad ska de ge mig för mina pengar? Betjänar de Coke eller Pepsi produkter? Ok, kanske gäller den sista frågan inte här.
Min punkt är att när du tittar på sidans rubrik, behandlar det inte tillräckligt med alla dessa avgörande frågor:
Vi ser vad webbplatsen heter (FanExtra) tillsammans med ett stort fält för någon form av anmälan. Ska detta innebära att jag är ansluten till nätverket? Så är det här en gratis tjänst? Till höger ser vi något som tyder på? Tutorials ?, som får oss på rätt spår, följt av ord som? Texturer? och? vektorer?, som representerar ganska specifikt jargong.
Om jag är designer, har jag förmodligen förutsett vad som händer i viss utsträckning, men är det verkligen målet här? Ska besökaren hitta ledtrådar och använda dem tolka vad webbplatsen är?
Mysteriet är avslöjat
När vi kommer ner till mitten av webbplatsen avslöjas mysteriet:
Nu kan vi se att FanExtra är ett nätverk av fantastiska handledningssidor? erbjuder medlemskap för $ 9 per månad. Detta är den viktigaste delen av kommunikationen på sidan, men ändå är den bortgjuten halvvägs ner på sidan. Detta borde vara det första som användaren ser.
Faktum är att jag tror att det här meddelandet kan vara ännu tydligare. Uttrycket? Fantastiska handledning webbplatser? är fortfarande ganska vag om du tänker på det från ett outsiderperspektiv. Något liknande otroliga handledningssidor för kreativa proffs? skulle verkligen ta detta uttalande mycket längre. Omedelbart har du lagt din målgrupp precis på näsan så att när jag hittar den här sidan ser jag en trevlig varm hälsning som informerar mig om att den här sidan är speciellt för personer som jag.
Visual Contrast vs Visual Clutter
En annan fråga som jag ser med meddelandet är hur det är strukturerat ur visuell synvinkel. Låt oss ta en titt på den primära kommunikationen som den för närvarande står för:
Här ser vi en stapel med tre linjer, var och en använder olika färgtext och små variationer av samma typsnitt med avseende på både djärvhet och storlek. Jag kan och har skrivit hela artiklar om kontrast i design, men vad det pekar på är bäst sagt i en rådgivning från designförfattaren Robin Williams,? Var inte en wimp.? Med detta menar hon att för att kunna använda kontrast effektivt måste elementen verkligen skilja sig från varandra på ett stort sätt, annars är resultatet helt enkelt visuell rodnad.
Kolla in hur ett annat populärt designmedlemskapsprogram, Think Vitamin, strukturerar det primära meddelandet på deras sida.
Här ser vi stor, överdriven kontrast mellan rubrik och underrubrik. Resultatet är vacker och tydlig kommunikation som läser perfekt. Människor som surfar på sidan läser rubriken nästan av misstag, och om de är intresserade längre kan de ta sig tid att läsa underrubriken.
Funktionerna
Sidan slutar med en massiv uppsättning kula punkter som går ner till vänster. Det här är en ganska besvärlig användning av utrymmet och ger en obekväma lucka på höger sida.
Den snabba lösningen för detta är helt enkelt att bryta upp punkterna i två separata staplar:
Det här är i slutändan ett bandhjälp men jag tror att sidan faktiskt kan använda någon större operation. Vi ska kortfattat adressera det här i nästa avsnitt.
Mitt "stora bild" rekommendationer
Ärligt talat tror jag inte att den obrutna dubbla kolonnuppsättningen fungerar för den här sidan. Det är för styvt och stör faktiskt det naturliga flödet av kommunikation istället för att underlätta det, vilket är målet med en strukturerad layout.
Min rekommendation är att kasta denna layout helt. Först, diktera den styva dubbla kolonnstrukturen. Flytta sedan den primära kommunikationen till toppen av sidan. Gör en stor? Featured? låda som spänner över hela sidbredd och belyser något av det innehåll som du sedan bryter ner senare (140 + filer, 40 vektorer, etc.). Se till att rubriken använder stark kontrast, kristallklar frasering och inriktning, och högst två färger som ser bra ut tillsammans.
Slutligen, efter att du har skapat det här fantastiska rubrikområdet, som perfekt naglar vad webbplatsen är, vem den är för och grunderna till vad den innehåller, kan du fokusera på att organisera din övriga information nedan, eventuellt i ett två eller tre kolumnformat.
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.