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 Website ist Prezzybox, ein Online-Händler. 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 Prezzybox
Prezzybox.com ist die komplette Online-Geschenklösung. Wenn Sie nach einem einzigartigen oder aufregenden Geschenk für Mama, Papa, Bruder, Schwester, Kumpel, Halbvetter oder sich selbst suchen (seien wir ehrlich - wir alle verdienen etwas Schönes), dann ist Prezzybox genau das Richtige für Sie. Von der elektronischen Zigarette über die Schokoladenpizza, über den Retro-Slush-Maker bis zu unseren flippigen Silly Bandz. Prezzybox hat eine wahre Fülle von seltsamen und wundervollen Leckereien, die auf Ihre Durchsicht warten.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Prezzybox hat verständlicherweise viel mit diesem Design zu tun. Sie haben nicht den Vorteil, ein fokussierter Einzelhändler zu sein, der ein einzelnes Produkt präsentieren kann. Sie versuchen, alle möglichen Produkte zu verkaufen, und suchen nach dem besten Weg, sie zu präsentieren.
Offensichtlich haben sie sich das ein bisschen durchdacht und es gibt viele, die richtig liegen. Es gibt jedoch auch viel Raum für Verbesserungen. Die Seite ist eine merkwürdige Mischung aus guten Ideen und Ausführungen, die ein wenig schlampig sind. Mal sehen, ob wir helfen können, die Struktur zu verfeinern, und auf Bereiche hinweisen, die angesprochen werden sollten, um den Erfolg dieses Entwurfs zu unterstützen.
Typografie Weh
Eines der ersten Dinge, die mir auf dieser Website auffallen, ist, dass es ein sehr schlechtes Verständnis für Typografie gibt, das diesen Entwurf antreibt. Überall sehe ich einige wirklich grobe Implementierungen des benutzerdefinierten Typs.
Für den Anfang ist die Mischung der Schriftstärken im Logo ziemlich umständlich:
Manchmal scheinen die Schriftarten in demselben Wort nicht einmal zu passen. Zum Beispiel ist der? 0? auf dem? 50%? In dem Bild unten hat es ein völlig anderes Gewicht und Aussehen als die? 5 ?.
Es gibt auch einige wichtige Kerning-Probleme auf der Site. Der Text im folgenden Beispiel ist ein Bild. Argumente bezüglich der Online-Kerning-Hürden gelten nicht. Dies war einfach das Ergebnis eines Überspringens eines Schrittes im Photoshop-Designprozess.
Tag Clouds sind fast nie der beste Weg, um den Verkehr zu beliebten Zielen zu leiten. Diese leidet unter dem Mangel einer klaren Trennung zwischen Tags. Zum Beispiel? Air Swimmers? und? Kindergeschenke? Es gibt zwei separate Tags, aber die Schriftstärken sind so ähnlich, dass Sie nicht einmal wirklich sagen können.
Wie man es repariert
Meine Empfehlung für den Typ auf dieser Seite ist, von vorne zu beginnen. Verschrotten Sie die verschiedenen Textstile und Schriftarten auf dieser Seite und führen Sie einen weiteren Durchlauf aus, wobei dieses Mal jedes einzelne Zeichen mit Absicht beabsichtigt ist.
? Überlegen Sie, welches Konzept Sie kommunizieren möchten und welche Schrift diese Idee am besten vermittelt.Der Anfang ist, in einige hochwertige Schriftarten zu investieren. Premium-Schriften können recht teuer sein, aber die Verwendung billiger und hässlicher Inhalte kann keine andere Auswirkung haben, als Ihre Website billig und hässlich aussehen zu lassen. Wenn Sie einfach nicht über das Budget verfügen, gibt es viele Online-Optionen, die kostenlos und / oder billig sind, aber dennoch attraktiv und stilvoll sind. FontSquirrel und Lost Type Coop sind gute Startplätze.
Nehmen Sie sich Zeit und wählen Sie die Schriftarten sorgfältig aus. Seien Sie nicht in der Versuchung, sich nur Display-Schriften zu schnappen, weil sie Spaß machen. Überlegen Sie sich stattdessen, welches Konzept Sie kommunizieren möchten und welche Schrift diese Idee am besten vermittelt. Beschränken Sie sich während dieses Prozesses auf ein paar gute Schriftarten, die wirklich gut zusammenarbeiten, und implementieren Sie diese auf der gesamten Website.
Sie können und sollten standardmäßige Schriftarten für jeden Live-Web-Typ verwenden. Stellen Sie jedoch sicher, dass zwischen Schriftgröße, Zeilenhöhe und Breite des Textfelds alles gut aufeinander abgestimmt ist, um maximale Lesbarkeit zu gewährleisten. Pearsonified hat gerade einen hervorragenden Beitrag zur Verwendung des Goldenen Schnittes geschrieben, um einen ausgeglichenen Typ zu erreichen. Lesen Sie es und verwenden Sie den Golden Ratio Typography Calculator als anständige Faustregel, um die Typbehandlung zu ermitteln.
Eine Stelle, an der dieser Hinweis Ihren Typ verbessern würde, ist der unten abgebildete Abschnitt. Hier verdienen die Breite des Inhalts und die Schriftgröße eine erhöhte Zeilenhöhe.
Navigation
Gehen wir weiter zum Navigationsbereich. Der Eindruck, den ich hier bekomme, ist, dass alles so schwer ist. Jedes Objekt und Element hat viel visuelles Gewicht und es gibt Konkurrenz um Aufmerksamkeit:
In einigen Teilen scheint es auch, dass der vertikale Abstand zu eng ist, was zu einem überfüllten und überladenen Blick führt.
Eine Sache, die ich mag, ist die Produktkategorisierung, die verwendet wird. Jeder Abschnitt ist klar segmentiert und es ist wirklich leicht, Geschenke für die Person zu finden, die Sie kaufen möchten. Dies wird auf eine nette und vereinfachte Weise weiter unten auf der Seite wiederholt:
Wie man es repariert
Ich denke, der Navigationsbereich ist anständig, er braucht nur ein paar Optimierungen. Eine gute Inspirationsquelle ist Threadless, das ein ähnliches Navigationsmenü verwendet, das ein wenig verfeinert wird.
Beachten Sie, wie hier ähnliche Segmentierung verwendet wird, aber das Ganze fühlt sich leichter und viel besser an. Die anfänglichen Dropdown-Menüs sind einfach farbiger Text auf weißem Hintergrund, wobei der schwere Button-Effekt selektiv nur auf wichtige Elemente angewendet wird.
Inhaltsorganisation
Ein weiteres Problem, das ich mit dieser Site sehe, ist, dass die organisatorischen Taktiken etwas Arbeit benötigen.Für den Anfang gibt es eine Menge zufälliger Informationen, die so aussehen, als ob sie in letzter Minute an zufälligen Orten stecken.
Die Site verwendet horizontale Balken, um die verschiedenen Abschnitte voneinander zu trennen, die Bereiche sind jedoch nicht visuell oder konzeptionell klar definiert. Der unten abgebildete Abschnitt trägt die Bezeichnung? Prezzybox in der Presse? und scheint zwei große zu umfassen? Über uns? Stil-Absätze, beliebte Geschenkesuchen, Kundenbewertungen usw., von denen keiner wirklich zu diesem Abschnitt gehört.
Diese Probleme erstrecken sich auf die Fußzeile, die eine größere visuelle Neuorganisation erfordern könnte. Ich bin auch kein Fan des unbeholfenen Schnittes, der ihn vom Hauptbereich trennt. Wenn sein Name an anderer Stelle auf der Seite wiederholt wird, wirkt er nicht so unpassend, aber als eigenständiges Designelement fühlt er sich falsch an.
Wie man es repariert
Jeder Abschnitt muss mit Grafiken und Inhalten klarer definiert werden. Eine gute Inspirationsquelle für diese Art von Design ist Themes Kingdom. In der nachstehenden Abbildung ist in diesem Bereich der Site eine Menge Material enthalten. Die Designer haben jedoch einige wirklich klare und moderne Verfahren zur Trennung von Inhalten verwendet.
Wenn Sie die Organisation der Inhalte wirklich genau festlegen, wird die gesamte Seite effektiver. Es kann bedeuten, viele Elemente auf der Website neu zu ordnen und neu zu gestalten und sogar eine Menge Fett von der Homepage zu schneiden, aber am Ende lohnt es sich.
Fazit
E-Commerce ist für Designer ein interessantes Tier. Der Grund dafür ist, dass Ästhetik nicht so stark mit dem Erfolg korreliert, wie es Jungs wie mir gewünscht werden. Zum Beispiel ist Amazon ein durcheinandergewürfeltes Durcheinander, das mir den Kopf verdreht, obwohl es der erfolgreichste Online-Händler ist. Das bedeutet jedoch nicht, dass wir attraktive Visuals als etwas wichtiges für Webshops einschränken können. Nicht jeder kann Amazon sein und ein klarer Weg, sich von der Konkurrenz abzuheben, ist ein solides Design.
Abgesehen von der visuellen Identität ist der noch kritischere Bereich der Benutzerfreundlichkeit, der in Online-Shops stark zum Tragen kommt. Viele der oben vorgeschlagenen Änderungen zielen darauf ab, den Seitenfluss besser zu gestalten, sodass Benutzer diese Seite leichter einsehen und finden können, wonach sie suchen. Attraktive Visuals unterstützen lediglich diese Aktivität und halten das Interesse der Zuschauer aufrecht.
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.