Herramienta de diseño web

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

Diseño 4 min. de lectura

La elección de un programa para diseño web es un proceso que debe considerar todas las exigencias de los grandes proyectos. Analizamos las ventajas y desventajas de usar Sketch 3 en la creación de plataformas digitales.

Sketch 3

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.

Acerca del Autor

Fernanda Zúñiga

Encargada de Diseño

Diseño interfaces consistentes, atractivas, que reflejan una identidad visual clara y están pensadas en los usuarios. Para ello, la vinculación al trabajo multidisciplinario que se genera antes y después del diseño es fundamental.

Agregar un comentario

Carlos Peñaililo Z

hace 5 años

Hola Fer! , bueno aprovecho de saludar y felicitarte por esta info tan detallada. Quería preguntar si hay algún programa alternativo para desktop?
Muchas Gracias que estes bien 😉

Responder
Fernanda Zúñiga

Fernanda Zúñiga

hace 5 años

Hola Carlos! Gracias por tu comentario.

Me imagino que con “desktop” tal vez querías decir “PC”? Ya que Sketch está sólo para Mac. Si es así, te cuento que no conozco algún software que se compare con Sketch. Sin embargo, Adobe anunció el 2015 que para este año lanzará Project Comet, el cual promete ser el mejor software de diseño y prototipado web. Puedes ver sus característica en el sitio de lanzamiento: http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html

Pero si necesitas algo en este momento, te recomiendo que explores con Illustrator CC. A pesar que no lo he probado como software para diseño web, he leído varios artículos que se publicaron en el segundo semestre del 2015 donde lo mencionan bastante y con muy buenos resultados. Podrías leer la columna de Brian Wood en http://www.adobepress.com/ titulado “Top 10 Reasons Why Illustrator CC Is Great for Web Design”.

Espero porder ayudarte.
Saludos!

ileana

hace 5 años

Buen artículo! Estoy explorando el mundo de sketch, a ver que tal me va.

Responder

Natalia Pizarro

hace 5 años

Gracias Ileana, qué bueno que te haya servido. También tenemos un artículo sobre plugins para Sketch que te puede interesar.

Saludos!