fbpx
 

Diseña una Pantalla de Login con Sketch

Diseña una Pantalla de Login con Sketch

1. Introducción

En el tutorial de esta semana vamos a diseñar una pantalla de login con Sketch.

EfectoApple es principalmente un blog para Desarrolladores o para cualquiera que quiera adentrarse en el Desarrollo de Aplicaciones iOS. Sin embargo, como bien sabes, el diseño de una aplicación móvil es fundamental.

Es muy raro que una app tenga éxito si no cuenta con un buen diseño. Sobre todo,  cuando hay millones de aplicaciones disponibles en la App Store.

Si quieres tener alguna posibilidad de destacar en un mercado tan saturado hay que tener muy en cuenta el aspecto de tu aplicación.

Por este motivo en EfectoApple, además de hablar sobre Programación de Aplicaciones iOS, también publicamos tutoriales sobre este tema.

Si estás de acuerdo conmigo en la importancia del diseño, tal vez ahora mismo te estés preguntando

¿Y por donde comenzar?

¿Cómo empiezo el diseño de una aplicación iOS?

EL PRIMER BOCETO DE TU APLICACIÓN

Al tratarse del primer paso, lo importante tiene que ser darlo lo antes posible. No tiene sentido retrasar el diseño de nuestra aplicación porque creamos que no tenemos las herramientas o los conocimientos necesarios.

[caja-roja]Solo necesitas papel y boli para realizar el primer diseño de tu Aplicación iOS[/caja-roja]

El resumen sería este. Tienes una idea sobre una aplicación que quieres desarrollar. Para comenzar primero debes contar con un diseño sobre el que apoyarte. Pues bien, la primera versión de este diseño puedes y debes hacerla con boli/lápiz y papel.

En este primer boceto, es donde plasmarás la funcionalidad principal de tu aplicación. Diseñarás las pantallas que conformarán tu app y las transiciones entre estas pantallas.

No necesitas nada más para empezar.

Esta primera fase es fundamental, ya que te permitirá corregir rápidamente muchos problemas de usabilidad que no habías sido capaz de ver cuando esta aplicación no era más que una idea en tu cabeza.

Una vez que has plasmado tu aplicación en un folio, el siguiente paso, simplificando mucho el proceso, podría ser trasladar este diseño a una herramienta gráfica.

Para esto, a mi personalmente me gusta utilizar Sketch.

Si no conoces Sketch o has oido hablar de este programa de diseño pero no lo has utilizado nunca, tal vez te interese echar un vistazo a los tutoriales de introducción que publicamos hace poco. Son dos tutoriales que explican el uso de Sketch desde cero y presentan las bases fundamentales para trabajar con él.

Puedes acceder a estos tutoriales desde aquí:

Introducción al programa de Diseño Sketch [Parte 1]

Introducción al programa de Diseño Sketch [Parte 2]

Si crees que este tema puede interesarte entonces sigue leyendo.

2. ¿Qué vamos a ver en este Tutorial?

En el Tutorial de esta semana vamos a poner en práctica los conceptos vistos en anteriores artículos diseñando una pantalla de login con Sketch.

Diseñaremos desde cero la típica pantalla de registro/acceso de usuarios, que cualquier aplicación conocida suele tener.

Al terminar este tutorial serás capaz de diseñar este tipo de interfaces y podrás utilizar lo que hemos visto en tus propios proyectos.

3. Diseñando nuestra Pantalla de Login con Sketch

El aspecto que tendrá nuestro diseño al terminar el tutorial será este:

Pantalla de Login con Sketch login screen finished

Como ves se trata de una pantalla de login/signup típica donde los usuarios podrán acceder introduciendo su nombre de usuario y su contraseña y pulsando en el botón INICIAR SESIÓN. En caso de que no dispongan de cuenta de usuario, podrán crear una pulsando en REGISTRO. Además, les daremos la opción de restablecer su contraseña pulsando en el botón de la parte inferior.

