Photoshop es un software muy poderoso, su versión más reciente incluye filtros apoyados en AI y lo que es sin duda el mejor paquete de funciones para edición de imágenes; sin embargo aún cuando es el líder en cuanto a diseño digital, no es muy recomendable usarlo para la creación de interfases de apps móviles y sitios web ya que está pensado para diseño gráfico en general y por lo tanto carece de funciones especializadas en UI/UX, además de cosas como su manejo de medios pixeles que, al menos para web, no tiene ningún sentido. Illustrator no es mucho mejor en este sentido ya que aunque se le ha utilizado por mucho tiempo para diseño de aplicaciones y sitios, sus herramientas no fueron creadas con ese fin particular.

Y es que para diseñar una interfase de usuario se requiere de un software que permita definir una estructura y después vestir esa estructura: pasar de un wireframe a un mockup sin tener que cambiar de herramienta.

Planos de construcción

Pero ¿que es un wireframe? ¿y un mockup?

Bueno, la mejor analogía que podemos hacer es que, si un sitio web fuera una casa en construcción, el wireframe serían los planos y el mockup sería la maqueta; ambos usados por los trabajadores encargados de construirla para saber cómo es que deben hacerla y cómo debe verse el producto final.

Cuando se crea un wireframe, además de la estructura, se definen ciertos elementos comunes del sitio, por ejemplo los botones, los estilos tipográficos de títulos y párrafos, por mencionar algunos. De este modo al crear una nueva sección se busca reutilizar en la medida de lo posible dichos elementos con el fin de optimizar el proceso de diseño y por consiguiente, el de desarrollo.

En cuanto a la maqueta o mock-up, su finalidad es ofrecer un previo de cómo quedara el sitio para que se puedan apreciar los elementos de diseño; en muchas ocasiones se elaboran mock-ups de las visualizaciones en escritorio y dispositivos móviles.

Este flujo de trabajo permite que se vayan identificando problemas potenciales en estructura (mediante el wireframe) y posteriormente en el apartado visual (con el mock-up), de modo que puedan corregirse antes de implementarse lo que ahorra tiempo y obviamente, dinero.

Pero para hacerlo, había que utilizar distintos paquetes de software a fin de generar por separado ambas propuestas, lo que hacía que el proceso fuera lento, tedioso y susceptible a errores.

Sketch al rescate

Sketch es un software que vino a cambiar ese paradigma y permitió agilizar el proceso de diseño al unir la etapa estructural con la presentacional; además introdujo nuevas funciones que incluso crearon una nueva posición en muchas agencias digitales: el diseñador de UI/UX - ya no solamente se trataba de que alguien definiera colores, imágenes y tipografía para los sitios web y apps móviles; esta nueva especialización considera además aspectos tan importantes como la usabilidad y accesibilidad para entregar una experiencia óptima a los usuarios finales.

Para empezar, Sketch permite integrar elementos vectoriales para definir cajas de contenido y otros elementos de la estructura, además de que obviamente permite colocar imágenes, títulos y párrafos para crear la identidad visual del sitio. Pero también permite crear componentes reutilizables de modo que es posible definir un elemento para luego cambiarlo y que automáticamente se actualicen todas las instancias del mismo; luego podemos integrarlo en una biblioteca y tener todos los componentes comunes en un solo lugar para poder compartirlos con todo el equipo de diseño.

Y hablando de compartir, Sketch facilita el trabajo en equipo con herramientas de colaboración que permiten una mejor división del trabajo así como una perfecta sincronía entre versiones sin tener que enviar una copia del archivo a cada miembro.

Integra además herramientas de prototipado que permiten previsualizar de forma interactiva los diseños, por lo que es posible presentar a los clientes y recibir feedback sin abandonar la etapa de diseño.

Sketch revolucionó la forma en que se trabajaban los diseños de sitios web y apps móviles ya que además de ser un software muy poderoso también es fácil de usar y tiene una curva de aprendizaje muy amigable. Su única (y enorme) desventaja: solamente está disponible para el sistema Mac OS.

¿Y para usuarios de Windows?

Desde que Adobe adquirió a una empresa llamada Macromedia, hace ya varios años, se ha ido consolidando como el mayor proveedor de software creativo en el mundo: procesamiento de imágenes, edición de video, creación de motion-graphics, animación para web y mucho más; todo en su vasto catálogo de productos. Era por tanto natural esperar que respondieran a la oferta de Sketch y el gran mercado sin explotar que representaban los usuarios de Windows.

Y con eso llegó Adobe XD: una propuesta fresca para el diseño de sitios y apps, con poderosas herramientas y lo mejor de todo, soporte para el sistema de Microsoft.

Al principio XD carecía de algunas de las funciones que hicieron grande a Sketch, además de ser propenso a errores que podían significar perder el trabajo de varias horas; sin embargo conforme han llegado las actualizaciones este software se ha convertido en una alternativa estable y confiable a Sketch, ya que además incorpora algunas funciones únicas como la cuadrícula de repetición y el redimensionado interactivo entre otras.

Además de que las agencias que ya están pagando un plan de Adobe Creative Suite tienen acceso incluido a esta gran herramienta.

Modernízate

Muchas agencias siguen utilizando Photoshop para sus diseños de interfases, lo cual indudablemente les priva del acceso a las novedosas funciones de esta nueva generación de herramientas y por consiguiente no les permite optimizar sus flujos de trabajo.

Si eres diseñador te sugerimos darle una oportunidad a cualquiera de estas dos alternativas, ya sea que quieras probar Sketch si tienes una Mac o echarle un vistazo a Adobe XD en Windows/Mac te garantizamos que vas a encontrar muy útiles las herramientas avanzadas de diseño que ambos productos incorporan, en verdad te facilitan la vida.

Como director de diseño te sugerimos explorar las opciones de colaboración, ya que mejorarán en gran medida el flujo de información y harán que sea más sencillo ponerse de acuerdo a la hora de vetar ideas para los diseños; además la productividad de tu equipo crecerá al usar la paquetería adecuada.

Finalmente, como cliente te beneficiarás mucho de acercarte a un equipo que utilice las herramientas y tecnologías más recientes y especializadas para el trabajo, ya que podrás recibir una propuesta más aterrizada y los tiempos de entrega serán mejores, además es seguro que obtendrás un producto de mucho mayor calidad.

En Artisan utilizamos ambas herramientas, entre otras (como InVision) que nos permiten agilizar nuestros procesos al tiempo que garantizan la máxima calidad en todos nuestros productos y servicios. Te invitamos a contactarnos y contarnos de tu proyecto ¡con gusto te apoyaremos para que se vuelva realidad en poco tiempo!