Willkommen zu unserer 40. Designkritik! 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 FanExtra, eine fantastische Ressourcenseite für Designer.
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 34 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.
Über FanExtra
Das alles begann mit einem langen Sommer vor über zwei Jahren und einer Leidenschaft für Design. Nachdem ich einige der Photoshop-Tutorials genossen hatte, die zu dieser Zeit veröffentlicht wurden, beschloss ich, einige meiner eigenen zu schreiben. Ich habe zu diesem Zweck einen Blog eingerichtet (PSDFAN.com) und ihn als kreatives Outlet genutzt. Ich wollte mehr für unsere wachsende Community anbieten und PSDFAN zu etwas Größerem weiterentwickeln können. Die Idee für FanExtra wurde bald geboren! Das FanExtra-Netzwerk ist ein Ort, an dem Designer aus der ganzen Welt zusammenkommen und ihre Ideen und Kreativität erkunden können. Sie können an den Diskussionen in unseren Foren teilnehmen oder Ihr Lernen durch unser FanExtra-Mitgliedschaftsprogramm verbessern.
Hier ist ein Screenshot der Homepage:
Erster Eindruck
FanExtra ist einer der interessantesten Fälle für eine Design-Kritik, die wir bisher hatten. Der Grund dafür ist, dass es sich um eine wirklich attraktive Seite handelt, die ich jedoch empfehlen würde, fast komplett neu gedacht zu werden.
Jeder Abschnitt auf der Seite, vom Logo bis zu den Miniaturansichten, sieht gut aus. Wenn Sie jedoch die Seite als Ganzes betrachten, gibt es neben dem größten Problem einige echte Probleme mit dem Fluss jedes Abschnitts, nämlich der Klarheit der Kommunikation der Hauptnachricht.
Dieses Problem tritt häufig auf und ist auf ein sehr schmutziges Wort im Webdesign zurückzuführen: Annahme. Hier ist der Designer wahrscheinlich nahe am Projekt und hat daher natürlich Schwierigkeiten, zu erkennen, dass ein Besucher möglicherweise nicht versteht, was los ist. Die Annahme ist, dass ein Besucher, der diese Seite findet, weiß, was? FanExtra? ist, was hier definitiv nicht anzunehmen ist.
Die Kommunikation
Wenn Sie auf einer Webseite landen, analysieren Sie den Kopfzeilenbereich instinktiv auf dieselbe Weise, wie Sie die Menüleiste in einem Fast-Food-Restaurant analysieren würden. Mögliche Fragen sind: Wo bin ich? Was kostet es? Was geben sie mir für mein Geld? Bieten sie Cola oder Pepsi-Produkte an? Ok, vielleicht trifft die letzte Frage hier nicht zu.
Mein Punkt ist, wenn Sie sich die Kopfzeile dieser Site ansehen, werden nicht alle diese wichtigen Fragen adäquat beantwortet:
Wir sehen, wie die Site (FanExtra) genannt wird, zusammen mit einem großen Feld für eine Art Anmeldung. Bedeutet das, dass ich für das Netzwerk angemeldet bin? Ist das also ein kostenloser Service? Auf der rechten Seite sehen wir etwas, das auf "Tutorials" verweist, was uns auf den richtigen Weg bringt, gefolgt von Wörtern wie "Texturen". und "Vektoren", die einen ziemlich spezifischen Jargon darstellen.
Wenn ich Designer bin, habe ich an dieser Stelle wahrscheinlich herausgefunden, was in gewissem Maße vor sich geht, aber ist das wirklich das Ziel hier? Soll der Besucher Hinweise finden und verwenden, um die Website zu interpretieren?
Das Geheimnis wird enthüllt
Wenn wir zur Mitte der Website gelangen, wird das Rätsel enthüllt:
Jetzt können wir sehen, dass FanExtra ein Netzwerk von tollen Tutorialseiten ist. Mitgliedschaften für $ 9 pro Monat anbieten. Dies ist das wichtigste Kommunikationsmittel auf der Seite, und dennoch ist es auf halber Höhe der Seite versteckt. Dies sollte das erste sein, was der Benutzer sieht.
Ich denke, diese Botschaft könnte noch klarer sein. Die Phrase? Tolle Tutorial-Websites? ist immer noch ziemlich vage, wenn Sie aus der Perspektive eines Außenstehenden darüber nachdenken. So etwas wie fantastische Tutorialseiten für kreative Profis? würde diese Aussage wirklich viel weiter bringen. Sofort haben Sie Ihre Zielgruppe direkt an die Nase gehängt, so dass ich, wenn ich diese Seite finde, eine nette Begrüßung sehe, die mich darüber informiert, dass diese Seite speziell für Leute wie mich ist.
Visueller Kontrast vs. visuelle Störungen
Ein weiteres Problem, das ich mit dem Messaging sehe, ist, wie es vom visuellen Standpunkt aus strukturiert ist. Schauen wir uns die primäre Kommunikation so an, wie sie aktuell ist:
Hier sehen wir einen Stapel von drei Zeilen, die jeweils unterschiedlichen Farbtext und geringfügige Variationen derselben Schriftart in Bezug auf Fettdruck und Größe verwenden. Ich kann und habe ganze Artikel über Kontrast im Design geschrieben, aber worauf es ankommt, lässt sich am besten mit einem Ratschlag von Design-Autor Robin Williams sagen: "Seien Sie kein Wimpern". Damit meint sie, dass die Elemente wirklich stark voneinander entfernt sein müssen, um den Kontrast effektiv nutzen zu können. Andernfalls ist das Ergebnis einfach nur visuelles Durcheinander.
Sehen Sie sich an, wie ein anderes beliebtes Designmitgliedschaftsprogramm, Think Vitamin, die Hauptbotschaft auf ihrer Seite strukturiert.
Hier sehen wir einen riesigen, massiv überbewerteten Kontrast zwischen der Überschrift und dem Untertitel. Das Ergebnis ist eine schöne und klare Kommunikation, die perfekt liest. Leute, die auf der Seite surfen, lesen die Überschrift fast aus Versehen, und wenn sie weiter interessiert sind, können sie sich die Zeit nehmen, um den Untertitel zu lesen.
Die Funktionen
Die Seite endet mit einer Vielzahl von Aufzählungspunkten, die auf der linken Seite ablaufen. Dies ist eine ziemlich umständliche Nutzung des Raums und führt zu einer unangenehmen Lücke auf der rechten Seite.
Um dieses Problem zu beheben, müssen Sie einfach die Aufzählungspunkte in zwei separate Stapel aufteilen:
Dies ist jedoch letztendlich eine Pflasterhilfe und ich denke, die Seite könnte eine größere Operation erfordern. Wir werden das im nächsten Abschnitt kurz ansprechen.
Mein? Großes Bild? Empfehlungen
Ehrlich gesagt glaube ich nicht, dass das ungebrochene Doppelsäulen-Setup für diese Site funktioniert. Es ist zu starr und stört eigentlich den natürlichen Kommunikationsfluss, statt es zu erleichtern, was das Ziel eines strukturierten Layouts ist.
Meine Empfehlung ist, dieses Layout vollständig zu verwerfen. Graben Sie zuerst die starre Doppelsäulenstruktur ab. Verschieben Sie als Nächstes die primäre Kommunikation an den Anfang der Seite. Ein großes machen? Dieses Feld erstreckt sich über die gesamte Seitenbreite und hebt einige Inhalte hervor, die Sie später aufschlüsseln (140 Dateien, 40 Vektoren usw.). Stellen Sie sicher, dass die Überschrift starken Kontrast, kristallklare Phrasierung und Targeting sowie höchstens zwei Farben aufweist, die zusammen gut aussehen.
Nachdem Sie diesen fantastischen Kopfzeilenbereich erstellt haben, der genau beschreibt, worum es sich bei der Site handelt, für wen sie gedacht ist und welche Grundlagen darin enthalten sind, können Sie sich darauf konzentrieren, Ihre anderen Informationen darunter zu organisieren, möglicherweise in zwei oder drei Spalten.
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.