Para terminar el diseño de la pantalla, también ofreceremos al usuario la posibilidad de iniciar sesión utilizando sus cuentas de Facebook, Twitter o Google+.

Como ves, se trata de una pantalla típica pero fundamental en cualquier aplicación que gestione usuarios.

Vamos a ver por donde empezar, ¡sigue leyendo!

4. Descargando Sketch

Para poder comenzar, lo primero es descargar el programa de diseño Sketch. Puedes descargar una versión de 14 días de prueba en www.sketchapp.com. Te vale perfectamente para poder seguir este tutorial. Si crees que vas a utilizar en el futuro Sketch puedes comprar su versión sin limitaciones por 99 $.

Para seguir este tutorial, la versión de prueba, es más que suficiente.

Descárgalo e instálalo en tu ordenador para que podamos comenzar.

5. Empezando desde cero

Ahora que ya lo has instalado podemos continuar con el siguiente paso.

Abre Sketch y crea un nuevo proyecto: File>New o utiliza el atajo de teclado ⌘+N.

 

Pantalla de Login con Sketch new project

 

Verás una pantalla dividida en 3 secciones. La sección central, de mayor tamaño, es el lienzo en blanco donde vamos a diseñar nuestra pantalla.

 

Pantalla de Login con Sketch blank project

Nuestro primer paso será crear la propia pantalla donde iremos añadiendo todos los elementos de nuestra interfaz.

Sketch, a cada pantalla de la aplicación le da el nombre de Artboard.

En nuestro caso, como únicamente vamos a diseñar una pantalla, solo necesitaremos un Artboard.

Para añadirlo pulsa en el menú Insert>Artboard.

En el panel derecho, Sketch te ofrecerá diferentes opciones para elegir el tamaño de pantalla que prefieras.

 

Pantalla de Login con Sketch devices to choose

 

Nosotros seleccionaremos iPhone 7, por ejemplo.

 

Pantalla de Login con Sketch iphone 7 chosen

 

Ya tenemos nuestra pantalla sobre la que trabajar. En este caso, es una pantalla de tamaño iPhone 7: 375 x 667.

Ahora vamos a cambiar el color de fondo de nuestra pantalla de blanco a gris. De esta forma resaltará el primer elemento que vamos a añadir a nuestra interfaz. Para ello, selecciona el Artboard y en el menú de la derecha pulsa en la opción Background Color. Cambia el color a gris, concretamente utiliza este valor hexadecimal: CCCCCC.

 

Pantalla de Login con Sketch grey background

 

UTILIZANDO LOS SKETCH UI KITS EN NUESTROS DISEÑOS

Nuestro siguiente paso será añadir la status bar de nuestra pantalla. Para añadir elementos propios de iOS lo mejor es utilizar de los Sketch UI Kits que están disponibles para que utilicemos en nuestros diseños.

Si todavía no has añadido ninguno de estos Kits a tu versión de Sketch, aquí tienes un listado de los mejores Kits para iOS.

Algunos son de pago, pero existen muchos otros totalmente gratuitos.

Por ejemplo, yo he usado el Kit de Oz Pinhas, que puedes descargar desde aquí. (Descarga gratuita)

Al acceder al enlace haz click en el último botón de Download, en el que aparece el texto All sizes.

 

sketch ui kit

 

Una vez que lo hayas descargado, ábrelo con Sketch y accederás a todos los elementos de sistema utilizados en iOS 10. Esto te permitirá realizar diseños de aplicaciones de forma sencilla, reutilizando estos elementos.

Aquí tienes una imagen con algunos de estos elementos, para que te hagas una idea de las posibilidades que te ofrece este Kit:

 

sketch ui kit elements

 

Para añadir uno de estos elementos a tus diseños, en nuestro caso, vamos a añadir la status bar, simplemente tienes que arrastrar y soltar encima de nuestro Artboard de color gris.

 

Pantalla de Login con Sketch added status bar

 

Después añadimos una imagen de fondo a nuestra pantalla.

Puedes utilizar la imagen que prefieras, la que creas que queda mejor en tu pantalla de login.

