Crítica de diseño web # 71: la pata más linda
Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos ambas áreas que están bien hechas, además de aquellas que podrían necesitar algo de trabajo. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Cutest Paw, una galería de fotos de animales a nivel mundial. ¡Saltemos y veamos lo que pensamos!
Explore los elementos de Envato
Si desea enviar su sitio web para que aparezca en una futura Crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 por criticar su diseño, ¡mucho menos de lo que pagaría si un consultor visitara su sitio! Puedes encontrar mas aqui.
Sobre la pata más linda
Este sitio definitivamente se lleva el premio a nuestra crítica de sitio más "awwww" que jamás haya provocado. Este sitio es literalmente nada más que un flujo interminable de fotos de animales lindos y divertidos. ¿Cómo podemos soportar mirar algo así y aún así poder ofrecer comentarios constructivos sin distraernos con los cachorros dormidos? Afortunadamente, estamos 100% dedicados a ayudar a las creatividades a mejorar sus habilidades de diseño web. Quédate atrás cachorros, tenemos un trabajo que hacer.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Cada vez que evalúo un diseño, voy más allá de la estética y pregunto cuál es el propósito de la pieza y si el diseño completo cumple o no ese objetivo. El objetivo aquí para un usuario es simple: ver muchas fotos. Parece que el sitio Cutest Paw cumple bastante bien su propósito. El diseño está optimizado para el máximo uso del espacio y no desperdicia demasiados píxeles en dulces no críticos superfluos.
Al igual que la crítica de diseño de la semana pasada, esta será bastante breve. El sitio web de Cutest Paw es muy simple, por lo que no hay mucho que criticar. Sin embargo, como siempre, tengo algunos comentarios que creo ayudarán al diseñador a mejorar el sitio. Saltemos y comencemos.
Diseño
Este sitio es un excelente ejemplo de la utilidad de jQuery Masonry, un plugin de diseño impresionante que realmente hace que los diseños imposibles sean fáciles de configurar. La belleza de Masonry es que renuncia al comportamiento CSS que configura un diseño horizontal antes de distribuir el contenido verticalmente. En cambio, crea una buena pila vertical apretada, similar a cómo se colocan los ladrillos.
El resultado en este caso es una cuadrícula de imágenes increíblemente ajustada que, como mencioné anteriormente, realmente maximiza la cantidad de fotos que se pueden ver en un espacio pequeño. El sitio también utiliza una técnica de desplazamiento infinito que continúa cargando contenido a medida que avanza por la página.
La combinación de diseños de estilo de mampostería y desplazamiento infinito se hizo muy popular recientemente por Pinterest, que no puede dejar de pensar cuando utiliza este sitio. La combinación de estas dos técnicas proporciona una facilidad de navegación sin precedentes. En comparación, la paginación requiere mucho esfuerzo por parte del usuario. Aquí solo tienes que desplazarte y desplazarte hasta que hayas visto todo lo que hay para ver o decidas pasar a otra cosa.
Barra lateral
Dado que el contenido sigue desplazándose para siempre, se hace necesario tener una navegación algo fija. Pinterest utiliza una barra en la parte superior de su sitio, Cutest Paw sigue su propio camino e implementa una barra lateral retrasada que se pone rápidamente al día a medida que avanza por la página. Esto es bastante efectivo, pero debo admitir que la animación, que es algo encantadora al principio, se vuelve rápidamente una distracción y una molestia.
La barra lateral está bien diseñada y claramente organizada, desde una perspectiva de usabilidad (aparte de la animación) está bastante bien hecha. Es agradable ver un botón "Volver arriba" implementado aquí, tan pronto como comencé a desplazarme, busqué inmediatamente uno de estos y lo encontré fácilmente. Sin embargo, podría ser más efectivo ya que algún tipo de escala en la parte superior o inferior del lado derecho de la pila de fotos, esto lo colocaría donde la atención del usuario probablemente se centrará y reduciría la necesidad de buscarlo.
Tema
Vale la pena discutir la estética general de la página, de hecho, puede ser uno de los puntos más destacados a tener en cuenta. Por un lado, la página es atractiva. El fondo negro es elegante, elegante y ayuda a que las fotos realmente se destaquen. Por otro lado, el fondo e incluso los adjetivos que acabo de usar parecen incorrectos para este sitio web.
Palabras como "lindo" y "difuso" son cómo la gente describiría el contenido y, sin embargo, el tema visual del sitio es una textura grunge negra. Estos dos conceptos parecen opuestos polares y crean una especie de disonancia visual. Como ya dije, soy un gran defensor del uso del diseño no solo como un placer visual sino para reforzar un propósito y un mensaje. El diseño de su página transmite una personalidad y cuando se equivoca, disminuye el impacto y el éxito del proyecto. La yuxtaposición de conceptos en este diseño es muy similar a ver a un motorista cubierto de tatuajes revestido de cuero de 300 libras enseñando una clase de preescolar, los dos simplemente parecen estar en desacuerdo entre sí.
El diseñador ha clavado el diseño, que honestamente es a menudo la parte más complicada en un sitio como este. Ahora es el momento de cambiar el tema por completo del aspecto del sitio mientras se mantiene la estructura central. Comience con un esquema de color más amigable y / o use una textura mucho menos nerviosa. Quizás algo que transmita una sensación suave (sin ser feo y cursi). Echa un vistazo a los patrones sutiles para obtener algunos recursos excelentes.
Logo
El logotipo se muestra en la captura de pantalla anterior. Obviamente es muy apropiado para el sitio, la pata es un símbolo instantáneamente identificable. Sin embargo, como logotipo, tiene una falla importante en el hecho de que es tan genérico. Es un círculo con una pata, tal vez lo primero que 99 de cada 100 no diseñadores darían con la instrucción de crear un logotipo de pata.
El problema con esto es que realmente no puedes ser el dueño. Si te fijas lo suficiente, probablemente puedas encontrar algo similar para toneladas de empresas y sitios web. Es posible que no esté buscando construir una marca global, pero el objetivo de un logotipo es tener algo que le dé una cara a su marca (por pequeña que sea) y que sea identificable. Esto no ocupa un lugar destacado en la lista de prioridades, pero a la larga recomendaría explorar algo un poco más exclusivo.
Enviar página
Como mencioné al principio de este artículo, este sitio es bastante simple, por lo que terminaremos esto en breve. Lo último que me gustaría discutir es la página donde los usuarios pueden ir a enviar sus propias fotos:
El problema que tengo con esta página es el tipo de efecto de inicio que está sucediendo. Tiene una captura de pantalla de una página web lanzada en una página web que se ve muy similar. Está inclinado, por lo que se destaca un poco, pero sigue siendo una combinación inquietante. El problema aquí es que el fondo de la página y la imagen son esencialmente los mismos, por lo que la imagen no se distingue de manera significativa. Recomiendo quizás mirar un efecto de trazo y recortar esa cuadrícula de imagen en una vista aún más ampliada. Como una salida fácil, podrías poner un animal grande y lindo aquí que de alguna manera transmita la idea de compartir, cargar, etc.
Conclusión
Para resumir, aquí hay una lista de verificación rápida de mis pensamientos sobre el diseño.
Bueno
- Diseño: este es un uso perfecto para jQuery Masonry
- Desplazamiento infinito: facilita la navegación
- Navegación simple pero efectiva
Necesita trabajo
- Estética general: demasiado oscura y sucia
- Logotipo: demasiado genérico
- Página de registro: la captura de pantalla no funciona
¡Tu turno!
Ahora que ha leído mis comentarios, participe y ayude dando al diseñador algunos consejos adicionales. Háganos saber lo que piensa 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 un consejo constructivo claro y libre de cualquier insulto.
