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 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 WebAppers, ein großartiger Ort, um Open-Source-Webressourcen zu finden. 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 WebAppers
WebAppers ist ein Blog, in dem täglich hochwertige Open-Source-Ressourcen für Webentwickler und Webdesigner zur Verfügung stehen. Als Webdesigner finden Sie einige der besten kostenlosen Icons, Stock-Fotos, Pinsel, Schriften und Designinspirationen. Als Webentwickler finden Sie auch einige der besten Javascript- und Ajax-Komponenten wie modale Fenster, Menüs, Galerien, QuickInfos, Diagramme, Kalender-Plug-Ins 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 suchen als die Stammkunden. WebAppers war tatsächlich der Kunde unserer 14. Webdesign-Kritik und sie sind zurückgekommen, um uns ihre brandneue, komplett neu gestaltete responsive Site anzusehen.
Meine ersten Gedanken zum neuen Design sind sehr positiv. Dies ist kein kleines Update, sie haben die Website in eine völlig neue visuelle Richtung gebracht und ich denke wirklich, dass es besser ist. Die alte Seite hatte ein zusammengeschustertes Aussehen, als würden verschiedene nicht übereinstimmende Ressourcen zusammengeworfen. Im Gegensatz dazu ist das neue Design sehr sauber und professionell und wirkt wie eine ganz individuelle Arbeit. Und es ist ansprechend auf Booten!
Wir sind immer noch sehr früh in der reaktiven Entwicklung des Netzes, deshalb geht mein Hut an alle, 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 Site eintauchen und sehen, was gut funktioniert und was verbessert werden könnte.
Neues Logo
Das alte WebAppers-Logo hatte diesen 80er-Rocker-Appeal. Es gab eine Art Katze, einige Lichtblitzformen; es war schrullig, aber lustig.
Ich fand das Logo immer etwas verwirrend. Ich konnte nie genau sagen, ob die Blitzformen genau so sein sollten oder ob sie vielleicht eine Löwenmähne waren. Und was hatte das überhaupt mit Open-Source-Webressourcen zu tun?
Das neue Logo verfolgt einen einfacheren, textbasierten Ansatz. Ich liebe das Bild der Seitenwölbung "W", deren Zentrum auch als "A" dient. Es ist einfach eine coole Idee, die ziemlich erfolgreich abgezogen wurde.
Ich mag es auch, dass das Logo eindeutig zeigt, worum es bei der Website geht. Sobald ich die Homepage lade, schweifen meine Augen zum Logo und ich weiß, was die Seite mir bietet. Das ist extrem wichtig und es ist in diesen Kritiken allzu oft, dass ich einem Designer das Gegenteil erzähle (dass es schwierig ist, zu erkennen, worum es bei seiner Website geht).
Layout
Wie bereits erwähnt, ist das neue Layout ansprechend, und damit meine ich, dass es Medienabfragen verwendet, um das Layout an einer Reihe von voreingestellten Haltepunkten neu aufzubauen. Um voll reagieren zu können? Einige sagen, dass ein Standort auch auf einem fließenden Raster aufgebaut sein muss, wie es im Smashing Magazine zu sehen ist, ein Projekt, das dieses zweifellos in gewisser Weise inspiriert hat.
WebAppers flößt sich nicht auf jede Minute in der Breite des Browsers um (zumindest bis zur kleinsten Wiederholung), und um ehrlich zu sein, wenn ich damit spiele, denke ich, das ist in Ordnung. Es ist immer noch ein bemerkenswert flexibles Design, das sich gut an alle Arten von unterschiedlichen Bildschirmgrößen anpasst, was viel mehr ist, als die meisten Websites behaupten können.
In der breiten Version gibt es vier Hauptsäulen. 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 herausrutschen, eine perfekte Metapher, wenn man bedenkt, dass sie zusammenfallen, wenn sich die Breite verringert.
Wenn wir das Fenster eingrenzen, lassen wir die Werbesäule ganz rechts fallen. Der Inhalt verschwindet jedoch nicht nur an dieser Stelle, sondern die Anzeigen erscheinen oberhalb der rechten Seitenleiste und drücken diesen Inhalt nach unten. Dies ist eine elegante Lösung, die gut aussieht und dennoch den Großteil des ursprünglichen Inhalts beibehält.
Es folgt ein subtiler Sprung, der die Hauptspalte ein wenig einschränkt. Der Container wird enger, die Textgröße nimmt ab und die Bilder werden kleiner. Wenn wir das Fenster noch weiter einschränken, erhalten wir die bedeutendste Layoutverschiebung:
Hier sehen wir, dass die dritte Spalte vollständig weggefallen ist und der Inhalt, der sich darin befand, verborgen wurde. Dies bedeutet, dass die Anzeigen vollständig verschwunden sind (Smashing Magazine macht dasselbe) und auch die Seitenleiste mit dem beliebten Inhalt und Suchfeld ist verschwunden.
Mein einziges echtes Problem hier ist, dass die Site ab diesem Zeitpunkt nicht mehr als durchsuchbar erscheint. Ich verstehe alles für das Design, da sich die Bildschirmgröße ändert, aber die Funktionalität ist ein heikleres Thema und Reduktionen müssen mit Vorsicht angegangen werden. Das Suchen scheint ein ziemlich primäres Feature zu sein, und ich wäre wahrscheinlich frustriert, dass ich diese Aufgabe nicht auf meinem Handy oder Tablet ausführen kann.
Schließlich wird die Site in ein einspaltiges Layout zerlegt, wobei die Navigation jetzt in einem einfachen Dropdown-Menü angezeigt wird, das in der Regel sowohl für mobile Geräte als auch für Desktop-Geräte geeignet ist.
Insgesamt finde ich, dass das Layout wirklich gut funktioniert, und abgesehen von der Suchfunktion bin ich mir nicht sicher, ob ich daran viel ändern würde.
Wenn Sie hinter die Kulissen schauen, können Sie erkennen, dass dieses Projekt von Twitter Bootstrap unterstützt wurde. Dies ist schön, weil die Seite überhaupt nicht wie Ihr typisches Copy / Paste-Bootstrap-Projekt aussieht und beweist, dass Sie das Toolkit unter der Haube verwenden können, ohne Abstriche machen zu müssen Maßgefertigtes Design.
Ästhetik
Nun, da wir besprochen haben, wie die Struktur oder die Knochen der Site funktionieren, werfen wir einen Blick auf das Sahnehäubchen oben. Die Site nimmt ein weitgehend graues Farbschema an, hier und da mit subtilen Farbakzenten. Attraktive, minimale Icons und natürlich Helvetica werden als primäre und fast exklusive Schrift verwendet.
Mein am wenigsten geliebter Aspekt dieser gesamten Website ist der fehlende Kontrast. Alles auf der Seite fühlt sich monoton an, ohne dass etwas wirklich hervorsticht. Ich kann sehen, wie der gedämpfte Blick für die Augen angenehm sein soll, aber er ist so mild, dass er sich fast etwas anstrengend anfühlt.
Die Lösung dafür ist meines Erachtens so einfach, dass nur eine einzige Datei ersetzt werden muss: die Hintergrundtextur. Ich habe eine dunkle Textur von Subtle Patterns mitgenommen und einen Testlauf auf der WebAppers-Site mit großartigen Ergebnissen durchgeführt.
Der dunkle Hintergrund verleiht der Website den nötigen Kontrast und hebt den Hauptinhalt hervor, indem er diesen in den Vordergrund Ihrer Aufmerksamkeit stellt. Es ist erstaunlich, wie viel eine kleine Veränderung bewirken kann!
Eine weitere kleine Sache, die mich ein wenig nervt, ist der Schatteneffekt auf die Artikel-Titel, der im Screenshot unten zu sehen ist:
Einerseits denke ich, dass es ein cooler Effekt ist. Zum anderen denke ich, dass der Text dadurch wesentlich schwieriger zu lesen ist. Wenn die Deckkraft des Schattens einfach reduziert würde, wäre das weniger ablenkend.
Zusammenfassung
Ich denke, dass das WebAppers-Redesign definitiv ein Erfolg ist. Die Seite ist schöner als je zuvor und hat einen schönen Sprung in Richtung Geräteagnostiker gemacht. Es ist einfach zu bedienen, das Branding ist logischer und die Präsentation von Inhalten ist wirklich nett.
Mein größtes Anliegen ist der fehlende visuelle Kontrast, der durch das Einfügen eines dunkleren Hintergrundmusters völlig verschwindet. Ich bin auch skeptisch gegenüber der Entscheidung, die Suchfunktion auf die engeren Versionen des Layouts zu legen. Ich glaube nicht, dass ein Besuch der Website auf meinem iPhone notwendigerweise bedeutet, dass ich die Suchfunktion verloren habe.
Abgesehen von diesen Problemen ist es jedoch eine großartige Website. Schauen Sie unbedingt vorbei und machen Sie eine Probefahrt. Ich glaube, du wirst es mögen, was du siehst.
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.