Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos tanto las áreas que se realizan bien como las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es la página de ToonyTuts próximamente.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 24 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de ToonyTuts
Dado que ToonyTuts es el proyecto secreto de Liam McCabe, se sabe muy poco al respecto en este momento. Desde el sitio personal de Liam, podemos ver a ToonyTuts descrito como un lugar para "tutoriales increíblemente divertidos y creativos". Solo puedo asumir que ToonyTuts será un sitio de tutoría increíblemente ilustrado con mucha diversión y humor para facilitar el proceso de aprendizaje (¡una gran idea!).
Aquí hay una captura de pantalla de la próxima página:
Algunos de nuestros temas de crítica están llenos de contenido y requieren bastante análisis, pero esta página es a la vez muy simple y atractiva, por lo que no hay mucho que criticar. Como siempre, vamos a desglosarlo pieza por pieza.
Diseño general
¿El diseño de ToonyTuts está bien? toony Colores brillantes, fuentes divertidas y esquinas muy redondeadas se suman a ese gran estilo de dibujos animados.
Los rayos en el fondo atraen su atención hacia el logotipo en el centro y le dan una sensación de emoción al diseño.
El logo
El tipo de letra del logotipo es una selección perfecta para el contenido. Tenga en cuenta que es definitivamente divertido y divertido pero que aún es muy legible. La mayúscula? T? los caracteres son realmente la única letra que está distorsionada significativamente con las líneas verticales en la parte superior inclinadas en forma diagonal.
La parte que realmente llama tu atención es el trazo negro y grueso. Esto contrasta fuertemente con las letras azules con un gradiente sutil pero atractivo. El trazo también está muy redondeado en los bordes, a pesar de que las letras reales no lo son. Este es el verdadero truco para preservar la legibilidad al tiempo que transmite un aspecto divertido, casi infantil.
La fuente de acento debajo del logotipo es mucho más lúdica con formas de letras distorsionadas que parecen sacadas de un dibujo animado de Goofy. Este tipo se mantiene pequeño, por lo que el efecto no es abrumador, sino que se realiza en la cantidad justa.
Me encanta que un pájaro de Twitter fue lanzado aquí. Encaja perfectamente con el motivo de la nube y no parece una idea de último momento. Aquellos que estén familiarizados con la marca de Twitter reconocerán el símbolo y harán clic si desean seguir ToonyTuts.
Vistazo furtivo
El pequeño campo de registro es donde las esquinas redondeadas entran en juego. Esta área tenía que ser funcional y, sin embargo, estaba diseñada para encajar perfectamente con el resto del diseño. Tenga en cuenta el toque de color utilizado para llamar su atención.
Me gusta que el campo tenga un efecto de sombra que lo haga lucir insertado, mientras que el botón usa la misma sombra en una dirección diferente para que parezca que sale un poco de la página. Si estas sombras estuvieran emplumadas, aportarían una sensación de realismo que chocaría con el resto del diseño, pero se mantuvieron firmes para que se adhieran al estilo caricaturesco.
¿Quieres un Sneaky Peek? El texto es en vivo y seleccionable. Es una fuente llamada DoctorSoosBold implementada aquí con @ font-face. Me gusta la opción de fuente, pero no me gusta la implementación de la sombra detrás del texto. La sombra oscura solo se asoma ligeramente hacia fuera del texto y, por lo tanto, hace que las letras se vean un poco desordenadas en lugar de lograr su objetivo real de aumentar la legibilidad.
Mi sugerencia es que coloque esta sombra hacia afuera y hacia abajo un poco para que el texto no se vea como si tuviera pedazos de negro mezclados?
Animacion y musica
Cuando carga la página por primera vez, las animaciones se inician automáticamente. Las nubes se desplazan lentamente hacia arriba y hacia abajo de manera compensada mientras los rayos en el fondo giran hacia la derecha.
Dado que la página es tan simple, el efecto de animación realmente agrega mucho a la experiencia. Si abres el código, puedes ver que las funciones del webkit se usaron para lograr las animaciones, por lo que no las verás en otros navegadores.
No veo esto como un problema en lo más mínimo. Si ve la página en un navegador que no admite las animaciones, sigue siendo perfectamente funcional y estéticamente agradable.
Además de la animación, hay un clip de música maravillosamente circense que comienza cuando presionas el botón de reproducción en la parte superior derecha.
Es importante tener en cuenta que la música no se inicia automáticamente. Toneladas de usuarios, incluido yo mismo, odian cuando un sitio web te lanza música, estés listo o no. Si sus parlantes están encendidos y está en una tienda de cafés, la música de ToonyTuts sin duda le hará ganar algunas miradas molestas y confusas de las personas que lo rodean.
El pequeño círculo al lado del botón de reproducción detiene la animación de las nubes. Esta es una buena idea también para cualquiera que no le guste el aspecto de las nubes rebotando o que no quiera perder el poder del procesador. Curiosamente, pulsar este botón no impide que los rayos giren.
Creo que si va a dar a los usuarios la opción de detener las animaciones en la página, debería asegurarse de que cubra todo, de lo contrario parece un poco inútil.
En general, esta página es un trabajo impresionante y mis críticas se centraban principalmente en aspectos extremadamente menores del sitio. Este es un gran ejemplo de cómo puedes divertirte con un? ¿Próximamente? diseño debido a la funcionalidad limitada necesaria. Cuanto más interesante sea tu próxima página, más probable es que la gente la comparta y más exposición ganarás.
¡Tu turno!
Ahora que ha leído mis comentarios, contribuya y ayude, dando al diseñador algunos consejos adicionales.Háganos saber lo que cree que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca consejos claros y constructivos sin ningún insulto.
¿Interesado en tener tu propio sitio criticado? Puedes encontrar mas aqui.