Webdesign-Kritik Nr. 11: Scott Block
Jede Woche schauen wir uns eine neue Website an und analysieren das Design. Wir werden sowohl auf die Bereiche hinweisen, die gut gemacht werden, als auch auf diejenigen, die etwas Arbeit gebrauchen könnten. Abschließend bitten wir Sie, Ihr eigenes Feedback zu geben.
Die heutige Website ist das persönliche Portfolio von Scott Block, einem Webdesigner aus Maryland.
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 24 US-Dollar - deutlich weniger, als Sie für einen Berater bezahlen würden, der sich Ihre Website ansieht! Mehr erfahren Sie hier.
Über Scott
„Ich lebe in Columbia Maryland, nur eine kurze Autofahrt von Baltimore und der Hauptstadt entfernt. Als ich zwölf Jahre alt war, verband ich meine Leidenschaft für die Baltimore Ravens mit meinem wachsenden Interesse an Technologie und begann Websites über die Ravens zu erstellen. Seitdem habe ich meine Fähigkeiten sorgfältig verfeinert und mache jetzt Websites für verschiedene Einzelpersonen und Organisationen. Ich bin jetzt in der Lage, HTML mit CSS, Javascript, PHP und Ajax zu kombinieren, um schöne, funktionale Websites zu erstellen. ”
Hier ist die Homepage der Site:
Obwohl es hier definitiv ein gewisses Potenzial gibt, gibt es viele Dinge, die ich auf dieser Seite beheben würde. Schauen wir sie uns einzeln an.
Farbschema
Die auf Scotts Website verwendeten Farben bilden eine ziemlich schöne Palette, wenn sie einzeln entfernt werden (siehe unten).
Ich bin jedoch nicht verrückt nach der Verteilung der Farben. Sie scheinen nur aus Gründen der Variation zufällig an Stellen auf der Seite implementiert zu werden, anstatt mit Zweck und Logik angewendet zu werden. Überlegen Sie, welche Farbauswahl Sie treffen und wie sie mit dem Rest des Inhalts auf der Seite verknüpft ist.
Logo
Aufgrund seiner Position oben links auf der Website ist dieses Logo das erste, was Benutzer sehen, wenn sie die Bühne besuchen. Sie möchten diese Gelegenheit nutzen, um einen starken ersten Eindruck zu hinterlassen. Leider habe ich das Gefühl, dass dieses Logo zu kurz kommt.
Ich kann sehen, wie Blockformen in die Buchstaben eingearbeitet werden, vermutlich um sie mit dem Nachnamen des Designers zu verknüpfen, aber es funktioniert einfach nicht. Der SB ist ziemlich gut lesbar und fühlt sich etwas veraltet an.
Navigation und Header als Ganzes
Der Navigationsbereich ist ziemlich einfach, nur ein Text mit horizontalen Trennwänden und einer Unterstreichung, um die aktuelle Seite anzuzeigen. Ich bin alle dafür, die Navigation einfach zu halten, daher denke ich, dass dieser Bereich gut gemacht ist.
Wenn Sie mit der Maus über einen Link in der Navigation fahren, wird unter dem Scott Block-Logo ein Symbol angezeigt. Dies ist ein ordentlicher Effekt, den ich noch nie so ausgeführt gesehen habe (mit dem Hover-Effekt, der so weit vom Link entfernt ist).
Wenn Sie den Header-Bereich als Ganzes betrachten, gibt es einige bemerkenswerte Probleme, die eine Adressierung erfordern könnten. Wie ich oben sagte, ist der Symbol-Hover-Effekt ordentlich, verursacht aber einige Probleme. Wenn Sie nicht mit der Maus über einen Link in der Navigation fahren, befindet sich neben der Header-Kopie eine große leere Stelle, an der Sie sich fragen, warum sie nicht mit irgendetwas ausgerichtet ist.
Eine Möglichkeit, dies zu unterstützen, besteht darin, ein Symbol auf den Standardstatus anzuwenden, das sich beim Bewegen des Mauszeigers über einen Link in ein anderes Symbol ändert und beim Beenden des Mauszeigers zum ursprünglichen Symbol zurückkehrt. Wenn der Symbol-Hover-Effekt vorhanden ist, bilden das Logo und das Symbol leider einen unangenehmen vertikalen Stapel.
Insgesamt könnte der negative Raum in diesem Bereich eine vollständige Umstrukturierung gebrauchen. Abgesehen von dem Problem mit dem fehlenden Symbol nimmt das Hauptlogo einfach zu viel vertikalen Platz ein und erzeugt seltsame Lücken.
Ausgewählter Bereich
Ich mag Wiederholungen in einem Design, und ich kann sehen, wie die Winkel in diesem Abschnitt die des Logos widerspiegeln, aber da es im Logo nicht wirklich funktioniert, gilt dies auch hier. Die Schrägstellung der Überschriften wirkt etwas seltsam, ebenso wie das Kreuzmuster, das durch die Farben hier erzeugt wird.
Unbewusst möchte Ihr Gehirn die beiden Elemente verbinden, die dieselbe Farbe haben, aber hier sind die beiden Bereiche nicht miteinander verbunden.
Darüber hinaus gibt es eine Reihe von Schwebeeffekten in diesem Bereich, die keinen Zweck erfüllen. Wenn Sie mit der Maus über einen Abschnitt fahren, wird ein Schlagschatten erstellt. Das Web hat uns gelehrt, solche Aktivitäten als Hinweis darauf zu erkennen, dass das, worüber wir schweben, ein anklickbarer Bereich ist. Diese Bereiche sind jedoch nicht anklickbar und verursachen das Gefühl, dass sie nur Verwirrung für den Benutzer hervorrufen.
Fusszeile
Die Fußzeile ist ziemlich einfach, aber wir sehen wieder, dass es einiges an Verfeinerung gebrauchen könnte.
Erstens befindet sich der Knopf an einer unangenehmen Stelle. Seien Sie beim Entwerfen immer vorsichtig, wenn Sie nur Dinge in Löcher stecken, nur weil Sie Platz haben. Eine starke Linksausrichtung wird hier durch den Text hergestellt, aber dann durch die Platzierung der Schaltfläche ruiniert.
Außerdem ist die Button-Hover-Animation etwas zu viel. Hier wird ein Bildsprite verwendet, und es gibt eine Animation zwischen den beiden Schaltflächenzuständen, in der Sie sehen können, wie ein Teil des Bildes herausgleitet, während der andere hineingleitet. Es ist nicht einfach zu erkennen, was zuerst passiert, und es ist daher etwas beunruhigend.
Allgemeine Empfehlungen
Ich habe oben einige scharfe Kritiken vorgelegt, und ich denke, es wäre am besten, alles zusammenzubinden. Hier sind meine Vorschläge:
Gestalten Sie das Logo zunächst neu und moderner. Stellen Sie dann eine harte linke Ausrichtung ganz unten auf der Seite her. Richten Sie den Navigationsbereich und den darunter liegenden Kopierblock links auf der Seite aus und verschieben Sie möglicherweise das neue Logo nach rechts.
Variieren Sie die Größe des Texts auf der Seite, um klare Überschriften und unterstützende Kopien zu erstellen. Alles ist derzeit sehr groß. Denken Sie daran: Wenn Sie alles zu etwas Besonderem machen, ist nichts Besonderes.
Werfen Sie die aktuellen Formen im Abschnitt "Vorgestellt" und in der riesigen Liste mit Aufzählungszeichen aus (integrieren Sie Ihre Dienste an einer anderen Stelle). Erstellen Sie eine einzelne große Projektvorschau, die sich über den gesamten Inhaltsbereich erstreckt.
Zum Schluss überarbeiten Sie die Fußzeile so, dass die linke Ausrichtung oben berücksichtigt wird. Mit anderen Worten, holen Sie diesen Knopf aus der rechten Ecke.
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 ohne harte Beleidigungen zu geben.
Möchten Sie Ihre eigene Website kritisieren lassen? Mehr erfahren Sie hier.
