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 WPMU.org, eine Website für WordPress-Enthusiasten. 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 WPMU
WPMU.org ist die Nummer eins im Internet für WordPress-Nachrichten, Tipps, Plugins und Themenrezensionen. Wir haben jeden Tag mehrere neue Beiträge vom Team von Incsub, der gleichen Gruppe hinter dem ältesten (und zweitgrößten) WordPress Multisite im Internet (Edublogs.org) und der größten Premium-Plugin- und Theme-Community WPMU DEV.?
Hier ist ein Screenshot der Homepage:
Erster Eindruck
WPMU scheint eine großartige Informationsquelle für WordPress-Entwickler zu sein. Hier auf der Homepage gibt es eine Menge Inhalte, die aus Sicht des Designers sowohl eine Bereicherung als auch eine Verpflichtung darstellen. Die Seite sieht sehr sauber und gut aus, und doch scheinen sie selbst innerhalb der hoch organisierten Struktur mit Unordnung zu kämpfen.
? Hier auf der Homepage gibt es eine Menge Inhalte, die aus Sicht des Designers sowohl eine Bereicherung als auch eine Verpflichtung darstellen.?Die Site ist in der Tat reaktionsschnell, und zu Beginn des Spiels gebe ich immer noch Requisiten an alle, die zumindest versuchen, diesen Sprung zu machen. Wenn überhaupt jemand ein komplexes responsives Design mit absoluter Perfektion erstellt hat, bildet diese Seite keine Ausnahme von dieser Regel. Dennoch denke ich, dass die Probleme hier nicht zu schwer zu lösen sein sollten.
Insgesamt haben die Designer hier etwas Großartiges geleistet. Lassen Sie uns näher eintauchen und sehen, wo wir einige Änderungen vorschlagen können.
Das Logo
Das allererste, was ich auf der Website sehe, ist das Logo. Es ist ein relativ großes Objekt in der oberen linken Ecke, so dass Ihre Augen natürlich dazu neigen.
Ich finde es leider etwas rau an den Rändern. Das Konzept ist nicht unbedingt schlecht, aber aus Sicht des Designers sind die Größenverhältnisse nicht gegeben. Das aktuelle Logo ist ein großer Textblock, der alle recht groß ist. Das Problem dabei ist, dass jeder Text sich nicht harmonisch aufeinander einspielt, sondern sich eher wie sein Konkurrenzkampf anfühlt.
? Anstatt harmonisch aufeinander zu spielen, fühlt sich jeder Text eher an, als würde er um Aufmerksamkeit kämpfen.?Contrast ist eines der leistungsstärksten Werkzeuge als Designer und Sie werden feststellen, dass jedes Design, das sich ein bisschen zu wünschen übrig lässt, aufgewertet wird. Angesichts der Idee des Kontrasts habe ich das Symbol größer und die Tagline viel kleiner gemacht, damit es nicht mit WPMU konkurriert. Ich ließ dann die furchtbar ungeschickte gedrehte "org" fallen. Alles in allem, weil ich denke, dass es völlig unnötig ist.
Jetzt haben wir ein einfaches zweifarbiges Logo mit einem großen Textstück, einem kleinen Textstück und einem großen, auffälligen Symbol auf der linken Seite. Es ist jetzt viel ausgeglichener und fühlt sich weniger durcheinander.
Andere Logos
Wenn wir auf die andere Seite des Headers springen, finden wir zwei weitere Logos, diesmal von Dritten.
Meiner Meinung nach sind diese etwas zu groß. Wieder stoßen wir auf diese Idee des visuellen Wettbewerbs. Als Designer müssen Sie schwierige Entscheidungen darüber treffen, was am wichtigsten ist. Wenn Sie versuchen, alles groß und verantwortungsbewusst zu machen, ruinieren Sie die Hierarchie der Informationen.
Wenn Sie versuchen, alles groß und verantwortungsbewusst zu machen, ruinieren Sie die Hierarchie der Informationen.Darüber hinaus ist die Ausrichtung dieser beiden Logos ein bisschen abgenutzt. Die unregelmäßige Form des WPHonors-Logos vermittelt das Gefühl, dass das Google+ Logo zu hoch ist, selbst wenn es in der Mitte zentriert ist. Manchmal? Visuell? Die Zentrierung zweier Objekte kann zu einem harmonischeren Layout führen, als sie tatsächlich zu zentrieren.
Letztendlich benötigt dieser Bereich eine fünfminütige Korrektur. Nehmen Sie die Logo-Größen etwas herunter, nicht dramatisch, und drücken Sie das Google+ Logo ein paar Pixel nach unten.
Desktop-Layout
Wir werden etwas später auf die Reaktionsfähigkeit des Layouts eingehen, da wir uns jetzt auf das Layout der Website konzentrieren, wie sie auf einem Desktop oder Laptop (der großen Version) zu sehen ist. Grundsätzlich betrachten wir ein dreispaltiges Layout.
Auf der linken Seite sehen Sie die aktuellsten Artikel. Das Zentrum ist hauptsächlich mit einer Liste von Tutorials belegt und die linke Seite enthält eine Liste der beliebtesten Beiträge. Konzeptionell klingt das ungefähr richtig, aber die Ausführung ist eigentlich nicht so toll. Betrachten Sie den folgenden Screenshot:
Das Problem, das ich mit dieser Site habe, ist, dass ich völlig überfordert bin, wenn ich die Seite nach unten scrolle. Es gibt einfach so viel Inhalt hier und alles ist sehr ähnlich formatiert und so groß, dass es irgendwie zu einem Durcheinander passt.
In solchen Situationen, in denen das Layout unübersichtlich und unordentlich wird, entferne ich gerne alle Ablenkungen und konzentriere mich ausschließlich auf die Größe und die räumlichen Beziehungen der Objekte auf der Seite. Um dies zu tun, entferne ich den Inhalt auf ein Drahtgitter wie folgt:
Die Säulen neu denken
Jetzt können wir wirklich ein Gefühl dafür bekommen, was mit dieser Seite los ist. Eine Sache, die ich sofort bemerke, wenn ich die Seite so betrachte, ist das gleiche alte Problem, dem wir immer wieder begegnen, wenn die relative Größe von Objekten viel zu ähnlich ist.
Ich denke, dieses Problem spielt sich in der Spaltenbreite ab. Obwohl die Spalte ganz links die breiteste ist, ist dies bei weitem nicht so. Es gibt kein klares Feature? Spalte, während ich diese Seite nach unten scrolle. Ich habe kein gutes Gespür dafür, was der Hauptinhalt ist, stattdessen schreit mich alles mit der gleichen Lautstärke an.
Ich habe kein gutes Gespür dafür, was der Hauptinhalt ist, stattdessen schreit mich alles mit dem gleichen Volumen an.Um dies zu überarbeiten, versuchen wir, die linke Spalte zur Mitte zu verschieben und ihre Breite relativ zu den anderen anzupassen (die mittlere Spalte verbreitern, die anderen verengen). Lassen Sie uns einige Ausrichtungsprobleme beheben und die Größe dieser Header-Logos reduzieren. Das bringt uns zum folgenden Layout.
Wie Sie sehen, haben wir jetzt einen viel klareren Fokus gesetzt, wenn Sie auf der Seite nach unten scrollen: die mittlere Spalte. Der andere Inhalt ist sekundär, wenn Sie es wollen, nicht zu ablenken, wenn Sie es nicht möchten.
Das Layout lüften
Trotz der Tatsache, dass wir durch die Einführung einer klareren Hierarchie von Informationen zur Situation beigetragen haben, kämpfen wir immer noch stark mit dem Durcheinander. Ich denke einfach, dass zu jeder Zeit zu viel auf der Seite ist. Wir müssen nicht jede Menge Inhalte entfernen, aber wir können die Seite mit ein paar Reduzierungen und einigen weiteren Änderungen an der Größe verbessern.
Gehen Sie jetzt zurück und vergleichen Sie dies mit dem Wireframe, mit dem wir begonnen haben. Der Unterschied mag subtil erscheinen, aber glauben Sie mir, wenn Sie diese Änderungen im Layout implementieren, wären die Auswirkungen enorm. Der Footprint für Inhalte wäre weitaus effektiver und geräumiger, und der Benutzer könnte beim Durchblättern der Seite einen klareren Pfad verfolgen.
Responsives Layout
Im Großen und Ganzen reagiert das Layout ziemlich gut, wenn der Darstellungsbereich enger wird. Die Spalte mit den populären Posts fällt nach unten und der Hauptbereich wird von den beiden anderen Spalten belegt. Die räumliche Beziehung scheint hier perfekt zu sein, viel besser als das, was wir zuvor gesehen haben.
Leider ist der Header dabei immer voller Probleme. Am bemerkenswertesten ist, wie schlecht die Navigation auf eine Verringerung der Breite reagiert. An einer Stelle weist es einen ungünstigen Bruch in zwei Zeilen auf.
Dies ist aus ästhetischer Sicht etwas ärgerlich, aber wenn Sie einmal enger werden, fallen die Dinge wirklich auseinander. Die Kopfzeile wird zu einer großen, leeren Lücke mit einer hässlichen, nicht stilisierten Liste von Links, die nach links verschoben werden.
Wenn Sie die Site in einem schmalen Fenster anzeigen und dann wieder auf volle Größe erweitern, kehrt die Kopfzeile nicht zu ihrem ursprünglichen Layout zurück, sondern wird mit mehr Leerzeichen sonderbar. Ich weiß, dass dies ein Randanwendungsfall ist (nur Nerd-Entwickler ändern die Größe, um die Ergebnisse zu sehen), aber es weist immer noch auf ein Problem mit dem Layout hin.
Es ist nicht leicht Bein reagiert
Fazit: Responsive Layout ist eine knifflige, unbeständige Bestie. Hut ab an die Entwickler hier, um alles zu versuchen. Allerdings gibt es natürlich einige Probleme, die angegangen werden müssen.
Die Navigation ist der Hauptbereich, in dem Probleme auftreten. Es kann hilfreich sein, einen Blick auf unsere Vorgehensweise beim Erstellen eines responsiven Navigationsmenüs zu werfen.
Zusammenfassung
WPMU ist eine gut aussehende Website. Obwohl es etwas generisch ist, stellt es einen starken Versuch dar, eine Menge interessanter Inhalte zu organisieren und zu präsentieren. Die meisten Designer würden sich mit dieser Aufgabe schwer tun, und ich denke, diese Jungs haben einen guten Job gemacht.
Davon abgesehen, sind die oben genannten Bereiche die, die meiner Meinung nach wirklich angesprochen werden müssen. Mein Rat ist ein Umdenken in Bezug auf das Layout. Solange Sie die Website jedoch auf einem starken, flexiblen Raster erstellt haben, sollte der Inhalt dieses Inhalts nicht neu definiert werden. Wenn Sie kein starkes und anpassbares zugrunde liegendes Rastersystem verwenden, schlage ich vor, dass Sie beginnen!
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.