Spanish (Español) translation by Itzel Alvarez (you can also view the original English article)
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.
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.
- Fuente Auro
- Fuente Alma Mono
- Serie de vectores web e iconos de redes sociales
- Foto de vista aérea de rocas y laguna de mar azul en Grecia
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
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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).
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.
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.
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 %.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
¡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.
¿Quieres aprender más?
Tenemos bastantes tutoriales de UI en Sketch en Tuts+, desde nivel principiante a intermedio, ¡échales un vistazo!
Diseño web receptivoTips y trucos para un proceso de diseño receptivo en Sketch
SketchGuía de herramientas de prototipado en Sketch
SketchCómo diseñar una UI para una aplicación de administración de dinero en Sketch
SketchCómo utilizar símbolos de Sketch para crear diagramas de flujo
SketchTip en breve: Recrear los anillos de actividad del Apple Watch en Sketch
SketchCómo organizar tus estilos y símbolos de Sketch Como un profesional
SketchSketch en 60 segundos: redimensionando grupos de elementos
Sketch+10 nuevos plugins de Sketch para mejorar tu flujo de trabajo al diseñar
SketchDomina la alineación y la distribución en Sketch
SketchCómo diseñar un icono usando operaciones booleanas en Sketch
By
