fbpx
 

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

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

1. Introducción

En el Tutorial de esta semana en EfectoApple vamos a hablar del Programa de Diseño Sketch.

Si has trabajado como Desarrollador iOS en algún proyecto donde no participara ningún diseñador, seguro que has podido comprobar por ti mismo, que puede ser bastante duro.

A día de hoy en la App Store hay más de 1 millón de aplicaciones diferentes. Si quieres tener alguna posibilidad de hacerte hueco en los ranking de las aplicaciones más descargadas debes prestar atención al diseño. Puedes ser muy bueno programando pero si no eres capaz de empaquetar tu código en un envoltorio bonito olvídate de tener éxito.

Por no hablar de un caso que suele darse mucho:

Un conocido tuyo tiene una idea para una app. Te explica a grandes rasgos lo que busca. Haces una estimación de tiempo y presupuesto. Él acepta tu propuesta. Comienzas el desarrollo. Después de 3 semanas decides presentarle una demo con los avances hasta la fecha. Te reúnes con él muy orgulloso de tu aplicación. Cuando él lo ve, te dice que no es tal y como la había imaginado. Que no es lo que el tenía en la cabeza. Que no es lo que está buscando. 3 semanas de trabajo tiradas a la basura.

Normalmente es muy difícil que alguien sea capaz de explicar detalladamente lo que está buscando. Hasta que un cliente no ve la app no suele darse cuenta de que es lo que realmente está buscando y que es lo que no encaja en su idea.

¿Cual es una forma de solucionar esto?

Para tratar de evitar este problema podríamos trabajar así:

  1. Toma de requisitos con cliente
  2. Realizar diseño de app
  3. Presentar diseño a cliente
  4. Si cliente está conforme pasar al paso 5, si no lo está repetir pasos 2 y 3 hasta que esté conforme con el resultado
  5. Comenzar con el desarrollo basado en el diseño aprobado por cliente

De esta forma intentamos minimizar las diferencias entre lo que el cliente quiere y lo que nos ha podido transmitir a nosotros.

Este proceso de trabajo tiene un problema para los desarrolladores y es el siguiente:

¿Cómo puedo diseñar una app si no soy diseñador?

Una posible solución para ti, puede ser Sketch.

El programa de diseño Sketch es una herramienta que te permitirá diseñar desde el logo de tu app, los iconos que vayas a utilizar en la misma, hasta la interfaz completa de tu aplicación. Se trata de un editor de gráficos vectoriales, por lo que podrás redimensionar tus creaciones sin perder calidad.

Para mi su principal ventaja es que es muy fácil de usar. Lo cual es ideal para que desarrolladores como nosotros puedan crear interfaces limpias y profesionales sin tener que aprender a dominar otras herramientas de diseño más complejas.

[caja-roja]Unos conocimientos básicos de Sketch harán que seas capaz de diseñar tus propias aplicaciones, lo que te ahorrará muchos dolores de cabeza.[/caja-roja]

2. ¿Qué vas a aprender en este Tutorial?

En este tutorial verás lo siguiente:

  1. Como crear un prototipo utilizando UIKit Template
  2. Como crear iconos para tu app utilizado el Vector Tool
  3. Como diseñar iconos combinando formas básicas
  4. Como exportar assets para poder utilizarlos en Xcode

Debido a la cantidad de contenido que vamos a tratar, dividiremos este tutorial en 2 partes.

En esta primera parte veremos los aspectos básicos de funcionamiento del programa de diseño Sketch.

En la segunda parte nos centraremos en la herramienta Vector Tool, en la posibilidad de combinar formas y en como exportar nuestros diseños de Sketch a Xcode, para poder utilizarlos en cualquier aplicación.

Y lo mejor de todo, con un poco de práctica con Sketch serás capaz de diseñar tus propias aplicaciones.
[caja-roja] ¡Preparate para subir de nivel tus habilidades de diseño![/caja-roja]

3. Comenzando con el programa de diseño Sketch

Para poder empezar, 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 $.

Si quieres ver lo que puedes llegar a diseñar utilizando Sketch, aquí tienes un ejemplo:

Programa de diseño Sketch Interfaz desarrollada con Sketch

Ejemplo de Interfaz desarrollada con Sketch

Mi recomendación es que descargues la versión de 14 días de prueba, sigas este tutorial para que veas lo que puedes llegar a hacer con él y si crees que puede serte útil para desarrollar tus aplicaciones, compres la versión sin limitaciones.

Una vez que lo has descargado, abre Sketch y prepárate para comenzar.

En las siguientes secciones veremos paso a paso los diferentes elementos que componen la interfaz de Sketch e iremos realizando algunos diseños.

