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

Cómo diseñar una UI para una aplicación de administración de dinero en Sketch

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

En este tutorial de aplicación en Sketch aprenderás cómo crear un diseño de UI móvil para administrar dinero. Échale un vistazo al diseño final para ver lo que estaremos trabajando. También siéntete libre de descargar los archivos fuente.

Lo que aprenderemos

Primero, aprenderás cómo configurar una mesa de trabajo personalizada y cómo simplificar tu flujo de trabajo usando reglas, guías y guías inteligentes. Todas esas características te ayudarán a trabajar a mayor velocidad (y con mayor diversión) a lo largo de este tutorial de aplicación en Sketch.

Después, usando formas y trazados sencillos, aprenderás cómo crear las secciones principales del diseño de UI en Sketch. Más adelante, aprenderás cómo estilizar esas formas y trazados y cómo crear iconos de hamburguesa. Por último, aprenderás cómo crear el texto y añadirlo a tu diseño de aplicación para móviles.

Paquetes de UI en Sketch en Envato Elements

Para más inspiración sobre cómo ajustar o mejorar tu diseño final de UI en Sketch, puedes literalmente descargar miles de recursos con una suscripción a Envato Elements.

UI kits on Envato Elements
Paquetes de UI y recursos gráficos de Envato Elements

Dicho esto, ¡comencemos el tutorial!

1. Cómo configurar la mesa de trabajo

Abre Sketch. Desde la barra de herramientas o del menú, ve a Insert > Artboard  (o presiona A). El Inspector mostrará una lista de plantillas, pero crearemos una mesa de trabajo de tamaño personalizado. Haz clic y arrastra dentro de tu lienzo para crear una nueva mesa de trabajo.

Asegúrate de que tu mesa de trabajo se quede activa y concéntrate en el Inspector a la derecha. Configura numéricamente el Ancho (Width) a 828 y la Altura (Height) a 1792. Cuando la tengas, presiona Escape para deseleccionar tu mesa de trabajo.

artboard

Paso 2

Ve a View > Canvas > Show Rulers (o presiona Control + R) para activar las Reglas (Rulers). Haz clic derecho sobre tus reglas y ve a Show All Guides, pues vamos a agregar guías nuevas.

Concéntrate en las reglas verticales y mueve tu cursor dentro de ellas. Haz un solo clic para agregar una guía horizontal a 94 px. Las guías pueden moverse y reposicionarse al darles clic y arrastrándolas dentro de las reglas. Sigue con las reglas verticales y usa la misma técnica para agregar una segunda guía a 244 px y una tercera a 274 px. Ahora que todo está preparado, puedes comenzar a trabajar en este diseño de aplicación para móviles.

show all guides

2. Cómo agregar la barra superior a tu diseño de UI en Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Concéntrate en tu mesa de trabajo, crea una forma de 282 x 150 px y colócala como se muestra en la siguiente imagen. Usa las guías horizontales para alinear tu rectángulo a la perfección.

Asegúrate de que se queda seleccionado y ve al panel de Inspector. Concéntrate en la sección de Style y desmarca la casilla de verificación de Borders para desactivar el borde aplicado a tu rectángulo.

rectangle

Paso 2

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 40 x 8 px, asegúrate de que se queda seleccionada y ve al panel de Inspector.

Usa los cuadros de entrada X y Y para colocar tu forma numéricamente. Ingresa 55 en el cuadro X, y 149 en el cuadro Y. Arrastra el deslizador de Radius a 4 y luego ve a la sección de Style. Desactiva el Border y luego cambia el color de Fill a #5E72EF.

radius

Paso 3

Selecciona el rectángulo redondeado que hiciste en el paso anterior. Mantén presionadas las teclas Shift y Option, haz clic en tu selección y arrastra un poco para crear una copia. Arrastra la copia 8 px hacia abajo de la forma original, como se muestra en la primera imagen. Las guías inteligentes te ayudarán con ello. Repite esta técnica y añade un rectángulo redondeado más, tal como se muestra en la segunda imagen.

duplicate

Paso 4