Si quieres utilizar la misma que yo, puedes descargarla desde aquí.

Este será el aspecto de nuestra pantalla después de añadir la imagen de fondo:

 

Pantalla de Login con Sketch background login screen

6. TextFields de Usuario y Contraseña

Lo siguiente que haremos será añadir los textFields de nuestra pantalla. Crearemos las cajas de texto donde el usuario introducirá su usuario y contraseña.

Para ello, usa el menú Insert>Shape>Rectangle y añade un rectángulo a nuestro diseño. Vamos a configurar las propiedades de este rectángulo para que se asemeje a un textField de iOS.

  • Establece sus dimensiones en : 289 x 37.
  • En su opción Fill, selecciona Overlay como tipo de Blending y dale una opacidad del 30%.
  • En su opción Radius, dale el valor 3. De esta forma conseguimos que tenga unas esquinas ligeramente redondeadas

 

Pantalla de Login con Sketch textField properties

 

Añade el texto USERNAME al diseño, utilizando el menú Insert>Text. Utiliza la fuente Avenir y un tamaño de 12 puntos.

Coloca este texto dentro del textField que acabamos de crear.

Copia el textField y el texto utilizando cmd+C y pégalo justo debajo con cmd+V y cambia este texto de USERNAME************* (Este es el campo que utilizaremos para la contraseña)

Si has seguido estos pasos, ahora mismo deberías tener algo así:

 

Pantalla de Login con Sketch textFields without icons

 

Para dar un aspecto más cuidado a los textFields, añadiremos un icono a cada uno de ellos. Así además veremos como podemos añadir una gran cantidad de iconos ya creados a nuestros diseños en Sketch.

AÑADIENDO ICONOS A SKETCH

El primer paso es descargar el repositorio ionicons-sketch.

Este repositorio ha sido creado por Andrew Sardone y ofrece el conjunto completo de iconos del Framework Ionic en formato Sketch.

Al descargarlo podremos utilizar todos estos iconos en nuestros diseños.

Para poder bajar este conjunto de iconos accede al repositorio desde aquí y pulsa en el botón verde Clone or download y después en Download ZIP.

Descomprime el fichero y abre ionicons.sketch.

Dentro encontrarás el conjunto completo de iconos que desde ahora podrás utilizar en tus proyectos. Ábrelo con Sketch.

Verás que hay 3 artboards diferentes: Ionic, Android, iOS. Nosotros vamos a utilizar, sin que sirva de precedente, el conjunto de iconos de Android 😉

Para poder seleccionar los iconos de forma individual y añadirlos a nuestro proyecto, primero tendrás que desbloquear las capas. Selecciona todos los iconos del Artboard llamado Android, haz click con el botón derecho y en el menú flotante que aparece, selecciona Unlock layers. Después selecciona los dos iconos que vamos a utilizar en nuestra pantalla:

  • android-person
  • android-lock

 

Pantalla de Login con Sketch selected icons

 

Una vez seleccionados, usa cmd+C para copiarlos y cmd+V para pegarlos en nuestro proyecto.

Coloca ambos iconos dentro de cada uno de los textFields, justo a la izquierda del texto y habrás conseguido terminar los textFields.

 

Pantalla de Login con Sketch textFields with icons

 

7. Botones de Inicio de Sesión y Registro

Lo siguiente que haremos será crear los botones de Inicio de Sesión y Registro.

Añade de nuevo un rectángulo usando el menú Insert>Shape>Rectangle.

  • Establece sus dimensiones en 289 x 42.
  • En su opción Radius, dale el valor 3.
  • Como color de relleno utiliza CC2148.

Añade texto utilizando el menú Insert>Text y escribe INICIAR SESIÓN.

Utiliza la fuente Avenir y tamaño 12.

Copia el rectángulo y el texto y pégalo justo debajo.

Cambia el color del rectángulo de CC2148AAC9CF. Modifica también el texto y haz que ponga REGISTRO.

Para finalizar añade un nuevo texto con Insert>Text, que ponga:

