() translation by (you can also view the original English article)
En este tutorial revisaremos el diseño del proceso de registro en una aplicación para móviles. En específico, diseñaremos la pantalla de inicio de sesión de una aplicación de finanzas en Sketch.
Lo que necesitaremos
Para realizar el tutorial necesitarás:
- Una pareja de fuentes sólida que transmita la sensación de profesionalismo y modernidad. Este es un proceso de registro para una aplicación de finanzas, necesitamos un elemento que aporte confiabilidad. Algunas fuentes que podrían funcionar son: Aeonik, Proxima Nova, Roboto o Maison Neue. Usar la fuente San Francisco, que es propia de Apple, siempre es una opción segura.
- Debido a la mínima cantidad de íconos que estaremos usando en esta interfaz, (sólo usaremos un ícono de verificación y otro de hamburguesa), el paquete de íconos aquí usado no es tan diferente a casi cualquier paquete que incluya esos íconos. Ya que son muy simples, también pueden diseñarse fácilmente desde cero.
- Nuestra herramienta de preferencia para diseñarlos en las pantallas de registro es Sketch, aunque si usas Adobe XD o Figma no será tan diferente.
1. Prepara tu espacio de trabajo
Comienza creando una mesa de trabajo. Puedes usar las preconfiguradas de la aplicación. Dando clic en A ingresaremos al panel que nos permitirá crear la mesa de trabajo, el cual nos ofrece varios tamaños de lienzos que podemos usar.
2. Añade los elementos más importantes
Para hacer el trabajo de nuestro proyecto más fácil, te recomiendo que crees una pequeña guía de estilo y configures los elementos más importantes como los colores, botones, estilos de texto y otros elementos básicos.
No exageres en los elementos e intenta mantener lo esencial al mínimo. Al crear símbolos en Sketch (Layer > Create > Symbol), encontrarás todo lo que prepares en el lado izquierdo de la barra lateral, debajo de la pestaña Components.
Para hacer una demostración, hagamos un botón primario que utilizaremos con frecuencia dentro de nuestras pantallas de registro.
Paso 1
Añade un rectángulo que sirva como la base de tu botón. Ve a Insert > Shape > Rectangle o presiona R. Traza un rectángulo del tamaño correcto y luego modifica el radio de la forma (esquinas redondeadas).
Paso 2
Ve a Insert > Text o haz clic en el caracter T y añade el texto necesario. Añadiremos la cadena de texto "Siguiente Paso" dentro de nuestro botón y luego elegiremos la fuente, el tamaño y el estilo correctos.
Paso 3
Al final presiona CMD/CTRL y selecciona el texto del rectángulo. Al usar el botón de Create Symbol crearemos un componente que puede ser reusado a lo largo de las páginas, y que nos permite cambiar su anchura, altura o el texto ingresado sin tener que preparar el estilo desde cero. Este tutorial puede ayudarte mientras aprendes cómo trabajar con diferentes estados de interacción de un componente.
3. Configura tu estilo de campo
La configuración del estilo de campo comenzará con la creación de un rectángulo blanco y un color de borde que hará que el campo sobresalga del fondo. Para la consistencia y mantener patrones dentro del diseño, haz que la altura del campo sea igual a la de los botones. Lo mismo aplica para los radios de las esquinas.
Continuaremos configurando un estilo de texto para el campo y terminaremos agregando una etiqueta, que es una manera en que los usuarios determinan el tipo de campo e información esperada. Añadir un efecto sutil de sombra al campo es otra manera de darle un buen detalle visual.
4. Construyendo la barra de rango de precios
Comenzaremos con el rectángulo que actúa como la base de la barra de rango. Debe ser un poco más oscura que el fondo para que ambos se noten pero a la vez sean sutiles, así evitamos un brillo excesivo y no lastimamos la vista del usuario.
Es importante darle a las esquinas un radio máximo, los acabados redondeados son muy comunes en los deslizadores. Le añadiremos un color tenue, que representará el rango seleccionado. Usaremos un color verde brillante en nuestra interfaz, por eso aquí hemos usado un tono de verde más ligero.
El siguiente paso es añadir dos círculos pequeños que indicarán el rango elegido.
El siguiente paso es poner el color en las etiquetas que definen el tipo de la barra de rango y las cantidades bajo los círculos para ver de manera más clara la cantidad de rango elegida.
5. Añade el logotipo
En este punto agregaremos el logotipo de nuestra aplicación. Para este tutorial creé rápidamente un logotipo ficticio que creo que es una buena opción para fines ilustrativos.
Tener un logo en SVG siempre es una buena idea porque permite hacer cambios dependiendo del tamaño que necesites. Añade el logo a la lista de símbolos para que lo puedas usar cuando lo requieras.
Hasta ahora tenemos:
6. Navegación y estilos
La navegación debe ser simple, clara e intuitiva. Ya tenemos el logo para fines de marca, ahora agregaremos un icono de menú tipo hamburguesa a la izquierda para activar el panel de navegación deslizable.
Asegúrate de que el ícono que defina la navegación tenga un color que lo haga destacar del fondo y un tamaño que sea proporcional al del logotipo. Queremos que tenga un acceso fácil y visible, pero que no sea muy invasivo.
7. Tipografía
El siguiente paso es definir el tamaño de la tipografía que aparecerá en nuestra aplicación. El texto debe ser notable y fácil de leer, pero no enorme ni muy invasivo. Usaremos los colores que ya determinamos y usaremos un encabezado de 30 px y 16 px para el párrafo.
Esos tamaños parecen ser los mejores para mantener una buena proporción entre el tamaño del lienzo, el encabezado y los del párrafo junto con su aspecto de visibilidad.
8. Añade el avatar
Crearemos un círculo de un tamaño adecuado y lo convertiremos en un a carátula. Importa o arrastra y suelta la imagen que elegiste para tu avatar en Sketch, y colócala encima del círculo.
Para que la caratula en el círculo no tome otras capas debajo de ella, crea un grupo separado para el círculo y la imagen importada del avatar.
9. Pasos en la parte inferior
Para la parte de abajo del UI, que es en donde se muestra el progreso general, crearemos un rectángulo con un fondo blanco y, como en la sección superior, le daremos una división con un borde de 1 a 2 px. Esta será la base de la parte inferior, donde se muestra el progreso de registro.
Luego crearemos un círculo para indicar el estado. Para ello haremos un círculo verde (que es nuestro color de actividad/contraste) con poca opacidad (tenue). Haremos esto porque luego duplicaremos ese mismo círculo y le daremos una opacidad del 100 %. Esto creará un contraste agradable a la vista con el círculo en el fondo. Al agregar un punto de vector adicional en el círculo (usando el la tecla "V" de acceso rápido) y usando la herramienta de corte, seleccionaremos la parte que debe ser cortada, como se ilustra en la siguiente imagen:
Por último, para tener todas las esquinas redondeadas, iremos a Border Settings, luego elegiremos la opción Rounded.
Hasta ahora tenemos:
9. Campos seleccionados
Cabe mencionar que la mayoría de los elementos UI visibles en las pantallas de registro son repetitivos y similares entre sí. Es por esto que la siguiente página será fácil de crear gracias al estilo ya establecido.
Ya hemos configurado el estilo y tamaño de varios campos. El botón de radio seleccionado también resaltará el estado seleccionado con un contorno de 2 px sobre el campo, que es del mismo color verde (de actividad) que hemos usado en los otros elementos UI.
El desplegable de esta página tiene el mismo estilo de la forma de campo, con la excepción de un icono de cursor/flecha que da una pista visual que los usuarios pueden usar para seleccionar una opción diferente.
Nuestro resultado hasta ahora es:
10. Toques finales
La última página del proceso de registro requerirá una ilustración, un párrafo de texto, un elemento de interfaz de usuario que indique la paginación y un botón. Usaremos el estilo de botones existente. También hay un estilo de texto predeterminado que usaremos, y para la navegación usaremos tres formas pequeñas para indicar que el contenido puede deslizarse hacia la izquierda o derecha.
Para la ilustración, usaremos una que tomé de Envato Elements. La ilustración en particular no importa tanto como el hecho de que hay un elemento visual abstracto que enriquece el UI al estar ahí.
¡Aquí está el diseño UI terminado!
¡Eso es todo, amigos!
Aquí termina nuestro tutorial sobre cómo diseñar el proceso de registro en una aplicación de finanzas en Sketch. Esperamos que te haya servido. Si tienes alguna duda ¡háznoslo saber en la sección de comentarios!
Cursos sobre Sketch en Tuts+