Selecciona el rectángulo gris, concéntrate en la sección de Style del panel de Inspector y cambia el color de Fill a blanco (#ffffff).

white

3. Cómo agregar el menú desplazable horizontal a tu diseño UI para móviles

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 180 x 72 y colócala exactamente como se muestra en la siguiente imagen. La guía inteligente te hará saber si tu selección está verticalmente centrada a la mesa de trabajo. Asegúrate de que esta nueva forma esté seleccionada y concéntrate en el panel de Inspector.

Ajusta el Radius a 10, desactiva el borde y cambia el color de Fill a #5E72EF.

rounded rectangle

Paso 2

Selecciona la forma que hiciste en el paso anterior y agrega un duplicado en el mismo lugar (Command + C > Command + Shift + V). Mantén presionada la tecla Shift, arrastra el duplicado hacia la izquierda y deja un espacio de 20 px entre las formas.

Asegúrate de que el duplicado de este paso aún esté seleccionado, concéntrate en la sección de Styles del panel de Inspector y disminuye la Opacity a 5 %.

duplicate rounded rectangle

Paso 3

Selecciona el rectángulo redondeado transparente que hiciste en el paso anterior. Agrega un duplicado, arrástralo a la izquierda y deja un espacio de 20 px entre el duplicado y la forma original, como se muestra en la primera imagen.

Agrega un nuevo duplicado, arrástralo a la derecha y deja un espacio de 20 px entre el duplicado y el borde derecho del rectángulo redondeado azul, tal como se muestra en la segunda imagen. Agrega un duplicado más, arrástralo a la derecha y deja un espacio de 20 px entre el duplicado y la forma a la izquierda, tal como se muestra en la tercera imagen.

multiply rounded rectangle

4. Cómo agregar la cuadrícula a tu diseño de UI en Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 828 x 86 y colócala como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionada y concéntrate en la sección de Style del panel de Inspector. Desactiva el Border y cambia el color de Fill a #FFB800.

yellow rectangle

Paso 2

Asegúrate de que tu rectángulo amarillo todavía esté seleccionado y ve a Arrange > Make Grid. Ingresa las características que se muestran en la siguiente imagen y luego haz clic en el botón Make Grid. Esto añadirá seis duplicados de tu rectángulo amarillo en una columna perfecta sin espaciado entre ellos.

Concéntrate en la esquina inferior izquierda del rectángulo inferior. Ve a las reglas verticales y agrega una nueva guía en el 1008.

make grid

Paso 3

Selecciona el rectángulo superior y concéntrate en la sección de Style del panel de Inspector. Cambia el color de Fill a #5E72EF y disminuye la Opacity a 3 %.

opacity

Paso 4

Ve al siguiente rectángulo hacia abajo y selecciónalo. Concéntrate en la sección de Style del panel de Inspector y cambia el color de Fill a blanco.

change color white

Paso 5

Vuelve a seleccionar el rectángulo superior y teclea Option + Command + C para copiar los atributos de estilo de tu selección. Selecciona los dos rectángulos resaltados en la segunda imagen y teclea Option + Command + V para pegar los atributos de estilo.

copy paste style

Paso 6

Selecciona los rectángulos restantes, concéntrate en la sección de Style del panel de Inspector y cambia el color de Fill a blanco.

change color white

Paso 7

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 138 x 516 y colócala como se muestra en la siguiente imagen. Asegúrate de que tu rectángulo amarillo todavía esté seleccionado y ve a Arrange > Make Grid. Ingresa las características que se muestran en la siguiente imagen y luego haz clic en el botón Make Grid.

grey rectangle make grid

Paso 8

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 14 x 167, asegúrate de que se queda seleccionada y concéntrate en el panel de Inspector. Ajusta el Radius a 7 y ve a la sección de Style. Desactiva el Border y cambia el color de Fill a #5E72EF.

thin rounded rectangle

Paso 9

Selecciona la forma que hiciste en el paso anterior y colócala como se muestra en la primera imagen. Usa las guías inteligentes para centrar verticalmente tu selección al rectángulo gris que está más a la izquierda, tal como se muestra a continuación.

Duplica este rectángulo redondeado delgado (Command + C > Command + V). Selecciona el duplicado, aumenta su altura a cerca de 234 px y céntralo al siguiente rectángulo gris, tal como se muestra en la segunda imagen.

Agrega otra copia de tu rectángulo redondeado delgado (Command + V > Command + V). Selecciónalo y aumenta la altura a cerca de 405 px. Cambia el color de Fill a blanco y centra tu selección al tercer rectángulo gris, como se muestra en la tercera imagen.

Continua y agrega un rectángulo redondeado delgado para cada uno de los rectángulos redondeados grises que quedan, tal como se muestra en la cuarta imagen. No olvides centrar esas formas a la perfección.

smart guides

Paso 10

Selecciona el tercer rectángulo gris y usa el tirador inferior para alargar tu forma a 602 px, tal como se muestra en la primera imagen. Asegúrate de que se queda seleccionada y ve al panel de Inspector. Ajusta el Radius a 15 y cambia el color de Fill a #5E72EF.

stretch rectangle

Paso 11

Asegúrate de que el rectángulo redondeado que editaste en el paso anterior todavía esté seleccionado y concéntrate en la sección de Style del panel de Inspector.

Haz clic en el botón de Shadows y añade una sombra sutil a tu forma. Cambia el color a #5E72EF y disminuye el Alpha a 20, ingresa 0 en el cuadro X y 10 en el cuadro Y, después ajusta el Blur a 20 y el Spread a 5. Al final, el diseño debería verse como en la siguiente imagen.

shadow

Paso 12

Selecciona todos tus rectángulos grises y concéntrate en la sección de Style del panel de Inspector.

Desactiva el Fill y activa el Border. Cambia el color de borde a #5E72EF y disminuye el Alpha a 10, asegúrate de que el borde esté alineado al centro y ajusta el Width a 2.

border opacity

Paso 13

Sigue trabajando en la serie de rectángulos editados en el paso anterior.

Selecciona el rectángulo que está más a la izquierda y ve a Layer > Path > Scissors. Usa clics para quitar los lados superiores e inferiores de tu forma seleccionada. Por defecto, los dos trazados que quedan están agrupados. Simplemente haz clic en el botón Ungroup en la Barra de Herramientas para desagrupar esos dos trazados.

cut path scissors

Selecciona el siguiente rectángulo, ve a Layer > Path > Scissors y corta los lados superior, izquierdo e inferior.

cut path scissors

Selecciona el siguiente rectángulo, ve a Layer > Path > Scissors y corta los lados superior, derecho e inferior.

cut path scissors

Selecciona el siguiente rectángulo, ve a Layer > Path > Scissors y corta los lados superior, derecho e inferior.

cut path scissors

Selecciona el rectángulo final, ve a Layer > Path > Scissors y corta los lados superior e inferior. Desagrupa los dos lados restantes.

cut path scissors

5. Cómo agregar los botones de estadísticas en tu diseño UI para móviles

Paso 1

Concéntrate en las reglas verticales y añade una nueva guía en el 1068.

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 618 x 136 y colócala como se muestra en la siguiente imagen. Asegúrate de que está centrado y luego concéntrate en el panel de Inspector. Ajusta el Radius a 15, desactiva el borde y cambia el color de Fill a #5E72EF.

guide rounded rectangle

Paso 2

Agrega un duplicado de tu rectángulo redondeado (Command + C > Command + V), alinéalo con la forma original y deja un espacio de 30 px entre las dos formas.

Agrega un segundo duplicado de esta forma (Command + C > Command + V), alinéalo con las formas originales y deja un espacio de 30 px entre este nuevo duplicado y el primero.

multiply rounded rectangle

Paso 3

Sigue trabajando en los tres rectángulos redondeados. Selecciona el de en medio, cambia su color de Fill a #EF5E5E y luego selecciona el último y cambia su color de Fill a #5DD06C.

Haz zoom en la parte inferior izquierda de tu rectángulo redondeado verde. Concéntrate en las reglas verticales y agrega una nueva guía en el 1536.

red green

Paso 4

Haz zoom en el lado derecho de tu rectángulo redondeado azul. Concéntrate en las reglas horizontales y agrega una nueva guía en el 685.

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea un cuadrado de 60 px y colócalo como se muestra en la siguiente imagen. Mantén presionada la tecla Shift mientras arrastras para crear fácilmente un cuadrado perfecto. Asegúrate de que se queda seleccionado y concéntrate en la sección de Style en el panel de Inspector. Desactiva el Border, cambia el color de Fill a negro (#000000) y disminuye su Opacity a 30%.

black square

Paso 5

Duplica ese cuadrado negro (Command + C > Command + V) y coloca el duplicado como se muestra en la primera imagen. Agrega un segundo duplicado de este cuadrado negro y colócalo como se muestra en la segunda imagen.

multiply black square

Paso 6

Regresemos al primer cuadrado negro. Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O).

Crea un círculo de 56 px y colócalo como se muestra en la siguiente imagen. Mantén presionada la tecla Shift mientras arrastras para crear fácilmente un círculo perfecto. Asegúrate de que esta nueva forma se queda seleccionada y concéntrate en la sección de Style del panel de Inspector. Desactiva el Fill y concéntrate en el Border. Cambia su color a blanco, asegúrate de que el botón Center está marcado y ajusta el Width a 4.

Concéntrate en las reglas verticales y agrega una nueva guía que básicamente corte tu círculo a la mitad.

circle

Paso 7

Desde la barra de herramientas o del menú, ve a Insert > Vector (o presiona R). Con sólo tres clics agrega un trazado como se muestra en la siguiente imagen. Asegúrate de que se queda seleccionado y concéntrate en la sección de Style del panel de Inspector.

Desactiva el Fill y concéntrate en el Border. Cambia el color a blanco y ajusta el Width a 4, y después marca los botones de Round Cap y Round Joins.

half arrow path

Paso 8

Asegúrate de que el trazado que añadiste en el paso anterior siga seleccionado y ve a Layer > Path > Rotate Copies. Arrastra la manija de punto y colócala a 2 px entre el trazado original y el duplicado, tal como se muestra en la siguiente imagen, y después presiona Enter.

rotate copies

Paso 9

Ve hacia el siguiente cuadro negro. Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O):

