Web Design Critique # 40: FanExtra
Welkom bij onze 40e ontwerpkritiek! Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De site van vandaag is FanExtra, een fantastische bronnensite voor ontwerpers.
Verken Envato Elements
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We rekenen $ 34 voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over FanExtra
“Dit begon allemaal met een lange zomer van meer dan twee jaar geleden en een passie voor design. Na genoten te hebben van enkele van de Photoshop-tutorials die op dat moment gepost werden, besloot ik er zelf een paar te schrijven. Ik heb hiervoor een blog opgezet (PSDFAN.com) en ben deze gaan gebruiken als mijn creatieve uitlaatklep. Ik wilde meer bieden voor onze groeiende gemeenschap en PSDFAN kunnen evolueren naar iets groters. Het idee voor FanExtra was snel geboren! Het FanExtra-netwerk is een plek voor ontwerpers van over de hele wereld om samen te komen en hun ideeën en creativiteit te verkennen. Je kunt deelnemen aan de discussies op onze forums of je leren echt bevorderen via ons FanExtra-lidmaatschapsprogramma. ”
Hier is een screenshot van de homepage:
Eerste indruk
FanExtra is een van de meest interessante cases voor een Design Critique die we tot nu toe hebben gehad. De reden hiervoor is dat het eigenlijk een heel aantrekkelijke pagina is, maar een die ik zou aanraden, wordt bijna volledig heroverwogen.
Elke sectie op de pagina, van het logo tot de miniaturen, ziet er geweldig uit. Wanneer u echter de pagina als geheel inneemt, zijn er naast het grootste probleem, namelijk de duidelijkheid van de communicatie van het primaire bericht, enkele echte problemen met de stroom van elke sectie.
Dit probleem komt vrij vaak voor en ontstaat door een heel vies woord in webdesign: aanname. Hier is de ontwerper waarschijnlijk dicht bij het project en heeft daarom natuurlijk moeite om te zien dat een bezoeker mogelijk niet begrijpt wat er aan de hand is. De aanname is dat een bezoeker die deze pagina vindt, weet wat "FanExtra" is, wat hier zeker niet mag worden aangenomen.
De communicatie
Wanneer u op een webpagina terechtkomt, analyseert u instinctief het koptekstgebied op dezelfde manier als u het menubord in een fastfoodrestaurant zou analyseren. Mogelijke vragen zijn: Waar ben ik? Hoeveel kost het? Wat geven ze me voor mijn geld? Dienen ze cola of pepsi-producten? Ok, misschien is die laatste vraag hier niet van toepassing.
Mijn punt is dat als je naar de koptekst van deze site kijkt, het niet voldoende beantwoordt aan al deze cruciale vragen:
We zien hoe de site (FanExtra) wordt genoemd, samen met een groot veld voor een soort aanmelding. Betekent dit dat ik ben aangemeld bij het netwerk? Dus is dit een gratis service? Aan de rechterkant zien we iets dat verwijst naar 'tutorials', wat ons op het goede spoor brengt, gevolgd door woorden als 'texturen' en 'vectoren', die behoorlijk specifiek jargon vertegenwoordigen.
Als ik een ontwerper ben, heb ik op dit moment waarschijnlijk al uitgezocht wat er in zekere mate aan de hand is, maar is dat hier echt het doel? Moet de bezoeker aanwijzingen zoeken en deze interpreteren wat de site is?
Het mysterie wordt onthuld
Wanneer we naar het midden van de website gaan, wordt het mysterie onthuld:
Nu kunnen we zien dat FanExtra "een netwerk van geweldige tutorial-sites" is en lidmaatschappen aanbiedt voor $ 9 per maand. Dit is het belangrijkste communicatiemiddel op de pagina en toch is het halverwege de pagina weggestopt. Dit zou het eerste moeten zijn dat de gebruiker ziet.
Ik denk zelfs dat deze boodschap nog duidelijker zou kunnen zijn. De uitdrukking "geweldige tutorial-sites" is nog steeds vrij vaag als je er vanuit het perspectief van een buitenstaander over nadenkt. Zoiets als "geweldige tutorial-sites voor creatieve professionals" zou deze verklaring echt veel verder brengen. Je hebt meteen je doelgroep op de neus gezet, zodat wanneer ik deze pagina vind, ik een mooie warme begroeting zie die me informeert dat deze site specifiek voor mensen zoals ik is.
Visueel contrast versus visuele rommel
Een ander probleem dat ik zie bij de berichtgeving is hoe het visueel is gestructureerd. Laten we eens kijken naar de primaire communicatie zoals die er nu uitziet:
Hier zien we een stapel van drie regels, elk met verschillende kleurtekst en kleine variaties van hetzelfde lettertype in termen van zowel vetheid als grootte. Ik kan en heb hele artikelen geschreven over contrast in design, maar waar het op neerkomt is het beste te zeggen in een advies van designauteur Robin Williams: "wees geen watje." Hiermee bedoelt ze dat, om contrast effectief te gebruiken, de elementen echt op een grote manier van elkaar moeten staan, anders is het resultaat gewoon visuele rommel.
Bekijk hoe een ander populair design-lidmaatschapsprogramma, Think Vitamin, de primaire boodschap op hun pagina structureert.
Hier zien we een enorm, enorm overdreven contrast tussen de kop en de subkop. Het resultaat is mooie en heldere communicatie die perfect leest. Mensen die door de pagina browsen, lezen de kop bijna per ongeluk en als ze verder geïnteresseerd zijn, kunnen ze de tijd nemen om de subkop te lezen.
De eigenschappen
De pagina eindigt met een enorme reeks opsommingstekens die langs de linkerkant lopen. Dit is nogal een onhandig gebruik van de ruimte en zorgt voor een ongemakkelijke opening aan de rechterkant.
De snelle oplossing hiervoor is simpelweg het opsplitsen van de opsommingstekens in twee afzonderlijke stapels:
Dit is uiteindelijk echter een pleister en ik denk dat de pagina een grote operatie kan ondergaan. We zullen dit kort bespreken in de volgende sectie.
Mijn "Big Picture" -aanbevelingen
Eerlijk gezegd denk ik niet dat de ononderbroken configuratie met dubbele kolommen voor deze site werkt. Het is te rigide en verstoort eigenlijk de natuurlijke communicatiestroom in plaats van het te vergemakkelijken, wat het doel is van een gestructureerde lay-out.
Mijn aanbeveling is om deze lay-out helemaal weg te gooien. Gooi eerst de stijve dubbele kolomstructuur weg. Verplaats vervolgens de primaire communicatie naar de bovenkant van de pagina. Maak een groot 'featured' vak dat de hele paginabreedte beslaat en een deel van de inhoud markeert die je later opsplitst (140+ bestanden, 40 vectoren, enz.). Zorg ervoor dat de kop een sterk contrast, kristalheldere formulering en targeting gebruikt en maximaal twee kleuren die er geweldig uitzien.
Eindelijk, nadat je dit geweldige koptekstgebied hebt gemaakt dat perfect aansluit bij wat de site is, voor wie het is en de basis van wat het bevat, kun je je concentreren op het organiseren van je andere informatie eronder, mogelijk in een twee- of driekolomsformaat.
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
