Webdesign-Kritik Nr. 13: Jährliche Designpreise
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 Annual Design Awards.
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 24 US-Dollar - deutlich weniger, als Sie für einen Berater bezahlen würden, der sich Ihre Website ansieht! Mehr erfahren Sie hier.
Über die jährlichen Design Awards
„Die Annual Design Awards (Spitzname ANNDAS) sind eine weltweite Anerkennung für hochmoderne visuelle Kommunikation, mit der herausragende Beiträge in der Designbranche belohnt werden. Wir haben einige der erstaunlichsten Talente und angesehenen Persönlichkeiten aus der ganzen Welt zusammengebracht, um dieses globale Ereignis zu beurteilen, das darauf abzielt, die führenden Designpreise zu werden und internationale Standards zu setzen. “
Hier ist ein Screenshot der Homepage:
Gesamtkonzept
Ich möchte damit beginnen, dass dies bereits eine großartig aussehende Seite ist. Ich liebe das Schwarz in Verbindung mit Orange. Diese einzelne Wiederholung einer hellen Farbe hilft dabei, die Augen des Benutzers auf die wichtigen Teile der Seite zu lenken.
Das Layout ist solide und enthält viel Leerraum. Außerdem ist das visuelle Volumen der Objekte gut verteilt, sodass die wichtigen Bereiche hervorgehoben werden.
Glücklicherweise scheinen die Leute, die das Design anderer beurteilen, selbst einen starken Sinn für Design zu haben! Nachdem wir das Ganze analysiert haben, wollen wir es Stück für Stück aufschlüsseln.
Logo-Bereich
Beginnen wir an der offensichtlichsten Stelle: oben links. Hier sehen wir das Annual Design Awards Logo als eine Art strahlende Kreisgrafik.
Das Logo ist einfach aber effektiv. Es deutet auf ein junges und nervöses Publikum hin, das nicht besonders auf klare Linien und langweiligen Minimalismus steht (die Seite ist eigentlich ziemlich sauber, aber auf eine hinterhältige Art und Weise).
Die Kreise sind eine mutige Idee, die auf subtile Weise ausgeführt wird (geschmackvoll gemacht). Es ist ein wirklich einfaches Designelement, das Ihre Aufmerksamkeit auf das Logo und folglich auf den Namen der Website lenkt. Dies würde auf einer überfüllten Site nicht funktionieren, aber diese Seite ist so einfach, dass sie kein visuelles Durcheinander verursacht und stattdessen ihren Zweck perfekt erfüllt.
Navigation
Der Navigationsbereich ist recht einfach, nur ein Text über einer horizontalen Leiste mit Unterbrechungen für jeden Abschnitt.
Die Wahl der Schriftart gefällt mir hier sehr gut. Es fühlt sich wie etwas an, das mit @ font-face gemacht wurde, also war ich überrascht, als ich auf den Code schaute und sah, dass es einfach kursiv in Georgia war.
Wenn Sie mit der Maus über einen Abschnitt fahren, wird der Balken in Orange hervorgehoben. Das ist schön, aber es fühlt sich ein wenig seltsam an, dass der Text nicht so gut funktioniert (das ist ziemlich wählerisch, aber auf großartig aussehenden Websites muss ich über etwas sprechen!).
Ich kann verstehen, warum der Designer den Text nicht so gut geändert hat, da es wahrscheinlich etwas schwierig werden würde, kleinen orangefarbenen Text auf schwarzem Hintergrund zu lesen. Vielleicht würde eine sehr leichte CSS-Transformation helfen, um den Text beim Schweben zu drehen. Es ist keine große Sache, wenn es in älteren Browsern ignoriert wird, und es wäre eine nette Anspielung auf den Logo-Stil.
Diashow
Ich liebe JavaScript-Diashows, daher finde ich diesen Abschnitt großartig. Das Bild wird nach links verschoben, wenn ein neues Bild angezeigt wird, und der Text hat einen schönen Ausblendeffekt. Ich mag auch die transparenten Rand- und Schnittmarken sehr.
Die Wiedergabe- und Pause-Taste hier schneidet sie jedoch nicht für mich. Ich sah eine Grafik vorbeiziehen, die ich mir noch einmal ansehen wollte, aber keine Möglichkeit hatte, zurück zu gehen. Folglich musste ich warten, bis es wieder kam (was eine Weile dauerte).
Ich empfehle, eine Reihe kleiner Kreissymbole einzufügen, die mit jedem Bild verknüpft sind. Es ist einfach und subtil und gibt dem Benutzer sowohl ein Gefühl dafür, wo er sich in der Diashow befindet, als auch eine gewisse Kontrolle darüber, wie bestimmte Bilder angezeigt werden.
Einstiegsbereich
Im nächsten Abschnitt würden sich Benutzer normalerweise anmelden, um daran teilzunehmen. Dies ist jedoch vorerst geschlossen, wie in der Haftnotizgrafik angegeben.
Der Sticky verstößt (absichtlich) vollständig gegen das Design und macht es so, dass Sie nicht übersehen können, dass die Einreichungen geschlossen sind. Dies funktioniert gut und informiert die Benutzer sofort über die Informationen, die sie wissen müssen.
Die Grafiken unter dem Sticky sind allerdings etwas ablenkend. Die Preise scheinen seltsam platziert zu sein, wobei einer gegen das rechteckige Feld links stößt und der andere nicht dagegen stößt. Ich bin mir nicht sicher, was genau hier passiert, aber es scheint ein wenig anders zu sein.
Fußzeile und Kontaktformular
Der letzte Bereich, den wir uns ansehen, ist das Ende der Seite, in dem Sie sich anmelden können, um Informationen zu erhalten. Es gibt auch die Standard-Fußzeilenlinks und sozialen Informationen unter dem Kontaktformular.
Ich finde es gut, dass das Kontaktformular hier und nicht auf einer speziellen Seite eingebettet ist und dass nur zwei Felder ausgefüllt werden müssen. Mir ist aufgefallen, dass die Feldbeschriftungen verschwinden, wenn Sie in das Feld klicken, und nicht wieder angezeigt werden, wenn Sie ohne Eingabe etwas ausklicken. Dies stellt ein kleines Usability-Problem dar, da ich auf der Seite herumgeklickt habe, mir dann aber nicht sicher war, welches Feld für den Namen und welches für die E-Mail war, als ich zurückkam.
Schließlich sieht der Fußzeilenbereich gut aus, aber ich würde gerne etwas Platz zwischen den Worten "Follow us" und dem zugehörigen Symbol sehen. Im Moment sind sie ein bisschen zusammengedrückt.
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.