Crea una forma de 56 x 48 px, rellénala de amarillo y colócala como se muestra en la primera imagen. Cambia a Rectangle (R), crea una forma de 56 x 8 px. Rellénala de naranja y colócala como se muestra en la segunda imagen.

Selecciona ambas formas de este paso, haz clic en el botón Union de tu Barra de herramientas, luego haz clic en el botón Flatten.

oval union flatten

Paso 10

Asegúrate de que la forma que hiciste en el paso anterior todavía esté seleccionada, y concéntrate en la sección de Style del panel de Inspector. Desactiva el Fill y concéntrate en el Border. Cambia el color a blanco y ajusta el Width a 4, después marca los botones de Round Cap y Round Joins.

border

Paso 11

Sigue trabajando en el trazado del paso anterior y ve a Layer > Path > Scissors. Usa clics para retirar los cuatro lados resaltados en las tres primeras imágenes. Al final, tu trazado debe verse como la cuarta imagen. Cuando hayas terminado, copia el estilo de este trazado (Option + Command + C).

scissors

Paso 12

Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O). Crea una forma de 56 x 48 px, colócala como se muestra en la siguiente imagen y sólo copia el estilo (Option + Command + V).

oval

Paso 13

Asegúrate de que la forma ovalada que agregaste en el paso anterior todavía esté seleccionada y ve a Layer > Path > Scissors. Haz un simple clic para retirar el lado resaltado en la primera imagen.

