Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

Cómo crear un diseño de interfaz de usuario para una aplicación de finanzas en Adobe XD

by
Length:LongLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Final product image
What You'll Be Creating

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:

Finance Banking Icons
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.

paper sketch


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.

new artboard

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.

rectangle tool

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.

rectangle tool

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.

wireframe

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.

wireframe icon

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.

wireframe icon

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.

wireframe icon

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.

wireframe box

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.

finance app design mockup

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.

artboard color

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.

arrow icon

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.

menu icon

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.

text

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.

navigation bar

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.

rounded square

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.

plus icon

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.

linear gradient

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.

card text

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".

card group

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.

group duplicate

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.

card groups

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.

import icons

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.

category box

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.

category icon

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".

category component

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.

repeat grid

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.

replace icons

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.

categories bar

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.

transactions text

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.

rounded square

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.

transactions menu icon

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.

stylize rectangles

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.

transactions text

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".

transaction component

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.

transactions repeat grid

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.

edit component

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".

transactions bar

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.

blue rectangle

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".

cards group

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.

mask group

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".

duplicate artboard

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.

prototype cards animation

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.

prototype cards animation

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.

prototype cards animation

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.

prototype cards animation

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.

finance app design light mode

¡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!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.