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.org, un sitio para entusiastas de WordPress. ¡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 WPMU
? WPMU.org es la fuente número uno en la web para las noticias de WordPress, consejos, complementos y revisiones de temas. Presentamos varios mensajes nuevos cada día por el equipo de Incsub, el mismo grupo detrás del sitio más antiguo (y segundo más grande) de WordPress Multisite en la web, Edublogs.org, y la comunidad de temas y complementos premium más grande, WPMU DEV.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
WPMU parece ser un gran recurso de información para los desarrolladores de WordPress. Hay un montón de contenido aquí en la página de inicio, que es tanto un activo como una responsabilidad desde la perspectiva de un diseñador. El sitio se ve muy limpio y bien diseñado, y sin embargo, incluso dentro de la estructura altamente organizada, parecen estar luchando contra el desorden.
"Hay un montón de contenido aquí en la página de inicio, que es tanto un activo como un pasivo desde la perspectiva de un diseñador".El sitio es, de hecho, sensible, y al principio del juego todavía le doy apoyo a cualquiera que al menos esté intentando dar este salto. Pocos, si es que lo han hecho, han logrado un diseño complejo y sensible con absoluta perfección, y esta página no es una excepción a esa regla. Sin embargo, creo que los problemas aquí no deberían ser demasiado difíciles de resolver.
En general, los diseñadores han producido algo grande aquí. Vayamos más cerca y veamos dónde podemos sugerir algunos cambios.
El logo
Lo primero que veo en el sitio es el logo. Es un objeto relativamente grande en la esquina superior izquierda, por lo que sus ojos gravitan naturalmente hacia él.
Desafortunadamente, me parece un poco áspero alrededor de los bordes. El concepto no es necesariamente malo, pero desde la perspectiva del diseñador, las relaciones de tamaño están desactivadas. El logotipo actual es una gran parte del texto, todo lo cual es bastante grande. El problema con esto es que, en lugar de reproducirse armoniosamente entre sí, cada parte del texto se siente más como si compitiera por la atención.
"En lugar de jugar armoniosamente el uno con el otro, cada parte del texto se siente más como si compitiera por la atención".El contraste es una de sus herramientas más poderosas como diseñador y encontrará que ayuda a reforzar cualquier diseño que se sienta un poco escaso. Con la idea del contraste en mente, hice el icono más grande y el eslogan mucho más pequeño, por lo que no compite con "WPMU". ¿Entonces dejé la organización terriblemente torpe girada? en conjunto porque creo que es totalmente innecesario.
Ahora tenemos un logotipo simple de dos colores con una gran pieza de texto, una pequeña pieza de texto y un ícono grande y llamativo a la izquierda. Ahora está mucho más equilibrado y se siente menos desordenado.
Otros logotipos
Si saltamos al otro lado del encabezado, encontramos otros dos logotipos, esta vez de terceros.
En mi opinión, estos son un poco demasiado grandes. Nuevamente nos topamos con esta idea de competencia visual. Como diseñador, tienes que tomar decisiones difíciles sobre lo que es más importante. Si intentas hacer que todo sea grande y responsable, trates la jerarquía de información.
"Si intentas hacer que todo sea grande y responsable, destruyes la jerarquía de la información".Además, la alineación de estos dos logotipos está un poco fuera de lugar. La forma irregular del logotipo de WPHonors lo hace sentir como si el logotipo de Google+ fuera demasiado alto, incluso si está cerca o incluso centrado. A veces? Visualmente? centrar dos objetos puede llevar a un diseño más armonioso que centrarlos realmente.
En última instancia, esta área necesita una solución de cinco minutos. Baje ligeramente el tamaño del logotipo, no drásticamente, y golpee el logotipo de Google+ unos pocos píxeles.
Diseño de escritorio
Llegaremos a la capacidad de respuesta del diseño un poco más tarde, por ahora, solo concentrémonos en el diseño del sitio como se ve en una computadora de escritorio o portátil (la versión grande). Básicamente, estamos viendo un diseño de tres columnas.
A la izquierda, tienes lo que parecen ser artículos recientes, el centro está ocupado principalmente por una lista de tutoriales y la izquierda contiene una lista de publicaciones populares. Conceptualmente, esto suena correcto, pero la ejecución en realidad no es tan buena. Considere la siguiente captura de pantalla:
El problema que tengo con este sitio es que, al desplazarme por la página, me siento completamente abrumado. Aquí hay mucho contenido y todo tiene un formato y tamaño muy similar para que se combine en un gran desorden.
En situaciones como estas, donde el diseño se vuelve más desordenado y desordenado, me gusta quitar todas las distracciones y concentrarme únicamente en el tamaño y las relaciones espaciales de los objetos en la página. Para hacer esto, despojo el contenido de nuevo a una estructura alámbrica así:
Repensando las columnas
Ahora podemos realmente tener una idea de lo que está pasando con esta página. Una cosa que noté de inmediato cuando miro la página de esta manera es el mismo problema que seguimos encontrando, dado que el tamaño relativo de los objetos es demasiado similar.
Aquí creo que este problema se está desarrollando en el ancho de la columna. Aunque la columna de la izquierda es la más ancha, no lo es tanto. No hay claro? Aparece? columna como me desplazo hacia abajo de esta página. No tengo una idea clara de cuál es el contenido principal, en cambio, todo me grita al mismo volumen.
"No tengo una buena idea de cuál es el contenido principal, en cambio, todo me grita al mismo volumen".Para volver a trabajar esto, vamos a intentar mover la columna de la izquierda hacia el centro y ajustar su ancho en relación con los demás (ampliar la columna central, reducir los demás). Mientras estamos allí, solucionemos algunos problemas de alineación y reduzcamos el tamaño de esos logotipos de encabezados. Eso nos lleva al siguiente diseño.
Como puede ver, ahora hemos establecido un punto focal mucho más claro al desplazarse por la página: la columna central. El otro contenido es secundario, si lo desea, no distrae demasiado si no lo hace.
Transmitir el diseño
Ahora, a pesar del hecho de que hemos ayudado a la situación mediante la introducción de una jerarquía de información más clara, todavía estamos luchando contra el desorden. Simplemente creo que hay demasiado en la página en un momento dado. No tenemos que eliminar una tonelada de contenido, pero podemos mejorar mucho la página con algunas reducciones y algunos ajustes de tamaño más.
Ahora regresa y compara esto con la estructura alámbrica con la que comenzamos. La diferencia puede parecer sutil, pero confíe en mí, si implementara estos cambios en el diseño, el impacto sería enorme. La huella del contenido sería mucho más impactante y espaciosa, con un camino más claro para que los usuarios lo sigan a medida que avanzan por la página.
Disposición Responsive
En general, el diseño responde bastante bien a medida que la ventana gráfica se estrecha. La columna de publicaciones populares se coloca en la parte inferior y el área principal está ocupada por las otras dos columnas. La relación espacial aquí parece perfecta, mucho mejor de lo que estábamos viendo antes.
Desafortunadamente, durante todo esto, el encabezado está lleno de problemas. Lo más notable es qué tan mal responde la navegación a una reducción en el ancho. En un momento dado, presenta una ruptura incómoda en dos líneas.
Esto es un poco molesto desde un punto de vista estético, pero una vez que vas más estrecho, las cosas realmente se deshacen. El encabezado se convierte en una brecha enorme y vacía con una lista fea y sin estilo de enlaces flotando hacia la izquierda.
Una vez que vea el sitio en una ventana estrecha, luego vuelva a expandirse a tamaño completo, el encabezado no vuelve a su diseño original, sino que se vuelve extraño con espacios en blanco adicionales. Sé que este es un caso de uso marginal (solo los desarrolladores nerd cambian el tamaño para ver los resultados), pero aún así es indicativo de un problema con el diseño.
No es fácil ser sensible
En pocas palabras: el diseño sensible es una bestia delicada y voluble. Felicitaciones a los desarrolladores aquí por darle una oportunidad en absoluto. Dicho esto, obviamente hay algunas cuestiones que deben abordarse.
La navegación es el área principal que está teniendo problemas, puede ser útil echar un vistazo a nuestro tutorial para crear un menú de navegación sensible.
Resumen
WPMU es un sitio de buena apariencia. Aunque un poco genérico, representa un fuerte intento de organizar y presentar una tonelada de contenido interesante. La mayoría de los diseñadores tendrían problemas con esta tarea y creo que estos chicos han hecho un gran trabajo.
Dicho esto, las áreas anteriores son aquellas que creo que realmente requieren un tratamiento. Mi consejo constituye un replanteamiento completo del diseño, pero siempre que haya construido el sitio en una cuadrícula fuerte y flexible, el contenido de este contenido no debería ser equivalente a comenzar de nuevo. Si no está utilizando un sistema de cuadrícula subyacente sólido y personalizable, le sugiero que comience!
¡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.