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 Influentials Network, ein Aggregator und Filter für politische Nachrichten.
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 das Influentials Network
? IN überwacht und sammelt kontinuierlich die viralsten und wichtigsten politischen Nachrichten in allen Medien. IN filtert automatisch die zehn wichtigsten politischen Persönlichkeiten und / oder Themen auf einer einzigen, dynamischen und einfach zu scannenden Seite.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
Um ehrlich zu sein, es gibt nicht viel über das Design dieser Site, das wirklich gut funktioniert. Die Anordnung der drei Spalten ist insgesamt anständig, aber das visuelle Thema und die gesamte Ästhetik könnten ein ziemlich drastisches Update erfordern.
Viele Leute, die eine Kritik wünschen, wollen einfach nur einen Klaps auf den Rücken, aber ich habe mit dem Designer und Entwickler von IN gesprochen und er hat den echten Wunsch geäußert, offenes und ehrliches Feedback bezüglich der Website zu hören. Er weiß, dass Verbesserungspotenzial besteht, und sucht nach klaren Ratschlägen. In diesem Sinne beginnen wir!
Gedanken zum News Aggregator Design
Nachrichtenaggregatoren sind für einen Webdesigner sehr seltsame Bestien, und ich muss voll zugeben, dass die Regeln für ihren Erfolg sich auf alles andere als auf ästhetische Schönheit beziehen.
Zum Beispiel ist Hacker News ein Aggregator, den ich oft besuche. Schauen Sie sich das Design an:
Wie Sie sehen, ist dies nicht gerade ein Bild des modernen Webdesigns. Es ist nicht einmal ein gutes Beispiel für modernen Minimalismus, es ist wirklich nur eine Liste von Links mit Hintergrundinformationen! Trotzdem schaue ich immer noch gerne vorbei und sehe das Neueste aus der Nerd-Welt. Andere populäre Aggregatoren wie Reddit sind nicht einfach, sie sind einfach hässlich.
Alles in allem ist es mein erster Instinkt, das Design von IN wie jede andere Site zu gestalten, aber dies ist möglicherweise nicht der beste Weg, um darüber nachzudenken.
Der Look von IN
Trotz des derzeitigen Standes des Aggregatorentwurfs denke ich immer noch, dass IN einige Arbeiten in der visuellen Abteilung ausführen könnte. Für den Anfang bin ich kein Fan der Hintergründe, die in jedem Abschnitt verwendet werden. Ich habe das Gefühl, dass die Site wirklich steigungslastig ist. Seien Sie immer vorsichtig, wenn Sie einen Designtrick finden und ihn durch Übernutzung missbrauchen.
Der primäre Inhalt hat einen mittelgrauen Hintergrund und wird auf jeder Seite von einem hellen Streifen flankiert. Dies fühlt sich aus irgendeinem Grund etwas unbeholfen an. Die beiden Farben sind wahrscheinlich viel zu ähnlich. Es gibt keinen echten Farbkontrast, der den Hauptinhalt hervorhebt, nur eine leichte und verwirrende Farbverschiebung. Ehrlich gesagt, obwohl ich denke, es ist nur eine unnötige visuelle Komplikation, und ich empfehle, den gesamten Hintergrund mit dem Grau zu überfluten, das derzeit den Hintergrund des primären Bereichs in der Mitte einnimmt. Eines unserer E-Mail-Ziele für diese Site wird es sein, das ziemlich geschäftige Design zu vereinfachen.
Eine andere Sache, die meiner Meinung nach den visuellen Reiz der Seite sofort nach unten drückt, ist die unschöne Miniaturansicht. Die Fotos werden gestreckt und zusammengedrückt, um in voreingestellte Boxgrößen zu passen. Dieses Ergebnis ist ein wirklich klobig aussehendes Design, das sofort ein "gut genug" suggeriert. Mentalität vom Designer.
Es gibt wahrscheinlich viele JavaScript-Plugins, um dieses Problem zu beheben, selbst ein paar clevere CSS-Dateien könnten die Situation verbessern.
Header
Das Hauptproblem, das ich mit dem Header habe, ist der Kommunikationsfluss. Derzeit denke ich, dass es alle Informationen enthält, die es braucht, aber möglicherweise nicht in der richtigen Reihenfolge.
So würde ich es neu gestalten. In der oberen linken Ecke, wo derzeit eine Box mit einer Beschreibung der Site steht, würde ich den Site-Namen und das Logo schön und groß platzieren, damit die Leute sofort wissen, wo sie sich befinden. Dann würde ich die Beschreibung in die Box unter der Navigation verschieben.
Darüber hinaus hat das? Linie funktioniert nicht. Es ist an einem seltsamen Ort, der das Layout der Site abwirft und so formuliert ist, dass es sich anfühlt. Ich würde es als Unter-Tag zum Site-Logo machen und die Leerzeichen entfernen. Influentials Network: Beeinflusst, Informiert, Inspiriert.
Was die Navigation angeht, so ist dies einer meiner Lieblingsteile der Seite, einfach weil das Schwarze etwas dringend benötigten Kontrast zur Seite bringt. Ich würde nach anderen Orten suchen, um dieses Thema zu wiederholen.
Widgets
Neben dem Hauptinhalt befinden sich auf beiden Seiten Seitenleisten, die verschiedene Widgets und Inhaltsbereiche wie die folgenden enthalten:
Alles in allem könnte jeder von ihnen etwas mehr Finesse und Finesse gebrauchen. Zum Beispiel das? What the Hill? Abschnitt oben könnte eine kurze Beschreibung verwenden, die erläutert, was der Abschnitt enthält. Der Text fühlt sich hier auch ziemlich gequetscht an, einige zusätzliche Zeilenhöhen können einen langen Weg gehen.
Darüber hinaus enthält jedes der Widgets oben und unten die kleinen Auf- und Abwärtspfeile, mit denen Sie klicken können, um durch den Inhalt zu blättern. Das sieht zwar minimal aus, aber ein einfacher Bildlauf würde viel besser funktionieren.
Ein weiteres Widget, das viel Arbeit benötigt, ist der Abschnitt Fotos. Dies ist nur ein großer leerer Raum, der nicht richtig zu funktionieren scheint.
IN 10 Spalte
Der letzte Abschnitt, den wir besprechen können, ist der Hauptinhalt der Seite. Wir haben bereits das Problem der Fotogröße erwähnt und dieser Bereich sieht außerdem ziemlich anständig aus.
Eine Sache, die Sie in Betracht ziehen könnten, ist der Hover-Effekt. Momentan verschiebt sich alles um ein paar Pixel, aber die Bewegung ist so gering, dass sie sich fast wie ein Fehler anfühlt.Erhöhen Sie entweder den Betrag, um den der Inhalt verschoben wird, oder wechseln Sie zu einem anderen Element, beispielsweise einer Farbänderung.
Außerdem sehen die Freigabeknöpfe zu inkonsistent aus. Versuchen Sie, die Größe und Form jeweils gleich zu gestalten.
Fazit
Ich denke, dass diese Seite viel Arbeit braucht, aber ich denke auch, dass sie absolut machbar ist. Meine Empfehlung ist, es in Stücken zu nehmen. Konzentriere dich für eine Woche auf den Header und verbringe wirklich etwas Zeit damit, so gut wie möglich zu machen. Fahren Sie dann mit einem anderen Abschnitt fort und verbringen Sie eine weitere Woche damit, das zu verfeinern, bis es perfekt ist. Im Moment ist das Hauptproblem der Website, dass sie sich wie gehetzt anfühlt, als wäre sie noch nicht fertig zum Start, wurde aber trotzdem gestartet.
Überlegen Sie als langfristiges Ziel, wie Sie den Inhalt vereinfachen können. Beenden Sie das Hinzufügen von Features und beginnen Sie mit dem Entfernen von Features. Heben Sie den Primärinhalt besser hervor und entfernen Sie alle wichtigen Sekundärinhalte. Wenn Sie Zweifel haben, etwas zu schneiden, schauen Sie sich die Hacker News noch einmal an und überlegen Sie, wie einfach es ist!
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.