¡Empecemos!

4. Templates

El template iOS UI Design es una colección de componentes de UIKit en formato vectorial. Te ofrece el diseño de un Tab Bar, Navigation Bar, Table View y mucho más. Puedes utilizarlos para crear los prototipos de tus apps.

Para poder echar un vistazo a esta plantilla de diseños pulsa en File\New From Template\iOS UI Design y verás lo siguiente:

Programa de diseño Sketch iOS_UI_Design_Template

En los Templates también existe una opción de Material Design para nuestros “amigos” de Android.

Como puedes observar se trata de una gran plantilla con cantidad de componentes de interfaz de iOS. Puedes hacer zoom sobre la plantilla dejando pulsada la tecla ⌘ y haciendo scroll hacia arriba o hacia abajo.

Programa de diseño Sketch ios_ui_template_sketch

5. Artboards

Con Sketch puedes dibujar en cualquier parte de la pantalla gracias a su lienzo infinito pero si lo que buscas es crear un prototipo para tu app con diferentes pantallas lo que debes utilizar son los Artboards. Un Artboard te permite organizar capas dentro de un rectángulo fijo. Cuando exportas un Artboard, exportas todas las capas contenidas en él, como si fuera un único elemento. Piensa en cada uno de ellos como una vista de la interfaz de tu app. Como si cada uno fuera un Scene del Storyboard de tu app.

Vamos a trabajar con ellos. Sigue estos pasos para crear un nuevo Artboard:

  1. Situate en una parte despejada del lienzo de Sketch
  2. Pulsa en el botón Insert situado en la esquina superior izquierda y selecciona Artboard
  3. En el panel derecho elige iPhone 6

[caja-gris]Esta imagen y alguna de las imágenes de este artículo son de versiones antiguas del template iOS UI Design. La ubicación de los elementos de la interfaz puede ser distinta pero las instrucciones de este tutorial todavía son válidas.[/caja-gris]

Programa de diseño Sketch create_artboard_iphone6

Debería aparecer un Artboard vacío llamado “iPhone 6” en portrait. Cualquier elemento de interfaz que añadas a este Artboard quedará asociado al mismo.

Puedes añadir tantos Artboards como quieras. Puedes elegir tamaño de iPhone, Apple Watch o incluso iPad Pro.

Si quieres eliminar un Artboard simplemente pulsa en su título y pulsa la tecla delete.

[caja-gris]Si buscas un artboard de un tamaño que no corresponda con ninguna de las opciones que Sketch te ofrece pulsa en Insert\Artboard y después arrastra y suelta el puntero dentro del lienzo para crear un artboard del tamaño que desees.[/caja-gris]

6. Copiar y Pegar

Ahora que has creado tu primer Artboard puedes arrastrar algunos de los elementos del UIKit template para ir creando tu interfaz. Comienza con una Navigation Bar, un Tab Bar y un TableView Cell.

Puedes copiar y pegar (⌘C and ⌘V) cualquier elemento con Sketch sin embargo es difícil predecir donde se situará el elemento pegado. Por lo que si utilizas la opción de arrastrar y soltar, los elementos siempre acabarán donde especifiques con el ratón.

Programa de diseño Sketch drag_ios_template_elements

[caja-gris]El atajo de teclado ⌘D repite la última acción. Utilizar la opción de arrastrar y soltar seguido de ⌘D te permitirá realizar múltiples copias. Puedes comprobarlo arrastrando y soltando un TableViewCell justo debajo de ella misma y utilizando luego ⌘D para crear el resto de celdas.[/caja-gris]

7. Formas Básicas

Primero crea un nuevo artboard para trabajar, pulsando en Insert\Artboard. Sitúalo en cualquier parte del lienzo.

Ahora veamos algunas formas básicas. Pulsa en Insert\Shape para ver un menú con las opciones disponibles.

Programa de diseño Sketch shape_menu

En la práctica es más fácil utilizar los atajos de teclado. Puedes crear un óvalo pulsando la tecla O y arrastrando tu puntero por la pantalla. Haz lo mismo con la tecla R para crear un rectángulo. Estos son los atajos de teclado más utilizados:

  • L: Linea
  • O: Óvalo
  • T: Texto
  • R: Rectángulo

Ahora utiliza lo que has aprendido para crear esta cara tan fea:

Programa de diseño Sketch create_robot

[caja-gris]Deja pulsado Shift para poder hacer cuadrados y círculos perfectos[/caja-gris]

8. Modificando Formas

