Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch para principiantes: diseño de la interfaz de un formulario de login

by
Difficulty:BeginnerLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Sketch, creado por los chicos de Bohemian Coding, es un programa excelente para el diseño de interfaz. Este tutorial pensado para principiantes, te introducirá en el proceso de diseño usando Sketch. No necesitarás ninguna experiencia previa con el programa, sólo algo de tiempo libre que quieras invertir en aprender algo nuevo.

Te mostraré como crear y configurar un artboard, cómo crear formas empleando herramientas básicas, operaciones buleanas - boolean operations -, el panel Inspector y también las capas - Layer list -. Veremos cómo poder cambiar propiedades, organizar capas, importar imágenes y otros aspectos útiles en el flujo de trabajo con Sketch.

1. Creando un Artboard

Paso 1

Vamos a empezar creando un nuevo documento. ¿Ya has abierto Sketch 3? Bien, ¡eso es todo! Déjame explicarlo; por defecto Sketch te ofrece un lienzo infinito sobre el que poder trabajar. De esta forma, puedes empezar a crear elementos sin miedo a quedarte sin espacio.

Vayamos un paso más allá. Vamos a crear un artboard. Usar Artboards nos permite definir áreas delimitadas de contenido dentro del lienzo infinito.

Para crear un nuevo artboard ve a Insert > Artboard (A)  en la barra de herramientas o dentro del menú principal. Haz click y desplaza el cursor dentro del lienzo de Sketch. Verás que Sketch empezará a mostrarte unos valores de altura y anchura a medida que te desplazas. Crea un artboard de 600 x 800px .

Sketch mostrará valores de altura y anchura mientras creamos un artboard

Consejo: Podemos crear tantas artboards como necesitemos. También podemos cambiar su nombre desde  Layer List en la zona izquierda de la pantalla, o modificar su posición y dimensiones usando el panel Inspector ubicado a la derecha. Elimina artboards simplemente pulsando la tecla Supr o Delete cuando tengas seleccionado al menos una artboard.

Renombrando una artboard
El panel Inspector mostrando las propiedades de una artboard

Por ejemplo, usemos el Inspector para cambiar la posición a X=0 Y=0. Como alternativa también puedes arrastrarla directamente a esa posición.

Consejo: Ve a View > Show Grid para activar la cuadrícula por defecto que viene incluída en Sketch. Te ayudará a posicionar objetos exactamente como quieres hacerlo.

Paso 2

Ahora vamos a cambiar el color de nuestra artboard. Haciéndolo conseguiremos que los siguientes pasos sean más sencillos. Selecciona tu artboard y centra tu vista en el panel Inspector . Marca la opción de Background Color y haz click sobre la muestra de color que hay justo a la derecha. Aparecerá una ventana emergente en la que podemos escoger el color y modificar sus propiedades. Escoje el color que quieras. Realmente no importa demasiado el que selecciones, aunque para esta ocasión he optado por un tono gris intermedio.

Usando el panel de color de Sketch

¡Ya lo tenemos listo para empezar a trabajar!

Nuestra artboard con color

2. Diseño de la forma base

Paso 1

Dirígete a Insert > Shape > Rectangle (R). Ahora crea un rectángulo de 360 x 500px dentro de tu artboard. Puedes hacerlo de manera similar a la que empleas creando artboards. Puedes dibujar un rectángulo aleatorio y luego modificar sus propiedades usando el panel Inspector . ¡Recuerda mostrar la cuadrícula para poder guiarte con facilidad!

Paso 2

Mientras mantienes seleccionado el rectángulo, echa un vistazo al panel Inspector. Elimina el borde simplemente desmarcándolo. Haz clic en la muestra de color que aparece en Fill y selecciona como color blanco. También podemos crear bordes redondeados desde el Inspector también; mueve el deslizador de Radius hacia la derecha o escribe 10 en el campo correspondiente. 

Cambiando propiedades de formas en el panel Inspector

Paso 3

Crea un círculo de  40 x 40px usando Insert > Shape > Oval. Recuerda, puedes dibujar un círculo de forma aleatoria y luego usar el Inspector para cambiar sus propiedades. Muévelo y colócalo justo en la mitad de la zona superior de tu rectángulo. Usa la herramienta Zoom en la Toolbar si necesitas ayuda y verlo con más detalle.

Alineando el círculo

Paso 4

Crea otro círculo, en esta ocasión de 20 x 20 px.  Alinéalo con el primer círculo, justo en el medio. A medida que lo desplazas, verás algunas guías inteligentes que te ayudarán a colocarlo correctamente.

