Web Design Critique # 77: Capital Teas
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 Capital Teas. Laten we erin springen en zien wat we denken!
Ontdek ontwerpbronnen
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We brengen $ 49 in rekening 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 Capital Teas
Capital Teas is een familiebedrijf in speciale theesoorten van de vijfde generatie. Ze bieden meer dan 175 soorten losbladige thee en kruidenthee van de hoogste kwaliteit uit 's werelds beste groeiende landen en regio's, waaronder Sri Lanka, India, China, Japan, Malawi en Kenia. Hun theewaarproducten omvatten traditionele en moderne theepotten, brouwers en infusers en vele andere speciale items. Ze bieden ook ambachtelijke honing, jam, chocolade met thee en ander gastronomisch verpakt voedsel dat bij hun thee hoort.
Hier is een screenshot van de homepage:
Eerste indruk
Mijn eerste indruk van een site is sterk gebaseerd op het idee of ik binnen de eerste drie seconden na het zien van de startpagina precies kan zeggen waar het allemaal om draait. Dat klopt, drie seconden. Je moet mijn aandacht trekken, me vertellen wie je bent en waar je over bent in minder tijd dan de gemiddelde persoon nodig heeft om een schoen te strikken.
In het geval van Capital Teas slagen ze voor deze test met vlag en wimpel. Deze site schreeuwt online theewinkel (op een goede manier). Ik zie overal foto's van thee, het woord "thee" komt meerdere keren voor, de kleuren suggereren thee; Ik ben meteen goed georiënteerd en weet dat als ik thee wil kopen, ik op de juiste plek ben.
Wat de visuele esthetiek en lay-out van de site betreft, zou ik zeggen dat deze goede botten heeft. Er is een solide structuur en een aantrekkelijke visuele esthetiek begonnen. Het heeft wat werk nodig, maar niets te groots. Laten we een kijkje nemen en een paar van de specifieke gebieden bekijken om te zien of we enkele suggesties voor verbetering kunnen vinden.
Koptekst
Een van de gebieden waar ik de meeste problemen zie, is de koptekst. Het lijkt erop dat het is ontworpen om eenvoudig te zijn, maar de marketingafdeling heeft het in handen gekregen en heeft het weggegooid. Er zitten zoveel dingen in gepropt dat het rommelig aanvoelt en in schril contrast staat met de redelijk schone esthetiek die door de rest van de pagina is vastgesteld.
Met name de sociale iconen zouden een grote schoonmaakbeurt kunnen gebruiken. Het ontwerp voor elk is inconsistent, meerdere Facebook-items lijken overbodig, er zijn overlappingsproblemen en alles op deze plek is samengepakt met heel weinig ademruimte.
De "Deal of the Day" en de nieuwsbriefaanmelding aan de andere kant bevorderen ook de rommelige look. Deze elementen zijn niet bijzonder goed uitgelijnd met iets anders op de pagina en lijken als bijzaak te zijn weggegooid.
Hoe herstel je het
Hier zullen enkele moeilijke beslissingen moeten worden genomen, omdat er iets moet gebeuren. In feite moeten er verschillende dingen gebeuren. Het voelt alsof iemand probeerde een aantal voettekstelementen in een koptekst te proppen om ze een betere plek op de pagina te geven, maar onthoud dat als alles speciaal is, niets speciaal is. Je moet kiezen wat het belangrijkste is en je items een duidelijke visuele hiërarchie geven.
Ik raad aan om de meeste inhoud in de koptekst naar elders te verplaatsen. Probeer de absoluut kritische elementen te identificeren. Begin met het logo. Het is een mooi uitziend stuk dat een geweldig gevoel van de oude wereld geeft aan de site, het meer aandacht geeft door de omliggende elementen weg te halen. Het andere noodzakelijke item is het winkelwagentje. Als je de koptekst tot deze twee items kunt verkleinen, doe je het geweldig. Zo niet, dan laat ik de deal van de dag opnemen. Alles wordt verplaatst naar de voettekst of beter geïntegreerd in de rest van de pagina.
Terwijl je toch bezig bent, vind je een eenvoudige sociale pictogrammenset met bijpassende pictogrammen voor elk sociaal netwerk dat je nodig hebt.
Navigatie
Als we naar beneden gaan, komen we bij de navigatie. Het is een lastige zaak om een effectieve en niet-rommelige dubbele navigatie uit te voeren, maar ik hou echt van de manier waarop het hier wordt afgehandeld. Een puur tekstmenu is gecombineerd met een zoekvak en gestapeld op een kleurrijk op pictogrammen gebaseerd menu en het resultaat is een geweldig aanbod van manieren om te vinden wat ik zoek.
Een ding dat ik een beetje ongemakkelijk vind, is het ontwerp van de vervolgkeuzemenu's in de primaire navigatie. Ze hebben een losgekoppeld, zwevend gevoel waardoor het lijkt alsof iets niet helemaal goed werkt.
Ik raad aan om dit opnieuw te overwegen en te experimenteren met verschillende visuele ideeën waardoor de vervolgkeuzemenu's er meer geïntegreerd uitzien en verbonden zijn met het hoofdmenu.
Belangrijkste inhoud
Het hoofdinhoudsgebied bestaat uit drie vakken. Dit zijn een goede mix van formaten en bestaan uit een grote slider, een statische afbeelding en een filmpje (dat gelukkig niet automatisch afspeelt). Dit gebied is geweldig. Ik vind het geweldig dat het is gekoppeld aan drie dozen, de lay-out ziet er mooi en schoon uit en het geeft echt focus aan de producten en informatie die wordt getoond.
Fotografie
Als fotograaf ben ik een sukkel voor goede foto's en deze site levert met succes op dit gebied. Het lijkt erop dat de eigenaren echt hebben geïnvesteerd in kwaliteitsfotografie en het loont door hun producten erg high-end en aantrekkelijk te laten lijken.
Typografie
Na de koptekst is de typografie het tweede belangrijke gebied dat onmiddellijk aandacht behoeft. De meeste ontwerpers raden je aan om een of twee solide lettertypen te kiezen voor een heel project, misschien drie als je avontuurlijk bent en genoeg vaardigheid hebt om het voor elkaar te krijgen. Ik verloor de tel hoeveel lettertypen ik alleen op de startpagina op deze site zag.
Uw type is een van de sterkste indicatoren van de stijl van uw site. Het zet een sfeer, een tijdsperiode, een professionele toon en nog veel meer. Als het inconsistent en verspreid is, zijn de berichten die het overbrengt dat ook.
Ik raad zeker aan om alle verschillende lettertypen te schrappen en dan een of twee te kiezen met een hoge mate van leesbaarheid en een toon die past bij de bedoelingen van het ontwerp. Het resultaat is een veel consistenter, professioneler gevoel voor de site als geheel.
Secundaire inhoud
Er is een strook dozen aan de onderkant van de site die ik voor onze doeleinden de 'secundaire inhoud' noem. Deze indeling gecombineerd met de drie bovenstaande vakken is eenvoudig en solide. Het doet me denken aan een paar van de lay-outs in ons artikel 10 Rock Solid Website Layout-voorbeelden.
Mijn enige echte probleem met dit gebied is de typografie, die ik al heb besproken. Het probleem hier is in het bijzonder dat het lettertype op "bekijk dit product" zo dun is dat het bijna onleesbaar is.
Gevolgtrekking
Kortom, Capital Teas heeft een geweldige start voor een super aantrekkelijke site. De basislay-outstructuur is solide, de foto's zijn prachtig en de dubbele navigatie werkt goed, hoewel ik die route meestal ontmoedig. Enkele aandachtspunten voor verbetering zijn de koptekst, die overzichtelijk moet zijn, en de typografie, die moet worden gekoppeld aan een paar geselecteerde lettertypen.
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.