¿Has olvidado tu contraseña? Entra aquí.

Si has seguido paso a paso este punto del tutorial, el aspecto de tu diseño debería ser este:

 

Pantalla de Login con Sketch added buttons to screen

8. Botones de Login con Redes Sociales

La creación de botones de Login con Redes Sociales va a ser muy sencilla. He preparado un conjunto de botones de Facebook, Twitter y Google+ que puedes descargar desde aquí. Haz click en el botón Descargar.

[caja-gris]Si quieres eliminar por ejemplo el botón de G+ y dejar solo Facebook y Twitter, selecciona los botones en Sketch, pulsa en el botón de la parte superior izquierda Ungroup, selecciona el botón y pulsa en la tecla Delete de tu teclado[/caja-gris]

Una vez que los hayas descargado, añádelos a tu proyecto en Sketch arrastrando desde el Finder y sitúalos justo en la parte inferior de la pantalla.

9. Añadiendo nuestro logo

Para terminar nuestro diseño, tendremos que añadir el logo de nuestra aplicación. En mi caso, voy a añadir el logo de EfectoApple, pero tu puedes añadir la imagen que prefieras.

Si quieres utilizar el mismo logo que yo, puedes descargarlo desde aquí. Haz click en el botón Descargar.

Una vez descargado, añádelo a la parte superior de nuestra pantalla.

Con este último paso habrías terminado el diseño de la pantalla de login con Sketch.

10. Exportando nuestra pantalla

Como resultado final de este tutorial, has conseguido crear una pantalla completa de login/registro que tiene el siguiente aspecto:

 

Pantalla de Login con Sketch loginScreenFinished

 

Una vez finalizado el diseño de la pantalla, puedes exportarla a formato imagen para poder publicarla o compartirla con quien quieras.

Para poder exportar nuestro diseño, el primer paso debe ser seleccionar todos los elementos que forman la pantalla. Una vez seleccionados tendrás que pulsar en el botón de la esquina superior izquierda llamando Group.

De esta forma, podremos trabajar con nuestra interfaz como un único elemento.

 

Pantalla de Login con Sketch all elements selected

 

Después de haber agrupado todos los elementos, selecciona la interfaz y pulsa en el botón de la esquina inferior derecha llamado Make Exportable. Aparecerá un menú llamado Export, selecciona lo siguiente:

  • Size : 1x
  • Suffix: Puedes dejarlo vacío
  • Format: PNG

 

Pantalla de Login con Sketch export screen

 

Para terminar pulsa en el botón Export Login Screen y guarda la imagen generada donde quieras.

De este modo, dispondrás de una imagen que contendrá el diseño completo de tu pantalla.

17. Tutorial en Video

He recibido varios emails de lectores comentándome que estaría bien que añadiera video tutoriales al blog. Así que esta semana he sacado algo de tiempo y he grabado este tutorial en video.

[ejercicio titulo = “VIDEO TUTORIAL” num=”2″]

[/ejercicio]

18. Resumen Final y Descarga del Proyecto

Si has seguido el tutorial paso a paso habrás podido ver lo fácil que es crear una pantalla de login con Sketch.

Espero que este post pueda servirte para diseñar tus propias pantallas con Sketch y utilizarlas en tus proyectos de desarrollo iOS.

Como ves, Sketch es una herramienta fantástica que no te exige ser un experto en Diseño para poder trabajar con ella.

Como siempre, puedes descargar el proyecto completo desde aquí.

19. Has terminado el Tutorial

Enhorabuena, has terminado el tutorial de diseño de una pantalla de login con Sketch

Como siempre, aquí tienes el video-chorra de esta semana:

[ejercicio titulo = “¿REALIDAD O MONTAJE?” num=”1″]

[/ejercicio]

20. ¿Donde ir ahora?

Puedes acceder a más tutoriales disponibles en EfectoApple aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Recuerda, cada lunes un nuevo Tutorial sobre Desarrollo iOS.

Esto ha sido todo. Gracias por leer EfectoApple.

Sin comentarios

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.