Spanish (Español) translation by Steven (you can also view the original English article)
En este tutorial aprenderás a crear un diseño de una aplicación de finanzas en Adobe XD y (lo que es más importante) cómo animar fácilmente partes de tu interfaz de usuario.
Lo que aprenderás en este tutorial de Adobe XD
- Cómo crear una maqueta para una aplicación de finanzas en Adobe XD
- Cómo crear e importar iconos
- Cómo configurar la cuadrícula
- Cómo guardar componentes de Adobe XD
- Cómo crear una cuadrícula repetitiva
- Cómo crear prototipos interactivos
Para obtener más inspiración sobre cómo ajustar o mejorar el diseño final de la interfaz de usuario para finanzas, puedes encontrar muchos recursos en GraphicRiver.
Lo que crearás
Vamos a diseñar variaciones oscuras y claras de esta interfaz de usuario. Las aplicaciones de teléfonos inteligentes a menudo se adaptan al modo oscuro o claro, determinado por las preferencias del usuario, por lo que es útil tenerlo en cuenta. Aquí hay un video para demostrar la animación que vamos a crear (la interfaz de usuario oscura):
Te mostraré la variación del modo claro más adelante en el proceso.
Lo que necesitarás
Necesitarás los siguientes recursos para completar este diseño de interfaz de usuario de la aplicación para finanzas:
- Fuente San Francisco Compact Display
- Iconos de Finanzas y Banca
1. Cómo agregar los patrones de interfaz de usuario a XD
Paso 1
Comencemos este diseño para la aplicación de finanzas con un boceto básico en papel. En papel, puedes establecer fácilmente los componentes principales del diseño de la aplicación y las proporciones y ubicaciones generales de las características principales. Un boceto en papel es el comienzo perfecto para un wireframe digital.
Paso 2
Abramos Adobe XD y seleccionemos la plantilla iPhone XR/XS Max/11 (414 x 896) para crear una mesa de trabajo de 414 x 896.
Paso 3
Ahora comencemos el trabajo en el wireframe. Echa un vistazo a tu boceto de papel y comienza con las cuatro secciones principales (o patrones) del diseño de la aplicación.
Elige la herramienta rectángulo (R) y crea una forma de 414 x 70 px. Utiliza las guías inteligentes para colocar tu forma como se muestra en la siguiente imagen y, a continuación, ve al inspector de propiedades. Deshabilita el borde existente con esa casilla de verificación y, a continuación, haz clic en el selector de color de relleno y cambia el color a #646E83.
No pierdas tiempo aplicando estilos a los objetos o agregando demasiado contenido de texto en esta fase inicial. En este momento, tu única preocupación debe ser la estructura general del diseño de la interfaz de usuario de la aplicación. Establecer las proporciones y el espaciado entre cada sección.
Paso 4
Asegúrate de que la herramienta rectángulo (R) esté activa y crea una forma de 414 x 150 px. Colócalo como se muestra en la primera imagen.
Usando la misma herramienta, crea una forma de 414 x 83 px y colócala como se muestra en la segunda imagen. También crea una forma de 414 x 446 px y colócala como se muestra en la segunda imagen.
Paso 5
Estos serán los componentes principales del diseño de la interfaz de usuario.
En la parte superior, tienes la barra de navegación clásica donde agregarás los botones de control para tu aplicación. En la barra de categorías agregarás una fila de categorías de transacciones, mientras que la barra de transacciones se usará para enumerar el historial de transacciones de la tarjeta seleccionada.
2. Cómo agregar los controles al diseño de la aplicación de finanzas
Paso 1
Echa un nuevo vistazo a tu boceto en papel y vamos a agregar los controles a este diseño de interfaz de usuario de la aplicación. Comencemos con la barra de navegación. Elige la herramienta rectángulo (R) y mantén presionada la tecla Mayús para crear fácilmente un cuadrado de 20 px. Colócalo como se muestra en la siguiente imagen, deshabilita el borde y establece el color de relleno en #646E83. Utiliza los mismos atributos de apariencia para el resto de los objetos que servirán como controles.
Asegúrate de que este cuadrado permanece seleccionado. Mantén pulsada la tecla Opción y Mayús y simplemente arrastra una copia de tu selección a la derecha, como se muestra en la segunda imagen. Utiliza las guías inteligentes para colocar esta nueva forma exactamente como se muestra en la segunda imagen.
Paso 2
Muévete hacia abajo hasta la esquina superior izquierda de la barra de tarjetas. Elige la herramienta rectángulo (R) y recuerda mantener presionada la tecla Mayús para crear fácilmente un cuadrado de 30 px. Colócalo como se muestra en la primera imagen.
Usando la misma herramienta, crea una forma de 240 x 150 px y colócala como se muestra en la segunda imagen.
Paso 3
Enfócate en el lado izquierdo de esa barra de categorías. Usando la herramienta rectángulo (R), crea un cuadrado de 60 px y colócalo como se muestra en la primera imagen.
Desplázate hacia abajo hasta el lado derecho de la barra de transacciones. Usando la misma herramienta, crea un cuadrado de 30 px y colócalo como se muestra en la segunda imagen.
Paso 4
Enfócate en la barra de transacciones y asegúrate de que la herramienta rectángulo (R) sigue activa. Crea una forma de 80 x 30 px y colócala como se muestra en la primera imagen y luego crea un cuadrado de 60 px y colócalo como se muestra en la segunda imagen.
Paso 5
La maqueta de la aplicación se ha completado. A algunas de estas formas les aplicaremos estilos y las usaremos en el diseño final de la interfaz de usuario de la aplicación, algunas solo servirán como guías para botones e iconos que está a punto de agregar, y algunas se eliminarán.
3.Cómo aplicar estilos a la barra de navegación de este diseño de aplicación de finanzas
Paso 1
Vamos a ir por un estilo oscuro para el diseño general de la aplicación y sólo vamos a utilizar colores vibrantes para las características más importantes. Los componentes principales utilizarán diferentes tonos de negro para separar sutilmente las secciones más importantes sin ser demasiado estridentes. Usaremos el blanco para todos los textos y los iconos para crear un contraste agradable y hacer que cada elemento sea lo más legible posible. Al final tendrás el modo oscuro de este diseño de la aplicación. En los pasos finales, aprenderás a ajustar fácilmente el diseño de tu aplicación y cambiar el diseño general del modo oscuro al modo claro.
Comencemos cambiando el color de la mesa de trabajo. Haz clic en el nombre situado encima de la mesa de trabajo y ve al inspector de propiedades. Haz clic en el color de relleno y cambia el color a #0A0E17.
Paso 2
Enfócate en el cuadrado izquierdo desde la barra de navegación y vamos a crear un pequeño icono de flecha. En primer lugar, debes configurar la cuadrícula para que te resulte más fácil crear objetos con píxeles perfectos. Haz clic en el nombre de la mesa de trabajo y ve al inspector de propiedades.
Enfócate en la sección cuadrícula y haz clic en esa casilla de verificación para habilitar la cuadrícula. Selecciona cuadrado en el menú desplegable, escribe 1 en el cuadro de entrada y, a continuación, haz clic en el selector de color. Cambia el color a #C7C7C7 y no olvides bajar la opacidad al 50%.
Selecciona la herramienta Pluma (P) y crea la dirección de la flecha que se muestra en la siguiente imagen. Asegúrate de que permanece seleccionado y ve al inspector de propiedades. Deshabilita el Relleno, cambia el Color del borde a blanco, aumenta el tamaño a 4 y no olvides marcar los botones redondeado y unión redondeada.
Paso 3
Muévete al cuadrado derecho desde la barra de navegación. Elige la herramienta rectángulo (R), crea una forma de 20 x 4 px y colócala como se muestra en la primera imagen. Asegúrate de que permanece seleccionado y concéntrate en el inspector de propiedades. Desactiva el borde, cambia el color de relleno a blanco (#FFFFFF) y establece el Radio de la esquina en 2.
Mantén pulsadas las teclas Opción y Mayús y simplemente arrastra una copia de este rectángulo redondeado debajo de la forma original, como se muestra en la segunda imagen. Agrega una tercera copia entre los dos rectángulos redondeados, disminuye su ancho por la mitad y colócalo como se muestra en la tercera imagen.
Paso 5
Selecciona los cuadrados oscuros que se encuentran detrás de los botones de la barra de navegación y simplemente elimínalos.
Elige la herramienta de texto (T), haz clic dentro de tu mesa de trabajo y agrega el fragmento de texto "Cuentas". Colócalo como se muestra en la siguiente imagen, asegúrate de que permanece seleccionado y ve al inspector de propiedades. Establece el color en blanco. Selecciona la fuente San Francisco Compact Display, cambia el estilo a negrita y la alineación a centrado y, a continuación, establece el tamaño en 20.
Usaremos esta fuente del sistema de Apple para todo nuestro texto porque ofrece una amplia gama de estilos e idiomas, y esto te da la posibilidad de lograr una legibilidad óptima en cada tamaño de punto o ajustar fácilmente el contenido del texto cuando sea necesario.
4. Cómo aplicar los estilos a la barra de tarjetas para este diseño de aplicación de finanzas
Paso 1
Selecciona el rectángulo utilizado para demarcar la barra de tarjetas y simplemente elimínalo.
Ve a la forma utilizada para demarcar la barra de navegación y selecciónala. Aumenta su altura a 190 px, colócalo como se muestra en la segunda imagen y cambia el color de relleno a #1C2230.
Paso 2
Selecciona el cuadrado de 30 px de la barra de tarjetas. Ve al inspector de propiedades, cambia el color de relleno a negro (#000000) y establece el radio de esquina en 10.
Paso 3
Manténte enfocado en tu cuadrado negro redondeado. Elige la herramienta rectángulo (R), crea una forma de 2 x 14 px y colócala como se muestra en la primera imagen.
Asegúrate de que este rectángulo delgado está seleccionado y duplícalo (Comando + D). Selecciona la copia, ve al inspector de propiedades y establece el ángulo de rotación en 90 grados.
Paso 4
Selecciona el rectángulo de la barra de tarjetas y ve al inspector de propiedades. Establece el radio de esquina en 10 y, a continuación, haz clic en el selector de color de relleno. Cambia el tipo de relleno de color sólido a degradado lineal y, a continuación, céntrate en los reguladores de degradado.
Selecciona el izquierdo y cambia el color a #2E64F8 y luego selecciona el derecho y cambia el color a #0C23AC. Vuelve a la mesa de trabajo y mueve los controles deslizantes de degradado como se muestra en la primera imagen.
Paso 5
Selecciona la herramienta de texto (T) y agrega el fragmento de texto "Tarjeta de débito". Colócalo como se muestra en la siguiente imagen, asegúrate de que permanece seleccionado y ve al inspector de propiedades. Establece el color en blanco. Selecciona la fuente San Francisco Compact Display, cambia el estilo a claro y la alineación hacia la izquierda y, a continuación, establece el tamaño en 10.
Con la misma herramienta, agrega el resto del texto que se muestra a continuación y utiliza los atributos de texto que se muestran en las siguientes imágenes.
Paso 6
Selecciona el rectángulo redondeado azul y todo el texto que se encuentra encima de él. Utiliza la abreviación de teclado Comando-G para agrupar estos objetos seleccionados.
Ve al panel Capas y cambia el nombre de este grupo recién creado por "Tarjeta azul".
Paso 7
Asegúrate de que el grupo "Tarjeta azul" esté seleccionado y duplícalo (Comando + D). Ve al panel Capas y cambia el nombre de este nuevo grupo "Tarjeta púrpura".
Selecciona el rectángulo redondeado de este nuevo grupo y reemplaza el degradado lineal existente por el que se muestra en la siguiente imagen.
Paso 8
Enfócate en el grupo "Tarjeta púrpura" y ajusta el contenido del texto como se muestra en la primera imagen. Una vez que hayas terminado, mantén presionada la tecla Mayús y arrastra tu grupo "Tarjeta púrpura" a la derecha como se muestra en la segunda imagen.
5. Cómo aplicar estilos a la barra de categorías para este diseño de aplicación de finanzas
Paso 1
Descarga estos iconos de Finanzas & Banca y arrastra los cuatro iconos que se muestran a continuación dentro del diseño de la interfaz de usuario de la aplicación. Escala estas formas a 20 px y cambia el color de relleno a blanco.
Selecciona cada icono uno por uno, abre el panel de recursos y guarda los iconos dentro del panel componentes. Asigna un nombre a estos componentes como se muestra en la siguiente imagen.
Paso 2
Enfócate en la barra de categorías, selecciona el cuadrado oscuro y ve al inspector de propiedades. Establece el radio de esquina en 10 y cambia el color de relleno a #1C2230.
Selecciona la herramienta de texto (T) y agrega el fragmento de texto "Todos". Colócalo como se muestra en la siguiente imagen, asegúrate de que permanece seleccionado y ve al inspector de propiedades. Establece el color en blanco. Selecciona la fuente San Francisco Compact Display, cambia el estilo a claro y la alineación a centrado y, a continuación, establece el tamaño en 12.
Paso 3
Elige la herramienta rectángulo (R) y crea un cuadrado de 9 px. Llénalo de blanco y establece el radio de esquina en 2. Arrastra una copia de esta forma a la derecha y deja un espacio de 2 px entre la copia y el original, como se muestra en la segunda imagen. Duplica estas dos formas, arrastra las copias hacia abajo y recuerda dejar un espacio de 2 px entre las copias y los originales.
Una vez que hayas terminado, selecciona las cuatro formas y haz clic en el botón unión del inspector de propiedades. Coloca este nuevo objeto tal y como se muestra en de la tercera imagen.
Paso 4
Selecciona los tres objetos resaltados en la primera imagen, ve al panel de recursos y guarda la selección como un nuevo componente. Llámalo "Categoría".
Paso 5
Asegúrate de que el componente recién guardado sigue seleccionado y haz clic en el botón repetir cuadrícula del inspector de propiedades. Haz clic en el controlador derecho y arrástralo hacia la derecha para agregar cuatro copias de tu componente, como se muestra en la primera imagen.
Mueve el cursor a cualquier lugar entre tus componentes y haz clic y arrastra para reducir el espaciado general entre los componentes a 19 px, como se muestra en la segunda imagen.
Paso 6
Enfócate en el segundo componente de la cuadrícula repetida. Haz doble clic en el icono dos veces para aislarlo y, a continuación, elimínalo. Arrastra el componente "Household" desde el panel de recursos y colócalo exactamente como se muestra en la segunda imagen. Repite esta técnica para los siguientes componentes de la cuadrícula repetida.
Paso 7
Enfócate en tu cuadrícula repetida y ajusta el texto como se muestra en la primera imagen. Una vez que hayas terminado, selecciona el rectángulo utilizado para demarcar la barra de categorías y elimínala.
6. Cómo aplicar estilos a la barra de transacciones para este diseño de aplicación de finanzas
Paso 1
Selecciona la herramienta de texto (T) y agrega el fragmento de texto "TRANSACCIONES". Colócalo como se muestra en la siguiente imagen, asegúrate de que permanece seleccionado y ve al inspector de propiedades. Establece el color en blanco. Selecciona la fuente San Francisco Compact Display, cambia el estilo a semibold y la alineación hacia la izquierda y, a continuación, establece el tamaño en 15.
Paso 2
Enfócate en la esquina superior derecha de la barra de transacciones y selecciona ese cuadrado. Ve al inspector de propiedades, establece el radio de esquina en 5 y cambia el color de relleno a #1C2230.
Paso 3
Enfócate en la forma editada en el paso anterior. Elige la herramienta rectángulo (R), crea una forma de 10 x 2 px y rellénala de blanco. Agrega dos copias de este rectángulo y arrástralas debajo del original, como se muestra en la segunda imagen.
Paso 4
Selecciona el otro cuadrado de la barra de transacciones, establece el radio de esquina en 10 y cambia el color de relleno a #1C2230.
Selecciona el rectángulo de la barra de transacciones, establece el radio de esquina en 15 y cambia el color de relleno a #FD7074.
Paso 5
Elige la herramienta de texto (T), agrega el fragmento de texto "Electricidad" y colócalo como se muestra en la primera imagen. Establece el color en blanco. Selecciona la fuente San Francisco Compact Display, cambia el estilo a medio y la alineación hacia la izquierda y, a continuación, establece el tamaño en 20.
Usando la misma herramienta, agrega el fragmento de texto "13 Ene 08:45 PM" y colócalo como se muestra en la segunda imagen. Establece el color en blanco y reduce la opacidad al 50%. Selecciona la fuente San Francisco Compact Display, cambia el estilo a claro y la alineación hacia la izquierda y, a continuación, establece el tamaño en 14.
Finalmente, agrega el fragmento de texto "$29.99" y colócalo como se muestra en la tercera imagen. Establece el color en #1C2230. Selecciona la fuente Mono de San Francisco, cambia el estilo a negrita y la alineación a centrada y, a continuación, establece el tamaño en 14.
Paso 6
Agrega una instancia del componente de la casa y colócala tal y como se muestra en la primera imagen. Selecciona los objetos resaltados en la segunda imagen y guárdalos como un nuevo componente. Llámalo "Transacción".
Paso 7
Asegúrate de que el componente recién guardado sigue seleccionado y haz clic en el botón repetir cuadrícula del inspector de propiedades. Haz clic en ese controlador inferior y arrástralo hacia abajo para agregar cuatro copias del componente. Reduce el espaciado entre los componentes a 20 px, como se muestra en la primera imagen.
Aísla los iconos de cada copia del componente y sustitúyelos por los que se muestran en la segunda imagen.
Paso 8
Selecciona el segundo de la forma roja inferior y cambia su color de relleno a #00b980. Ajusta la información del texto como se muestra en la siguiente imagen.
Paso 9
Selecciona el rectángulo utilizado para demarcar la barra de transacciones y cambia el color de relleno a #0A0E17. Selecciona esta forma junto con el resto del objeto que componen la barra de transacciones y agrúpalas (Comando-G). Ve al panel capas y asigna a este grupo el nombre "Transacciones de tarjeta azul".
Paso 10
Elige la herramienta rectángulo (R) y crea una forma de 414 x 5 px. Rellena este rectángulo delgado con #2E64F8 y colócalo como se muestra en la siguiente imagen.
7. Cómo enmascarar objetos y multiplicar mesas de trabajo
Paso 1
Ve al panel capas, selecciona los grupos "Tarjeta azul" y "Tarjeta púrpura" y agrúpalos (Comando-G). Nombra a este nuevo grupo como "Tarjetas".
Paso 2
Elige la herramienta rectángulo, crea una forma de 344 x 150 px y colócala exactamente como se muestra en la primera imagen. Los atributos de apariencia de esta nueva forma no son importantes. Selecciónalo junto con tu grupo "Tarjetas" y ve a Objeto > Máscara con Forma (Mayús + Comando + M). Esto enmascarará tu grupo de "Tarjetas" manteniendo visible solo el contenido del grupo que está cubierto por el rectángulo de máscara.
Esto no cambiará el aspecto de tu diseño, pero comprenderás su uso una vez que moderes la creación de prototipos. Cuando conviertas este grupo en un menú deslizante horizontal, la máscara mantendrá el efecto de diapositiva visible solo en el área enmascarada.
Paso 3
Selecciona la mesa de trabajo (haz clic en el nombre) y duplícala (Comando + D). Deja un espacio de 200 px entre tus dos mesas de trabajo. Enfócate en la nueva mesa de trabajo. Selecciona ese rectángulo azul delgado y cambia el color de relleno a #772CCB.
Ve al panel capas y abre el grupo enmascarado. Selecciona ese grupo "Tarjetas" y muévete a tu mesa de trabajo. Mantén pulsada la tecla Mayús y arrastra la selección hacia la izquierda. Asegúrate de dejar un espacio de 20 px entre el borde derecho de tu selección y el borde derecho de la mesa de trabajo, como se muestra en la segunda imagen. Vuelve al panel capas y cambia el nombre del grupo "Transacciones de tarjeta azul" por "Transacciones de tarjeta púrpura".
8.Cómo convertir el diseño de la interfaz de usuario de la aplicación de finanzas en un prototipo interactivo
Paso 1
Cambia del modo Diseño al modo Prototipo.
Ve al panel capas y selecciona el grupo "Tarjetas" en la primera mesa de trabajo. Vuelve a tu mesa de trabajo, haz clic en ese botón de flecha azul y simplemente arrástralo por encima de la segunda mesa de trabajo para conectar las dos mesas de trabajo. Ve al inspector de propiedades para configurar el comportamiento de la interacción. Establece arrastrar para que ocurra el movimiento, selecciona animación automática para el tipo y mantén el ajuste de aceleración establecido en ninguno.
Paso 2
Selecciona el grupo "Tarjetas" de la segunda capa y conéctalo con la primera mesa de trabajo. Mantén el mismo comportamiento de interacción utilizado en el paso anterior.
Paso 3
Selecciona la primer mesa de trabajo y enfócate en el panel capas. Selecciona solo el grupo "Tarjeta púrpura" del grupo "Tarjetas" y conéctalo con la segunda mesa de trabajo. Ve al inspector de propiedades para configurar el comportamiento de esta nueva interacción. Establece tocar para que ocurra el movimiento, selecciona animación automática para el tipo, mantén el ajuste de aceleración en ninguno y cambia la duración a 0,4.
Selecciona la segunda mesa de trabajo y enfócate en el panel capas. Selecciona solo el grupo "Tarjeta azul" del grupo "Tarjetas" y conéctalo con la primera mesa de trabajo.
Paso 4
Selecciona el grupo "Transacciones de tarjeta azul", cópialo (Comando-C) y pega la copia dentro de la segunda mesa de trabajo en la parte superior del grupo "Transacciones de tarjeta púrpura". Copia el grupo "Transacciones de tarjeta púrpura" (puedes seleccionarlo fácilmente desde el panel capas) y pega la copia dentro de la primer mesa de trabajo en la parte superior del grupo "Transacciones de tarjeta azul".
Selecciona las dos copias de los grupos agregados en este paso y arrástralas 500 px por debajo de las barras de las mesas de trabajo. Tener estos grupos fuera de tus mesas de trabajo agregará una buena diapositiva dentro y fuera de la animación de la pantalla para tus grupos "Transacciones de la tarjeta azul" y "Transacciones de la tarjeta púrpura".
Ahora que has terminado, puedes hacer clic en el botón vista previa para echar un vistazo a tu prototipo.
Paso 5
Puedes cambiar fácilmente el estilo del diseño de la interfaz de usuario de la aplicación de finanzas de modo oscuro a modo claro. Todo lo que tienes que hacer es cambiar los colores utilizados para el texto, los iconos y el espacio vacío.
Comienza con el texto y los iconos y reemplaza el blanco con #2A2B90. Muévete al color de la mesa de trabajo y cámbialo a blanco. Haz lo mismo para el rectángulo que sirve como fondo para los grupos "Transacciones" y el cuadrado redondeado detrás de ese icono del +. Finalmente, cambia el color de la barra de navegación a #F0F3FD. Haz lo mismo con los cuadrados redondeados que encapsulan los iconos.
¡Felicitaciones! ¡Terminaste!
Así es como debe verse en modo claro. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en futuros proyectos donde hagas diseños de interfaz de usuario para una aplicación. No dudes en compartir tu resultado final en la sección de comentarios.
Siéntete libre de ajustar el diseño final y hacerlo tuyo. Puedes encontrar algunas grandes fuentes de inspiración en GraphicRiver, con soluciones interesantes para mejorar tu diseño de interfaz de usuario.
¿Quieres aprender más?
Tenemos un montón de tutoriales en Tuts+, principiante a nivel intermedio, ¡echa un vistazo!
Adobe XDCómo crear un diseño de interfaz de usuario para reservas de hotel en Adobe XD
Adobe XDCómo crear un diseño de interfaz de usuario para una aplicación de un reproductor de música en Adobe XD
Adobe XDTu primer wireframe con Adobe XD
Adobe XDNuevo curso: 15 accesos directos para ahorrar tiempo en Adobe XD
Adobe XDCómo crear un prototipo de interfaz de usuario con Adobe XD
SketchCómo crear bordes unilaterales en Sketch y Adobe XD
Adobe XDConsejo rápido: Diseña un gráfico de flechas SVG en Adobe XD
Adobe XDCómo utilizar el cambio de tamaño y las restricciones adaptables en Adobe XD
Adobe XDDomina Adobe XD con estos 4 cursos
Adobe XDFigma vs. Adobe XD en 2020