Saber crear formas está bien pero para conseguir diseños espectaculares, esas formas deben ser atractivas. Puedes usar el Inspector en la parte derecha para cambiar las propiedades de cualquier forma, como el color o el tamaño del borde. Piensa en él como si fuera el Inspector de Atributos de Xcode.

Programa de diseño Sketch shapes_properties

Aquí tienes algunas opciones que vas a utilizar durante nuestro tutorial:

  • Position/Size: Cuando necesitas ajustar al máximo la posición o tamaño de una forma puede ser que modificarla a través de tu ratón no sea suficiente. Puedes utilizar esta opción para escribir la posición y tamaño exactos. Si pulsas en el icono del candado el icono mantendrá sus proporciones.
  • Radius: Te permite ajustar el radio de las esquinas de un rectángulo. Esto te permitirá realizar formas con esquinas redondeadas facilmente.
  • Opacity: Te permite convertir en transparente cualquier forma.
  • Fills: Utiliza el selector para cambiar el color de relleno de una forma o desmarca esta opción si no quieres que tu forma tenga ningún tipo de relleno.
  • Borders: Establece el grosor y el color del borde o haz que tu forma no tenga bordes.

[caja-gris]Sketch tiene un medidor de color incorporado. Puedes activarlo haciendo Control-C. Utilízalo para captar el color de cualquier objeto en pantalla y utilizar ese color para los elementos de tu interfaz.[/caja-gris]

Programa de diseño Sketch sketch_color_picker

Ahora vamos a ver como podríamos modificar un rectángulo para hacer que tuviera sus esquinas totalmente redondeadas:

  • Crea un rectángulo utilizando el atajo de teclado R
  • Redondea las esquinas estableciendo la propiedad Radius a 100.

Programa de diseño Sketch rounded_square

Para practicar puedes intentar cambiar el resto de propiedades que hemos visto.

9. Lista de Capas

La lista de Capas en el panel izquierdo contiene todas las capas de tu interfaz. Piensa en ello como en una jerarquía de vistas de un Storyboard.

Los GRUPOS pueden organizar las capas de forma lógica. Puedes mover multiples capas como una unidad si han sido agrupadas. También puedes exportar un grupo de capas como una única imagen. En la lista de capas, los grupos son representados como iconos de carpetas.

Aquí tienes una lista de los atajos de teclado más comunes para gestionar la lista de capas:

  • ⌘G: Agrupar varias capas juntas en un GRUPO. utiliza ⌘-Shift-G para desagruparlas.
  • ⌘R: Renombra la capa seleccionada
  • ⌘-Alt-Arriba/Abajo: Mueve una capa arriba o abajo en la lista de capas.
  • ⌘-Shift-L: Bloquea una capa para hacerla no clickable. Esto será útil en la siguiente sección.

Programa de diseño Sketch group_squares

[caja-gris]Una buena práctica de diseño consiste en renombrar  las capas para poder identificarlas más fácilmente. De esta forma, cuando tengas una lista de capas con decenas de elementos, podrás encontrarlas más facilmente. También puedes utilizar ⌘-Alt-Up para llevarlas a primer plano.[/caja-gris]

Prueba a agrupar algunas de las capas que has añadido a tu proyecto y dales un nombre descriptivo.

10. Resumen Final

Esta ha sido la primera parte de nuestro tutorial Introducción al programa de diseño Sketch.

Estas son algunas de las cosas que has podido aprender:

  • Crear tus propios prototipos de aplicaciones de forma rápida y sencilla utilizando la plantilla iOS UI Design.
  • Diseñar diferentes pantallas de una interfaz utilizando los Artboards.
  • Dibujar formas sencillas y modificarlas utilizando el Inspector de Propiedades.
  • Organizar tus diseños gestionando la Lista de Capas.

Espero que puedas utilizar algunas de estas nuevas habilidades en tus proyectos.

11. ¿Donde ir ahora?

Si lo que has visto hasta aquí te ha parecido interesante, no te pierdas la segunda parte de nuestro tutorial, donde aprenderás a dominar una de las herramientas más importantes de Sketch: Vector Tool.

Además te explicaré como exportar cualquier diseño realizado en Sketch para que puedas utilizarlo directamente en tus aplicaciones desde Xcode.

Si tienes cualquier duda utiliza los comentarios justo debajo de este post.

Además si compartes este artículo en redes sociales podrás hacer que llegue a más gente a la que pueda interesarle.

1Comentario
  • G
    Publicado a las 06:53h, 27 mayo Responder

    Hola, acabo de instalar sketch y no encuentro el template iOS UI Design, hay que descargarlo e instalarlo? La versiòn que he instalado es trial por 30 dìas.
    Gracias

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.