UI Design & Frontend
Prueba técnica de diseño UI y desarrollo
DEMO: Test website responsive
Tiempo: 5 Días
2024
Herramientas y habilidades
Desarrollado para
Reglas de la prueba
Rediseña la página DEMO enviada, con el objetivo de maximizar la conversión del formulario. Entrega el diseño en Figma web y mobile, junto con el código HTML, CSS y JavaScript utilizando Bootstrap.
Entregables
- Pequeño Design System
- Wireframe Web y Mobile
- Desarrollo web subido a mi hosting
WEBSITE FINAL
ACCESO FIGMA FINAL
Fase 1: Abordaje del proyecto
Lo primero que hice fue tomar la página DEMO que envío la empresa y comencé a analizar toda la información que allí había, ver como era su distribución, sus secciones, sus textos y títulos, sus llamados a la acción, esta página DEMO no tenía imágenes, sino espacios dispuestos para colocarlos, así que teniendo todo esto y luego de haber analizado la pagina, me surgieron dudas, por lo que realice un pequeño research sobre empresas similares para aprender un poco sobre este rubro.
Resultado de mi research
Después de explorar 2 páginas que abordan el mismo tema, me encontré reflexionando sobre cómo presentan sus contenidos. ¿Qué es lo que las hace resonar con sus usuarios? Observé cómo organizan sus imágenes, cómo estructuran sus secciones más atractivas y, sobre todo, cómo logran conectar con sus clientes.
Esta inmersión me permitió ver más allá de lo evidente y, al ponerme en los zapatos del usuario, comprendí la necesidad de información que surge al visitar un sitio web.
Con esta perspectiva, pude desarrollar un storytelling más afinado y alineado con lo que realmente importa. A partir de esta reflexión, identifiqué las características esenciales que debían incorporarse:
Se ha establecido una jerarquía visual que guía al usuario a través de la página, resaltando los elementos más importantes, como los botones de acción y secciones informativas clave, asegurando que la atención del usuario se enfoque en lo que es más relevante.
La página está diseñada para adaptarse a diferentes tamaños de pantalla, ofreciendo una experiencia consistente y optimizada tanto en dispositivos móviles como en escritorio, lo que mejora la accesibilidad y usabilidad para todos los usuarios.
Se ha utilizado espacio en blanco de manera efectiva para evitar la sobrecarga de información, facilitando la lectura y la comprensión de los contenidos, y creando un diseño limpio y moderno.
Pequeñas animaciones y efectos de transición se han incorporado para mejorar la interacción del usuario, proporcionando feedback visual inmediato y haciendo que la navegación sea más intuitiva y atractiva.
Los botones de llamada a la acción están diseñados para ser altamente visibles y accesibles, con colores contrastantes y colocación estratégica, lo que incentiva a los usuarios a tomar las acciones deseadas, como completar formularios o explorar servicios.
Se ha elegido una tipografía que no solo es estéticamente agradable sino también altamente legible en diferentes dispositivos y tamaños de pantalla, lo que contribuye a una experiencia de usuario más cómoda y efectiva.
Fase 2: Design System y Wireframe
Ya con la idea visual de como crear esta website, comienzo a dibuja un poco el como realizar esta website, y ha definir un pequeño sistema de diseño el cual usare para crear los wireframe de la web.
Tipografía
Poppins
Aa
Light
a b c d e f g h i j k l m n o p q r s t u v w x y z
Medium
a b c d e f g h i j k l m n o p q r s t u v w x y z
Bold
a b c d e f g h i j k l m n o p q r s t u v w x y z
Colores
Primary
#0052CC
Secondary
#F27B42
#132045
#EDF5FF
#E64B00
Características adicionales
-
Iconografía custom
-
Regla de 8 implementada
-
Border Radius 8px, 10px y 20px
-
Border Shadow agregado
-
Componentes responsivos
-
Diseño atomico implementado