Introducción a Sketch y atajos de teclado

Hace unos días, os realizaba una pequeña introducción al perfil del diseñador UX (User eXperience), y en esta os hablaba de tres de las herramientas que se utilizarán en el curso de Diseño de Productos Digitales y UX . Pues bien, hoy veremos de qué trata Sketch, y por qué se ha hecho tan popular en el mundo del diseño.

Cuando hablamos de Diseño, existen multitud de herramientas o suites que comprenden un sinfín de utilidades para “ayudar” a la creación de éste. Sin embargo, en muchas ocasiones cargar tantísimas herramientas que poner a nuestra disposición podría resultar en una merma de rendimiento general de la aplicación. Por lo tanto será recomendable establecer un “pack” de las herramientas que utilicemos frecuentemente y que deberán estar bien depuradas, por ejemplo, teniendo los plugins necesarios e imprescindibles, no una biblioteca de cientos de filtros que jamás llegaremos a utilizar.

Una cosa es innegable, Adobe ha hecho del Diseño su imperio, siendo sus utilidades las más recurrentes si hablamos con cualquiera del mundillo, de hecho, otra de las herramientas a utilizar durante el curso será Adobe Photoshop. Sin embargo Sketch está presentando batalla al gigante de las herramientas de creación de contenido, con una aplicación limpia, sencilla, versátil, ágil…

Este nuevo contendiente suma día a día razones para su implementación definitiva en un entorno de producción, lo más conveniente es que lo probéis vosotros mismos (que todos tenemos una forma diferente de trabajar y lo mismo no termina de encajar con vuestro “modus operandi”) pero de momento os dejo con algunas de las razones que me han llevado a decidirme por esta utilidad.

• Desde que Adobe Fireworks desapareció (sí, todavía se puede descargar e instalar, pero no recibirá más actualizaciones oficiales, por lo que ha comenzado su proceso de eliminación), existe una amplia necesidad de una herramienta de diseño capaz de trabajar con gráficos de interfaz de manera ágil . Aquí es donde Sketch gana punto frente a la familia Adobe , ya que si bien tenemos Photoshop e Illustrator para estos menesteres, son herramientas más que pesadas y se requerirán unas prestaciones más que medias para moverlo con cierta soltura.

• Sketch ha simplificado en su (relativamente) corta vida la interfaz de usuario en base a las necesidades sugeridas por sus propios usuarios, prestando atención a las necesidades del usuario diseñador y sus acciones del día a día. Puede que en cierto modo parezca que quisiera imitar a la minimalista interfaz de Adobe Photoshop, pero nada más lejos de la realidad. Los chicos de Sketch saben que su herramienta no puede hacer todo lo que hace Photoshop, pero es lo que menos les preocupa ya que al fin y al cabo, un diseñador de interfaces no requiere de toda la suite de Adobe para trabajar con gráficos vectoriales o imágenes para web design.

• Por último, Bohemian Design (empresa desarrolladora de Sketch) tiene una idea muy clara para el destino de su app, y es en esto en lo que se centran a la hora de implementar cambios. Mientras que Adobe se mantiene fiel a incluir más y más herramientas a su utilidad, Sketch recibirá un mayor número de mejoras en cuanto a utilización de las mismas, aunque por su puesto contarán con novedades en el aspecto de incrementar su funcionalidad, no tienen previsto recargar su aplicación con herramientas poco productivas.

Características

Sabiendo ya qué es Sketch, vamos a ver algunas de sus características más destacables:

Objetos: Todos los objetos que creemos en Sketch serán vectoriales, por lo que escalarlos no supondrá redimensionar las resoluciones de éstos, ahorrando así tiempo de grafismo.

Pixel Zoom: Nos ofrece la posibilidad de visualizar el contenido a editar tanto en su resultado final, así como pasarlo al modo Pixel View, acercándonos hasta obtener los píxeles resultantes de nuestras acciones.

Inspector: Se trata de un apartado donde obtendremos información ampliada de todos y cada uno de los objetos en nuestro proyecto. Propiedades (estáticas y dinámicas), Estilos de Capa, Sombras, Bordes, Exportación, entre otros tantos aspectos nos harán conocer hasta el menor detalle de lo que nos traemos entre manos.

Herramientas: Como los propios chicos de Bohemian Design comentan en su web, ellos también son diseñadores y se centran en intentar ofrecer herramientas útiles en el día a día de un diseñador. Por ejemplo, a partir de Sketch 3, tendremos algo así como un historial (Reusable Items) del que podremos recuperar objetos con determinadas características para no tener que estar editando un ítem predefinido por la app. Diferentes estilos de capa para aplicar directamente en varios objetos, una enorme galería de símbolos e iconos así como fuentes y estilos de texto para nuestros proyectos…

Vista en tiempo real: Descargando la aplicación para nuestros dispositivos móviles, podremos tener una vista en tiempo real de nuestra interfaz en el propio dispositivo. Así no tendremos sorpresas ;).

Atajos de Teclado

Y para los que hayáis llegado hasta este punto y estéis descargando la demo (como poco…), os dejo una serie de atajos de teclado para Sketch que nos ahorrarán todavía más tiempo en los procesos de diseño.

Copiar Color: Ctrl+C Nos permitirá obtener inmediatamente el color del objeto en el que hagamos clic con el ratón.

Insertar:

• R: Rectángulo
• O: Círculo
• I: Línea
• V: Vector
• T: Texto

Renombrar una capa: cmd+R Nos facilitará modificar la etiqueta de una capa para obtener una mejor identificación de la misma.

Fijar una capa para moverla: alt+cmd Ahorraremos tiempo seleccionando con el teclado la capa que queramos mover, sin peligro de equivocarnos y mover una capa distinta.

Ver distancia entre objetos: alt (pulsación larga) Seleccionando el objeto, dejando pulsada la tecla ‘alt’ y posteriormente seleccionar un segundo objeto, obtendremos las medidas que separan cada uno de los objetos seleccionados.