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

Cómo diseñar una pantalla de inicio de sesión para una aplicación de viajes 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 UI en Sketch aprenderás a diseñar una pantalla de inicio de sesión de una aplicación de viajes.

En primer lugar, aprenderás a crear botones simples, cómo copiar características de estilo y cómo guardar y usar símbolos o símbolos incrustados. Todas esas características facilitarán tu trabajo a lo largo de este tutorial de diseño UI en Sketch.

En segundo lugar, al usar formas simples, trazados y técnicas de creación de vectores, aprenderás cómo agregar iconos de pixeles perfectos a tu diseño UI en Sketch. Por último, aprenderás cómo agregar texto e imágenes a tu diseño de Sketch.

Plantillas de UI en Sketch en GraphicRiver

Para más inspiración sobre cómo ajustar o mejorar tu diseño UI final en Sketch, puedes encontrar muchos recursos en GraphicRiver.

Sketch UI Templates on GraphicRiver
Descarga plantillas de UI en Sketch en GraphicRiver

Lo que necesitarás:

Para recrear exactamente lo que aparece en este tutorial, necesitarás los siguientes recursos disponibles en Envato Elements. En su defecto, puedes sustituir estos recursos con fuentes gratuitas e imágenes de cualquier lado.

1. Cómo configurar la mesa de trabajo

En la barra de herramientas o desde el menú, ve a Insert > Artboard (o presiona A), y el Inspector mostrará una lista de plantillas de mesa de trabajo. Haz clic en la plantilla de iPhone 11 para crear una mesa de trabajo de 414 x 896 px. Ya que la tengas, presiona Escape para deseleccionar tu mesa de trabajo

sketch UI design artboard

2. Cómo guardar y usar símbolos en un diseño de aplicación en Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape Rectangle (o presiona R). Crea una forma del tamaño de tu mesa de trabajo (282 x 150 px), asegúrate de que cubre toda tu mesa de trabajo y de que se queda seleccionada.

Ve al panel de Inspector y concéntrate en la sección de Style. Da clic en la casilla de verificación para desactivar los Borders aplicados a tu rectángulo, y deja el color de Fill predeterminado.

sketch UI design rectangle

Paso 2

Desde la barra de herramientas o del menú, ve a Insert > Shape Rectangle (o presiona R). Crea una forma de 320 x 60 px, asegúrate de que sigue seleccionada y concéntrate en el panel de Inspector.

Primero, usa los cuadros de entrada X y Y para colocar numéricamente este nuevo rectángulo. Pon 47 en el cuadro X, y 730 en el cuadro Y, y tu forma se moverá a la parte inferior de la mesa de trabajo, tal como se muestra a continuación.

Continúa en el panel de Inspector, arrastra el deslizador de Radius a 30 y luego ve la sección de Style. Desactiva el Border existente y cambia el color de Fill a #F9732E.

sketch UI design button

