Sketch, ¿Qué es? y las razones por las que deberías estarlo usando.
Hace más de un año si alguien me hubiera preguntado qué programa le recomendaba para maquetar una aplicación o página de internet seguramente mi respuesta hubiera estado entre Illustrator o Photoshop. El primero es un programa que yo usaba y que sigo usando en ocasiones con este fin. En cambio con Photoshop guardo una relación de amor-odio. Para mi no debería ser la herramienta principal de toda(o) diseñador. Sin embargo se vende en el mercado como el «diseñalo facilito». Apuestan por una serie de efectos en lugar de teoría comunicativa aplicada a un material gráfico, pero igual de esto podemos platicar en otra ocasión. Mas esto ha cambiado, ahora te voy a hablar de Sketch.
Como te estaba contando hace más o menos 6 meses decidí probar Sketch. No había buscado usar este programa porque aunque tiene años en el mercado es únicamente para usuarios con sistema operativo Mac OS. Ahora a 6 meses de distancia he podido constatar que Sketch es una herramienta muy útil. Incluso podría decir que es indispensable para los que nos dedicamos al desarrollo de interfaces de usuario (UI).
De cara a los grandes, Sketch
Sketch está en constante desarrollo. Ganó rápidamente el terreno del desarrollo digital al monstruo de los programas de diseño Adobe y su Creative Cloud . En este terreno me parece que están muy por detrás aún. Tanto es así que han dado un viro al timón. Ahora han puesto sus esfuerzos en desarrollar un programa que competirá directamente con Sketch. Este será el Adobe Experience Design, herramienta de maquetado y desarrollo de prototipos de la cual hablaremos en una siguiente publicación.
Por ahora concentrémonos en ¿Qué es Sketch? y las razones por las que deberías pensar seriamente en utilizarlo. Antes hagamos un breve paréntesis. Si eres un usuario de Windows y no tienes la más mínima intención de cambiarte a Mac todavía estás a tiempo. Vete ahora mismo porque tal vez después de leer esto cambies de opinión y quieras cambiar o alternar entre ambos sistemas operativos.
El Rey Adobe ha muerto, viva el Rey Sketchapp @sketchapp Clic para tuitear¿Qué es Sketch?
Sketch fue desarrollado por Bohemian Coding y lanzado al mercado en el año 2010. Es un programa de edición de vectores sólo disponible para el sistema operativo MacOS. Está dedicado principalmente al desarrollo de interfaces de usuario para aplicaciones, páginas web y algunos elementos más como correos electrónicos interactivos, etc. Aunque se puede utilizar también para diseñar cualquier material visual que deseemos. Cuenta con varios años ya en el mercado y son ya muchas las empresas dedicadas a crear extensiones que hacen de la experiencia de usarlo un deleite.
Sketch cuenta con todo lo que necesitas para hacer de tu proyecto todo un éxito. Gracias a sus extensiones crear tu prototipo de manera fácil y profesional, es un hecho. Si quieres saber más sobre herramientas de prototipado te invito a que dejes un comentario y pronto escribiré sobre este tema. A continuación, te damos algunas razónes a tomar en cuenta para cuando pienses en la planeación de tu siguiente proyecto.
Sketch vs Competencia, ¿Cuáles son los beneficios más evidentes?
Es probable que la mayoría de los (as) diseñadores (as) piensen como primera opción en los dos grandes de la paquetería de Adobe, hablo de Photoshop e Illustrator. Estos se quedan muy por detrás de lo que Sketch puede ofrecer a la hora de diseñar una interfaz de usuario. Gracias a todas las empresas o desarrolladores individuales que se han enfocado en hacer de Sketch uno de los programas más especializados en el tema y con un dinamismo digno de respetarse, Sketch los supera con creces. Podría decir que Sketch encontró una simbiosis casi perfecta entre lo que el programa podía ofrecer y lo que este podía adquirir a través de desarrolladores externos.
Primer Acto, Sketch y los Pluggins
Y es que Sketch es un estuche de monerías en cuanto a pluggins se refiere. Algunos son mejores que otros, más desarrollados o con mejor mantenimiento en cuanto actualizaciones se refiere, pero todos creados para hacer de la experiencia de Sketch una maravilla. Y es que empresas con gran presencia se han creado alrededor de Sketch. Aquí algunos de los que destacan de entre el mar que existe actualmente. Si estás ya haciendo tus pininos en Sketch debes instalarlos de inmediato, si no talvez esto te haga tomar una desición al respecto.
CRAFT
Es un pluggin multifuncional, que dentro de las varias funciones que tiene, una de las mas destacables es la de crear prototipos de tu diseño, sincronizandolos directamente desde Sketch hacia inVision de manera rápida y sencilla. Si aún no conoces que es inVision te invito a que estés pendiente del material que estaremos subiendo pronto.
Si ya haz ocupado inVision seguramente te estarás cuestionando que diferencia sustancial aportará a tu trabajo diario el uso de Sketch + CRAFT. Con esta simbiosis una vez realizado tu diseño podrás realizar varias funciones directamente desde Sketch. Desde crear proyectos nuevos, subir las pantallas directamente desde Sketch, actualizar los cambios que estés realizando. Y ahora con la adición de creación de prototipos cada que actualices los elementos desde Sketch también se actualizarán las interacciones. Así de maravilloso como suena, una vez que le hayas indicado a Sketch que botón te lleva hacía que pantalla no lo tendrás que volver a repetir. Caso contrario si es que decides utilizar inVision en conjunto con Illustrator u otro por ejemplo. Sin duda esto era, al menos para mi, un dolor de cabeza.
De la mano Sketch & CRAFT
Otra de las herramientas con las que contamos es con un rellenador de contenido. Ya sean fotos, artículos, títulos, nombres de ciudades o personas, estarán siempre al alcance de un simple click, se mostraran en tu diseño y podrás dejar atrás el comúnmente usado Lorem Ipsum, que si bien es una herramienta fiable, es cierto también que su uso tiene detractores ya que su aplicación puede ser engañosa a la hora de presentar un diseño, lorem ipsum es un texto perfecto y algunas veces los textos reales no lo son, por tanto su acomodo dentro de un material gráfico será distante del cómo pueda verse con el texto real. Es por esto que los creadores de CRAFT añadieron está opción que va muy bien a la hora de aplicarlo, spoiler alert – sólo disponible en texto en inglés.
Descarga CRAFT
Launchpad y Auto-Layout
Así como el pluggin de CRAFT también contamos con dos grandes pluggins indispensables, me estoy refiriendo a Launchpad el pluggin desarrollado por AnimaApp que junto con su hermano Auto-Layout nos añaden funciones muy interesantes a la hora de desarrollar nuestros proyectos. Tanto Auto-Layout como Launchpad están enfocados al desarrollo de prototipos responsivos, ya sea para un sitio web o una aplicación iOS o Android, el uso de estos pluggins está enfocado en hacer de nuestro trabajo un ambiente más fluido y sencillo.
En recientes fechas Launchpadd añadió la opcion de widgets. Con estos podrás incorporar mapas de google en tiempo real y cargar fotos de pinterest de manera dinámica, entre otras opciones que nos otorgan mejores elementos para la presencia. Por si esto no fuera ya una gran herramienta, Launchpad añadió la opción de publicación en línea a través de los servidores de Launchpad. Una vez acabado tu diseño tu página puede publicarse al instante, en otra entrada te mostraré mas a detalle como funciona.
Prueba Launchpad
Clipboard Fill
Este pluggin te permite colocar una imagen que tengas alojada en el portapapeles dentro de cualquier forma que tengas seleccionada, ya sea un cuadrado o un circulo. Su uso es muy sencillo y práctico. Sin duda ayuda a agilizar nuestro trabajo. Un punto a tomar en cuenta son los derechos de las imágenes, si bien es probable que para una revisión interna puedas ocupar ese material, para la publicación o entrega de tu trabajo deberás de mostrar contenido del cual tengas los derechos.
Descarga Clipboard Fill
Sketch Icon Font
Necesitas un icono para ilustrar algún elemento de tu proyecto, pues olvidate de dedicarle tiempo a vectorizarlo o buscarlo, con este pluggin podrás incrustarlo de manera rápida y fácil. Sketch Icon Font nos permite tener varios paquetes de tipografías iconográficas dentro de una sola librería lista para utilizar, es muy fácil de instalar y usar. De inicio cuenta con 4 fuentes de las cuales podrás elegir una serie de iconos, sin embargo tu puedes subir la propia u otra que tengas. Si aún no cuentas con este pluggin te recomiendo que lo bajes de una vez y comiences a usarlo.
Descarga Sketchapp Icon Font
Sketch Measure
Si bien es cierto que hay otros pluggins que realizan esta misma función, Sketch measure ha logrado encontrar identidad propia. Probablemente de la manera más sencilla podrás contar con una especie de inspector de propiedades. Sketch measure cuenta con dos opciones de barras de edición, con las cuales podrás decidir que elementos son los que quieres mostrar. Ya sea la medida que existe entre dos elementos, el color HEX, tamaño del objeto, entre otras opciones, Sketch measure nos permite hacerlo dentro de nuestra mismo proyecto. Esta primera opción nos ayuda a compartir las especificaciones de nuestro proyecto via PDF, captura de pantalla o si vamos a imprimir el elemento.
Sin embargo esto no es todo con este pluggin, Sketch measure cuenta con una versión de inspector web que no requiere de conexión a internet. Este tipo de visualización se puede compartir entre el equipo de trabajo. Todos podrán ver cómo está desarrollado el proyecto. Así agiliza la dinámica de desarrollo entre el equipo encargado de la interfaz de usuario y el equipo de la implementación.
Sin duda esta opción es una de las más llamativas. Algo que no he visto en otros pluggins o plataformas que ofrecen la herramienta de inspector. Esperemos que en siguientes actualizaciones esta herrmaienta se fortalezca y haga de este pluggin un indispensable de Sketch.
Segundo Acto, Sketch, su interfaz y organización centrada en UI.
Bueno ya hablamos de algunos pluggins desarrollados por empresas externas a Sketch. No hemos hablado aún de lo que Sketch puede hacer en sí mismo por nosotros. Sketch tiene una interfaz de usuario similar a cualquier programa de edición de vectores. Ya sea que ocupes o hayas ocupado alguna vez Illustrator, CorelDraw (RIP), Vectr, Inkcsape, etc., Sketch cuenta con las herramientas básicas comunes en el sector. En realidad a nivel básico no dista mucho lo que puedes hacer en tanto en Sketch como en los otros programas.
De entrada comenzamos con un área de trabajo libre de lienzos por el cual puedes navegar prácticamente de manera infinita. La disposición de los páneles de herramientas es sencillo y claro. El uso y organización de las capas es un punto medio entre photoshop e illustrator. Si estás familiarizado con estas no te será difícil adaptarte.
Algo que es importante destacar de Sketch es su enfoque de organización para un proyecto de interfaz de usuario integral. La posibilidad de crear un set de elementos que se repiten en el proyecto y que tendrán diferentes estados dependiendo de la interacción del usuario. Este set de elementos que en Sketch se llaman «símbolos» nos permitirán construir un proyecto más profesional y que sin duda será mas fácil de compartir con el equipo de desarrollo.
Concluyamos, al menos por el momento.
Heme aquí un ex Illustrabeliever escribiendo lo siguiente. Si te estás desempeñando como un diseñador de interfaces de usuario o estás planeando serlo, tienes que voltear a Sketch. Hoy día ningún programa en el mercado le proporciona a tu trabajo lo que Sketch puede ofrecerte. Una interfaz clara. Una basta selección de pluggins para complementar su potencial. Cada día más y más proyectos creándose alrededor de Sketch.
Como te comentaba más arriba Sketch en herramientas básicas no es el santo grial de nada. Su orientación hacia la creación y organización de proyectos serios es lo que hace de Sketch un programa indispensable. Y es que Sketch a diferencia de otros programas no busca ser la solución para todo. Sketch se enfoca en el diseño de interfaces de usuario y punto. No pretende venderse como un hazlotodo, hola y adios Photoshop.
Gracias a Sketch puedes contar con una herramienta puntual
Sketch descubrió su nicho y lo está explotando de manera correcta. Al parecer Adobe se ha percatado de este nicho que dejó olvidado. Simplemente adobe no supo mantenerse actual o leer de manera correcta como iban evolucionando las necesidades del mercado. Y es que las anteriores apuestas de Adobe por acercar el mundo del diseño web y su implementación han sido deficientes. Bueno es cierto que en algún momento funcionaron y estuvieron a la altura de las necesidades, accedo sin conceder.
Actualmente Dreamweaver y Muse tienen competidores de mucha más seriedad como UXPin o Webflow o el mismo Sketch y el pluggin de anima del que ya hablamos arriba. Técnicamente ninguna de las opciones mencionadas genera líneas de código decentes. Podemos decir que al menos en intención han entendido bien. El mundo del diseño web es responsivo y enfocado a los móviles y ellos han llegado tarde.
Definitivamente tienes que probar sketch
Y sí, sé que ambas plataformas de Adobe no están enfocadas al diseño de aplicaciones ni compiten directamente con Sketch. Pero es precisamente por esta razón que me parece han llegado a un punto de inflexión. Adaptarse, encontrar su nicho y especializarse en ello o morir. No les queda más. Parece que Adobe lo ha entendido y por eso ha puesto sus esfuerzos en desarrollar Adobe Experience Design. Este programa si es un competidor directo de Sketch, de momento en versión BETA tanto para Mac como para Windows. Adobe Experience Design llegará a intentar recuperar este nicho perdido y en el que ya lleva 6 años a cuesta.
Caballo que alcanza gana Clic para tuitearPor lo que he podido ocupar de Adobe Experience puedo decir que se nota en Adobe la precupación al respecto. Aún falta mucho que recorrer. Adobe Experience es todavía un programa muy inestable y con deficiencias en sus herramientas e interfaz. Sin embargo Adobe ya llegó y Sketch tiene que estar pendiente de ello porque Adobe Experience tiene mucho potencial. Es evidente que llegó para destruir a Sketch y similares. Yo lo he utilizado en 2 o tres proyectos serios y se ha comportado a la altura de lo necesario.
A Adobe Experience Design le toca remar a cuestas y a Sketch enfocarse en mejorar. Esperemos que esta competencia sea para bien y los usuarios tengamos dos muy buenas opciones para desarrollar proyectos. Para poder dar un veredicto tendremos que esperar mínimo un año o tal vez más. Mientras eso sucede o no Sketch es el programa a utilizar. No hay más. No hay dos. Esto es una carrera de uno sólo.
Extras del artículo