Webdesign-Kritik # 17 ToonyTuts

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 Seite ist die bald erscheinende ToonyTuts-Seite.

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 ToonyTuts

Da ToonyTuts das sehr geheime Projekt von Liam McCabe ist, ist zu diesem Zeitpunkt wenig darüber bekannt. Auf der persönlichen Website von Liam können wir sehen, dass ToonyTuts als Ort für "unglaublich lustige und kreative Tutorials" beschrieben wird. Ich kann nur davon ausgehen, dass ToonyTuts eine eindrucksvoll illustrierte Tutorial-Site mit viel Spaß und Humor sein wird, um den Lernprozess zu erleichtern (großartige Idee!).

Hier ist ein Screenshot der kommenden Seite:

Einige unserer Kritik-Themen sind voll inhaltlich und erfordern einiges an Analyse, aber diese Seite ist sowohl einfach als auch attraktiv, so dass es nicht zu viel Kritik gibt. Lassen Sie uns es wie immer Stück für Stück aufteilen.

Gesamtkonzept

Das ToonyTuts-Design ist gut? toony Helle Farben, lustige Schriften und stark abgerundete Ecken tragen zu diesem tollen Cartoon-Stil bei.

Die Strahlen im Hintergrund lenken Ihre Aufmerksamkeit auf das Logo in der Mitte und sorgen für Aufregung beim Design.

Das Logo

Die Logo-Schrift ist eine perfekte Auswahl für den Inhalt. Beachten Sie, dass es definitiv Spaß macht und trotzdem gut lesbar ist. Die Großbuchstaben? T? Zeichen sind wirklich der einzige Buchstabe, der erheblich verzerrt ist, wobei die vertikalen Linien oben in eine diagonale Form geneigt sind.

Der Teil, der Ihre Aufmerksamkeit wirklich erregt, ist der dicke schwarze Strich. Dies steht im starken Kontrast zu den blauen Buchstaben mit einem subtilen, aber attraktiven Verlauf. Der Strich ist auch an den Rändern stark abgerundet, auch wenn die tatsächlichen Buchstaben dies nicht sind. Dies ist der eigentliche Trick, um die Lesbarkeit zu erhalten und gleichzeitig ein lustiges, fast kindliches Erscheinungsbild zu vermitteln.

Die Akzentschrift unter dem Logo ist viel verspielter mit verzerrten Buchstaben, die direkt aus einem Goofy-Cartoon aussehen. Dieser Typ wird klein gehalten, sodass der Effekt nicht übermächtig ist, sondern in genau der richtigen Menge.

Ich liebe es, dass hier ein Twitter-Vogel geworfen wurde. Es passt perfekt zum Wolkenmotiv und wirkt überhaupt nicht nachträglich. Diejenigen, die mit der Marke Twitter vertraut sind, werden das Symbol erkennen und durchklicken, wenn sie ToonyTuts folgen möchten.

Hinterlistiger Blick

In dem kleinen Anmeldefeld kommen die abgerundeten Ecken zum Einsatz. Dieser Bereich musste funktional sein und dennoch perfekt zum restlichen Design passen. Beachten Sie den Farbspritzer, der Ihre Aufmerksamkeit erregt.

Ich finde es gut, dass das Feld einen Schatteneffekt hat, der es so aussehen lässt, als würde der Button den gleichen Schatten in eine andere Richtung verwenden, um den Eindruck zu erwecken, als ob er etwas von der Seite kommt. Wenn diese Schatten gefiedert wären, würden sie ein Gefühl von Realismus vermitteln, das mit dem Rest des Designs kollidieren würde, aber sie wurden hart gehalten, damit sie dem Kartuschenstil folgen.

Willst du einen hinterlistigen Blick? Text ist tatsächlich live und wählbar. Es ist eine Schriftart namens DoctorSoosBold, die hier mit @ font-face implementiert wurde. Ich mag die Wahl der Schriftart, aber ich mag die Implementierung des Schattens hinter dem Text nicht. Der dunkle Schatten ragt nur geringfügig aus dem Text hervor und lässt die Buchstaben daher etwas unordentlich aussehen, anstatt das eigentliche Ziel der Lesbarkeit zu erreichen.

Mein Vorschlag ist, diesen Schatten ein wenig nach unten und unten zu verschieben, damit der Text nicht so aussieht, als ob er nur schwarze Teile eingemischt hätte.

Animation & Musik

Beim ersten Laden der Seite werden die Animationen automatisch gestartet. Die Wolken schweben langsam versetzt auf und ab, während sich die Strahlen im Hintergrund im Uhrzeigersinn drehen.

Da die Seite so einfach ist, fügt der Animationseffekt dem Erlebnis wirklich viel hinzu. Wenn Sie den Code aufbrechen, können Sie feststellen, dass zur Durchführung der Animationen Webkit-Funktionen verwendet wurden, damit Sie sie nicht in anderen Browsern sehen können.

Ich sehe das gar nicht als Problem an. Wenn Sie die Seite in einem Browser anzeigen, der die Animationen nicht unterstützt, ist sie dennoch funktional und ästhetisch ansprechend.

Neben der Animation gibt es einen wunderbar zirkusähnlichen Musikclip, der beginnt, wenn Sie oben rechts auf die Wiedergabetaste klicken.

Es ist wichtig zu wissen, dass die Musik nicht automatisch startet. Tonnen von Nutzern, darunter auch ich, hassen es, wenn eine Website Musik auf Sie wirft, ob Sie bereit sind oder nicht. Wenn Ihre Lautsprecher launisch sind und Sie sich in einem Kaffeegeschäft befinden, könnte Ihnen die ToonyTuts-Musik zweifellos einige verärgerte und verwirrte Blicke der Menschen um Sie herum bringen.

Der kleine Kreis neben der Wiedergabeschaltfläche stoppt die Animation der Wolken. Dies ist auch eine gute Idee für alle, die das Aussehen der springenden Wolken entweder nicht mögen oder die Prozessorleistung nicht verschwenden wollen. Seltsamerweise stoppt das Drücken dieser Taste nicht, dass sich die Strahlen drehen.

Ich denke, wenn Sie den Benutzern die Option geben, die Animationen auf der Seite zu beenden, sollten Sie sicherstellen, dass sie alles abdeckt, sonst scheint es etwas sinnlos.

Im Großen und Ganzen ist diese Seite eine großartige Arbeit, und meine Kritik stöberte vor allem bei äußerst kleinen Aspekten der Seite. Dies ist ein großartiges Beispiel dafür, wie Sie mit einem "Coming Soon" Spaß haben können. Design aufgrund der eingeschränkten Funktionalität. Je interessanter Ihre kommende Seite ist, desto wahrscheinlicher ist es, dass die Leute sie teilen und desto mehr Bekanntheit gewinnen Sie!

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.