¡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 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 Grey Ang, el portafolio 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 por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de Gray Ang
? Mi nombre es Gray, y soy un diseñador web y desarrollador de aplicaciones para el usuario con sede en Kuala Lumpur, Malasia. Investigo, planifico, diseño y codigo sitios web. Soy un 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 lanzan alrededor 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 bastante pequeño y simple, por lo que analizaremos cada una de las páginas y analizaremos cómo la estética afecta la experiencia del usuario.
Casa
Definitivamente aprecio el trabajo que entró en la estética del sitio. El entorno es bastante bonito. Sin embargo, el problema con la creación de un fondo tan complejo es que, eventualmente, tiene que colocar el contenido encima, y esto puede ser una tarea muy difícil.
Las palabras grandes y descoloridas 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 duro 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, todavía 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 más sólida y permitirá al diseñador mantener el fondo actual.
También podría considerar agregar algún tipo de gráfico de encabezado a esta página. Realmente me gustó cómo la foto en el? Acerca de? La página se destacó 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. Me gusta el diseño interesante en el trabajo aquí sin embargo. La navegación se mantiene fija mientras el otro contenido se desplaza y la página se divide en columnas claramente separadas y bien ordenadas.
La página Acerca de se divide en tres subpáginas separadas: introducción, resumen y "cosas que hago". Esto permite que el diseñador se ajuste en un poco de contenido mientras mantiene la navegación principal muy simple.
Trabajos
¿Los trabajos? La página es una excelente distribución de miniaturas y texto que, a su vez, conduce a páginas dedicadas de proyectos como la que se muestra a continuación. Las miniaturas tienen un bonito tratamiento de borde grueso que les ayuda a distinguirse del fondo y la cita en la parte superior izquierda es lo suficientemente grande y lo suficientemente audaz como para ser legible.
Sin embargo, creo que la alineación correcta de la gran cita es un poco incómoda. Todo en la página tiene una fuerte alineación hacia 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 dificulta su lectura con una alineación correcta.
Contacto
La última página del sitio es el? Contacto? página. Este 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 apagada. Puede intentar alinearlo a la izquierda independientemente de las comillas para que aparezca? T? ¿en el? ¿y ellos? en? millas? formar una línea dura. Esto debería ayudar a que la alineación izquierda se sienta un poco más fuerte de lo que lo hace 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 facilidad de uso, no sacrificarlo en nombre del estilo.
Cuando hace clic en un campo para comenzar a escribir, la opacidad aumenta y se hace mucho más notable. Yo sugeriría configurar esta opacidad al estado predeterminado y aumentarla aún más cuando se selecciona.
¡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.