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 Adminizio.
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 Adminizio
? Adminizio es un conjunto de plantillas XHTML / CSS universales que se utilizan como interfaz de usuario de un sistema de gestión de contenido, tienda electrónica, intranet y otras aplicaciones en línea. Adminizio está dirigido a todos los programadores inteligentes y diseñadores web, que desean hacer su trabajo más fácil.
Aquí hay una foto de la página de inicio:
Primeras impresiones
De un vistazo, me gusta mucho el diseño de esta página. El diseñador se adhirió firmemente a los principios de diseño corporativo y limpio con algunos toques de estilo visual.
Definitivamente es un diseño bastante típico que no rompe ningún molde, pero como suele ser el caso en sitios como estos, simplemente no hay necesidad de crear algo drásticamente revolucionario. Simple y familiar podría ser una frase ofensiva para algunos diseñadores, pero las empresas del mundo real a menudo desean eso.
El diseño
A menudo me gusta simplificar un diseño visual a sus formas básicas para poder realmente tener una idea de las relaciones espaciales y de tamaño sin ser distraído por las imágenes. Aquí hay un intento básico con esta página:
Desde aquí podemos ver que, en su mayor parte, el diseño es bastante fuerte y está bien ejecutado. Sin embargo, detecto algunos pequeños problemas potenciales que consideraría abordar.
El primero de estos se ilustra a continuación. El espacio en blanco atrapado entre el borde del cuadro de contenido principal y el contenedor vertical es bastante pequeño (aproximadamente 13 píxeles) en comparación con el espacio general que se ve en el resto del diseño. Esto hace que esta área se sienta un poco claustrofóbica. Curiosamente, llevar el diseño hasta el borde estaría bien en mi opinión, pero si lo coloca tan cerca del borde sin seguirlo, se siente un poco incómodo.
Este siguiente es un problema mucho más pequeño, pero aún así es muy notable y fue una de las primeras cosas que me llamó la atención. Observe cómo el espacio en el lado derecho del párrafo parece demasiado pesado; el borde no se alinea con la línea limpia creada por los objetos por encima y por debajo.
Normalmente, no me preocuparía demasiado el reflejo del espacio a cada lado de un párrafo irregular, pero el diseño de la página está tan estrictamente justificado que parece una violación innecesaria. Extender un poco este párrafo no debería ser demasiado difícil. De hecho, jugando con él un poco en Safari, noté que el bloque fluye mucho mejor si sueltas o aumentas el tamaño de este texto en un 10%.
El problema de diseño final que detecto es la línea sobre la compatibilidad de la plantilla en varios navegadores. Aquí el diseñador ha configurado dos fuertes columnas de contenido que se adhieren a un bloque visual estricto. Pero luego esta línea aparece y rompe el diseño al estirarse en la otra columna.
Mi sugerencia es simplemente cambiar el tamaño de esta línea o dividirla en dos líneas para que no tenga que romper el diseño actual de las columnas.
Nitpicking?
Estos problemas de diseño pueden parecer pequeños, pero para mí transmiten un mal mensaje sobre cómo se construyó la página. Hacen sentir que la página fue diseñada por una persona, y luego llena de contenido por otra que no entendió bien el diseño. Esto comunica instantáneamente la impresión de una plantilla prefabricada modificada (interesante porque eso es exactamente lo que el sitio está vendiendo). Las plantillas son geniales, pero romper diseños establecidos puede y debe ser evitado.
Enlace de descarga
Una cosa que continuamente me llamó la atención en este diseño fue la flecha en la esquina inferior derecha de la página. Por un lado, esto es bueno, pero creo que es una mala ejecución de una buena intención.
¿La palabra? Descargar? está tan lejos de la flecha que casi no parecen estar conectados. Además, la imagen de la flecha no es un enlace para descargar algo. Noté que mientras estaba examinando el diseño, ¡seguí mirando debajo de esa flecha para ver a qué apuntaba! De hecho, los gráficos están dirigiendo mi atención, pero lo hacen en la nada, lo que puede tener el efecto no deseado de hacer que los usuarios sientan que han terminado con la página.
Sugiero colocar la flecha al lado de la palabra? Descargar? De modo que el mensaje sea reforzado por los gráficos, y viceversa. También podrías considerar hacer la flecha, ¿la palabra? Descargar? o ambos un enlace. Una llamada a la acción es algo sagrado en el marketing y en la web, la palabra de acción a menudo crea el lugar lógico para que un usuario haga clic. Entonces, si un usuario desea descargar algo, probablemente querrá hacer clic en ¿descargar? (aunque el nombre del objeto que están descargando es también un punto fuerte de acción, especialmente para los usuarios que escanean la página en busca de él). Tal vez solo extienda el enlace para que cubra "Descargar plantilla de administración gratuita".
Ah, y definitivamente arreglar la ortografía de la palabra? ¿Plantilla?
Cosas bien hechas
Los puntos mencionados anteriormente están entre los únicos problemas que veo con el diseño. En general, es una ejecución casi perfecta que requiere muy pocos cambios. Me gustaría terminar la crítica discutiendo las áreas fuertes del diseño de las que podemos aprender.
Lo primero es la jerarquía visual. La página de inicio usa gráficos y colores con moderación para llamar su atención a algunos lugares clave. De esta manera, el usuario lee esta página en realidad es una ruta cuidadosamente construida creada por el diseñador.Dado que esta página está vendiendo un producto, el producto es el punto culminante principal y los principales puntos de interés son las capturas de pantalla de las plantillas.
Como punto fuerte visual, me encanta el uso del espectro cerca de la cima. Esto lo convierte en un gráfico brillante que realmente llama la atención. Vea nuestro artículo sobre 25 Usos brillantes de espectros coloridos en diseño web para obtener más ejemplos de esta técnica.
Otro gran aspecto de este gráfico es que se repitió con buen gusto en el resto del sitio. El diseñador cortó y reutilizó la parte superior de esa caja redondeada y la colocó en las otras páginas para continuidad. Como mencioné en nuestra última crítica de diseño, la repetición es una herramienta poderosa (especialmente para la marca) cuando se maneja adecuadamente y este es un ejemplo perfecto.
¡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.