Alineando los círculos

De hecho, para asegurar que el contenido está bien colocado, mantén pulsada la tecla opción (⌥) del teclado. Sketch te ayudará a obtener las medidas exactas y las distancias entre objetos. Por ejemplo:

Medidas y distancias en Sketch

¡Esto es una gran ayuda! ¡Gracias, Sketch! 

Paso 4

Ahora vamos a transformar nuestros círculos en un único "anillo". Selecciona ambos círculos directamente, o a través de Layer List. Dirígete ahora a la Toolbar y haz click en la opción Substract.

Seleccionando círculos

Hemos conseguido una nueva forma compleja:

Objeto compuesto

Selecciona nuestro nuevo objeto y también selecciona a la vez el rectángulo. Ahora haz click en la opción Union para conseguir la forma definitva que estábamos buscando.

Todo junto en un único objeto

¿Qué es lo que hemos hecho aquí? Cuando necesitamos una forma u objeto complejo, necesitamos crearlo por nosotros mismos. Podríamos empezar a dibujarlo mediante la herramienta correspondiente, pero a menudo es fácil conseguir "dividir" estas formas complejas, creándolas a partir de otros objetos de formas más básicas.  Sabiendo esto, podremos emplear las operaciones buleanas - boolean operations - y así recrear nuestros objetos complejos. Sketch ofrece las siguientes operaciones: union, subtract, intersect y difference.

Estas opciones se consideran acciones no destructivas por lo que podremos modificar las propiedades de las formas básicas iniciales seleccionándolas directamente en Layer list. Cuando tengas creada una forma a partir de múltiples formas básicas fíjate en su representación en la lista de capas. Verás un pequeño símbolo en forma de flecha a la izquierda y si haces click para expandir podrás ver todas las subformas de las que se compone. A la derecha de cada una de ellas podrás modificar la operación buleana que Sketch está empleando para conseguir la forma compleja.

Una forma compleja se puede crear a partir de otros objetos usando las operaciones buleanas

Paso 5

Nuestra forma base ya casi está completa. Ahora asegúrate de que la mantienes seleccionada y echa un vistazo al Inspector , selecciona la opción Shadows y modifica sus propiedades de la siguiente forma: Color > R=38 G=30 B=10 Alpha=50, X=0, Y=20, Blur=20 y Spread=0. Al final deberías tener algo similar a esto:

Nuestra forma base final

3. Elementos de login

Un formulario de acceso no sería nada sin algunos botones y campos. ¡Vamos a crearlos!

Consejo: Puedes bloquear la capa de la forma base para evitar errores y movimientos accidentales. Selecciónala y dirígete a Arrange > Lock Layer. Un pequeño candado en el panel de capas te indicará qué objetos están bloqueados.

Pas 1

Usando la herramienta de rectángulo o Rectangle Tool (R), crea uno de  280 x 50px , elimina su borde y rellénalo del color R=239 G=87 B=46, Radius=2 . Colócalo tal y como se muestra en la siguiente imagen.

Paso 2

Crea otro rectángulo de 280 x 70px rellénalo de blanco y ajusta las propiedades a radius=2border thickness a 1 y el border colorR=234 G=234 B=234.  Muévelo y colócalo encima del rectángulo de tono naranja, arrastrándolo y colocándolo a 10px de distancia. Duplica esta forma (Control-D), selecciona la copia y muévela otros  80px hacia arriba.

Paso 3

Ahora crea un pequeño cuadrado de 20 x 20px usando la herramienta que ya conoces, Rectangle tool (R). Rellénalo de color blanco y modifica sus propiedades de la siguiente forma: Radius=2 , border thickness=1 y border color a R=234 G=234 B=234. Muévelo 10px por debajo del rectángulo naranja. Tu artboard debería parecerse a algo como esto:

Nuestros elementos de login

Paso 4

Bien, ahora vamos a darle un poco de vida a nuestro formulario de acceso, incluyendo algunos textos para simular etiquetas y placeholders. Selecciona la herramienta Text tool (T) . Ahora puedes hacer click en cualquier lugar del lienzo para incluir una capa de texto. Verás cómo aparece el texto y queda seleccionado a medida que lo vas escribiendo. Fíjate también que en el panel Inspector han cambiado las propiedades que pueden ser modificadas.

Consejo: También puedes hacer click y arrastrar para crear una caja de texto con un tamaño fijo. Cuando se incluya demasiado texto dentro de la caja verás que su anchura se mantiene, separando el texto en diferentes líneas del mismo ancho.

