Sketch 3, software de diseño gráfico orientado al mundo digital

Uno de los requisitos para el buen trabajo en equipos multidisciplinarios es la elección de un software que cumpla con las exigencias de los grandes proyectos y facilite el traspaso de tareas.

En IDA empezamos trabajando con Fireworks, pero Adobe decidió descontinuarlo. Entonces probamos con Indesign, herramienta que permite definir estilos y hacer actualizaciones automáticas. Sin embargo, en proyectos con muchas plantillas, este programa colapsa y es evidente que no está orientado a la producción de sitios web.

Continuamos con nuestra investigación y probamos distintos software buscando las siguientes características:

• Compatibilidad con otros programas usados en el equipo.
• Acorde con la lógica de diseño web, pensado para sitios web y sus códigos.
• Que permita trabajar en archivos grandes, con muchos elementos, de forma rápida.

Como resultado de un trabajo de evaluación y comparación, nos quedamos con Sketch 3, un software de diseño gráfico pensado para el mundo digital.

Ventajas y desventajas de Sketch 3

Un gran punto a favor en nuestra elección, fue que ocupamos este programa desde la arquitectura de información, por lo que la compatibilidad es ideal y parte del equipo ya estaba familiarizado con la herramienta.

Hemos identificado los siguientes beneficios y funcionalidades destacadas al trabajar con Sketch 3 en diseño web:

• Tiene un sistema de grillas automáticas que es muy fácil de manejar.
• Funciona con estilos, lo que nos permite determinar desde el inicio las tipografías, los interlineados, los colores y todos los detalles, generando una hoja de estilo que hace mucho más fácil diseñar el sitio completo.
• Se pueden crear símbolos como unidades discretas de un sitio. Por ejemplo, un menú que se puede reutilizar.
• Las dos funciones anteriores facilitan los cambios inesperados y las correcciones, ya que al cambiar un elemento se actualiza automáticamente en todo el sitio.
• Los archivos son muy livianos, se pueden exportar en PDF, PNG Y JPG, incluso al doble del tamaño, ya que al trabajar con vectores, no hay peligro de que los elementos se pixelen.
• Se pueden utilizar múltiples artboards en diferentes secciones. Esto permite desarrollar todas las plantillas de un dispositivo en una sección y así tener tus páginas divididas según formato.
• Los elementos de forma, como por ejemplo un rectángulo, se utilizan con la misma lógica de CSS, por lo que al pasar a front se puede copiar el estilo fácilmente.
• Comparado con otros programas, el precio de Sketch es considerablemente menor. Además, es un pago único, mientras que en los software de Adobe el costo es mensual.

A pesar de todas las ventajas, siempre existen desafíos al adoptar un nuevo software. La primera barrera es el desconocimiento, pero Sketch es bastante intuitivo y fácil de usar, por lo que no representa un problema mayor. Sin embargo, existen algunas limitaciones que pueden ser superadas con práctica, estas son:

• Existe sólo para OS X Mac, lo que implica todo el equipo debe usar este sistema operativo.
• No es bueno para la edición de imágenes. Tiene algunas herramientas básicas, pero para definir un estilo hay que usar otro programa de edición primero.
• Como se trabaja con estilos, se corre el riesgo de hacer cambios errados que afecten a todo el sitio.
• No es posible volver un paso atrás cuando se modifica un estilo, hay que volver a la última versión, por lo que es necesario guardar constantemente los cambios.

Recomendaciones de uso

La integración de Sketch en nuestro trabajo diario nos ha ayudado a generar buenos hábitos para el desarrollo colaborativo de plataformas digitales. Uno de nuestros primeros aprendizajes fue que debíamos agrupar las carpetas de forma apropiada para evitar problemas al hacer el traspaso desde diseño a desarrollo front end.

Siguiendo esta lógica de orden y registro, creamos un archivo adicional llamado “Estilo” en el que describimos todos los elementos y sus variaciones posibles. Con este documento es más fácil para los desarrolladores tomar elementos por separado y armar el sitio. Además, ayuda a mantener la coherencia en el trabajo de los distintos integrantes y evita los problemas que generan las interpretaciones.

Todas las buenas prácticas que hemos ido generando en nuestra experiencia, nos permiten prevenir problemas inesperados y asegurar un trabajo final de óptima calidad.