Jede Woche schauen wir uns eine neue Website an und analysieren das Design. Wir werden auf beide Bereiche hinweisen, die gut erledigt werden, zusätzlich zu den Bereichen, in denen etwas Arbeit anfallen könnte. Zum Schluss bitten wir Sie, Ihr eigenes Feedback zu geben.
Die heutige Seite ist Capital Teas. Lass uns rein springen und sehen, was wir denken!
Wenn Sie Ihre Website für eine zukünftige Design-Kritik einreichen möchten, dauert dies nur wenige Minuten. Für die Bewertung Ihres Designs berechnen wir 49 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.
Über Kapital-Tees
Capital Teas ist ein in fünfter Generation in Familienbesitz befindlicher Teehändler. Sie bieten mehr als 175 verschiedene Sorten loser Tees und Kräuteraufgüsse aus den besten Anbauländern und Regionen der Welt, darunter Sri Lanka, Indien, China, Japan, Malawi und Kenia. Ihre Tee-Produkte umfassen traditionelle und moderne Teekannen, Brauereien und Aufgüsse sowie viele andere Spezialitäten. Sie bieten auch handwerklichen Honig, Marmeladen, Tee-infundierte Schokolade und andere Gourmet-verpackte Lebensmittel, die ihre Tees begleiten.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Mein erster Eindruck einer Site ist stark von der Idee abhängig, ob ich innerhalb der ersten drei Sekunden nach dem Aufrufen der Startseite genau sagen kann, worum es sich handelt. Das ist richtig, drei Sekunden. Sie müssen meine Aufmerksamkeit erregen und mir sagen, wer Sie sind und worum es geht, und zwar in kürzerer Zeit, als der Durchschnittsmensch braucht, um einen Schuh zu binden.
Bei Capital Teas bestehen sie diesen Test mit Bravour. Diese Seite schreit Online-Tee-Shop (auf eine gute Weise). Ich sehe überall Fotos von Tee, das Wort? Tee? erscheint mehrmals, die Farben deuten auf Tee hin; Ich bin sofort gut orientiert und weiß, dass ich am richtigen Ort bin, wenn ich Tee kaufen möchte.
In Bezug auf die visuelle Ästhetik und das Layout der Website würde ich sagen, dass sie gute Knochen hat. Es gibt eine solide Struktur und eine attraktive visuelle Ästhetik. Es braucht etwas Arbeit, aber nicht zu viel. Kommen wir zu den einzelnen Bereichen, um zu sehen, ob wir Verbesserungsvorschläge finden.
Header
Einer der Bereiche, in denen ich die meisten Probleme sehe, ist der Header. Es sieht so aus, als wäre es so konzipiert, dass es einfach ist, aber die Marketingabteilung hat es gefunden und es weggeworfen. Es steckt so viel Zeug darin, dass es sich unübersichtlich anfühlt und ein starker Widerspruch zur ziemlich reinen Ästhetik des restlichen Teils der Seite darstellt.
Insbesondere die sozialen Symbole könnten eine größere Bereinigung erfordern. Das Design für jeden ist inkonsistent, mehrere Facebook-Elemente scheinen überflüssig zu sein, es gibt Überlappungsprobleme und alles, was sich an diesem Ort befindet, ist zusammengepresst mit sehr wenig Atemfreiheit.
Der "Deal des Tages" und die Anmeldung des Newsletters auf der anderen Seite fördert ebenfalls den überladenen Look. Diese Elemente passen nicht besonders gut zu anderen Elementen auf der Seite und scheinen im Nachhinein eingesetzt zu werden.
Wie man es repariert
Hier müssen einige schwierige Entscheidungen getroffen werden, da etwas gehen muss. In der Tat müssen einige Dinge gehen. Es fühlt sich an, als hätte jemand versucht, ein paar Fußzeilenelemente in einen Header zu stopfen, nur um einen besseren Platz auf der Seite zu erhalten. Denken Sie jedoch daran, wenn nichts Besonderes ist, ist nichts Besonderes. Sie müssen auswählen, was für Sie die wichtigste Rolle spielt, und Ihren Artikeln eine klare visuelle Hierarchie geben.
Ich empfehle, den Großteil des Inhalts in der Kopfzeile an einen anderen Ort zu verschieben. Versuchen Sie, die absolut kritischen Elemente zu identifizieren. Beginnen Sie mit dem Logo. Es ist ein hübsch aussehendes Stück, das eine großartige, alte Welt für das Gelände vermittelt, indem es die umliegenden Elemente mitgenommen hat. Der andere notwendige Artikel ist der Warenkorb. Wenn Sie die Kopfzeile auf diese beiden Elemente reduzieren können, ist das sehr gut. Wenn nicht, werde ich die Einigung des Tages berücksichtigen. Alles bewegt sich entweder zur Fußzeile oder besser in den Rest der Seite.
Wenn Sie gerade dabei sind, finden Sie ein einfaches Social-Icon-Set mit passenden Symbolen für jedes soziale Netzwerk, das Sie benötigen.
Navigation
Wenn wir die Seite nach unten bewegen, kommen wir als nächstes zur Navigation. Eine effektive und unaufgeräumte Doppelnavigation abzubauen, ist eine knifflige Angelegenheit, aber ich mag die Art und Weise, wie sie hier gehandhabt wird. Ein reines Textmenü wurde mit einem Suchfeld gepaart und auf einem farbigen Symbol-Menü angeordnet. Das Ergebnis ist eine großartige Möglichkeit, um zu finden, wonach ich suche.
Etwas umständlich finde ich das Design der Dropdown-Menüs in der Hauptnavigation. Sie haben ein unverbundenes, schwebendes Gefühl, das den Anschein erweckt, als ob etwas nicht ganz richtig funktioniert.
Ich empfehle, dies zu überdenken und mit verschiedenen visuellen Ideen zu experimentieren, durch die die Dropdown-Menüs integrierter und mit dem Hauptmenü verbunden erscheinen.
Hauptinhalt
Der Hauptinhaltsbereich besteht aus drei Boxen. Dies ist eine gute Mischung von Formaten und besteht aus einem großen Schieberegler, einem statischen Bild und einem kleinen Film (der zum Glück nicht automatisch abgespielt wird). Diese Gegend ist großartig. Ich finde es toll, dass es auf drei Boxen gepaart wurde. Das Layout sieht nett und sauber aus und bringt die Produkte und Informationen in den Mittelpunkt.
Fotografie
Als Fotograf bin ich ein Fan von guten Fotos und diese Seite liefert erfolgreich in diesem Bereich. Es sieht so aus, als hätten die Eigentümer wirklich in Qualitätsfotografie investiert, und es lohnt sich, ihre Produkte sehr hochwertig und attraktiv erscheinen zu lassen.
Typografie
Nach dem Header ist der zweite Hauptbereich, der sofortige Aufmerksamkeit erfordert, die Typografie. Die meisten Designer empfehlen, dass Sie sich für ein ganzes Projekt für ein oder zwei feste Schriften entscheiden, vielleicht drei, wenn Sie abenteuerlustig sind und über genügend Fähigkeiten verfügen, um es zu schaffen.Ich habe die Zählung verloren, wie viele Schriften ich allein auf dieser Homepage auf dieser Seite gesehen habe.
Ihr Typ ist einer der stärksten Indikatoren für den Stil Ihrer Website. Es gibt eine Stimmung, einen Zeitraum, einen professionellen Ton und vieles mehr. Wenn es inkonsistent und verstreut ist, sind es auch die Nachrichten, die es übermittelt.
Ich empfehle auf jeden Fall, die verschiedenen Schriftarten zu entfernen und dann eine oder zwei mit einer hohen Lesbarkeit und einem Ton zu wählen, der den Absichten des Designs entspricht. Das Ergebnis ist ein viel einheitlicheres, professionelleres Gefühl für die gesamte Site.
Sekundärer Inhalt
Am unteren Rand der Site gibt es eine Reihe von Boxen, die ich als "sekundären Inhalt" bezeichnen möchte. für unsere Zwecke. Dieses Layout in Kombination mit den drei obigen Feldern ist einfach und solide. Es erinnert mich an einige der Layouts in unserem Artikel 10 Rock Solid Website-Layoutbeispiele.
Mein einziges wirkliches Problem in diesem Bereich ist die Typografie, die ich bereits besprochen habe. Das Problem ist hier jedoch, dass die Schrift auf diesem Produkt angezeigt wird. ist so dünn, dass es fast unlesbar ist.
Fazit
Zusammenfassend lässt sich sagen, dass Capital Teas einen großartigen Start für einen äußerst attraktiven Standort bietet. Die Grundstruktur des Layouts ist solide, die Fotos sind wunderschön und die duale Navigation funktioniert gut, auch wenn ich normalerweise von dieser Route abhalte. Einige Bereiche, die sich auf die Verbesserung konzentrieren, umfassen den Header, der unübersichtlich werden muss, und die Typografie, die mit einigen ausgewählten Schriftarten abgeglichen werden muss.
Du bist dran!
Nun, da Sie meine Kommentare gelesen haben, helfen Sie dem Designer mit ein paar weiteren Ratschlägen. Teilen Sie uns mit, was Sie an dem Design toll finden und was Sie für stärker halten könnten. Wie immer bitten wir Sie, auch den Designer der Site zu respektieren und eine klare, konstruktive Beratung ohne harte Beleidigungen anzubieten.