Primeros Pasos con Sketch, Creación de interfaces móviles.

Sebastian Vega

Sebastian Vega

Compartir

Primeros Pasos con Sketch, Creación de interfaces móviles.

Si me preguntan cómo inicie la creación de prototipos o maquetas para aplicaciones móviles, diría que fue un camino largo y con herramientas que no ayudaban mucho, pero siempre se aprende algo nuevo.

Photoshop era una de mis grandes herramientas de diseño, bueno y también su hermana que era illustrator y toda la familia adobe. Todo quedaba muy bien, los botones, las imágenes, en realidad todo hasta que debíamos hacer cambios y eso significaba realizar cambios eternos a la hora de hacer estas modificaciones y el tiempo pasaba y no sentia que era lo suficientemente agil para mi ni el cliente.

Por ahí conocí sketch, al principio fue “que es esto” pero luego de semanas practicando logre dominar la herramienta y desde ahí que no nos hemos separado ya que trae muchas ventajas y ayuda a la hora de diseñar y generar componentes.

Sketch es una herramienta especializada en el diseño de interfaces que cumple con todos los estándares de diseño para ser aplicados a los formatos existentes en el mercado de las aplicaciones móviles y Web. A esto me refiero que la mayoría de los componentes vistos en Android o IOS los puedes diseñar aquí fácilmente o ya están creados.

Con la agilidad que lo caracteriza es posible construir wireframe y mockup de manera fluida y puede ser mas fluida aun si es integrado con otras herramientas como invision.

Que es sketch

Sketch puede ser descargado directamente de su página web y cuanta con una versión trial de 30 días pagar 99USD una vez y ocuparlo de por vida, yo por lo general pago 1 vez al año para poder actualizarlo y así utilizar los plugin que van desarrollando la comunidad de sketch, pero si no lo pagas el programa no deja de funcionar, solo que no es posible actualizar a la nueva versión.

Características de sketch

Interfaz Limpia:

Tiene una interfaz muy limpia y que esta destinada a tener cada elemento siempre visible y a la mano.

Símbolos:

Creación de símbolos que es lo que nos permite transformar elementos que sean visualizados en varias pantallas con estos símbolos podemos alterar la maqueta completa con solo un cambio.

Vectores:

Para los diseñadores el vector es una característica muy importante al momento de solicitar archivos o también poder entregarlos, estos archivos de vector o formato SVG se les llama el pixel perfecto ya que lo podemos escalar sin problemas, a esto me refiero que un vector de 1x1 puede ser visualizado de 1000x1000 sin verse afectado por pixeles.

Exportación:

Es posible exportar nuestras pantallas y elementos creados en esta en diferentes formatos como PNG, JPG y SVG.

Plugins:

Sus plugins o extensiones son los que en gran parte hacen bastante magia para los diseñadores y que también ayuda a los desarrolladores a la hora de comenzar a programar estas pantallas.

Artboard

Los artboard son claves para mantener un orden en nuestro proyecto mediante estas paginas ya que son las que nos indican en que dispositivo es la que vamos a trabajar

Inicialmente veremos la primera pantalla que presenta sketch y nos presenta una interfaz donde podemos ver una herramienta superior con las herramientas totalmente configurable con diferentes opciones de insertar, agrupar, mover elementos arriba o abajo, vector, porcentaje de pantalla y muchos mas.

El panel lateral es donde iremos almacenando todos nuestros elementos, paginas, componentes y símbolos que vamos creando.

Lo primero que debemos hacer es definir en que tipo de dispositivo es la que vamos a crear y para eso debemos presionar en la parte superior izquierda donde aparece el botón “Insert” y seleccionaremos Artboard, y para ello al costado derecho nos preguntara que tipo de dispositivo es la que deseamos, en esto caso utilizaremos iPhone 8.

Así nuestra primera interfaz del dispositivo quedara lista para comenzar a diseñar nuestra interfaz. Cada vez que necesitemos agregar una nueva capa debemos un artboard como lo señale anteriormente.


Agregando nuestros primeros elementos

Con el mismo botón de “Insert” también podemos agregar diferentes formas como un oval, rectángulo, línea o bien un texto y quedaran dentro de nuestra capa de Iphone 8 como se muestra en el panel lateral izquierdo.

Ahora ya puedes comenzar a crear tus interfaces para dispositivos móviles.