¿Qué es sketch?

post-sketch.jpg

Muchos de vosotros habréis oído hablar de Sketch, ya que se ha convertido en los últimos años en el principal rival de otros programas ya consolidados en el mercado como Adobe Photoshop o Adobe Ilustrator.

Actualmente es una de las aplicaciones de prototipado que mejores críticas recibe por parte de los diseñadores y profesionales de usabilidad.

Todo ello se debe en gran medida a la flexibilidad que nos ofrece la aplicación, los numerosos plugins y cómo no, a la ligereza que nos aporta gracias a la utilización de vectores, los cuales, nos permiten una gran escalabilidad y un escaso uso de recursos del ordenador, algo que agradecemos enormemente, ya que, como comprobaremos más tarde, el programa sigue siendo rápido y no da ningún fallo.

 

post-sketch-2.jpg

Diferencias con Photoshop:

Como usuaria habitual de Photoshop, he de decir que Sketch me enamoró desde el principio, ya que puede comprobar enseguida cómo este programa está pensado especialmente para crear prototipos de la manera más ágil posible. No olvidemos que Photoshop se concibió como un programa de retoque fotográfico, y por lo tanto hay muchos matices que a día de hoy son bastante mejorables si queremos utilizarlo como una herramienta de prototipado.

Para todos aquellos que os animéis a probar Sketch, en Braventos iremos proporcionando una serie de pequeños tutoriales que os ayudarán a iniciaros en el uso de esta herramienta.

 

Conociendo las herramientas de Sketch: Páginas y Artboards

Todos los diseñadores solemos ser bastante exigentes con el orden, ya que trabajamos con multitud de elementos diferentes. En este sentido, Sketch incorpora un concepto similar al de «capas» y «mesas de trabajo» de Photoshop.

  • En primer lugar, encontramos las páginas, dentro de las cuales podremos ir creando diferentes artboards o áreas de trabajo (lo que comúnmente conocíamos en Photoshop como «mesas de trabajo«).
  • Dentro de cada artboard tendremos todos los elementos que utilicemos ordenados en capas, con el gran añadido de poder buscar elementos por el nombre que le hayamos puesto.

 

Aquí podéis ver un ejemplo de las Páginas y los Artboards creados en un archivo:

 

sketch.jpg

¿Cómo insertar nuestro Artboard?

Tenemos dos opciones:

1. Insertarlo desde el panel «insert» que encontraremos en la parte izquierda del toolbar superior de la aplicación:

sketch2.png

2. Pulsando la tecla A: 

Cuando seleccionéis esta opción comprobaréis que a la derecha de la pantalla se nos abrirá un panel de opciones con las características de nuestro «artboard«, pudiendo elegir unos parámetros de tamaño en función de la opción que seleccionemos. Podemos escoger entre:

Dispositivos Apple (iPhone, Apple watchs…)

Responsive web (con tamaños genéricos de móvil, tablets o pantallas de escritorio)

Tamaños de impresión (A4, A5, A6, etc.)

Personalizado (seleccionaremos el tamaño que queramos)

 

sketch3.png

Todo esto nos será de gran ayuda para no invertir demasiado tiempo en pensar qué tamaño es el más adecuado para el diseño que queremos realizar.

Otro apartado importante y útil para nuestros Artboards son los famosos Grids, Reglas y Layouts. Estos nos ayudarán a realizar diseños que se adapten a librerías como Bootstrapo Semantic UI. 

Para poder visualizarlos simplemente tendremos que seleccionar en el toolbar superior la opción «View»:

 

sketch4.png

 

Modificar las características de los Grids y Layouts será tan sencillo como seleccionar la opción «Grid Settings» o «Layout Settings».

En el caso del Layout podremos configurar el ancho de nuestro layout, el número de columnas (number of columns) y la posición en la que queremos que aparezca (offset). Lo más común será seleccionar «center» para ajustarlo al centro de nuestro diseño.

Otras opciones serán el ancho y separación de las columnas de nuestro Layout.

Automáticamente, Sketch recalculará estos parámetros para ajustarse al ancho seleccionado.

 

También podremos elegir entre ver estas columnas rellenas (y seleccionar su color) o simplemente como líneas. Ejemplo:

sketch5.pngFill Grid 1

sketch6.png

Stroke Outline 1

 

¡Hasta aquí nuestro pequeño tutorial de Sketch! ¡Espero que os haya gustado y estad atentos al siguiente post porque os seguiré contando cositas! ¡Un saludo!