Webdesign-Kritik Nr. 71: Süßeste Pfote
Jede Woche schauen wir uns eine neue Website an und analysieren das Design. Wir werden sowohl auf die Bereiche hinweisen, die gut gemacht sind, als auch auf diejenigen, die etwas Arbeit gebrauchen könnten. Abschließend bitten wir Sie, Ihr eigenes Feedback zu geben.
Die heutige Website ist Cutest Paw, eine weltweite Tierfotogalerie. Lassen Sie uns hineinspringen und sehen, was wir denken!
Entdecken Sie Envato-Elemente
Wenn Sie Ihre Website für eine zukünftige Designkritik einreichen möchten, dauert es nur wenige Minuten. Für die Kritik an Ihrem Design berechnen wir 49 US-Dollar - deutlich weniger, als Sie für einen Berater bezahlen würden, der sich Ihre Website ansieht! Mehr erfahren Sie hier.
Über die süßeste Pfote
Diese Seite erhält definitiv den Preis für unsere "awwww" -induzierende Site-Kritik aller Zeiten. Diese Seite ist buchstäblich nichts anderes als ein endloser Strom von Fotos von niedlichen und lustigen Tieren. Wie können wir es ertragen, so etwas zu betrachten und trotzdem konstruktives Feedback zu geben, ohne von schlafenden Welpen abgelenkt zu werden? Glücklicherweise sind wir zu 100% bestrebt, Kreativen dabei zu helfen, ihre Webdesign-Fähigkeiten zu verbessern. Bleib zurück, Welpen, wir haben einen Job zu erledigen.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Wann immer ich ein Design bewerte, gehe ich über die Ästhetik hinaus und frage, was der Zweck des Stücks ist und ob das fertige Design dieses Ziel erreicht oder nicht. Das Ziel für einen Benutzer ist hier einfach: viele, viele Fotos anzuzeigen. Die Cutest Paw-Site scheint ihren Zweck recht gut zu erfüllen. Das Layout ist für eine maximale Raumnutzung optimiert und verschwendet nicht zu viele Pixel für unkritische überflüssige Augenweiden.
Wie die Designkritik der letzten Woche wird auch diese ziemlich kurz sein. Die Cutest Paw-Website ist sehr einfach, daher gibt es nicht viel zu kritisieren. Wie immer habe ich jedoch einige Rückmeldungen, von denen ich glaube, dass sie dem Designer helfen werden, die Website zu verbessern. Lassen Sie uns einspringen und loslegen.
Layout
Diese Seite ist ein hervorragendes Beispiel für die Nützlichkeit von jQuery Masonry, einem fantastischen Layout-Plugin, das das Einrichten ansonsten unmöglicher Layouts zum Kinderspiel macht. Das Schöne an Masonry ist, dass es auf das CSS-Verhalten verzichtet, das ein horizontales Layout erstellt, bevor der Inhalt vertikal verteilt wird. Stattdessen wird ein schöner, enger vertikaler Stapel erstellt, ähnlich wie beim Verlegen von Ziegeln.
Das Ergebnis in diesem Fall ist ein unglaublich enges Raster von Bildern, das, wie oben erwähnt, die Anzahl der Fotos, die auf kleinem Raum angezeigt werden können, wirklich maximiert. Die Site verwendet auch eine unendliche Bildlauftechnik, die das Laden von Inhalten fortsetzt, wenn Sie sich auf der Seite nach unten bewegen.
Die Kombination aus Layouts im Masonry-Stil und unendlichem Scrollen wurde kürzlich von Pinterest sehr beliebt gemacht, über die Sie bei der Nutzung dieser Website nachdenken müssen. Die Kombination dieser beiden Techniken erleichtert das Surfen auf beispiellose Weise. Im Vergleich dazu erfordert die Paginierung so viel Aufwand seitens des Benutzers. Hier scrollen Sie einfach und scrollen, bis Sie entweder alles gesehen haben, was es zu sehen gibt, oder sich entscheiden, zu etwas anderem überzugehen.
Seitenleiste
Da der Inhalt für immer weiter scrollt, ist eine etwas feste Navigation erforderlich. Pinterest verwendet eine Leiste am oberen Rand der Website. Cutest Paw geht seinen eigenen Weg und implementiert eine nacheilende Seitenleiste, die schnell aufholt, wenn Sie sich auf der Seite nach unten bewegen. Das ist ziemlich effektiv, aber ich muss zugeben, dass die Animation, die zunächst etwas charmant ist, schnell ablenkt und etwas nervt.
Die Seitenleiste ist schön gestaltet und übersichtlich. Aus Sicht der Benutzerfreundlichkeit (abgesehen von der Animation) ist sie recht gut gelungen. Es ist schön zu sehen, dass hier eine Schaltfläche "Nach oben" implementiert ist. Sobald ich mit dem Scrollen begonnen habe, habe ich sofort nach einer davon gesucht und sie leicht gefunden. Es könnte jedoch effektiver sein, wenn sich eine Art Zwischenstopp oben oder unten auf der rechten Seite des Fotostapels befindet. Dies würde ihn dort platzieren, wo die Aufmerksamkeit des Benutzers wahrscheinlich konzentriert ist, und die Notwendigkeit verringern, danach zu suchen.
Thema
Die Gesamtästhetik der Seite ist es wert, diskutiert zu werden. Tatsächlich kann dies einer der wichtigsten Punkte sein, die berücksichtigt werden müssen. Einerseits ist die Seite attraktiv. Der schwarze Hintergrund ist glatt, edel und hilft, die Fotos wirklich hervorzuheben. Andererseits scheinen der Hintergrund und sogar die Adjektive, die ich gerade verwendet habe, für diese Website falsch zu sein.
Wörter wie "süß" und "verschwommen" beschreiben den Inhalt, und dennoch ist das visuelle Thema der Website eine schwarze Grunge-Textur. Diese beiden Konzepte wirken wie polare Gegensätze und erzeugen eine Art visuelle Dissonanz. Wie ich bereits sagte, bin ich ein großer Befürworter der Verwendung von Design nicht nur als Augenweide, sondern um einen Zweck und eine Botschaft zu bekräftigen. Das Design Ihrer Seite vermittelt eine Persönlichkeit, und wenn Sie diese Persönlichkeit falsch verstehen, verringert dies die Wirkung und den Erfolg des Projekts. Das Nebeneinander von Konzepten in diesem Design ähnelt einem 300 Pfund schweren, mit Leder bekleideten, tätowierten Biker, der eine Vorschulklasse unterrichtet. Die beiden scheinen einfach im Widerspruch zueinander zu stehen.
Der Designer hat das Layout festgenagelt, was ehrlich gesagt oft der schwierigste Teil auf einer Site wie dieser ist. Jetzt ist es an der Zeit, das Erscheinungsbild der Website unter Beibehaltung der Kernstruktur komplett neu zu gestalten. Beginnen Sie mit einem freundlicheren Farbschema und / oder verwenden Sie eine viel weniger kantige Textur. Vielleicht etwas, das ein weiches Gefühl vermittelt (ohne hässlich und kitschig zu sein). Schauen Sie sich Subtile Muster an, um einige großartige Ressourcen zu erhalten.
Logo
Das Logo ist im vorherigen Screenshot dargestellt. Es ist offensichtlich sehr passend für die Website, die Pfote ist ein sofort zuordenbares Symbol. Als Logo hat es jedoch einen großen Fehler in der Tatsache, dass es so allgemein ist. Es ist ein Kreis mit einer Pfote darin, vielleicht das allererste, was 99 von 100 Nicht-Designern mit der Anweisung zum Erstellen eines Pfotenlogos einfallen würden.
Das Problem dabei ist, dass man es nicht wirklich besitzen kann. Wenn Sie genau hinschauen, könnten Sie wahrscheinlich etwas Ähnliches für Tonnen von Unternehmen und Websites finden. Sie möchten vielleicht keine globale Marke aufbauen, aber der springende Punkt eines Logos ist immer noch, etwas zu haben, das Ihrer Marke ein Gesicht gibt (egal wie klein) und sie identifizierbar macht. Dies steht nicht ganz oben auf der Prioritätenliste, aber auf lange Sicht würde ich empfehlen, etwas Einzigartigeres zu erkunden.
Seite senden
Wie ich am Anfang dieses Artikels erwähnt habe, ist diese Seite ziemlich einfach, daher werden wir dies in Kürze abschließen. Das Letzte, was ich diskutieren möchte, ist die Seite, auf der Benutzer ihre eigenen Fotos einreichen können:
Das Problem, das ich mit dieser Seite habe, ist die Art von Inception-Effekt, der auftritt. Sie haben einen Screenshot einer Webseite, die in eine Webseite geworfen wurde, die sehr ähnlich aussieht. Es ist geneigt, so dass es ein wenig auffällt, aber es ist immer noch eine beunruhigende Kombination. Das Problem hierbei ist, dass der Hintergrund der Seite und das Bild im Wesentlichen gleich sind, sodass das Bild in keiner wesentlichen Weise voneinander getrennt ist. Ich empfehle, vielleicht einen Stricheffekt zu untersuchen und das Bildraster in einer noch vergrößerten Ansicht zuzuschneiden. Als einfachen Ausweg könnten Sie hier einfach ein großes, süßes Tier platzieren, das irgendwie die Idee des Teilens, Hochladens usw. vermittelt.
Fazit
Zusammenfassend ist hier eine kurze Checkliste meiner Gedanken zum Design.
Gut
- Layout: Dies ist eine perfekte Verwendung für jQuery Masonry
- Unendliches Scrollen: Erleichtert das Surfen
- Einfache aber effektive Navigation
Braucht Arbeit
- Allgemeine Ästhetik: zu dunkel und schmuddelig
- Logo: zu allgemein
- Anmeldeseite: Der Screenshot funktioniert nicht
Du bist dran!
Nachdem Sie meine Kommentare gelesen haben, können Sie dem Designer weitere Ratschläge geben. Lassen Sie uns wissen, was Ihrer Meinung nach am Design großartig ist und was Ihrer Meinung nach stärker sein könnte. Wie immer bitten wir Sie, auch den Designer der Website zu respektieren und klare konstruktive Ratschläge zu geben, ohne harte Beleidigungen.