scissors

Paso 14

Desde la barra de herramientas o del menú, ve a Insert > Vector (o presiona V). Agrega un trazado vertical de 20 px, colócalo como se muestra en la siguiente imagen y pega el estilo (Option + Command + V).

Con la misma herramienta, crea el trazado que se muestra en la siguiente imagen. Selecciónalo y copia el estilo (Option + Command + V).

arrow

Paso 15

Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T). Haz clic una vez en tu mesa de trabajo y concéntrate en la sección de Text del panel de Inspector. Selecciona la fuente Baloo, cambia el tamaño a 30 y el color a blanco, después sólo teclea el símbolo de dólar ($). Colócalo como se muestra en la siguiente imagen.

dollar sign

Paso 16

Selecciona todas las formas y crea tu ícono (resaltado en la primera imagen) y cópialas (Command + C). Ve al tercer cuadrado negro, pégalas (Command + V) y colócalas como se muestra en la segunda imagen.

Selecciona únicamente los dos trazados que conforman la flecha y haz clic en el botón Rotate de tu Barra de herramientas. Rota tu flecha 180 grados, como se muestra en la siguiente imagen y presiona Enter.

duplicate icon rotate arrow

Paso 17

Selecciona los tres cuadrados negros y bórralos.

delete squares

6. Cómo agregar los botones de categorías en tu diseño de UI en Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea un cuadrado de 132 px y colócalo como se muestra en la siguiente imagen. Asegúrate de que se quede seleccionada y concéntrate en el panel de Inspector.

Ajusta el Radius a 15 y luego ve a la sección de Style. Desactiva el Border, cambia el color de Fill a #5E72EF y disminuye su Opacity a 70%.

Concéntrate en las reglas verticales y agrega una nueva guía en el 1566.

rounded square

Paso 2

Sigue trabajando en tu cuadrado redondeado. Agrega tres duplicados, alínealos con la forma original y deja un espacio de 30 px entre cada forma.

multiply rounded square

Paso 3

