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 WPMU DEV, un mercado para temas y complementos de WordPress. ¡Saltemos y veamos lo que pensamos!
¡Envía tu sitio!
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 WPMU DEV
? WPMU tiene los mejores plugins y temas de WordPress, Multisite y BuddyPress en la web. Galardonado, amado por 145,436 miembros, pateándolo desde 2004. Es el único lugar donde encontrará fantásticos temas de sitios múltiples, el famoso paquete de 133 temas, las increíbles páginas de inicio de la red y la compatibilidad del 100% con BuddyPress.
Aquí hay una captura de pantalla de una sección de la página de inicio:
Primera impresión
"WPMU DEV es un sitio hermoso con un diseño receptivo y un montón de pequeños detalles que son suficientes para hacer sonreír a este diseñador".El año pasado, echamos un vistazo a otro sitio en esta misma red / familia: WPMU.org. Ese sitio se sintió un poco llano. Se veía decente, pero muy parecido a algo de una plantilla genérica. Además, el diseño necesitaba trabajo y ciertos aspectos de la estética, como el logotipo, estaban un poco fuera de lugar.
Después de la crítica, la gente trabajadora en WPMU rediseñó completamente ese sitio, incorporando muchas de las sugerencias que hice en la crítica. El resultado es un magnífico blog nuevo que aborda todos los problemas que tuve con el anterior. El diseño es fantástico (responde perfectamente al arranque), la estética es hermosa y personalizada, incluso el logotipo ha sido rediseñado para sentirse más moderno. Realmente mejoraron su juego y eliminaron la versión dos del parque.
Cuando me pidieron que echara un vistazo a WPMU DEV, supe tan pronto como lo vi, que todos estos muchachos estaban haciendo del gran diseño una prioridad absoluta ahora. Al igual que el nuevo WPMU.org, WPMU DEV es un sitio hermoso con un diseño receptivo y un montón de pequeños detalles que son suficientes para hacer sonreír a este diseñador. Vamos a ver qué lo hace tan increíble.
Encabezamiento
Comenzaremos en la parte superior y bajaremos la página. Cuando carga en la página, este es el gráfico que llena su pantalla:
Me encanta que lo primero que veo es una foto grande de una persona atractiva y amigable. No tiene la sensación de una foto de stock demasiado formal y formal, sino que parece más genuina y creíblemente informal. Justo al lado de la imagen de la mujer hay una cita positiva del cliente, que aporta un contexto a la foto de la mujer.
Desde el principio, han golpeado algunas de mis tácticas favoritas: caras sonrientes y elogios reales de los clientes. Este sitio, y en consecuencia WPMU DEV, me parece amigable, accesible y confiable para mí como visitante, ¡y solo he estado aquí por unos segundos!
Todo esto está respaldado por un sólido llamado a la acción: aprenda más. En este punto, es probable que esto sea exactamente lo que quiero hacer. Sin embargo, este enlace te lleva a una página diferente e igualmente impresionante, por ahora, nos atendremos a esta y nos desplazaremos un poco.
Navegación
Antes de pasar a la siguiente sección, hablemos un poco de la estructura de la página. En su mayor parte, este es un sitio de una sola página. Los enlaces en la barra de navegación no lo llevan a páginas separadas, sino que lo llevan a diferentes secciones de esta misma página. Hablando de la barra de navegación, en realidad es un trabajo de desarrollo y diseño realmente elegante:
Inicialmente, la navegación aparece directamente debajo de la foto de la mujer de la última sección. Sin embargo, a medida que se desplaza hacia abajo en la página, en realidad se adhiere a la parte superior de la ventana gráfica. Mientras lo hace, aparece un logotipo y el texto reduce su tamaño en una transición fluida. Este es el tipo de cosas con las que realmente me he echado a perder, así que la navegación me da dos pulgares.
Esto no es simple, lo que hace la barra de navegación es adaptarse al lugar donde se usa. En la parte superior de la página, ya hay muchas marcas, por lo que no se necesita el logotipo. Sin embargo, a medida que se desplaza hacia abajo, el logotipo aparece para recordarle dónde se encuentra y sirve como un enlace rápido para saltar a la parte superior de la página. Extremadamente funcional. Extremadamente atractivo. Es una victoria, gana.
Sección de complementos
Desde aquí, simplemente salta de una sección a la siguiente a medida que avanzas por la página. Cada sección es única y de gran apariencia por sí misma, al tiempo que se vincula con la estética del diseño que gobierna toda la página. Aquí está la primera sección:
Como puede ver, estas otras secciones invierten la combinación de colores que vimos en el encabezado (fondo oscuro, reflejos claros), lo que permite un uso realmente agradable tanto del contraste como de la repetición. Cuando se desplaza sobre uno de los íconos en esta área, el título e incluso partes del gráfico se vuelven de color amarillo brillante, lo que una vez más aprovecha bien el contraste.
Me encanta la forma en que se ven estos iconos. No son el mismo conjunto de iconos mínimos que se ven en mil iteraciones diferentes en la mitad de los sitios en la web. Se sienten mucho más personalizados y tienen cierta personalidad.
Control deslizante de membresía
A continuación, veremos algunas secciones y veremos una parte de la interfaz de usuario realmente clara que lo ayudará a decidir sobre un plan de membresía.
Aquí tenemos un buen control deslizante que se extiende por toda la pantalla. A medida que mueve el control deslizante de un mes a tres meses y luego a doce, el precio en la parte inferior se actualiza junto con sus ahorros. Es un gran punto de interacción que tiene la capacidad de aumentar el compromiso. Tambien funciona De Verdad Sin problemas, lo que le permite arrastrar el control deslizante o simplemente hacer clic en cualquier lugar para actualizar el precio. No importa dónde suelte el control deslizante, saltará al punto de parada más cercano.
Desarrolladores
La última sección de esta página que quiero ver muestra las tomas del personal y los desarrolladores / diseñadores de WPMU. De un vistazo, se ve bastante poco destacable. Solo una cuadrícula de miniaturas, ¿verdad?
Resulta que estos muchachos hicieron que incluso esta sección fuera increíble. Cuando se desplaza sobre una imagen, se ve una pequeña superposición que muestra el nombre y la posición de la persona. Aleja el cursor y la superposición se desliza hacia afuera. La parte interesante es que se desliza hacia adentro / hacia afuera en cualquier dirección hacia la que se dirija el cursor. Esto significa que si desliza el cursor a la izquierda de una foto y lo coloca en otra, parece que la superposición le sigue. Es una gran ilusión con la que tuve que jugar durante treinta segundos antes de seguir adelante.
Disposición Responsive
Antes de terminar, definitivamente vale la pena señalar que el sitio responde plenamente. A continuación puede ver las versiones de escritorio, tableta y móvil:
Observe qué tan bien se adapta el diseño al dispositivo que lo ve. A medida que se mueve hacia abajo, el mensaje central se mantiene, pero los extras no esenciales se eliminan en favor de la eficiencia del diseño.
¡Buen trabajo!
"Siempre tenga en cuenta las barreras que está colocando entre sus usuarios y una conversión".
En lo que a mí respecta, este sitio es de primera categoría. El diseño es perfecto, el diseño sensible y el punto de mensajería en. Puedo saber rápidamente de qué se trata WMPU DEV y tener fuentes de información listas para cualquier pregunta que tenga.
Miré a mi alrededor durante mucho tiempo tratando de encontrar algo de qué quejarme y, francamente, no hay casi nada. Lo único que me preocupa es el esfuerzo que se necesita para inscribirse. No hay? Regístrese ahora? botón en cualquier lugar en la página de inicio. Una vez que hago clic en el botón "Más información? Botón, me llevan a la página de planes y precios. Esta página es atractiva, pero tengo que desplazarme por millas antes de llegar al final, donde finalmente puedo elegir un plan y continuar.
Siempre tenga en cuenta las barreras que está colocando entre sus usuarios y una conversión. Si llego a este sitio con la intención de registrarme, soy su mejor visitante posible y usted quiere asegurarse de tener una ruta fácil y clara para darle mi dinero.
¡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.