Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene sia quelle che potrebbero usare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è la pagina di ToonyTuts in arrivo.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 24 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
Informazioni su ToonyTuts
Dal momento che ToonyTuts è il progetto molto segreto di Liam McCabe, a questo punto ne sappiamo ben poco. Dal sito personale di Liam possiamo vedere ToonyTuts descritto come un luogo di tutorial incredibilmente divertenti e creativi. Posso solo supporre che ToonyTuts sarà un sito di tutorial incredibilmente illustrato con un sacco di divertimento e umorismo per facilitare il processo di apprendimento (ottima idea!).
Ecco uno screenshot della pagina in arrivo:
Alcuni dei nostri argomenti di critica sono pieni di contenuti e richiedono un bel po 'di analisi, ma questa pagina è sia molto semplice che davvero attraente quindi non c'è molto da criticare. Come sempre, scomporlo pezzo per pezzo.
Design generale
Il design di ToonyTuts va bene? toony. Colori vivaci, caratteri divertenti e angoli fortemente arrotondati contribuiscono a creare quel fantastico stile cartoon.
I raggi sullo sfondo attirano la tua attenzione sul logo al centro e danno un senso di eccitazione al design.
Il logo
Il carattere tipografico del logo è una selezione perfetta per il contenuto. Si noti che è sicuramente divertente e toony ma è ancora altamente leggibile. Il maiuscolo? T? i personaggi sono davvero l'unica lettera che è significativamente distorta con le linee verticali in alto inclinate in una forma diagonale.
La parte che attira davvero la tua attenzione è il grosso tratto nero. Questo contrasta fortemente contro le lettere blu con un gradiente sottile ma attraente. Il tratto è anche fortemente arrotondato sui bordi anche se le lettere effettive non lo sono. Questo è il vero trucco per preservare la leggibilità mentre si trasmette un aspetto divertente, quasi infantile.
Il carattere accentato sotto il logo è molto più giocoso con forme di lettera distorte che sembrano uscite da un fumetto di Pippo. Questo tipo è mantenuto piccolo, quindi l'effetto non è opprimente, ma fatto nella giusta quantità.
Mi piace che un uccello Twitter sia stato gettato qui dentro. Si adatta perfettamente al motivo della nuvola e non sembra affatto un ripensamento. Coloro che hanno familiarità con il marchio Twitter riconosceranno il simbolo e selezioneranno se vogliono seguire ToonyTuts.
Sneaky Peek
Il piccolo campo di iscrizione è dove gli angoli arrotondati entrano in gioco. Quest'area doveva essere funzionale e tuttavia è stata realizzata per integrarsi perfettamente con il resto del design. Nota lo spruzzo di colore usato per attirare la tua attenzione.
Mi piace il fatto che il campo abbia un effetto ombra che lo fa apparire mentre il pulsante usa la stessa ombra in una direzione diversa per sembrare un po 'fuoriuscito dalla pagina. Se queste ombre fossero piumate, porterebbero un senso di realismo che si scontrerebbe con il resto del design, ma sono state tenute duro in modo che aderiscano allo stile cartoon.
The? Want a Sneaky Peek ?? il testo è in realtà vivo e selezionabile. È un font chiamato DoctorSoosBold implementato qui con @ font-face. Mi piace la scelta del font, ma non mi piace l'implementazione dell'ombra dietro il testo. L'ombra scura è solo leggermente sbirciata dal testo e quindi rende le lettere un po 'disordinate piuttosto che raggiungere il suo obiettivo reale di aumentare la leggibilità.
Il mio suggerimento è di abbattere questa ombra e ridurla un po 'in modo che il testo non assomigli al fatto che ci siano parti di nero mescolate?
Animazione e musica
Quando si carica la pagina per la prima volta, le animazioni si avviano automaticamente. Le nuvole oscillano lentamente su e giù in modo sfalsato mentre i raggi sullo sfondo girano in senso orario.
Dato che la pagina è così semplice, l'effetto dell'animazione aggiunge davvero molto all'esperienza. Se apri il codice, puoi vedere che le funzionalità del webkit sono state utilizzate per realizzare le animazioni in modo da non vederle in altri browser.
Non vedo questo come un problema in meno. Se si visualizza la pagina in un browser che non supporta le animazioni, è ancora perfettamente funzionale ed esteticamente gradevole.
Oltre all'animazione, c'è una clip musicale meravigliosamente circense che inizia quando si preme il pulsante play in alto a destra.
È importante notare che la musica non si avvia automaticamente. Tonnellate di utenti, me incluso, lo odiano quando un sito web lancia musica se sei pronto o meno. Se i tuoi altoparlanti sono a gomito e sei in un negozio di caffè, la musica di ToonyTuts ti procurerebbe senza dubbio alcuni sguardi annoiati e confusi dalle persone intorno a te.
Il piccolo cerchio accanto al pulsante di riproduzione interrompe l'animazione delle nuvole. Questa è una buona idea anche per tutti coloro che non amano l'aspetto delle nuvole che rimbalzano o che non vogliono sprecare la potenza del processore. Stranamente, premere questo pulsante non impedisce ai raggi di ruotare.
Penso che se darai agli utenti la possibilità di interrompere le animazioni sulla pagina, dovresti assicurarti che copra tutto, altrimenti sembra un po 'inutile.
Nel complesso, questa pagina è un fantastico lavoro e le mie critiche sono state principalmente incentrate su aspetti estremamente minori del sito. Questo è un ottimo esempio di come puoi divertirti con un? Prossimamente? design a causa della limitata funzionalità necessaria. Più interessante sarà la tua prossima pagina, più è probabile che le persone lo condividano e maggiore sarà l'esposizione che guadagnerai!
Il tuo turno!
Ora che hai letto i miei commenti, inseriscici e dacci una mano dando al designer qualche ulteriore consiglio.Facci sapere cosa pensi sia importante per il design e cosa pensi possa essere più forte. Come sempre, ti chiediamo di essere rispettoso del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti.
Interessato ad avere criticato il tuo sito? Puoi saperne di più qui.