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 Peter und James, ein Online-Schmuckhändler.
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 34 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.
Über Peter und James
? Wenn es um feinen Schmuck geht, verkauft Peter & James nur das Beste. Von wunderschönen Edelsteinen in atemberaubendem Sterlingsilber und Weißgold bis hin zu unserer berühmten italienischen Diamantarmbandkollektion ist jedes einzelne Stück, das Sie auf unserer Website finden, wirklich außergewöhnlich. Wir sind bestrebt, unseren Kunden den besten Wert, die Qualität, den Service und die Auswahl an Designerschmuck anzubieten. Wir folgen den heißesten Styles und Modetrends, um sicherzustellen, dass wir immer den neuesten und gefragtesten Schmuck online anbieten.?
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Mein erster Eindruck hier ist definitiv positiv. Peter und James ist eine großartig aussehende Website. Die Homepage ist extrem einfach, was dazu beiträgt, Sie auf das eindrucksvolle Foto der Frau mit den Armbändern aufmerksam zu machen.
Die Änderungen, die ich heute vorschlagen werde, sind angesichts des Gesamtdesigns ziemlich klein. Sogar großartige Designer konnten immer mit zusätzlichen Augen durchforsten und Möglichkeiten zur Verfeinerung des Designs und der Verwendbarkeit eines Projekts vorschlagen.
Beginnen wir mit einem Blick in die Kopfzeile, um zu sehen, was wir verbessern können.
Kopfausrichtungen
Das erste Problem, das ich beim Blick auf den oberen Rand der Seite feststelle, ist, dass die horizontale Ausrichtung der Objekte auf der linken und rechten Seite ein wenig willkürlich ist.
In Wahrheit sehe ich, was der Designer macht und es ist eigentlich ganz gewollt. Die unteren Elemente sind leicht eingerückt, was im Layout üblich ist. Das Problem dabei ist jedoch, dass die Seite so einfach ist, dass sich auf der Seite nur wenige Objekte befinden. Wenn Sie unten mehr ausrichten müssten, könnte dies zwar besser funktionieren, doch scheint es so, als hätte jeder Artikel eine eigene horizontale Position, was zu einem etwas unordentlichen Gefühl führt.
Die einfache Lösung besteht darin, das Primärbild als starke Kante zu verwenden, die auf beiden Seiten verfolgt werden kann. Die Schaltflächen ganz oben rechts können sich wahrscheinlich dort befinden, wo sie sind. Ich empfehle jedoch, die Navigation nach links und das Suchfeld nach rechts zu verschieben, damit die Kopfzeilenelemente ungefähr wie das Bild unten aussehen.
Navigations-Hover
Eine weitere winzige mögliche Änderung besteht darin, den Navigationslinks einen spürbaren Hover-Effekt hinzuzufügen. Dies ist nicht so sehr eine ästhetische Veränderung, sondern eine kleine Verbesserung der Benutzerfreundlichkeit. Wenn eine signifikante Änderung in einem Schwebeflug stattfindet, erhält der Benutzer ein positives Feedback und stellt sicher, dass er das Richtige tut. Sie möchten, dass sie sich in der Navigation befinden und weiter in die Site klicken. Fügen Sie also einen kleinen Effekt hinzu, der diese Aktion verstärkt.
Momentan ändert sich der Cursor, aber ich bin nicht sicher, ob dies ausreicht. Farbe ist immer eine andere Option, aber ich bin nicht sicher, ob sie hier angemessen ist. Eine einfache Unterstreichung kann mit minimalem CSS implementiert werden und behält die klassische Integrität des Designs bei, während das visuelle Feedback klarer erscheint.
Primärbild
Der wirkliche ästhetische Reiz auf dieser Seite ist auf das oben gezeigte große Bild zurückzuführen. Dies gibt den Ton perfekt für die Site und gibt der Seite einen klaren Fokus. Mein einziges Problem mit diesem Bild ist, dass ich mehr will!
Diese Website verkauft Ohrringe, Halsketten, Armbänder und Ringe. Dieses Bild zeigt nur die Armbänder. Ich denke, es gibt hier viel Potenzial, um die Website dynamischer zu gestalten und einige Klicks für andere Bereiche zu nutzen.
Ich empfehle, diesen Stil nachzuahmen und ihn zu vier verschiedenen Bildern zu verzweigen, eines für jeden Abschnitt. Von hier haben Sie zwei Möglichkeiten. Die erste ist eine einfache Diashow. Nichts Besonderes oder Ablenkendes, nur ein langsames Auflösen im nächsten Bild nach einigen Sekunden. Wenn Sie kein Fan von Diashows sind, können Sie nach dem Zufallsprinzip eines der vier Bilder anzeigen, wenn die Seite geladen wird. Ich bevorzuge die erste Option, aber die letztere Option könnte zu interessanten A / B-Tests führen, um herauszufinden, welches Szenario zu besseren Kaufergebnissen führt.
Ausgewählte Produkte
Der Abschnitt mit den gekennzeichneten Produkten wird direkt unter dem Hauptbild angezeigt. In diesem Abschnitt gibt es viel zu mögen, aber in einigen Bereichen ist es auch etwas rau. Zunächst ist der Hover-Effekt mit den Armbändern großartig. Wenn Sie über einem Armband schweben, wird das Foto umgedreht und zeigt Ihnen die andere Seite. Dies ist eine fantastische und unterhaltsame Lösung für die Darstellung eines dreidimensionalen Produkts in einem zweidimensionalen Raum.
Wie Sie in der Abbildung oben sehen können, wird durch Schweben auch diese kleine Preis- / Informationsbox angezeigt. Ich liebe diese Idee, aber die Hinrichtung fühlt sich ein bisschen ab. Insgesamt wird der zur Verfügung stehende Raum unpraktisch genutzt. Der Preis und die Beschreibung sind zu weit an den Rand gedrängt und haben nicht viel Platz zum Atmen. Außerdem werden die beiden unteren Tasten merkwürdig nach rechts gedrückt, nicht bis zum Anschlag, und zwar so weit, dass sie nicht genau rechts oder zentriert sind.
Meine Empfehlung hier ist, einfach etwas Zeit damit zu verbringen, mit diesen Elementen zu spielen, um zu sehen, wie Sie diesen Raum besser nutzen können. Ordnen Sie jedes Element neu an, passen Sie die Größe einiger Elemente an und prüfen Sie, ob Sie etwas attraktiver und lesbarer finden.
Das Bild unten ist mein schneller zweiminütiger Versuch. Es ist nicht das Beste, aber es zeigt zumindest eine gute Vorstellung davon, wie der Raum ein wenig effizienter genutzt werden kann.
Produktfotos
Mein letzter Kommentar in diesem Bereich wird auch auf die Produktseiten übertragen. Ich bin kein großer Fan der Art und Weise, wie die Produkte derzeit angezeigt werden. Dafür gibt es mehrere Gründe. Zunächst sind die Photoshop-Schlagschatten etwas rauh. Ich bin mir nicht sicher, ob sie zu dunkel sind, nicht weich genug oder beides, aber mit etwas Zeitinvestition könnten sie realistischer aussehen. Im Moment sehen sie einfach ein bisschen kitschig aus und verringern die Qualität der Seite.
Die Steigungen sind auch etwas unbeholfen. Sie scheinen das gesamte visuelle Schema der Seite zu verletzen. Es ist schwer genau zu bestimmen, warum dies so ist, aber ich denke, dass sie auf der Unterseite des Farbverlaufs einfach zu dunkel sind. Versuchen Sie, dies zu vereinfachen und den Verlauf subtiler zu gestalten.
Außerdem ist die Fotografie auf der gesamten Website nicht so ansprechend, wie sie sein sollte. Dies sind High-End-Produkte, die hunderte und sogar tausende Dollar kosten, aber die Fotos sind irgendwie dunkel und hässlich. Zum Glück glaube ich nicht, dass das Fotoshooting erneut gemacht werden muss. Ich bin ziemlich sicher, dass die Bilder einfach eine Liebe zur Nachbearbeitung benötigen.
Das Site-Design hier bittet um High-Key-Fotografie, und diese Bilder werden einfach zu kurz. Es gibt zwar eine Menge, die Sie tun können und sollten, um jedes Foto zu verkleiden, aber selbst eine einfache Pegelanpassung ist ein großer Weg, indem Sie diese Mitteltöne aufhellen und etwas Kontrast hinzufügen. Hier ist eine weitere schnelle und schmutzige Vorschau mit helleren Farbverläufen und helleren Bildern.
Stellen Sie sich nun dem vor, was wir angefangen haben, und Sie können die Auswirkungen der von uns vorgenommenen Änderungen deutlich sehen.
Sehen Sie, wie viel Unterschied ein paar kleine Anpassungen vorgenommen haben. Stellen Sie sich vor, wie viel besser jedes Produkt erscheinen würde, wenn es darum geht, die ästhetische Qualität zu verbessern. Viele der Bilder sind so ähnlich, dass Sie einen Photoshop-Workflow auf einem davon aufzeichnen und ihn in Sekundenschnelle auf alle Bilder anwenden können, anstatt stundenlang bei jeder einzelnen Aufnahme herumzuspielen.
Fazit
Wie ich bereits erwähnt habe, sind die meisten der vorgeschlagenen Änderungen minimal. Ausrichtungen anstoßen und Hover-Effekte hinzufügen, dies sind lediglich mögliche Verbesserungen, die nicht unbedingt ein Notfall sind.
Wenn Sie nur die Zeit und die Ressourcen haben, um eines der oben genannten Probleme zu lösen, empfehle ich Ihnen, die Präsentation der Produkte zu verfolgen. Ich bin der festen Überzeugung, dass die Bilder in ihrem aktuellen Zustand die Qualität der Website unnötig weit unter das herabgesetzte Potenzial herabsetzen. In einem Online-Shop sind die Produktfotos eines der wichtigsten Dinge, um richtig zu werden, und hier denke ich, dass sie der Bereich sind, der am meisten fehlt.
Sie müssen meine Änderungen nicht unbedingt genau verfolgen, sondern versuchen, die Kernprobleme des Produkts zu verstehen und eigene Lösungen zu finden, um die wahrgenommene Qualität in diesen Bereichen zu erhöhen.
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.