Selecciona los cuadrados redondeados que añadiste en el paso anterior y cambia los colores de Fill como se muestra a continuación.

recolor

Paso 4

Importa de este Conjunto de íconos vectoriales los cuatro iconos que necesitas. Ajusta su tamaño, cambia su color a blanco y colócalos como se muestra en la siguiente imagen. De nuevo, las guías inteligentes te ayudarán a centrar estas formas a la perfección.

import icons

7. Cómo agregar texto al diseño UI de tu aplicación para móviles

Paso 1

Usaremos una fuente del sistema para la mayor parte del cuerpo del texto y una fuente no predeterminada para los títulos.

"Las fuentes del sistema harán que el diseño de tu aplicación sea más consistente con el sistema operativo. Pero usar únicamente fuentes del sistema evitará que tu aplicación tenga un toque único." –

Andrey Zhulidin

Concéntrate en el menú superior. Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T). Haz clic en tu mesa de trabajo y concéntrate en la sección Text del panel de Inspector. Selecciona la fuente Odudo Mono, cambia el estilo a Bold y el tamaño a 40. Aumenta el Character spacing a 10 y cambia el color a #5E72EF, y luego escribe "PORTAFOLIO". Selecciona el texto y colócalo como se muestra en la siguiente imagen.

text top bar

Paso 2

Ve al menú de desplazamiento horizontal. Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T). Haz clic en tu mesa de trabajo y concéntrate en la sección de Text del panel de Inspector.

Selecciona la fuente San Francisco Pro, cambia el estilo a Bold y el tamaño a 20. Aumenta el Character spacing a 2 y cambia el color a blanco, luego escribe "OCT 2019". Selecciona el texto y colócalo como se muestra a continuación.

Con los mismos atributos de texto, agrega los otros 4 textos que se muestran en las siguientes imágenes. Lo único que tendrás que cambiar es el color de texto, de blanco a #5E72EF.

text horizontal scrolling menu

Paso 3

Ve hacia el lado inferior de tu cuadrícula. Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T). Haz clic en tu mesa de trabajo y concéntrate en la sección de Text del panel de Inspector.

Selecciona la fuente San Francisco Pro, cambia el estilo a Heavy y el tamaño a 30. Asegúrate de que el Character spacing esté ajustado en Auto y cambia el color a #CBD1FA, después escribe "23". Selecciona el texto y colócalo como se muestra a continuación.

Agrega cinco duplicados de este texto, cambia los números por "24", "25", "26", "27" y "28" y colócalos como se muestra en las siguientes imágenes.

text chart

Paso 4

Ve a los botones de estadísticas. Primero, agrega una guía vertical en el 143 y otra horizontal en el 1101. Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T). Haz clic en tu mesa de trabajo y concéntrate en la sección de Text del panel de Inspector.

Selecciona la fuente Odudo Mono, cambia el estilo a Bold y el tamaño a 40. Cambia el color a blanco y luego escribe "16". Selecciona el texto y colócalo como se muestra a continuación.

Deselecciona este texto y vuelve a seleccionar la herramienta de Text. Haz clic en tu mesa de trabajo y concéntrate en la sección de Text del panel de Inspector.

Selecciona la fuente San Francisco Pro, cambia el estilo a Semibold y el tamaño a 20. Asegúrate de que el color sea blanco y luego escribe "Transacciones octubre 2019". Agrega una guía horizontal en el 1171 y luego coloca este nuevo texto como se muestra en la segunda imagen.

text stats buttons

Paso 5

Agrega las guías horizontales de la siguiente imagen (1267 y 1337) y luego duplica el texto del paso anterior. Edita el texto y colócalo como se muestra a continuación.

ABCD

Paso 6

Agrega las guías horizontales que se muestran en la siguiente imagen (1433 y 1503ve) luego duplica el resto del paso anterior. Edita el texto, colócalo como se muestra a continuación y tu diseño UI de Sketch está terminado.

ABCD

¡Felicidades! ¡Tu diseño de UI en Sketch está listo!

Así es como debería verse. Espero que hayas disfrutado este tutorial de aplicación en Sketch y que puedas aplicar estas técnicas en tus futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.

Siéntete libre de ajustar el diseño final de UI para móviles y darle tu estilo. No olvides que puedes encontrar recursos geniales para inspirar diseños de UI en Envato Elements, con soluciones interesantes para mejorar tus habilidades de diseño de UI de aplicación para móviles.

ABCD
Aprende más sobre diseño de UI en Sketch
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.