Paso 3

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 Alma Mono, cambia el tamaño a 20 y el color a blanco (#FFFFFF), y después solo escribe "REGÍSTRATE". Coloca el texto como se muestra en la siguiente imagen.

sketch UI design text

Paso 4

Selecciona tu rectángulo redondeado naranja junto con el texto "REGÍSTRATE" y haz clic en Create Symbol en la barra de herramientas, o ve a Layer > Create Symbol en el menú. Nombra a tu símbolo "Botón naranja" y haz clic en OK. Esto creará un símbolo maestro aparte de tu mesa de trabajo. Si haces un cambio a este símbolo, también aparecerá en las copias del símbolo en tu documento.

sketch UI design symbol

Paso 5

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 320 x 60 px, asegúrate de que sigue seleccionada y concéntrate en el panel de Inspector.

De nuevo, usa los cuadros de entrada X y Y para colocar numéricamente tu selección. Ingresa los valores mostrados en la siguiente imagen y luego arrastra el deslizador de Radius a 30.

Sigue trabajando en el panel de Inspector y ve a la sección de Style. Desactiva el Border existente y cambia el color de Fill a #4FD44E.

sketch UI design create symbol

Paso 6

Asegúrate de que tu forma verde todavía está seleccionada y guárdala como símbolo usando el mismo botón de Create Symbol de la barra de herramientas. Nombra este nuevo símbolo como "Botón verde" y haz clic en OK.

sketch UI design nested symbol

Paso 7

Concéntrate en tus dos símbolos maestros, ya que crearás un símbolo incrustado sencillo.

Ve a Insert > Document > Botón Verde para agregar una copia del símbolo verde. Colócalo justamente arriba del símbolo maestro "Botón naranja" y luego haz clic en el botón Backward de tu barra de herramientas para mover la copia del símbolo recién añadido detrás del texto. Al final, todo debería verse como se muestra en la segunda imagen.

sketch UI design add symbol

Paso 8

Regresa a tu mesa de trabajo y verás que el botón inferior ahora es verde. Eso pasó por los cambios que se hicieron a su símbolo maestro en el paso anterior.

Selecciona esta copia de símbolo y concéntrate en la sección de Overrides del panel de Inspector. Abre el menú desplegable del Botón verde y selecciona No Symbol para quitar el símbolo sobreescrito del "Botón verde" y regresa a la copia original del símbolo.

sketch UI design edit symbol

Paso 9

Mueve el botón superior, haz clic derecho y ve a Replace > Document > Botón naranja. Ve a la sección de Symbol desde el panel de Inspector, escribe "REGÍSTRATE" en el cuadro de texto y deja la copia sobreescrita del símbolo "Botón verde".

sketch UI design override

3. Cómo agregar los botones de redes sociales y los cuadros de mensaje en un diseño de Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 130 x 25, asegúrate de que se queda seleccionada y concéntrate en el panel de Inspector.

Usa los cuadros de entrada X y Y para colocar numéricamente tu selección, tal como se muestra a continuación, y luego arrastra el deslizador de Radius a 12.5.

Concéntrate en la sección de Style del panel de Inspector, desactiva el Border existente y cambia el color de Fill a negro #000000) y disminuye la Opacity a 70 %.

Cuando termines, teclea el atajo Command + Option + C en tu teclado para copiar el estilo de tu selección.

sketch design rounded rectangle

Paso 2

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 San Francisco, cambia el tamaño a 10 y el color a blanco (#FFFFFF). Escribe el texto que se muestra a continuación y colócalo como se muestra en la siguiente imagen.

sketch design text

Paso 3

Desde la barra de herramientas o del menú, ve a Insert > Oval (o presiona O). Crea un círculo de 60 px, asegúrate de que se queda seleccionado y usa los cuadros de entrada X y Y para colocar tu selección numéricamente, tal como se muestra a continuación.

Concéntrate en la sección de Style del panel de Inspector, desactiva el Border existente y cambia el color de Fill a negro (#000000).

sketch design circle

Paso 4

Asegúrate de que tu círculo negro todavía esté seleccionado y ve a Arrange > Make Grid. Ingresa las características mostradas en la siguiente imagen y luego haz clic en el botón Make Grid, Esto añadirá tres copias de tu círculo negro, tal como se muestra en la siguiente imagen.

Selecciona esos tres círculos uno por uno, ve a la sección de Style del panel de Inspector y cambia los colores como se muestra a continuación.

sketch design make grid

Paso 5

Ve a View > Canvas > Show All Guides para activar las Smart Guides.

Importa los cuatro iconos que necesitas de esta serie de vectores de iconos web y de redes sociales. Ajusta su tamaño, cambia su color a blanco (#FFFFFF) y colócalos como se muestra en la siguiente imagen. Las Smart Guides harán más fácil obtener un centrado perfecto de esos iconos.

sketch design social icons

Paso 6

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una nueva forma de 180 x 25 px, asegúrate de que se queda seleccionada y concéntrate en el panel de Inspector.

Usa las Smart Guides para colocar tu selección como se muestra a continuación y luego arrastra el deslizador de Radius a 12.5.

Concéntrate en la sección de Style del panel de Inspector, desactiva el Border existente y cambia el color de Fill a blanco #FFFFFF), y disminuye la Opacity a 70 %.

rounded rectangle

Paso 7

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 San Francisco, cambia el tamaño a 10 y el color a negro (#000000). Escribe el texto que se muestra a continuación y colócalo como se muestra en la siguiente imagen.

text

Paso 8

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una nueva forma de 110 x 25 px, asegúrate de que se queda seleccionada y presiona Command + Option + V para pegar las características de estilo que copiaste hace algunos pasos.

Usa las Smart Guides para colocar tu selección como se muestra a continuación y no olvides arrastrar el deslizador de Radius a 12.5.

rounded rectangle

Paso 9

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 San Francisco, cambia el tamaño a 10 y el color a blanco (#FFFFFF). Escribe el texto que se muestra a continuación y colócalo como se muestra en la siguiente imagen.

text

4. Cómo agregar los campos de entrada en un diseño de aplicación en Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 320 x 60 px, asegúrate de que se queda seleccionada y presiona Command + Option + V para pegar las características de estilo que copiaste hace algunos pasos.

Usa las Smart Guides para colocar tu selección como se muestra a continuación y no olvides arrastrar el deslizador de Radius a 30.

sketch design input field

Paso 2

Concéntrate en el lado izquierdo del rectángulo que hiciste en el paso anterior. Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O). Crea un círculo de 30 px, asegúrate de que se queda seleccionado y usa los cuadros de entrada X y Y para colocar numéricamente tu selección como se muestra a continuación.

Concéntrate en la sección de Style del panel de Inspector, desactiva el Border existente y cambia el color de Fill a blanco (#FFFFFF).

circle

Paso 3

Selecciona el rectángulo redondeado negro y el círculo blanco que hiciste en los pasos anteriores y duplícalos (Command + C > Command + V).

Asegúrate de que solo las copias están seleccionadas y colócalas como se muestra en la siguiente imagen. Las Smart Guides serán de ayuda otra vez.

sketch design duplicate

Paso 4

Concéntrate en tu círculo blanco inferior. Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 12 x 10 px y colócala como se muestra en la primera imagen. Arrastra el deslizador de Radius a 2, desactiva el Border y cambia el color de Fill a #D8D8D8.

Con la misma herramienta, crea una forma de 8 x 10 px y colócala como se muestra en la segunda imagen. Esta vez arrastra el deslizador de Radius a 4, desactiva el Fill y concéntrate en el Border. Cambia el color a #D8D8D8, aumenta su Ancho (Width) a 3 y revisa el botón Inside de alineación. Asegúrate de que esta forma se quede seleccionada y ve a Layer > Convert to Outlines para convertir ese trazo en un trazado de vector editable.

Selecciona las dos formas que hiciste en este paso y haz clic en el botón Union de la barra de herramientas.

sketch design lock icon

Paso 5

Desde la barra de herramientas o del menú, ve a Insert > Shape > Rectangle (o presiona R). Crea una forma de 2 x 4 px y colócala como se muestra en la primera imagen. Arrastra el deslizador de Radius a 1, desactiva el Border y cambia el color de Fill a negro.

Selecciona este rectángulo redondeado negro junto con la forma que hiciste en el paso anterior y haz clic en el botón Subtract de la barra de herramientas.

Selecciona tu icono de bloqueo junto con el círculo blanco que está detrás y haz clic en el botón Sustract de tu barra de herramientas. Al final, tu diseño debería verse como la cuarta imagen.

sketch design lock icon

Paso 6

Ve hacia arriba, al círculo blanco que queda. Concéntrate en tu círculo blanco inferior. Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O). Crea un círculo de 20 px y colócalo como se muestra en la primera imagen. Duplica esta forma (Command + C > Command + V), selecciona el duplicado y colócalo como se muestra en la segunda imagen.

Selecciona las formas que hiciste en este paso y haz clic en el botón Intersect de tu barra de herramientas.

sketch design username icon

Paso 7

Desde la barra de herramientas o desde el menú, ve a Insert > Shape > Oval (o presiona O). Crea una forma de 8 px y colócala como se muestra en la primera imagen.

Selecciona las dos formas grises junto con el círculo blanco que está detrás y haz clic en el botón Subtract de la barra de herramientas. Al final, tu diseño debería verse como en la tercera imagen.

sketch design username icon

5. Cómo agregar un logo pequeño en un diseño de Sketch

Paso 1

Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O). Crea un círculo de 44 px, desactiva el Border y cambia el color de Fill a #FFFFFF.

Haz doble clic en esta nueva forma para activar el modo de Edición. Selecciona el punto inferior y arrástralo 22 px abajo. Mantén presionada la tecla Shift mientras arrastras para restringir el movimiento de tu selección al eje vertical. Cuando lo hayas hecho, haz doble clic en este punto para girarlo desde un punto reflejado a un punto derecho.

edit point

Paso 2

Asegúrate de que la forma que hiciste en el paso anterior todavía esté seleccionada y ve a Layer > Path > Offset Path.... Arrastra el deslizador de Offset a -8 y haz clic en OK. Selecciona la forma resultante y cambia el color de Fill a negro.

offset path

Paso 3

Desde la barra de herramientas o del menú, ve a Insert > Shape > Oval (o presiona O). Crea un círculo de 42 px y colócalo como se muestra en la primera imagen. Selecciónalo junto con la forma negra y haz clic en el botón Intersect de la barra de herramientas.

Ve de nuevo a Insert > Shape > Oval desde la barra de herramientas o del menú (o presiona O). Esta vez crea un círculo de 16 px, rellénalo de negro y colócalo como se muestra en la cuarta imagen.

icon

Paso 4

Selecciona la forma de gota de agua y concéntrate en la sección de Style del panel de Inspector. Desactiva el Fill y activa el Border. Cambia su color a blanco y aumenta el Ancho (Width) a 8, luego asegúrate de que los botones de Center y Round Joins estén seleccionados.

white border

Paso 5

Selecciona las dos formas negras y cambia su color de relleno a blanco.

Selecciona las tres formas resaltadas en la segunda imagen y haz clic en el botón Group de la barra de herramientas. Asegúrate de que tu grupo esté seleccionado y colócalo como se muestra en la tercera imagen.

group

Paso 6

Desde la barra de herramientas o del menú, ve a Insert > Text (o presiona T) y agrega texto.

Selecciona la fuente Auro, cambia el tamaño a 50 y el color a blanco (#FFFFFF). Escribe el texto que se muestra debajo y colócalo como se muestra en las siguientes imágenes.

text

6. Cómo agregar la imagen de fondo en un diseño de aplicación en Sketch

Paso 1

Primero descarga esta foto de vista aérea de rocas y laguna de mar azul en Grecia o cualquier otra foto de tu preferencia.

Selecciona el rectángulo gris que cubre tu mesa de trabajo por completo y concéntrate en la sección de Style del panel de Inspector.

Haz clic en el muestrario de colores de Fill y luego haz clic en el botón Image Fill que está a la derecha de la ventana emergente. Selecciona tu imagen en Choose Image... y tu diseño de Sketch está listo.

sketch design image fill

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

Así es como debería verse. Espero que hayas disfrutado este tutorial de diseño de aplicación en Sketch y que apliques 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 Sketch y hacerlo tuyo. Puedes encontrar buenas fuentes de inspiración en GraphicRiver, que ofrece soluciones interesantes para mejorar tus habilidades de diseño de UI en Sketch.

sketch app design

¿Quieres aprender más?

Tenemos bastantes tutoriales de UI en Sketch en Tuts+, desde nivel principiante a intermedio, ¡échales un vistazo!

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.