Proyecto: Diseño de interfaces para sitios web y aplicaciones
Proyecto: Diseño de interfaces para sitios web y aplicaciones
by Fernando Daniel Rojas Murillo @ferrojasfdrm
- 117
- 1
- 0
Introducción
Introducción
En este proyecto, diseñé una landing page para una plataforma financiera ficticia llamada Strike, cuyo propósito es ofrecer una tarjeta inteligente que ayuda a los usuarios a gestionar sus finanzas de manera eficiente y sin límites. El diseño está pensado para transmitir confianza, accesibilidad y tecnología avanzada, con una interfaz moderna e intuitiva.
La página presenta las funcionalidades clave del producto, destacando la facilidad para pagar servicios, invertir y realizar transacciones internacionales sin restricciones. También incorpora elementos visuales que refuerzan la identidad de marca y la usabilidad del sitio.

Materiales
Materiales
Figma: Herramienta principal utilizada para el diseño de la interfaz, la creación de prototipos y la organización visual del proyecto.
Imágenes y Mockups: Se emplearon imágenes estratégicas y mockups de tarjetas para representar el producto en contexto.
1. Brief
1. Brief
El brief se centró en comprender a Strike, una herramienta que ofrece una tarjeta inteligente y una plataforma digital para optimizar la gestión financiera.


2. Estructura
2. Estructura
La estructura de la web sigue una jerarquía clara y persuasiva. Comienza con una navegación sencilla para orientar al usuario, seguida de un hero section llamativo que captura la propuesta de valor. Luego, se detallan las funcionalidades de la app y sus beneficios principales, reforzados por beneficios adicionales que añaden más valor. Un testimonio o quote valida la confiabilidad del producto, antes de presentar la sección de la app, que motiva a la descarga. Finalmente, el footer proporciona enlaces clave y datos de contacto, asegurando una experiencia completa y efectiva.

3. Wireframes
3. Wireframes
El wireframe establece la estructura visual y funcional de la página, organizando los elementos clave para garantizar una experiencia de usuario intuitiva y efectiva. La navegación se sitúa en la parte superior, facilitando el acceso a las secciones principales. El "Hero Section" destaca el valor central de la marca o producto con un diseño llamativo. A continuación, se presentan las características de la aplicación ("App Features"), seguidas por los beneficios principales y adicionales, los cuales refuerzan el atractivo del producto. Se incorpora una sección de citas o testimonios ("Quote") para generar confianza en el usuario. Finalmente, se destaca la funcionalidad clave de la aplicación antes de llegar al pie de página ("Footer"), que contiene enlaces y elementos informativos esenciales.

4. Diseño alta fidelidad
4. Diseño alta fidelidad
El diseño de alta fidelidad representa la versión final y detallada de la interfaz, con tipografías, colores, imágenes y elementos interactivos definidos. Se centra en la estética y en la experiencia del usuario, asegurando que la navegación sea clara, intuitiva y atractiva. Se aplican principios de diseño visual y jerarquía de información para guiar al usuario de manera efectiva a través de la página.

5. Documentación del diseño
5. Documentación del diseño
Para la documentación se realizó los estilos básicos para el diseño: Tipografía, colores, íconos, botones y mockups. Asignando estilos para ser reutilizados durante el proyecto.

0 comments
Log in or join for Free to comment