Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Cutest Paw, una galería de fotos de animales de todo el mundo. ¡Saltemos y veamos lo que pensamos!
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 por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de Cutest Paw
Este sitio definitivamente toma el premio para nuestro más? Awwww? induciendo la crítica del sitio nunca. Este sitio es literalmente nada más que un sinfín de fotos de animales lindos y divertidos. ¿Cómo podemos soportar ver una cosa así y seguir siendo capaces de ofrecer comentarios constructivos sin distraernos con los cachorros durmientes? Afortunadamente, estamos 100% dedicados a ayudar a los creativos a mejorar sus habilidades de diseño web. Quedate 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 completado cumple o no esa meta. El objetivo aquí para un usuario es simple: ver muchas fotos. El sitio de Cutest Paw parece que cumple su función bastante bien. El diseño está optimizado para aprovechar al máximo el espacio y no desperdicia demasiados píxeles en golosinas oculares superfluas no críticas.
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 que ayudarán al diseñador a mejorar el sitio. Vamos a saltar y empezar.
Diseño
Este sitio es un excelente ejemplo de la utilidad de jQuery Masonry, un increíble complemento de diseño que realmente hace que los diseños imposibles de configurar sean muy fáciles. La belleza de la Masonería es que renuncia al comportamiento de CSS que configura un diseño horizontal antes de distribuir el contenido verticalmente. En su lugar, crea una pila vertical bonita y 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 recientemente se hizo bastante popular en Pinterest, que no puedes dejar de pensar cuando usas este sitio. La combinación de estas dos técnicas permite una 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 decida seguir adelante con otra cosa.
Barra lateral
Dado que el contenido sigue desplazándose para siempre, es 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 recupera rápidamente a medida que avanzas por la página. Esto es bastante efectivo, pero debo admitir que la animación, que al principio es algo encantadora, se convierte rápidamente en una distracción y en algo molesto.
La barra lateral está bien diseñada y claramente organizada, desde una perspectiva de usabilidad (animación aparte) está bastante bien hecho. Es bueno ver un? Volver a la parte superior? botón 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 como una especie de parada 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á 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 considerar. 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 estar todos mal en este sitio web.
Palabras como? Lindo? y? borroso? es cómo la gente describiría el contenido y, sin embargo, el tema visual del sitio es una textura de grunge negro. Estos dos conceptos parecen polos opuestos y crean una especie de disonancia visual. Como ya dije, soy un gran defensor del uso del diseño, no solo como golosinas, 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 se parece mucho a ver a un motociclista cubierto de tatuajes y vestido de cuero de 300 libras enseñando en una clase de preescolar, los dos simplemente parecen enfrentarse entre sí.
El diseñador ha definido el diseño, que honestamente es la parte más difícil en un sitio como este. Ahora es el momento de replantear por completo el 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 tensa. Quizás algo que transmita un sentimiento suave (sin ser feo y cursi). Echa un vistazo a patrones sutiles para algunos grandes recursos.
Logo
El logo se muestra en la captura de pantalla anterior. Obviamente es muy apropiado para el sitio, la pata es un símbolo que se puede relacionar al instante. Sin embargo, como logotipo, tiene un defecto importante en el hecho de que es tan genérico. Es un círculo con una pata, tal vez lo primero que se le ocurrió a 99 de cada 100 no diseñadores dado las instrucciones para crear un logotipo de pata.
El problema con esto es que realmente no puedes poseerlo.Si te fijas lo suficiente, es probable que encuentres algo similar para miles de empresas y sitios web. Es posible que no esté buscando construir una marca global, pero el objetivo principal de un logotipo es tener algo que le dé cara a su marca (aunque sea pequeña) y que sea identificable. Esto no ocupa un lugar destacado en la lista de prioridades, pero a la larga recomiendo explorar algo un poco más único.
Enviar página
Como mencioné al principio de este artículo, este sitio es bastante simple, así que lo resumiremos en breve. Lo último que me gustaría discutir es la página a la que los usuarios pueden enviar sus propias fotos:
El problema que tengo con esta página es el tipo de efecto Inception que está sucediendo. Tienes 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 iguales, por lo que la imagen no se distingue de manera significativa. Recomiendo tal vez mirar en un efecto de trazo y recortar la cuadrícula de la imagen en una vista aún más ampliada. Como salida fácil, podrías poner un animal grande y lindo aquí que de alguna manera transmite la idea de compartir, cargar, etc.
Conclusión
En resumen, 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.
- Logo: demasiado genérico
- Página de registro: la captura de pantalla no funciona
¡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 constructivos claros y sin insultos severos.