Webdesign-Kritik Nr. 80: Die neue Responsive WebAppers-Site
Es ist Zeit für eine weitere großartige Webdesign-Kritik, bei der wir uns eine echte Website ansehen und das Design analysieren. 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 WebAppers, ein großartiger Ort, um Open Source-Webressourcen zu finden. 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.
Informationen zu WebAppern
„WebAppers ist ein Blog, in dem täglich Open Source-Ressourcen von höchster Qualität für Webentwickler und Webdesigner freigegeben werden. Als Webdesigner finden Sie einige der besten kostenlosen Symbole, Fotos, Pinsel, Schriftarten und Designinspirationen. Als Webentwickler finden Sie auch einige der besten Javascript- und Ajax-Komponenten wie modale Fenster, Menüs, Galerien, Tooltips, Diagramme, Kalender-Plugins und vieles mehr. “
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Wenn Sie sich fragen, ob sich eine Design Shack-Kritik lohnt, müssen Sie nicht weiter als bis zu den Stammkunden suchen. WebAppers war tatsächlich der Kunde für unsere 14. Webdesign-Kritik und sie sind zurückgekommen, um uns einen Blick auf ihre brandneue, komplett neu gestaltete Responsive-Site zu werfen.
Meine ersten Gedanken für das neue Design sind sehr positiv. Dies ist kein kleines Update, sie haben die Seite in eine völlig neue visuelle Richtung gelenkt und ich denke wirklich, dass es besser dafür ist. Die alte Site hatte ein zusammengepflastertes Aussehen, als würden verschiedene nicht übereinstimmende Ressourcen zusammengeworfen. Das neue Design ist dagegen sehr sauber und professionell und wirkt wie ein ganz individuelles Stück Arbeit. Und es reagiert auf das Booten!
Wir sind noch sehr früh in der reaktionsschnellen Entwicklung des Web, daher geht mein Hut vor allen, die tatsächlich die Initiative ergreifen, um RWD aus dem komfortablen Bereich der Theorie zu entfernen und in die Praxis umzusetzen.
Lassen Sie uns tiefer in das Design der Website eintauchen und sehen, was gut funktioniert und was verbessert werden könnte.
Neues Logo
Das alte WebAppers-Logo hatte diese Art von Rocker-Appeal der 80er Jahre. Es gab eine Art Katze, einige Lichtbolzenformen; Es war schrullig, aber lustig.
Ich fand das Logo immer etwas verwirrend. Ich konnte nie genau sagen, ob die Blitzformen genau das sein sollten oder ob es sich vielleicht um eine Löwenmähne handelte. Und was hatte das überhaupt mit Open Source-Webressourcen zu tun?
Das neue Logo verfolgt einen einfacheren, textbasierten Ansatz. Ich mag das visuelle Erscheinungsbild der Seitenrolle „W“, deren Mitte auch als „A“ dient. Es ist nur eine coole Idee, die ziemlich erfolgreich umgesetzt wurde.
Mir gefällt auch, dass das Logo deutlich macht, worum es auf der Website geht. Sobald ich die Homepage lade, wandern meine Augen zum Logo und ich weiß, was die Seite mir bietet. Dies ist äußerst wichtig und es ist allzu oft in diesen Kritiken, dass ich einem Designer das Gegenteil sage (dass es schwierig ist zu verstehen, worum es auf seiner Website geht).
Layout
Wie oben erwähnt, reagiert das neue Layout, und damit meine ich, dass es Medienabfragen verwendet, um das Layout an einer Reihe von voreingestellten Haltepunkten neu zu fließen. Um „voll ansprechbar“ zu sein, sagen einige, dass eine Site auch auf einem flüssigen Gitter aufgebaut sein muss, wie es im Smashing Magazine zu sehen ist, ein Projekt, das dieses zweifellos inspiriert hat.
WebAppers fließen nicht bei jeder winzigen Änderung der Browserbreite zurück (zumindest bis zur kleinsten Iteration), und um ehrlich zu sein, denke ich, dass das in Ordnung ist, wenn ich damit herumspiele. Es ist immer noch ein bemerkenswert flexibles Design, das sich gut an alle Arten unterschiedlicher Bildschirmgrößen anpasst, was viel mehr ist, als die meisten Websites behaupten können.
In der breiten Version gibt es vier Primärspalten. Von links nach rechts sind dies die Navigation, der primäre Inhalt, die Seitenleiste des sekundären Inhalts und die Werbung. Die beiden Seitenleisten sehen fast wie Schubladen aus, die aus dem Hauptinhalt herausgleiten. Dies ist eine perfekte Metapher, wenn man bedenkt, dass sie mit zunehmender Breite zusammenfallen.
Wenn wir das Fenster einschränken, lassen wir die Werbesäule ganz rechts fallen. Der Inhalt verschwindet jedoch nicht nur an dieser Stelle, sondern die Anzeigen erscheinen über der rechten Seitenleiste und drücken diesen Inhalt nach unten. Dies ist eine elegante Lösung, die großartig aussieht und dennoch den größten Teil des ursprünglichen Inhalts beibehält.
Danach gibt es einen subtilen Sprung, der die Hauptinhaltsspalte leicht einschränkt. Der Container wird schmaler, die Textgröße nimmt ab und die Bilder verringern ihre Breite. Wenn wir das Fenster noch weiter einschränken, erhalten wir die bedeutendste Layoutverschiebung:
Hier können wir sehen, dass die dritte Spalte vollständig weggefallen ist und alle darin enthaltenen Inhalte ausgeblendet wurden. Dies bedeutet, dass die Anzeigen vollständig verschwunden sind (Smashing Magazine macht dasselbe) und die Seitenleiste mit den beliebten Inhalten und dem Suchfeld ebenfalls verschwunden ist.
Mein einziges wirkliches Problem hierbei ist, dass die Site ab diesem Zeitpunkt nicht mehr durchsuchbar zu sein scheint. Ich bin alle dafür, das Design zu ändern, wenn sich die Bildschirmgröße ändert, aber die Funktionalität ist ein heikleres Thema, und Reduzierungen müssen mit Vorsicht angegangen werden. Die Suche scheint eine ziemlich wichtige Funktion zu sein, und ich wäre wahrscheinlich frustriert, dass ich diese Aufgabe nicht auf meinem Telefon oder Tablet ausführen kann.
Schließlich wird die Site in ein einziges Spaltenlayout unterteilt, wobei die Navigation jetzt in einem einfachen nativen Dropdown-Menü angezeigt wird, das normalerweise sowohl auf Mobilgeräten als auch auf Desktopgeräten gut funktioniert.
Insgesamt denke ich, dass das Layout wirklich gut funktioniert, und mit Ausnahme der Suchfunktion bin ich mir nicht sicher, ob ich daran viel ändern würde.
Wenn wir hinter die Kulissen schauen, können wir sehen, dass dieses Projekt von Twitter Bootstrap unterstützt wurde. Das ist schön, weil die Seite überhaupt nicht wie ein typisches Bootstrap-Projekt zum Kopieren / Einfügen aussieht und beweist, dass Sie dieses Toolkit unter der Haube verwenden können, ohne zu opfern Maßgefertigtes Design.
Ästhetik
Nachdem wir nun besprochen haben, wie die Struktur oder die Knochen der Site funktionieren, werfen wir einen Blick auf das Sahnehäubchen oben. Die Seite nimmt ein weitgehend graues Farbschema mit subtilen Farbtupfern hier und da an. Attraktive, minimale Symbole und natürlich Helvetica als primäre und fast exklusive Schrift werden häufig verwendet.
Mein am wenigsten bevorzugter Aspekt dieser gesamten Website ist der fehlende Kontrast. Alles auf der Seite wirkt eintönig, ohne dass etwas wirklich auffällt. Ich kann sehen, wie der gedämpfte Blick die Augen schonen soll, aber er ist langweilig genug, dass er sich fast etwas anstrengend anfühlt.
Die Lösung hierfür ist für mich so einfach, dass nur eine einzige Datei ersetzt werden muss: die Hintergrundtextur. Ich habe eine dunkle Textur von Subtle Patterns genommen und sie auf der WebAppers-Website mit großartigen Ergebnissen getestet.
Der dunkle Hintergrund fügt der Site den dringend benötigten Kontrast hinzu und hebt den Hauptinhalt wirklich hervor, indem er ihn in den Vordergrund Ihrer Aufmerksamkeit rückt. Es ist erstaunlich, welchen Unterschied ein kleiner Tweak machen kann!
Eine andere kleine Sache, die mich leicht nervt, ist der Schatteneffekt auf die Artikeltitel, der im folgenden Screenshot zu sehen ist:
Einerseits denke ich, dass es ein cooler Effekt ist. Andererseits denke ich, dass es den Text erheblich schwieriger macht, ihn zu lesen. Wenn die Deckkraft des Schattens einfach verringert würde, wäre dies möglicherweise weniger ablenkend.
Zusammenfassung
Ich denke, das WebAppers-Redesign ist definitiv ein Erfolg. Die Seite ist schöner als je zuvor und hat einen schönen Sprung in Richtung Geräteunabhängigkeit gemacht. Es ist einfach zu bedienen, das Branding ist logischer und die Präsentation der Inhalte ist wirklich schön.
Mein einziges großes Problem ist der fehlende visuelle Kontrast, ein Problem, das mit der Aufnahme eines dunkleren Hintergrundmusters vollständig verschwindet. Ich bin auch skeptisch gegenüber der Entscheidung, die Suchfunktion auf die schmaleren Versionen des Layouts zu beschränken. Ich denke nicht, dass der Besuch der Website auf meinem iPhone zwangsläufig bedeuten sollte, dass ich die Suchfähigkeit verloren habe.
Abgesehen von diesen Problemen ist es eine großartige Seite. Schauen Sie unbedingt vorbei und machen Sie eine Probefahrt. Ich denke, dir wird gefallen, was du siehst.
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.