Añade el texto "USERNAME" en una caja y mira el panel Inspector para modificar sus propiedades. Para este texto emplearemos la fuente Montserrat, Weight=Regular, Size=11, Spacing=1, y Color > R=204 G=204 B=204.  

Vuelve a seleccionar la herramienta de texto Type Tool (T)  y añade "Armando" (o lo que tú quieras) como texto del campo del formulario. Esta vez emplea los siguientes valores para las propiedades de la capa de texto: Montserrat Weight=RegularSize=24Spacing=0Color > R=113 G=87 B=44. Selecciona ambos elementos de texto y colócalos como se muestra a continuación:

Colocando nuestras cajas de texto

Paso 5

Con esto completamos los textos necesarios para nuestro primer campo. Para el segundo podemos duplicarlos y colocarlos donde tenemos nuestro segundo rectángulo. Son unos 80px hacia abajo. Cambia los textos a "PASSWORD" y "*******".

Paso 6

Añade algunas cajas de texto extra y usa los siguientes valores tal y como se muestra en la imagen. Necesitarás la fuente Open Sans.

Diseñando nuestros textos

Te habrás dado cuenta que el texto "Forgot your password" está subrayado. Para conseguir este efecto tienes que hacer clic en el botón Text options para mostrar los diferentes efectos decorativos que hay disponibles para rexto. Escoge la segunda opción mientras tienes la caja de texto seleccionada.

Efectos decorativos de texto

Y ahora, el resultado:

Formulario de login con botones y elementos de texto

Seamos organizados

Llegados a este punto sería interesante echarle un vistazo a la lista de capas que tenemos. Sería una buena idea que comenzáramos a organizar y renombrar todos esos objetos que tenemos llamados con nombres genéricos generados automáticamente por Sketch. Podemos renombrar objetos simplemente haciendo doble click sobre ellos en dicho panel o haciendo clic derecho y escogiendo la opción Rename. Para crear un grupo de capas sólo tenemos que mantener seleccionados uno o más objetos en el panel y hacer click en el icono Group ubicado en la Toolbar. Por supuesto podemos mover elementos dentro de un mismo grupo, sacarlos o moverlos a otros grupos diferentes.

El principal objetivo de hacer esto es mantener una estructura de objetos elegante y organizada. Tenlo en cuento, no sólo siguiendo este tutorial sino en todos los proyectos en los que estés involucrado.

Organizando contenidos

4. Añadiendo un logotipo

Ya hemos creado todos los elementos que necesitábamos para nuestro formulario de acceso. Ahora vamos a añadirle un logotipo.

Paso 1

Abre el fichero  logo_icon.svg que está disponible dentro de los archivos adjuntos a este tutorial. Una vez abierto fíjate en el panel de capas; verás que el icono está hecho y cómo se puede editar fácilmente. 

Estructura logo_icon

Paso 2

Usando la herramienta Rectangle (R), crea una forma de 30 x 60px y colócala tal y como se muestra en la siguiente imagen. No es necesario colocarla exactamente igual esta vez. Y recuerda que puedes usar la retícula y la tecla alt/option (⌥) mientras trabajas para que Sketch te pueda mostrar tamaños y distancias de manera precisa.

Creando una forma compleja

Paso 3

Ahora, directamente en la lista de capas o Layer list, selecciona la capa de la forma que acabas de crear y arrástrala dentro del grupo llamado "Shape". Colócalo arriba del todo. De esta forma estarás consiguiendo una nueva forma compuesta. ¡Este es el poder de las formas vectoriales y las operaciones buleanas en Sketch!

Forma compuesta extraña debida a las operaciones buleanas

Paso 4

¿Recuerdas cuando hablamos de esos pequeños iconos ubicados justo al lado de las capas? Había unos iconos especiales que aparecían a la hora de crear formas complejas. Estos iconos concretos nos permitirán realizar diferentes operaciones buleanas entre las diferentes formas que componen nuestra forma compleja. Lo que vamos a hacer ahora es cambiar el primero a Substract y el segundo a Difference

Modificando las operaciones buleanas de nuestro objeto vectorial

Paso 5

Un paso fácil de seguir. Asegúrate de tener la forma compuesta seleccionada. Dirígete a Layer > Paths > Flatten. Haciendo esto perderás las capacidades de edición de las formas básicas que servían para componer la más compleja, pero hará más sencillo el siguiente paso.

Paso 6

