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 Redka3d, das persönliche Portfolio eines Webdesigners aus Indonesien.
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 den Websitebesitzer
Familie und Freunde nennen mich Tata, ich bin ein Webdesigner aus Indonesien und wohne derzeit in Jakarta. ?
Hier ist ein Abschnitt von Tata's Homepage:
Site Performance
Bevor wir mit unserer Designkritik beginnen, muss ich sagen, dass das Laden der Seiten genauso wichtig sein kann oder sogar noch mehr als das Aussehen der Website. Das Hochgeschwindigkeits-Internet hat uns alle verwöhnt und die Benutzer warten nicht länger als ein paar Sekunden, bis eine Seite geladen wird.
Redka3d scheint unter sehr langen Ladezeiten zu leiden. Dies ist wahrscheinlich ein vorübergehendes Problem mit dem Server, aber nur für den Fall, dass es auf ein langfristiges Problem hinweist, dachte ich, ich würde es mir empfehlen.
Header
Sie können sofort sehen, dass diese Site einzigartig sein wird. Die Idee hier ist sicherlich kühn anders; Der Name der Site ist in einem großen Dreieck mit unterschiedlichen Buchstabengrößen eingeschlossen.
Ich gebe zu, dass dieser Abschnitt ästhetisch nicht mein Favorit ist. Da es jedoch unkonventionell ist, gewinnt der Designer einige Stilpunkte.
Ein paar Bereiche müssen jedoch auf jeden Fall angegangen werden. Erstens bluten die Buchstaben im Logo auf unangenehme Weise aus dem Dreieck. Da die Buchstaben dieselbe Farbe wie der Hintergrund der Site haben, wirken sie wie Löcher, die in das Dreieck geschnitten werden. Sie teilen jedoch den Schatten der Form nicht, sodass sie nicht wirklich aus der Form herausgeschnitten werden. An den Rändern brechen die Buchstaben sogar aus dem Dreieck heraus und verdecken Teile ihres Schattens. Dies führt zu einer visuellen Verwirrung darüber, was hier wirklich vor sich geht. Ich empfehle, die Buchstaben entweder zu maskieren, damit sie nicht ausbluten, oder sie tatsächlich aus dem Dreieck zu schneiden.
Ein weiterer Bereich, der etwas Aufmerksamkeit erregen könnte, ist der Pfeil. Die Kopie fordert Benutzer dazu auf, hier zu klicken. mit einem großen Pfeil, aber es gibt nichts am Ende des Pfeils, so dass es sich anfühlt, als ob etwas nicht richtig geladen wurde. In Wahrheit ist das Element, auf das der Pfeil zeigt, sehr klein und sehr weit vom Pfeil entfernt (der Text "Wer bin ich?"). Ich empfehle, die Funktionsweise dieses Bereichs zu überdenken, indem Sie entweder den Pfeil, den Text oder beides ändern, um sie deutlicher miteinander zu verbinden.
Schließlich möchten Sie vielleicht mit den Schatten- und Textfarben der Site herumspielen. In der Regel versuche ich zu vermeiden, dass der Schatten meiner Schatten zu nahe an den Objekten liegt, auf die sie angewendet werden. Der Grund ist, dass wenn diese Farben zu ähnlich sind, der Schatten fast wie eine Unschärfe aussieht und nicht wie ein Schatten. Eine einfache Lösung für dieses Problem besteht darin, den Schatten aufzuhellen, sodass er sich deutlich vom Text unterscheidet.
Sehen Sie sich nur den Unterschied an, der sich auf die Lesbarkeit Ihres Textes auswirkt.
Navigation
Die Navigation für die Site befindet sich direkt unter der Kopfzeile. Der Standardzustand ist fettgedruckter Text, der im Hover nach links verschoben wird, während eine leichtere Version eingefügt wird. Dies ist ein cooler Effekt. Der Übergang ist reibungslos und die Animation macht Spaß.
Möglicherweise möchten Sie jedoch den Abstand in den Hover-Zuständen ein wenig anpassen. Jedes Textelement ist im Standardzustand gut positioniert, driftet jedoch im Hover-Zustand zu weit nach links. In der Abbildung unten wird beispielsweise das Wort? Services? sollte zentriert sein zwischen? und? Showcase? in den Standard- und Hover-Zuständen.
Wenn Sie auf die Navigation klicken, werden neue Abschnitte über diesen 3D-Karusselleffekt angezeigt. Es ist schwer zu beschreiben oder zu zeigen. Schauen Sie also auf der Website vorbei und probieren Sie es aus. In der Tat ist die Seite nur mit kleinen, kleinen jQuery-Effekten gefüllt. Es mag für einige Umstände zu viel sein, aber es ist gut, für ein "Wow" zu schießen. Faktor auf einem persönlichen Portfolio.
Follow-Me-Abschnitt
Der letzte Bereich, den wir besprechen werden, ist der soziale Netzwerkknoten am unteren Rand. Wegen des großen Follow Me? Text ist dieser Bereich ziemlich hoch in der visuellen Hierarchie, obwohl er sich am unteren Rand der Seite befindet.
Die Tatsache, dass dieser Bereich für Aufmerksamkeit sorgt, kann je nach den Absichten des Designers entweder gut oder schlecht sein. Wenn dieser Bereich einer der wichtigsten Aspekte der Website sein soll, funktioniert er. Wenn dies nicht der Fall ist, würde ich empfehlen, das Design so zu verändern, dass es nicht so sehr vom oben genannten Inhalt ablenkt.
Was die sozialen Symbole angeht, finde ich, dass sie visuell zu komplex sind. Das ganze Shadowing kann etwas unordentlich werden, besonders im Digg-Symbol. Diese würden sich viel besser lesen, wenn sie invertiert und vereinfacht wären. Hier ist ein kurzer Überblick über das, was ich meine.
Im Kontext des Restes der Seite sieht der Twitter-Feed schließlich ein bisschen wie eine Anzeige aus. Google hat unsere Augen trainiert, alles, was einer Textanzeige ähnelt, vollständig zu ignorieren. Ich würde wetten, dass viele Zuschauer das überspringen, ohne zu wissen, was es ist. Versuchen Sie, mit dem Styling ein wenig mehr zu spielen, die blauen Links aufzuheben und zusätzliche vertikale Abstände hinzuzufügen, so dass es weniger wie eine Werbung aussieht und eher eine Funktion der Website darstellt.
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.