Web Design Critique # 17: ToonyTuts
Elke week bekijken we een nieuwe website en analyseren we het ontwerp. We zullen wijzen op zowel de gebieden die goed zijn gedaan als de gebieden die wat werk kunnen gebruiken. Ten slotte sluiten we je af met je eigen feedback.
De site van vandaag is de ToonyTuts-pagina die binnenkort verschijnt.
Als u wilt dat uw website wordt opgenomen in een toekomstige ontwerpkritiek, duurt het maar een paar minuten. We rekenen $ 24 voor het bekritiseren van uw ontwerp - aanzienlijk minder dan u zou betalen voor een consultant om uw site te bekijken! Meer informatie vind je hier.
Over ToonyTuts
Aangezien ToonyTuts het zeer geheime project is van Liam McCabe, is er op dit moment nog maar weinig over bekend. Vanaf Liam's persoonlijke site kunnen we ToonyTuts zien als een plaats voor 'ongelooflijk leuke en creatieve tutorials'. Ik kan dan alleen maar aannemen dat ToonyTuts een geweldig geïllustreerde tutorialsite zal zijn met veel plezier en humor om het leerproces te vergemakkelijken (geweldig idee!).
Hier is een screenshot van de komende pagina:
Sommige van onze kritiekonderwerpen zitten boordevol inhoud en vereisen nogal wat analyse, maar deze pagina is zowel heel eenvoudig als echt aantrekkelijk, dus er is niet te veel kritiek. Laten we het zoals altijd stuk voor stuk opsplitsen.
Algemeen ontwerp
Het ontwerp van ToonyTuts is goed ... toony. Heldere kleuren, leuke lettertypen en sterk afgeronde hoeken dragen allemaal bij aan die geweldige cartoonstijl.
De stralen op de achtergrond vestigen de aandacht op het logo in het midden en brengen een gevoel van opwinding in het ontwerp.
Het logo
Het logo-lettertype is een perfecte selectie voor de inhoud. Merk op dat het absoluut leuk en toony is, maar nog steeds zeer leesbaar is. De hoofdletters "T" zijn eigenlijk de enige letter die aanzienlijk is vervormd doordat de verticale lijnen aan de bovenkant in een diagonale vorm zijn gekanteld.
Het deel dat echt je aandacht trekt, is de dikke zwarte lijn. Dit contrasteert sterk met de blauwe letters met een subtiel maar aantrekkelijk verloop. De lijn is ook sterk afgerond aan de randen, hoewel de daadwerkelijke letters dat niet zijn. Dit is de echte truc om de leesbaarheid te behouden en tegelijkertijd een leuk, bijna kinderachtig uiterlijk over te brengen.
Het accentlettertype onder het logo is veel speelser met vervormde lettervormen die rechtstreeks uit een Goofy-cartoon lijken. Dit type wordt klein gehouden, dus het effect is niet overweldigend, maar wordt in de juiste hoeveelheid gedaan.
Ik vind het geweldig dat hier een Twitter-vogel is gegooid. Het past perfect bij het wolkenmotief en lijkt helemaal geen bijzaak. Degenen die bekend zijn met het Twitter-merk zullen het symbool herkennen en doorklikken als ze ToonyTuts willen volgen.
Sneaky Peek
Het kleine aanmeldingsveld is waar de afgeronde hoeken in het spel komen. Deze ruimte moest functioneel zijn en toch perfect in de rest van het ontwerp passen. Let op de kleur die gebruikt wordt om uw aandacht te trekken.
Ik vind het leuk dat het veld een schaduweffect heeft waardoor het er uitziet, terwijl de knop dezelfde schaduw in een andere richting gebruikt om eruit te zien alsof hij een beetje van de pagina komt. Als deze schaduwen waren bevederd, zouden ze een gevoel van realisme geven dat zou botsen met de rest van het ontwerp, maar ze zijn hard gehouden zodat ze de cartoonachtige stijl behouden.
De "Wil je een sneaky Peek?" tekst is eigenlijk live en selecteerbaar. Het is een lettertype genaamd DoctorSoosBold dat hier is geïmplementeerd met @ font-face. Ik hou van de lettertypekeuze, maar ik hou niet van de implementatie van de schaduw achter de tekst. De donkere schaduw steekt slechts een klein beetje uit de tekst en zorgt er daarom voor dat de letters er een beetje rommelig uitzien in plaats van het feitelijke doel van het verbeteren van de leesbaarheid te bereiken.
Mijn suggestie is om deze schaduw een beetje heen en weer te stoten, zodat de tekst er niet uitziet alsof er alleen stukjes zwart in zitten.
Animatie en muziek
Wanneer u de pagina voor het eerst laadt, starten de animaties automatisch. De wolken zweven langzaam op een neerwaartse manier op en neer terwijl de stralen op de achtergrond met de klok mee draaien.
Omdat de pagina zo eenvoudig is, voegt het animatie-effect echt veel toe aan de ervaring. Als je de code openmaakt, kun je zien dat webkit-functies zijn gebruikt om de animaties te voltooien, zodat je ze niet in andere browsers zult zien.
Ik zie dit helemaal niet als een probleem. Als je de pagina bekijkt in een browser die de animaties niet ondersteunt, is deze nog steeds perfect functioneel en esthetisch.
Naast de animatie is er een prachtig circusachtig muziekfragment dat begint wanneer je op de afspeelknop in de rechterbovenhoek drukt.
Het is belangrijk op te merken dat de muziek niet automatisch start. Tal van gebruikers, waaronder ikzelf, haten het wanneer een website muziek naar je gooit, of je er nu klaar voor bent of niet. Als je luidsprekers worden aangezet en je bent in een koffieshop, zou de ToonyTuts-muziek je ongetwijfeld een aantal geïrriteerde en verwarde blikken opleveren van de mensen om je heen.
De kleine cirkel naast de afspeelknop stopt de animatie van de wolken. Dit is ook een goed idee voor iedereen die het uiterlijk van de stuiterende wolken niet leuk vindt of de processorkracht niet wil verspillen. Vreemd genoeg houdt het raken van deze knop de stralen niet tegen.
Ik denk dat als je de gebruikers de optie geeft om de animaties op de pagina te stoppen, je ervoor moet zorgen dat het alles omvat, anders lijkt het een beetje zinloos.
Over het geheel genomen is deze pagina een geweldig stuk werk en mijn kritiek spitste zich vooral toe op uiterst kleine aspecten van de site. Dit is een goed voorbeeld van hoe u plezier kunt hebben met een "Coming Soon" -ontwerp vanwege de beperkte functionaliteit die nodig is. Hoe interessanter je pagina binnenkort komt, hoe groter de kans dat mensen deze delen en hoe meer bekendheid je verdient!
Jouw beurt!
Nu je mijn opmerkingen hebt gelezen, kun je meedoen en helpen door de ontwerper wat verder advies te geven. Laat ons weten wat je geweldig vindt aan het ontwerp en wat je denkt dat sterker zou kunnen zijn. Zoals altijd vragen we u ook respect te hebben voor de ontwerper van de site en duidelijk constructief advies te geven, zonder harde beledigingen.
Geïnteresseerd om uw eigen site te laten bekritiseren? Meer informatie vind je hier.
