Crítica de diseño web # 30: Gray Ang
¡Bienvenido a nuestra trigésima crítica de diseño! 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 Gray Ang, la cartera personal de un diseñador web en Malasia.
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 si un consultor visitara su sitio! Puedes encontrar mas aqui.
Sobre Gray Ang
“Mi nombre es Gray y soy diseñador web y desarrollador front-end con base en Kuala Lumpur, Malasia. Investigo, planifico, diseño y codifico sitios web. Soy buen amigo de Photoshop y HTML / CSS / jQuery, y hago felices a los clientes, usuarios y máquinas ".
Aquí hay una captura de pantalla de la página de inicio:
Como puede ver, el sitio está construido sobre un fondo de espectro colorido con una nube de etiquetas de opacidad reducida que contiene cosas como "diseño web" y "CSS3". Lo que no se obtiene de la captura de pantalla es que el fondo también tiene un elemento animado. Hay varios círculos borrosos que flotan y se mueven detrás del contenido. Haga clic en cualquiera de las capturas de pantalla a continuación para pasar por el sitio y verlo en acción.
Este sitio es en realidad bastante pequeño y simple, por lo que echaremos un vistazo a cada una de las páginas y analizaremos cómo la estética afecta la experiencia del usuario.
Hogar
Definitivamente aprecio el trabajo que se dedicó a la estética del sitio. El ambiente es bastante hermoso. Sin embargo, el problema con la creación de un fondo tan complejo es que eventualmente tendrá que colocar contenido encima, y esto puede ser una tarea muy difícil.
Las palabras grandes y desvaídas en el fondo reducen la legibilidad del texto en la página de inicio. El párrafo principal no es de ninguna manera imposible de leer, pero el diseño está bastante ocupado en el área del texto, lo que obliga a los usuarios a trabajar un poco más de lo que normalmente lo harían.
Además, el rojo utilizado como color de desplazamiento y punto de énfasis tiende a perderse en el fondo. Esto es comprensible ya que simplemente no es fácil encontrar un color que contraste bien con un fondo multicolor. Sin embargo, aún desea evitar la disonancia visual.
La solución más fácil para todos estos problemas, y de hecho la mayoría de los que discutiremos hoy, podría ser simplemente colocar un fondo negro ligeramente transparente detrás de todo el contenido. Esto le dará al contenido una base sólida sobre la cual apoyarse y le permitirá al diseñador mantener el fondo actual.
También puede considerar agregar algún tipo de gráfico de encabezado a esta página. Realmente me gustó cómo se destacó la foto en la página "Acerca de" y creo que esa idea podría duplicarse aquí.
Acerca de
Aquí vemos otra página que es bastante atractiva, pero que sufre los mismos problemas mencionados anteriormente. Sin embargo, me gusta el diseño interesante en el trabajo aquí. La navegación permanece fija mientras el otro contenido se desplaza y la página se divide en columnas claramente separadas y bien organizadas.
La página Acerca de se divide en tres subpáginas separadas: introducción, currículum y "cosas que hago". Esto permite que el diseñador se adapte a bastante contenido mientras mantiene la navegación primaria súper simple.
Trabajos
La página "Obras" es una disposición de miniaturas y texto que se ve muy bien y que a su vez conduce a páginas de proyectos dedicadas como las que se muestran a continuación. Las miniaturas tienen un agradable tratamiento de borde grueso que las ayuda a destacarse del fondo y la cita en la parte superior izquierda es lo suficientemente grande y audaz como para ser legible.
Sin embargo, creo que la alineación correcta de la cita grande es un poco incómoda. Todo en la página tiene una fuerte alineación a la izquierda, y aunque a menudo es efectivo romper intencionalmente una regla como esta, no creo que esté funcionando aquí. La forma general del párrafo es irregular, lo que hace que sea bastante difícil de leer con una alineación correcta.
Contacto
La última página del sitio es la página de "Contacto". Contiene algunos párrafos de texto y un formulario de contacto simple pero elegante. Lo primero que noté aquí fue que la cita en la parte superior de la página se siente un poco fuera de lugar. Puede intentar alinearlo a la izquierda independientemente de las comillas para que la "T" en "The" y la "m" en "miles" formen una línea dura. Esto debería ayudar a que la alineación izquierda se sienta un poco más fuerte de lo que se siente actualmente.
Además, los campos en el formulario son tan transparentes que son casi invisibles. Nuevamente, esto puede verse bien, pero la usabilidad sufre. Recuerde que la estética de una página tiene un objetivo principal: resaltar el contenido de una manera atractiva. Su diseño debe servir para aumentar la usabilidad, no sacrificarlo en nombre del estilo.
Cuando hace clic en un campo para comenzar a escribir, la opacidad aumenta y se vuelve mucho más notable. Sugeriría establecer esta opacidad en el estado predeterminado y aumentarla aún más cuando se selecciona.
¡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.
