Webdesign-Kritik Nr. 40: FanExtra
Willkommen zu unserer 40. Designkritik! Jede Woche schauen wir uns eine neue Website an und analysieren das Design. 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 FanExtra, eine fantastische Ressourcenseite für Designer.
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 34 US-Dollar - deutlich weniger, als Sie für einen Berater bezahlen würden, der sich Ihre Website ansieht! Mehr erfahren Sie hier.
Über FanExtra
„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. Zu diesem Zweck habe ich ein Blog eingerichtet (PSDFAN.com) und es als kreatives Medium verwendet. Ich wollte mehr für unsere wachsende Community bieten und PSDFAN zu etwas Größerem entwickeln können. Die Idee für FanExtra war bald geboren! Das FanExtra-Netzwerk ist ein Ort, an dem Designer aus aller 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 wirklich fördern. “
Hier ist ein Screenshot der Homepage:
Erster Eindruck
FanExtra ist einer der interessantesten Fälle für eine Designkritik, die wir bisher hatten. Der Grund dafür ist, dass es sich tatsächlich um eine wirklich attraktive Seite handelt, die ich jedoch empfehlen würde, fast vollständig zu überdenken.
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, nämlich der Klarheit der Kommunikation der primären Nachricht, einige echte Probleme mit dem Ablauf jedes Abschnitts.
Dieses Problem ist weit verbreitet und entsteht aufgrund eines sehr schmutzigen Wortes im Webdesign: Annahme. Hier ist der Designer wahrscheinlich in der Nähe des Projekts und hat daher natürlich Probleme 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 angenommen werden sollte.
Die Kommunikation
Wenn Sie auf einer Webseite landen, analysieren Sie den Kopfbereich instinktiv auf dieselbe Weise wie die Menüleiste in einem Fast-Food-Restaurant. Mögliche Fragen sind: Wo bin ich? Was kostet es? Was geben sie mir für mein Geld? Servieren sie Cola oder Pepsi? Ok, vielleicht trifft diese letzte Frage hier nicht zu.
Mein Punkt ist, wenn Sie sich den Header dieser Site ansehen, werden all diese entscheidenden Fragen nicht angemessen beantwortet:
Wir sehen, wie die Site heißt (FanExtra), 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? Rechts sehen wir etwas, das auf „Tutorials“ hinweist, die uns auf den richtigen Weg bringen, gefolgt von Wörtern wie „Texturen“ und „Vektoren“, die einen ziemlich spezifischen Jargon darstellen.
Wenn ich Designer bin, habe ich an diesem Punkt wahrscheinlich herausgefunden, was bis zu einem gewissen Grad vor sich geht, aber ist das wirklich das Ziel hier? Sollte der Besucher Hinweise finden und diese verwenden müssen, um die Website zu interpretieren?
Das Geheimnis wird gelüftet
Wenn wir zur Mitte der Website gelangen, wird das Geheimnis gelüftet:
Jetzt können wir sehen, dass FanExtra „ein Netzwerk großartiger Tutorial-Sites“ ist, die Mitgliedschaften für 9 US-Dollar pro Monat anbieten. Dies ist die wichtigste Kommunikation auf der Seite, und dennoch ist sie auf halber Höhe der Seite versteckt. Dies sollte das erste sein, was der Benutzer sieht.
Tatsächlich denke ich, dass diese Botschaft noch deutlicher sein könnte. Der Ausdruck „fantastische Tutorial-Sites“ ist immer noch ziemlich vage, wenn Sie aus der Sicht eines Außenstehenden darüber nachdenken. So etwas wie "tolle Tutorial-Sites für Kreative" würde diese Aussage wirklich viel weiter bringen. Sie haben Ihre Zielgruppe sofort direkt an die Nase gebunden, sodass ich, wenn ich diese Seite finde, einen schönen, herzlichen Gruß sehe, der mich darüber informiert, dass diese Website speziell für Leute wie mich gedacht ist.
Visueller Kontrast vs. visuelle Unordnung
Ein weiteres Problem, das ich bei den Nachrichten sehe, ist die visuelle Struktur. Werfen wir einen Blick auf die aktuelle aktuelle Kommunikation:
Hier sehen wir einen Stapel von drei Zeilen, die jeweils unterschiedliche Farbtexte und geringfügige Abweichungen 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 in einem Ratschlag des Designautors Robin Williams sagen: „Sei kein Weichei.“ Damit meint sie, dass die Elemente wirklich stark voneinander abweichen müssen, um den Kontrast effektiv zu nutzen, sonst ist das Ergebnis einfach visuelle Unordnung.
Lesen Sie, wie ein anderes beliebtes Design-Mitgliedschaftsprogramm, Think Vitamin, die Hauptbotschaft auf ihrer Seite strukturiert.
Hier sehen wir einen riesigen, massiv überbewerteten Kontrast zwischen Überschrift und Überschrift. Das Ergebnis ist eine schöne und klare Kommunikation, die perfekt liest. Leute, die auf der Seite surfen, lesen die Überschrift fast zufällig, und wenn sie weiter interessiert sind, können sie sich die Zeit nehmen, die Überschrift zu lesen.
Die Funktionen
Die Seite endet mit einem massiven Satz von Aufzählungspunkten auf der linken Seite. Dies ist eine ziemlich umständliche Nutzung des Raums und führt zu einer unangenehmen Lücke auf der rechten Seite.
Die schnelle Lösung besteht darin, die Aufzählungspunkte einfach in zwei separate Stapel aufzuteilen:
Dies ist letztendlich ein Pflaster, und ich denke, die Seite könnte tatsächlich eine größere Operation gebrauchen. Wir werden dies im nächsten Abschnitt kurz ansprechen.
Meine "Big Picture" -Empfehlungen
Ehrlich gesagt glaube ich nicht, dass das ungebrochene Doppelspalten-Setup für diese Site funktioniert. Es ist zu starr und stört den natürlichen Kommunikationsfluss, anstatt ihn zu erleichtern, was das Ziel eines strukturierten Layouts ist.
Meine Empfehlung ist, dieses Layout komplett wegzuwerfen. Lassen Sie zuerst die starre Doppelsäulenstruktur fallen. Verschieben Sie als Nächstes die primäre Kommunikation an den Anfang der Seite. Erstellen Sie ein großes Feld mit Funktionen, das sich über die gesamte Seitenbreite erstreckt und einen Teil des Inhalts hervorhebt, den Sie später aufschlüsseln (über 140 Dateien, 40 Vektoren usw.). Stellen Sie sicher, dass die Überschrift einen starken Kontrast, kristallklare Phrasierung und Ausrichtung sowie höchstens zwei Farben verwendet, die zusammen gut aussehen.
Nachdem Sie diesen fantastischen Header-Bereich erstellt haben, der genau beschreibt, was die Site ist, für wen sie bestimmt ist und welche Grundlagen sie enthält, können Sie sich darauf konzentrieren, Ihre anderen Informationen darunter zu organisieren, möglicherweise in einem zwei- oder dreispaltigen Format.
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.
