Jede Woche schauen wir uns eine neue Website an und analysieren das Design. Wir werden sowohl auf die Bereiche hinweisen, die gut erledigt werden, als auch auf die Bereiche, in denen etwas Arbeit benötigt wird. Zum Schluss 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 Design-Kritik einreichen möchten, dauert dies nur wenige Minuten. Für die Bewertung Ihres Designs berechnen wir 24 US-Dollar - deutlich weniger, als wenn Sie einen Berater für einen Blick auf Ihre Website bezahlen würden! Hier erfahren Sie mehr.
Über Scott
Ich lebe in Columbia, Maryland, nur eine kurze Autofahrt von Baltimore und der Hauptstadt der USA entfernt. Als ich zwölf Jahre alt war, kombinierte 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 Personen und Organisationen. Ich kann jetzt HTML mit CSS, Javascript, PHP und Ajax kombinieren, um schöne, funktionale Websites zu erstellen. ?
Hier ist die Homepage der Site:
Obwohl hier definitiv ein gewisses Potenzial vorhanden ist, gibt es viele Dinge, die ich auf dieser Seite reparieren würde. Schauen wir uns sie einzeln an.
Farbschema
Die Farben, die auf der Website von Scott verwendet werden, erzeugen eine recht schöne Palette, wenn sie einzeln herausgenommen werden (siehe unten).
Ich bin jedoch nicht verrückt nach der Verteilung der Farben. Sie scheinen zufällig in Stellen auf der Seite implementiert zu werden, nur um der Variation willen, anstatt mit Zweck und Logik angewendet zu werden. Überlegen Sie, welche Farbauswahl Sie wählen und wie sie mit dem restlichen Inhalt der Seite verknüpft wird.
Logo
Seine Position oben links auf der Website macht dieses Logo zu den ersten Dingen, die 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 kurz wird.
Ich kann sehen, wie Blockformen in die Buchstaben eingearbeitet werden, vermutlich, um an den Nachnamen des Designers gebunden zu sein, aber es funktioniert einfach nicht. Der SB ist ziemlich schlecht lesbar und fühlt sich etwas veraltet an.
Navigation und Kopfzeile als Ganzes
Der Navigationsbereich ist ziemlich einfach, nur etwas Text mit horizontalen Trennlinien und einer Unterstreichung, um die aktuelle Seite anzuzeigen. Ich halte alles für die einfache Navigation, deshalb denke ich, dass dieser Bereich gut gemacht ist.
Wenn Sie den Mauszeiger über einen Link in der Navigation bewegen, wird ein Symbol unter dem Scott Block-Logo angezeigt. Dies ist ein netter Effekt, den ich noch nie so ausgeführt habe (mit dem Hover-Effekt so weit weg von der Verknüpfung).
Wenn Sie den Kopfbereich als Ganzes betrachten, gibt es einige bemerkenswerte Probleme, die die Adressierung verwenden könnten. Wie bereits gesagt, ist der Icon-Hover-Effekt zwar ordentlich, verursacht jedoch einige Probleme. Wenn Sie nicht über einen Link in der Navigation schweben, befindet sich neben der Kopfzeilenkopie eine große leere Stelle, an der Sie sich fragen, warum sie nicht mit etwas ausgerichtet ist.
Eine Möglichkeit, dies zu erreichen, besteht darin, ein Symbol auf den Standardstatus anzuwenden, der sich in ein anderes Symbol ändert, wenn Sie den Mauszeiger über einen Link bewegen und nach dem Ende des Mauszeigers zum ursprünglichen Symbol zurückkehren. Wenn der Symbol-Hover-Effekt vorhanden ist, erzeugen das Logo und das Symbol leider einen unbeholfenen vertikalen Stapel.
Insgesamt könnte der negative Bereich in diesem Bereich eine vollständige Umstrukturierung erfordern. Neben dem Problem mit dem fehlenden Symbol nimmt das Hauptlogo zu viel vertikalen Abstand ein und erzeugt seltsame Lücken.
Vorgestellter Bereich
Ich mag Wiederholungen in einem Design, und ich kann sehen, wie die Winkel in diesem Abschnitt die des Logos widerspiegeln. Da das Logo jedoch nicht wirklich funktioniert, gilt dies auch hier. Die schräge Natur der Überschriften fühlt sich ebenso seltsam an wie das durch die Farben hier erzeugte Kreuzmuster.
Ihr Gehirn möchte unbewusst die beiden gleichfarbigen Elemente miteinander verbinden, aber hier sind die beiden Bereiche nicht miteinander verbunden.
Darüber hinaus gibt es eine Reihe von Hover-Effekten in diesem Bereich, die keinen Zweck haben. Wenn Sie den Mauszeiger über einen Abschnitt bewegen, wird ein Schlagschatten erstellt. Das Web hat uns gelehrt, eine solche Aktivität als Hinweis darauf zu erkennen, dass es sich bei uns um einen anklickbaren Bereich handelt. Diese Bereiche sind jedoch nicht anklickbar und führen dazu, dass sie das Gefühl haben, dass sie nur für den Benutzer Verwirrung stiften.
Fußzeile
Die Fußzeile ist ziemlich einfach, aber wir sehen auch, dass sie einiges an Verfeinerung brauchen könnte.
Zunächst befindet sich der Knopf an einer unangenehmen Stelle. Seien Sie beim Design immer vorsichtig, nur Dinge in Löcher zu stecken, nur weil Sie Platz haben. Eine starke linke Ausrichtung wird hier durch den Text festgelegt, aber durch die Platzierung der Schaltfläche zerstört.
Außerdem ist die Button-Hover-Animation etwas zu viel. Hier wird ein Image-Sprite verwendet, und zwischen den beiden Schaltflächenzuständen befindet sich eine Animation, bei der Sie sehen können, wie ein Teil des Bildes aus dem anderen Bild herausgleitet. Es ist nicht leicht zu erkennen, was zuerst passiert, und es ist daher etwas verwirrend.
Allgemeine Empfehlungen
Ich habe oben einige scharfe Kritiken vorgetragen, und ich denke, es wäre das Beste, wenn ich versuchen würde, alles miteinander zu verbinden. Hier sind meine Vorschläge:
Um zu beginnen, gestalten Sie das Logo etwas moderner und horizontaler. Stellen Sie dann eine starke linke Ausrichtung auf der ganzen Seite ein. Richten Sie den Navigationsbereich und den darunter befindlichen Block auf der linken Seite aus und verschieben Sie das neue Logo möglicherweise nach rechts.
Passen Sie die Textgröße auf der Seite an, um klare Überschriften und unterstützende Kopien zu erstellen. Alles ist momentan sehr groß. Denken Sie daran: Wenn Sie alles zu etwas Besonderem machen, ist nichts Besonderes.
Werfen Sie die aktuellen Shapes in dem vorgestellten Abschnitt und in der riesigen Liste mit Aufzählungszeichen (integrieren Sie Ihre Dienste an anderer Stelle). Erstellen Sie eine einzelne große Vorschau von vorgestellten Projekten, die sich über den gesamten Inhaltsbereich erstreckt.
Zuletzt überarbeiten Sie die Fußzeile so, dass die linke Ausrichtung oben berücksichtigt wird.Mit anderen Worten: Holen Sie den Knopf aus der rechten Ecke.
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.
Möchten Sie Ihre eigene Website kritisieren? Hier erfahren Sie mehr.