Te enfrentas al desafío de crear un Prototyping atractivo para una Mobility-App. No se trata solo del diseño; se trata de diseñar la experiencia del usuario de manera efectiva desde el principio, para que ayude al usuario a navegar de manera intuitiva por la aplicación. En este tutorial, serás guiado paso a paso a través del proceso de creación de un prototipo en Sketch. ¡Comencemos este emocionante viaje en el mundo del diseño!
Principales hallazgos
- El prototipado es un paso crucial en el desarrollo de aplicaciones.
- En Sketch, puedes comenzar con formas y diseños simples.
- Una estructura clara y una guía del usuario son esenciales para el éxito de tu aplicación.
Guía paso a paso
Comienza creando la estructura básica de tu aplicación en Sketch. Puedes utilizar la herramienta de pincel para dibujar tus primeros elementos de diseño. Simplemente ve a la herramienta de pincel o presiona la tecla "P" para seleccionarla.
Crea un rectángulo que represente la pantalla de tu aplicación. Mantén presionada la tecla "Alt" mientras arrastras con el mouse para dibujar un rectángulo. Esto asegurará que el rectángulo mantenga sus proporciones. Se ve bastante bien.
Ahora es el momento de diseñar la primera página de la aplicación. Comienza con la barra de pestañas inferior. Usa nuevamente la herramienta de pincel y dibuja una línea recta manteniendo presionada la tecla Shift para asegurarte de que obtienes una línea recta.
Después de diseñar la barra de pestañas, agrega tres íconos que representen las funciones principales de la aplicación. Con la tecla ALT, puedes duplicar fácilmente las figuras mientras las arrastras al lugar adecuado.
Ahora pasemos a la barra de navegación superior. Mantén presionada la tecla ALT mientras dibujas otra área rectangular para la barra de navegación.
Las burbujas de chat son la siguiente parte de tu aplicación que queremos diseñar. Utiliza la herramienta de pincel para dibujar una burbuja de chat. Esta se mostrará inmediatamente al usuario como un saludo. Agrega un breve texto que se dirija al usuario, como "¡Hola y bienvenido a la Mobility App!"
Para asegurarte de que todo se vea atractivo, puedes copiar y ajustar las burbujas. Selecciona las burbujas y arrástralas hacia abajo con la tecla ALT para agregar otro texto de bienvenida, como "Comienza con tu primera sesión de movilidad".
A continuación, inserta el botón de video con el que los usuarios pueden reproducir sus lecciones. Dibuja un botón redondo con la herramienta de pincel y combínalo con un triángulo para aclarar la representación y la función.
Ahora copia todos los elementos esenciales de la UI, como las barras de navegación superior e inferior, en la siguiente página para garantizar la consistencia en el diseño. Puedes simplemente arrastrar un captura de pantalla con la tecla ALT para duplicar los elementos en la siguiente página.
En esta nueva pantalla que has creado, diseña las opciones para los cursos. Aquí deberías crear una visión general sencilla de los cursos disponibles que el usuario puede seleccionar.
En la vista de perfil, puedes crear un espacio para la foto de perfil, el nombre de usuario y la cantidad de horas de curso completadas. Aquí es importante presentar la información de manera clara y precisa.
Finalmente, al diseñar las selecciones de cursos y lecciones, crea la vista de lecciones y agrega un botón de cierre para que el usuario pueda cerrar la selección en cualquier momento.
Con esto, el prototipo básico para tu Mobility App está completo. Ahora tienes un diseño atractivo que estructura claramente la navegación del usuario y al mismo tiempo te ayuda como diseñador a visualizar claramente la visión de la aplicación.
Resumen – Prototipado de una Mobility App en Sketch
En el transcurso de este tutorial, has aprendido paso a paso cómo prototipar una aplicación de movilidad en Sketch. Desde la primera idea hasta los últimos elementos de diseño, pudiste ampliar tu conocimiento y crear una herramienta útil para el desarrollo posterior de tu aplicación.
Preguntas frecuentes
¿Cómo empiezo a diseñar en Sketch?Selecciona la herramienta de pincel (P) y comienza a crear los primeros elementos.
¿Cómo puedo duplicar elementos de manera eficiente?Mantén presionada la tecla ALT mientras arrastras el elemento con el mouse.
¿Qué hago si no estoy satisfecho con el diseño?Puedes ajustar o redesignar elementos existentes en cualquier momento para lograr el resultado deseado.
¿Cómo aseguro que la navegación del usuario sea clara?Asegúrate de que todas las funciones estén dispuestas lógicamente y que el usuario pueda navegar de manera intuitiva.
¿Puedo diseñar para dispositivos móviles en Sketch?Sí, puedes ajustar el tipo y el tamaño de los elementos según las dimensiones de la pantalla de los dispositivos móviles.