Mantén la forma seleccionada. Ver a la Toolbar y hac click en el icono Edit. Notarás algunos cambios en el panel Inspector y también en la forma. Selecciona todos los puntos que la componen (los diferentes vértices) haciendo un área de selección por encima de todos ellos.

Seleccionado todos los puntos de nuestra forma vectorial

Céntrate en el Inspector y modifica el valor de Corners a 5. Haz clic en Fill para mostrar las opciones de relleno y color y escoge el segundo tipo de relleno, Linear gradient. Verás como aparecen dos puntos conectados por una línea justo por encima de tu forma vectorial. Cada punto representa un cambio de color a lo largo del degradado de relleno.

Linear gradient

Para cambiar el color de uno de estos puntos, haz click sobre él en el lienzo. Verás como se actualiza el color dentro del Inspector. Escoge un nuevo color en este panel y podrás comprobar el resultado. Sabiendo esto vamos a ajustar el primer color a R=245 G=166 B=35 y el segundo a R=239 G=87 B=46. Si lo prefieres puedes cambiarlos directamente moviéndote por encima del área de color del panel.

Cambiando los colores

Esta sería nuestra forma final:

Nuestra forma final

Paso 7

Copia la forma final que acabas de crear y pégala en el documento donde estábamos creando todo el ejercicio.

Paso 8

Nuestro logotipo está casi completo, sólo nos queda añadir algo de texto genérico. Escribe lo que quieras pero para esta ocasión yo he preferido añadir "myapp" y le he dado las siguientes posiciones y propiedades que puedes ver en la imagen:

Propiedades del texto para nuestro logotipo

¡Nuestro formulario de login está acabado! 

Formulario de login final

5. Añadiendo una imagen de fondo

Paso 1

Sketch nos permite trabajar no sólo con contenido y formas vectoriales sino también con imágenes y contenido de tipo bitmap. Para la imagen de fondo voy a seleccionar una fotografía de Unsplash. ¡Hay un montón de imágenes increíbles allí! Me quedaré con ésta realizada por Nick West

Ahora volvamos al documento. Selecciona tu artboard en la lista de capas o Layer list y ve a la opción Insert > Image para seleccionar la fotografía. ¡Cuidado!¡La imagen es enorme! Vamos a hacerla un poco más pequeña directamente desde el Inspector para cambiar sus dimensiones a algo más manejable como por ejemplo 1280 x 876px. Modifica sus propiedades de Position a X=0 Y=0 y asegúrate de que la colocas debajo de todos los otros elementos en el listado de capas.

Añadiendo una imagen de fondo

Consejo: Si importas una imagen mientras mantienes un artboard seleccionado, la imagen quedará automáticamente enmascarada empleando las dimensiones del artboard. Mueve la capa fuera del grupo que se crea a la hora de generar un artboard para eliminar la máscara. Si quieres aprender más sobre el uso de máscaras en Sketch, tienes más información disponible en la ayuda oficial.

Paso 2

En Sketch podemos ajustar los colores de una imagen usando el panel Color Adjust localizado en el Inspector. Podemos modificar algunos parámetros como Saturation, Brightness, y también Contrast. Bien, modifica Saturation a 0Contrast a 1,9.

Ahora crea un nuevo rectángulo de  600 x 800px usando Insert > Shape > Rectangle (R). Colócalo en X=0 Y=0.En el panel Layer list mueve esta forma para colocarla justo por encima de la capa de la imagen. Ahora duplícala y modifica las propiedades de ambos rectágulos de la siguiente manera: para el primer rectángulo marca Opacity=100%, Blending=Multiply, Color > R=173 G=166 B=152. Para el segundo (colocado justo encima del otro) marca Opacity=50%, Blending=Normal, Color > R=173 G=166 B=152.  

¡Ya está todo hecho!

Así es como debería quedarte el ejercicio final. 

Formulario de login completo

Espero que te haya gustado el tutorial y que...

¡Espera, hay más!

Como estamos creando elementos de interfaz de usuario, añadir algunos detalles extra a nuestro ejercicio podría ser tremendamente útil, ¿no crees? Este tipo de formularios tienen algún elemento extra que no hemos hecho como por ejemplo diferentes estados de los elementos, mensajes o feedback al usuario, etc. Con todo lo que hemos visto en este tutorial, seguro que eres capaz de crear elementos extra como los que puedes ver a continuación:

¿Te animas a hacerlo? Si te quedas atascado o necesitas preguntarme algo, simplemente deja un comentario o búscame en Twitter. ¡Estoy esperando que me enseñes tus progresos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.