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 Site ist Cutest Paw, eine weltweite Tierfotogalerie. 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 die süßeste Pfote
Diese Seite nimmt definitiv den Preis für unsere am meisten? Awwww? die Kritik an der Website hervorzurufen. Diese Seite ist buchstäblich nichts anderes als ein endloser Strom von Fotos von niedlichen und lustigen Tieren. Wie können wir so etwas ertragen und trotzdem konstruktives Feedback geben, ohne von schlafenden Welpen abgelenkt zu werden? Glücklicherweise sind wir zu 100% bemüht, Kreative dabei zu unterstützen, ihre Webdesign-Möglichkeiten zu verbessern. Bleib zurück, Welpen, wir haben einen Job zu erledigen.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Immer wenn ich ein Design evaluiere, 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 einfach: Es werden viele, viele Fotos angezeigt. Die Cutest Paw-Site scheint ihren Zweck recht gut zu erfüllen. Das Layout ist für die maximale Nutzung des Speicherplatzes optimiert und verschwendet nicht zu viele Pixel für nicht kritische, überflüssige Augenweide.
Wie bei der Designkritik der letzten Woche wird diese ziemlich kurz sein. Die Cutest Paw-Website ist sehr einfach, daher gibt es nicht viel zu kritisieren. Ich habe jedoch wie immer ein Feedback, von dem ich glaube, dass es dem Designer helfen wird, die Website zu verbessern. Lass uns rein springen und loslegen.
Layout
Diese Seite ist ein hervorragendes Beispiel für die Nützlichkeit von jQuery Masonry, einem großartigen Layout-Plugin, das das Erstellen von Layouts ansonsten unmöglich macht. Das Schöne an Masonry ist, dass es auf das CSS-Verhalten verzichtet, das ein horizontales Layout einstellt, bevor der Inhalt vertikal verteilt wird. Stattdessen wird ein schöner, enger vertikaler Stapel erstellt, ähnlich wie Ziegelsteine gelegt werden.
Das Ergebnis ist in diesem Fall ein unglaublich enges Raster von Bildern, das, wie ich bereits erwähnt habe, die Anzahl der Fotos, die auf kleinem Raum betrachtet werden können, wirklich maximiert. Die Site verwendet außerdem eine unendliche Bildlauftechnik, mit der der Inhalt beim Laden der Seite fortgesetzt wird.
Die Kombination von Masonry-Layouts und unendlichem Scrollen wurde kürzlich von Pinterest sehr populär gemacht, worüber Sie bei der Verwendung dieser Website unbedingt nachdenken müssen. Die Kombination dieser beiden Techniken macht das Browsen so einfach wie nie zuvor. Im Vergleich dazu erfordert die Paginierung vom Benutzer so viel Aufwand. Hier scrollen und scrollen Sie, bis Sie entweder alles gesehen haben, was Sie sehen oder sich zu etwas anderem entschließen möchten.
Seitenleiste
Da der Inhalt ständig weiterblättert, 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 sich schnell nach oben bewegt, wenn Sie die Seite nach unten verschieben. Das ist ziemlich effektiv, aber ich muss zugeben, dass die Animation, die anfangs etwas reizend ist, schnell ablenkend und etwas ärgerlich wird.
Die Seitenleiste ist schön gestaltet und übersichtlich angeordnet. Aus Sicht der Benutzerfreundlichkeit (abgesehen von der Animation) ist sie ziemlich gut gemacht. Es ist schön, ein "Back to Top" zu sehen. button hier implementiert, sobald ich mit dem Scrollen angefangen habe, habe ich sofort nach einem davon gesucht und es leicht gefunden. Es ist jedoch möglicherweise effektiver als eine Art Überlagerung auf der oberen oder unteren Seite der rechten Seite des Fotostapels. Dies würde ihn an einen Ort bringen, an dem die Aufmerksamkeit des Benutzers wahrscheinlich fokussiert wird, und die Notwendigkeit der Suche nach ihm reduzieren.
Thema
Die Gesamtästhetik der Seite ist eine Diskussion wert, in der Tat kann dies einer der prominentesten Punkte sein, die zu berücksichtigen sind. Auf der einen Seite ist die Seite attraktiv. Der schwarze Hintergrund ist glatt, edel und lässt die Fotos wirklich hervorstechen. Andererseits scheinen der Hintergrund und sogar die Adjektive, die ich gerade verwendet habe, für diese Website völlig falsch.
Wörter wie? Süß? und? Fuzzy? So würden die Leute den Inhalt beschreiben, und doch ist das visuelle Thema der Site 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 verstärken. Das Design Ihrer Seite vermittelt eine Persönlichkeit und wenn Sie diese Person falsch verstehen, verringert dies die Wirkung und den Erfolg des Projekts. Die Nebeneinanderstellung von Konzepten in diesem Design ähnelt stark dem Sehen eines 300 Pfund ledergekleideten, tätowierten Bikers, der eine Vorschulklasse unterrichtet, die beiden scheinen sich einfach zu widersprechen.
Der Designer hat das Layout auf den Punkt gebracht, was ehrlich gesagt der schwierigste Teil einer Website wie dieser ist. Jetzt ist es an der Zeit, das Erscheinungsbild der Site 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). In Subtle Patterns findest du einige großartige Ressourcen.
Logo
Das Logo ist im vorherigen Screenshot dargestellt. Es ist offensichtlich sehr passend für die Baustelle, die Pfote ist ein sofort zuordenbares Symbol. Als Logo hat es jedoch einen großen Fehler darin, dass es so generisch ist. Es ist ein Kreis mit einer Pfote darin, vielleicht wäre das allererste, was 99 von 100 Nicht-Designern die Anweisung gab, ein Pfotenlogo zu erstellen.
Das Problem dabei ist, dass man es nicht wirklich besitzen kann.Wenn Sie genau hinschauen, können Sie wahrscheinlich für viele Unternehmen und Websites etwas Ähnliches finden. Sie sind vielleicht nicht auf der Suche nach einer globalen Marke, aber der Sinn eines Logos besteht immer noch darin, etwas zu haben, das Ihrer Marke ein Gesicht gibt (auch wenn sie noch so klein ist), und sie erkennbar machen. Dies ist nicht ganz oben auf der Prioritätenliste, aber auf lange Sicht würde ich empfehlen, etwas Einzigartiges zu erkunden.
Seite einreichen
Wie ich bereits zu Beginn dieses Artikels erwähnte, ist diese Site ziemlich einfach, wir werden dies in Kürze zusammenfassen. 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 des Inception-Effekts. Sie haben einen Screenshot einer Webseite, die in eine Webseite geworfen wird, die sehr ähnlich aussieht. Es ist so geneigt, dass es ein wenig auffällt, aber es ist immer noch eine beunruhigende Kombination. Das Problem hierbei ist, dass der Hintergrund der Seite und des Bildes im Wesentlichen derselbe ist, sodass das Bild nicht wirklich wesentlich voneinander getrennt ist. Ich empfehle Ihnen vielleicht, einen Stricheffekt zu betrachten und das Bildraster noch weiter zu vergrößern. Als einfachen Ausweg könnten Sie einfach ein großes, süßes Tier hier platzieren, das irgendwie die Idee des Austauschs, Hochladens usw. vermittelt.
Fazit
Zusammenfassend finden Sie hier eine kurze Checkliste meiner Gedanken zum Design.
Gut
- Layout: Dies ist eine perfekte Verwendung für jQuery Masonry
- Unendliches Scrollen: macht das Browsen mühelos
- Einfache aber effektive Navigation
Braucht Arbeit
- Allgemeine Ästhetik: zu dunkel und grungig
- Logo: zu allgemein
- Anmeldeseite: Der Screenshot funktioniert nicht
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.