Hola, soy Patricio Mas,
Diseñador
Desde Santiago, Chile, construyendo experiencias digitales
y contando historias visuales.
Portafolio
Implementación de DesignOps
Como Líder de Diseño de Producto en uPlanner, encabecé la implementación de un marco de DesignOps que implicó la creación de una «constitución» colaborativa para estandarizar los procesos de diseño en mi equipo de cuatro diseñadores, quienes estaban integrados en equipos de producto. Este enfoque me ayudó a abordar las ineficiencias y las inconsistencias en nuestro flujo de trabajo de diseño, mejorando la coherencia, la eficiencia y la escalabilidad, al tiempo que facilitó la incorporación de nuevos diseñadores. Aunque enfrenté desafíos como equilibrar la colaboración con la eficiencia y mantener actualizada la constitución, el impacto general ha sido transformador, fomentando un equipo fuerte y cohesionado dedicado a ofrecer productos educativos de alta calidad.
La necesidad de DesignOps
Con la creciente complejidad de nuestros productos digitales y las diversas necesidades de nuestra base de usuarios, se hizo evidente que nuestros procesos de diseño existentes no eran escalables. Los diseñadores se encontraban a menudo reinventando la rueda, lo que provocaba incoherencias en la experiencia del usuario e ineficiencias en nuestro flujo de trabajo. Además, la falta de procesos y documentación estandarizados dificultaba la incorporación de nuevos miembros al equipo. Estaba claro que necesitábamos un sistema cohesivo para agilizar nuestras operaciones de diseño y garantizar la coherencia en todos los productos.
La Constitución: Un enfoque colaborativo
Inspirados por un artículo de Nielsen Norman Group sobre DesignOps, decidimos crear una «constitución» para nuestro equipo de diseño. Esta constitución serviría como un documento vivo, esbozando nuestros procesos DesignOps, principios y mejores prácticas. Sin embargo, en lugar de dictar las normas desde arriba, opté por un enfoque colaborativo en el que todos los miembros del equipo pudieran contribuir a la constitución.
El proceso fue sencillo pero eficaz:
- Identificación de problemas: Cada vez que un diseñador encuentra un problema o una ineficacia en su flujo de trabajo, lo pone en conocimiento de todo el equipo durante nuestros talleres de diseño semanales.
- Debate y solución: A continuación, el equipo entabla un debate colaborativo para explorar posibles soluciones. Este diálogo abierto nos permite considerar diferentes perspectivas y llegar a un consenso sobre la mejor forma de actuar.
- Creación de una nueva «ley»: Una vez acordada una solución, el diseñador que identificó el problema redacta una nueva entrada en la constitución de DesignOps. Esta entrada detalla el problema, la solución y cualquier directriz o proceso relevante.
- Revisión y edición por pares: El borrador se comparte con todo el equipo para su revisión. Se anima a todo el mundo a que aporte comentarios y sugiera modificaciones, para garantizar que el documento final refleje la sabiduría colectiva del grupo.
- Finalización y adopción: Tras incorporar todos los comentarios, la nueva entrada se añade oficialmente a los estatutos. A continuación, el equipo adopta la nueva práctica en sus flujos de trabajo diarios.
Beneficios de la constitución colaborativa
La implantación de nuestra constitución DesignOps ha aportado varios beneficios clave a nuestro equipo de diseño:
- Coherencia entre productos: Al documentar nuestros procesos y normas de diseño, hemos logrado un mayor nivel de coherencia en todos nuestros productos. Esto no sólo ha mejorado la experiencia del usuario, sino que también ha reforzado nuestra identidad de marca.
- Mayor eficacia: Los procesos estandarizados han reducido el tiempo dedicado a tareas repetitivas y han permitido a los diseñadores centrarse más en la resolución creativa de problemas. Esto ha dado lugar a iteraciones de diseño más rápidas y a un flujo de trabajo más eficiente en general.
- Mejora de la moral y la implicación del equipo: La naturaleza colaborativa de la constitución ha fomentado un fuerte sentido de propiedad e inclusión entre todos los miembros del equipo. Los diseñadores se sienten capacitados para contribuir a la evolución de nuestros procesos, sabiendo que sus ideas son valoradas y respetadas.
- Escalabilidad e incorporación: Los procesos documentados han facilitado la incorporación de nuevos diseñadores, ya que pueden familiarizarse rápidamente con nuestras prácticas establecidas. Esta escalabilidad ha sido crucial a medida que nuestro equipo sigue creciendo.
Retos y lecciones aprendidas
Aunque la implantación de DesignOps ha sido en gran medida un éxito, nos hemos encontrado con algunos retos en el camino:
- Equilibrio entre colaboración y eficacia: Implicar a todo el equipo en la creación y revisión de cada nueva entrada puede llevar mucho tiempo. Tuvimos que encontrar un equilibrio entre la colaboración exhaustiva y el mantenimiento de un flujo de trabajo eficiente.
- Mantener actualizada la Constitución: A medida que evolucionan nuestros productos y procesos, es esencial mantener actualizada la constitución. Establecimos un proceso de revisión trimestral para garantizar que nuestra documentación sigue siendo relevante y refleja nuestras prácticas actuales.
Conclusión
La introducción de un marco DesignOps a través de nuestra constitución desarrollada en colaboración ha sido una experiencia transformadora para nuestro equipo de diseño. Al fomentar una cultura de participación e inclusión, no sólo hemos mejorado nuestros procesos de diseño, sino que también hemos reforzado la cohesión y el sentido de propósito de nuestro equipo. A medida que seguimos creciendo e innovando, nuestra constitución DesignOps seguirá siendo una piedra angular de nuestro éxito, guiándonos en la entrega de productos educativos excepcionales a nuestros usuarios.
Hojas de Estilo Centralizadas
Como Líder de Diseño de Producto en uPlanner, encabecé los esfuerzos de nuestro equipo en una evolución crucial en nuestro proceso de diseño de interfaces. Pasamos de usar estilos en línea, que generaban inconsistencia, redundancia y una reutilización limitada, a implementar hojas de estilo centralizadas para lograr mayor eficiencia y uniformidad. Inicialmente, migramos a archivos LESS centralizados durante nuestra fase con Angular, integrándolos con el framework Bootstrap para establecer un lenguaje de diseño consistente, mejorar la mantenibilidad y aumentar la modularidad. Posteriormente, al cambiar a Vue.js, avanzamos a SASS, aprovechando sus funciones más avanzadas para mejorar la reutilización, escalabilidad y eficiencia, al mismo tiempo que actualizábamos nuestra integración con Bootstrap. Esta transición a estilos centralizados ha mejorado significativamente nuestra capacidad para mantener, escalar y colaborar en el diseño de interfaces en todos nuestros productos digitales en uPlanner.
Desafío
Inicialmente, nuestro enfoque de diseño de interfaz de usuario implicaba el uso de estilos en línea directamente dentro del HTML de nuestras vistas:
- Incoherencia: Los distintos desarrolladores aplicaban estilos diferentes, lo que daba lugar a un aspecto incoherente en toda la aplicación.
- Redundancia: El uso repetido de estilos similares en varios elementos daba lugar a una base de código hinchada.
- Reutilización limitada: Los estilos en línea no se podían reutilizar en varios componentes, por lo que el mantenimiento y las actualizaciones requerían mucho trabajo.
Objetivo
Nuestro objetivo era crear un sistema de estilos más eficaz y coherente centralizando nuestros estilos. Esto implicaría la transición de estilos en línea a hojas de estilo centralizadas para lograr lo siguiente:
- Garantizar un lenguaje de diseño coherente en todas las vistas y componentes.
- Minimizar la redundancia definiendo estilos reutilizables en una ubicación central.
- Mejorar la escalabilidad y la capacidad de mantenimiento mediante una gestión de estilos organizada y modular.
Proceso
1. Implementación inicial: Estilos en línea
En la primera fase de desarrollo, nos basamos en estilos en línea incrustados en elementos HTML. Este enfoque era sencillo, pero pronto reveló sus limitaciones:
- Difícil de mantener: A medida que la aplicación crecía, el mantenimiento de los estilos en línea se hacía cada vez más difícil. Actualizar un solo elemento de diseño requería encontrar y cambiar estilos en varias ubicaciones.
- Falta de coherencia: Los distintos desarrolladores aplicaban a menudo estilos en línea diferentes, lo que daba lugar a una interfaz de usuario fragmentada e incoherente.
- Falta de reutilización: Los estilos inline estaban vinculados a elementos específicos, lo que hacía imposible reutilizarlos en distintas partes de la aplicación.
2. Transición a hojas de estilo centralizadas con LESS
Reconociendo las limitaciones de los estilos en línea, hicimos la transición a un enfoque más estructurado mediante la adopción de LESS, un preprocesador de CSS, durante nuestro desarrollo con Angular. Los cambios clave incluyen:
- Archivos LESS centralizados: Creamos hojas de estilo centralizadas utilizando LESS, que albergaba todos los estilos para la aplicación en una estructura única y organizada. Esto nos permitió definir variables, mixins y estilos reutilizables que podían aplicarse a diferentes componentes.
- Integración de Bootstrap Framework: Basamos nuestra arquitectura de hojas de estilo en el framework Bootstrap, personalizándolo para alinearlo con nuestros requisitos de diseño específicos. Esta integración nos permitió aprovechar el sistema de cuadrícula adaptable de Bootstrap y los estilos predefinidos, manteniendo al mismo tiempo nuestra propia marca.
- Diseño coherente: Al centralizar los estilos en LESS, garantizamos un lenguaje de diseño coherente en toda la aplicación. Todos los desarrolladores utilizaron el mismo conjunto de estilos, lo que redujo las incoherencias.
- Mantenimiento mejorado: Los archivos LESS centralizados facilitaron la actualización de los estilos. Los cambios realizados en un único valor de los archivos LESS se propagaban automáticamente por toda la aplicación, lo que reducía el tiempo y el esfuerzo necesarios para las actualizaciones.
- Modularidad: LESS nos permitió dividir los estilos en archivos modulares, cada uno de los cuales representaba diferentes aspectos de la interfaz de usuario (por ejemplo, tipografía, esquemas de color, diseños). Esta modularidad mejoró tanto la organización como la escalabilidad de nuestros estilos.
3. Avance a SASS con Vue.js
Al pasar de Angular a Vue.js, vimos la oportunidad de mejorar aún más nuestro enfoque de estilo adoptando SASS, un preprocesador de CSS más potente:
- Arquitectura basada en SASS: Estructuramos nuestras hojas de estilo basándonos en SASS, aprovechando al máximo sus características como reglas anidadas, herencia y funciones más avanzadas. Esto nos proporcionó un mayor control y flexibilidad sobre nuestro estilo.
- Actualización del marco Bootstrap: Mantuvimos la arquitectura de nuestra hoja de estilo en el framework Bootstrap, actualizándola a la siguiente versión y personalizándola mediante variables y funciones SASS para alinearla con nuestros requisitos de diseño específicos.
- Modularidad y reutilización mejoradas: Las funciones avanzadas de SASS nos permitieron crear estilos altamente reutilizables y modulares. Por ejemplo, definimos variables globales para colores, fuentes y espaciado, garantizando la coherencia y facilitando la actualización del diseño en toda la aplicación.
- Eficacia y escalabilidad: La combinación de archivos SASS centralizados y las capacidades de personalización de la nueva versión de Bootstrap nos permitieron escalar nuestro sistema de diseño de forma eficiente. Podíamos añadir fácilmente nuevos estilos o modificar los existentes sin alterar la coherencia general del diseño.
Resultados
En general, la transición de estilos específicos para cada vista a hojas de estilo centralizadas ha aportado varias ventajas significativas:
- Coherencia: Los estilos centralizados garantizaron un diseño uniforme en todos los componentes, reduciendo la probabilidad de incoherencias en el diseño.
- Reducción de la redundancia: Con un enfoque centralizado, los estilos comunes se definían una vez y se reutilizaban en varios componentes, lo que reducía la duplicación y mantenía limpia la base de código.
- Facilidad de mantenimiento: Actualizar los estilos se convirtió en algo sencillo, ya que los cambios realizados en las hojas de estilo centralizadas se aplicaban automáticamente a toda la aplicación. Extraer la capa de estilo de cada vista también significa que los desarrolladores ya no tienen que preocuparse de dar estilo al html, ahora todas las mejoras visuales de la interfaz de usuario se aplican automáticamente.
- Colaboración mejorada: Las hojas de estilo centralizadas proporcionaban una única fuente de verdad para todos los estilos, lo que facilitaba la colaboración de los diseñadores y garantizaba que todos siguieran las mismas directrices de diseño.
- Escalabilidad: A medida que la aplicación crecía, las hojas de estilo centralizadas nos permitían escalar el sistema de diseño de forma eficiente, añadiendo nuevos componentes o actualizando estilos sin alterar la coherencia general.
Conclusión
Nuestra evolución de los estilos en línea a las hojas de estilo centralizadas, primero con LESS y luego con SASS, ha mejorado significativamente nuestro proceso de diseño de la interfaz de usuario. Los estilos centralizados nos han proporcionado un sistema escalable, eficiente y fácil de mantener que garantiza la coherencia en todos nuestros productos digitales.
Framework de Capa de Lenguaje
Como Líder de Diseño de Producto en uPlanner, nuestro equipo inicialmente enfrentó desafíos con las cadenas de texto codificadas en español, incluyendo una localización limitada, ineficiencia en las actualizaciones y duplicación de contenido en diferentes versiones para cada cliente. Para abordar estos problemas, desarrollamos un marco de trabajo para la capa de idiomas escalable, comenzando con un sistema basado en Excel que gestionaba las traducciones pero que llevaba a errores manuales y redundancia. Luego, pasamos a utilizar archivos JSON centralizados para cada idioma, gestionando las cadenas de texto mediante claves para reducir la duplicación y agilizar las actualizaciones. Finalmente, integramos Crowdin para la gestión de traducciones y automatizamos el proceso de exportación a Bitbucket, lo que permitió una localización específica para cada cliente sin comprometer la eficiencia o la consistencia. Este nuevo marco ha mejorado significativamente la escalabilidad, eficiencia y personalización en nuestro proceso de localización.
Desafío
El enfoque inicial de incluir contenido de texto en español directo en la interfaz de usuario presentaba varios retos:
- Localización limitada: Nuestros productos estaban bloqueados en un único idioma (español), por lo que era imposible atender a los usuarios que no hablaban español sin un importante rediseño.
- Ineficacia: Cada vez que había que actualizar un texto, los desarrolladores tenían que localizar y modificar manualmente cada instancia de ese texto en el código.
- Duplicación de contenidos: Como intentábamos dar soporte a varios clientes, cada uno con ligeras variaciones en sus requisitos lingüísticos, nuestra solución improvisada provocaba la duplicación de contenidos en las distintas versiones de nuestra interfaz de usuario.
Objetivo
Nuestro objetivo era desarrollar un marco de capa de lenguaje escalable que nos permitiera:
- Dar soporte a múltiples idiomas, con especial atención al español y al inglés.
- Agilizar el proceso de localización para reducir la duplicación y la intervención manual en el código fuente.
- Implementar un sistema centralizado para gestionar las traducciones, minimizar los errores y mejorar la coherencia.
Proceso
1. Implementación inicial: Sistema basado en Excel
Nuestro primer paso hacia un enfoque más estructurado fue crear un sistema basado en Excel para gestionar las traducciones. Este sistema constaba de los siguientes pasos:
- Gestión de clientes por columnas: Cada columna del archivo Excel representaba a un cliente diferente, con filas que contenían textos para diversos elementos de la interfaz de usuario. Esto nos permitió personalizar el contenido para cada cliente y mantener todas las traducciones en un solo lugar.
- Exportación a JSON: Tras actualizar el archivo Excel, exportamos los datos a formato JSON para utilizarlos en nuestras aplicaciones. Sin embargo, este proceso requería trabajo manual para garantizar que el archivo JSON de cada cliente se generaba y cargaba correctamente, lo que provocaba contenido duplicado en varios archivos y un mayor riesgo de errores.
2. Cambio a archivos JSON por idioma
En este nuevo sistema se centralizaron todas los textos en un único archivo JSON para cada idioma (español e inglés). Las características clave de este enfoque incluían:
- Archivos de idioma: Creamos archivos JSON dedicados para cada idioma soportado, albergando todas los textos de interfaz de usuario. Esto eliminó la necesidad de duplicar el contenido para cada cliente.
- Keys: Los textos se gestionaron mediante Keys (variables) dentro de los archivos JSON. Estas Keys se insertan en el código que luego renderiza el texto correspondiente. Esto nos permitió reciclar textos en distintos componentes y clientes. Este enfoque no sólo redujo la redundancia, sino que también garantizó que cualquier actualización de un texto se reflejara automáticamente dondequiera que se utilizara la Key.
3. Localización avanzada con Crowdin e integración con Bitbucket
Reconociendo las ineficiencias del enfoque basado en Excel, hicimos la transición para optimizar aún más nuestro proceso de localización. Después de sopesar muchas opciones, adoptamos Crowdin, un sistema de gestión de la traducción que se integra a la perfección con nuestro flujo de trabajo existente. Los pasos clave fueron los siguientes:
- Integración de Crowdin: Crowdin se convirtió en nuestra plataforma central de gestión de traducciones. Las nuevas Keys y las contenidos correspondientes se crean directamente en Crowdin, donde pueden traducirse fácilmente a varios idiomas.
- Exportación JSON automatizada: Una vez finalizadas las traducciones en Crowdin, se envían automáticamente como archivos JSON a nuestro repositorio Bitbucket. Esto eliminó la necesidad de exportar manualmente y redujo significativamente el riesgo de errores.
- Localización específica del cliente: Para gestionar los requisitos específicos de cada cliente, implementamos un sistema en el que cada cliente tiene su propio archivo JSON que contiene únicamente las Keys personalizadas y los contenidos correspondientes que deben modificarse. Los archivos JSON del idioma base permanecen intactos y sólo se aplican las diferencias por cliente, lo que garantiza la coherencia y permite la personalización.
Resultados
La implementación del marco de la capa de lenguaje dio lugar a mejoras significativas:
- Escalabilidad: Ahora podemos añadir fácilmente compatibilidad con nuevos idiomas y localizar contenidos para distintas regiones o clientes sin necesidad de realizar grandes modificaciones en nuestro código fuente.
- Eficacia: El uso de Keys y archivos JSON centralizados ha reducido drásticamente la duplicación de contenidos, haciendo que nuestro proceso de traducción sea más rápido y menos propenso a errores.
- Flujo de trabajo optimizado: La integración de Crowdin y Bitbucket ha automatizado gran parte del proceso de traducción, permitiendo a nuestro equipo centrarse en tareas más estratégicas en lugar de en actualizaciones manuales.
- Localización personalizable: La capacidad de manejar la localización específica del cliente a través de archivos JSON personalizados garantiza que podamos satisfacer las necesidades únicas de cada cliente sin sacrificar la eficiencia o la coherencia.
Conclusión
Nuestro paso de contenido fijo a un sofisticado marco de capa de lenguaje ha sido transformador. Al centralizar nuestra gestión de idiomas en archivos JSON, adoptar Crowdin para la gestión de traducciones, e implementar la localización específica del cliente mediante archivos JSON personalizados, hemos creado un sistema escalable, eficiente y flexible que satisface las diversas necesidades lingüísticas de nuestra creciente base de usuarios.
Componentes Atomic Design
Como Líder de Diseño de Producto en uPlanner, nos embarcamos en un viaje transformador para mejorar nuestro proceso de diseño mediante la transición de la creación de interfaces de usuario (UI) a medida en Adobe XD a la implementación de un sólido sistema de componentes en Figma basado en los principios de Atomic Design. Este cambio fue impulsado por la necesidad de agilizar nuestro flujo de trabajo de diseño, mejorar la colaboración entre los equipos y garantizar la coherencia en todos nuestros productos digitales.
Desafío
Inicialmente, nuestro equipo de diseño dependía en gran medida de Adobe XD para el diseño de la interfaz de usuario, produciendo interfaces muy personalizadas para varios proyectos. Aunque este enfoque permitía libertad creativa, conllevaba varios retos:
- Incoherencia: Cada interfaz tenía diferencias de diseño, lo que daba lugar a una experiencia de usuario fragmentada en todo nuestro conjunto de productos.
- Ineficacia: La falta de componentes reutilizables dio lugar a un trabajo repetitivo, ya que los diseñadores recreaban elementos similares desde cero para cada proyecto.
- Cuellos de botella en la colaboración: A medida que nuestro equipo crecía, la colaboración en archivos de diseño en Adobe XD se volvió engorrosa, con múltiples versiones de archivos y dificultades para mantener una única fuente de verdad.
Objetivo
Nuestro objetivo era pasar a un enfoque más sistemático del diseño que permitiera la coherencia, la escalabilidad y la colaboración eficaz. Decidimos implantar un sistema de componentes en Figma, estructurado en torno a los principios del diseño atómico. Esto nos permitiría construir un sistema de diseño compuesto por componentes reutilizables, garantizando una experiencia de usuario cohesiva en todos nuestros productos digitales.
Proceso
1. Auditoría de los diseños existentes
El primer paso fue realizar una auditoría exhaustiva de nuestras interfaces de usuario existentes diseñadas en Adobe XD. Identificamos patrones comunes, componentes recurrentes y elementos de diseño únicos en diferentes proyectos. Esta auditoría nos ayudó a comprender el alcance del trabajo necesario para la transición a un sistema de diseño basado en componentes.
2. Construir el sistema de diseño en Figma
Con la auditoría completada y el equipo alineado con los principios del Diseño Atómico, comenzamos a construir nuestro sistema de diseño en Figma:
- Atoms: Creamos una biblioteca de componentes fundamentales como botones, estilos de color, estilos de texto, iconos y campos de entrada. Cada átomo se diseñó pensando en la flexibilidad, permitiendo variaciones de tamaño, color y estado.
- Moléculas: A partir de los átomos, desarrollamos componentes de interfaz de usuario más complejos, como campos de formulario, tarjetas y elementos de lista. Cada molécula se diseñó para que pudiera reutilizarse en distintos proyectos.
- Organismos: Combinamos moléculas para crear estructuras más grandes, como encabezados, pies de página y secciones de contenido. Estos organismos proporcionaron un marco coherente para la interfaz de usuario de nuestros productos.
- Plantillas y páginas: Por último, creamos plantillas y páginas que utilizaban nuestros organismos para definir el diseño general de nuestros productos. Estas plantillas sirvieron como puntos de partida para nuevos proyectos, garantizando la coherencia en todos nuestros productos digitales.
3. Colaboración y transferencia
Una de las principales ventajas de pasar a Figma fue la mejora de las capacidades de colaboración. Integramos nuestros archivos Figma con herramientas como Jira y Slack para agilizar el proceso de transferencia del diseño. Los diseñadores, desarrolladores y partes interesadas ahora podían acceder a los mismos archivos Figma, ver las actualizaciones en tiempo real y proporcionar comentarios directamente dentro del entorno de diseño.
4. Pruebas e iteraciones
Siempre se recogen comentarios que se utilizan para perfeccionar el sistema y garantizar que satisfacía las necesidades de todas las partes interesadas. También mantenemos un documento vivo de directrices de diseño para acompañar a nuestra biblioteca de componentes Figma, lo que ayuda a garantizar la coherencia entre los equipos.
Resultados
La implementación de un sistema de componentes en Figma basado en Atomic Design dio lugar a mejoras significativas:
- Coherencia: Nuestros productos digitales tienen ahora un aspecto cohesionado, con patrones de diseño coherentes aplicados en todos los ámbitos.
- Eficacia: Los diseñadores ya no tienen que recrear elementos desde cero, lo que agiliza los ciclos de diseño y deja más tiempo para la innovación.
- Escalabilidad: La naturaleza modular del sistema Atomic Design nos permite escalar fácilmente nuestros esfuerzos de diseño, añadiendo nuevos componentes o modificando los existentes sin interrumpir todo el sistema.
- Colaboración mejorada: Las funciones de colaboración de Figma permitieron una comunicación fluida entre diseñadores y desarrolladores, reduciendo la fricción en el proceso de traspaso del diseño al desarrollo.
Conclusión
La transición de interfaces de usuario a medida en Adobe XD a un sistema de componentes en Figma supuso un cambio radical para nuestra empresa. Al adoptar los principios de Atomic Design, creamos un sistema de diseño escalable y eficaz que garantiza la coherencia en todos nuestros productos y permite a nuestro equipo colaborar de forma más eficaz.
Empresas Eléctricas A.G.
Anahí
Emol Guioteca
Kiñewén
Evas
Isologo creado para una pequeña fuente de soda local. La idea es comunicar un ambiente cálido con comidas caseras preparadas con mucho afecto. Se crearon algunas piezas adicionales de señalética como listas de precios, baño, salida, etc.
Courbis
Isologo para una emprendedora dedicada a la masoterapia. Acompañado de algunas piezas gráficas como tarjeta de presentación y certificado de regalo.
Swan
Mi hermana vende joyas como actividad complemetaria, así que le diseñé un logo que acompañara sus productos. Con cada venta, ella incluye una pequeña pluma a modo de etiqueta, por lo que quise incluir ese elemento en la imagen de marca.
MamboCore
Fui contactado para desarrollar la interfaz gráfica de un software para configurar proyecciones sobre superficies complejas. La empresa que monta estos espectáculos creó un software propio y para comercializarlo debían empaquetar la experiencia de usuario.
Fue un proceso largo de entrevistas y análisis de lo que la herramienta debía hacer y cómo sería la mejor forma de presentar todo el potencial.
Se estudió cada acción, cada botón, se hicieron casos de uso, wireframes, y maquetas. Finalmente, se entregaron los elementos por separado, con instrucciones para que el equipo de informática pudiera usar todo.
FCHH
La Federación Chilena de Handball necesitaba un refresco de imagen así que imaginé esta solución. Desfortunadamente, el proyecto nunca vió la luz. Es probable que el trabajo se use en otro proyecto pronto, así que cuando salga de horno actualizaré esta entrada.
W3
Unos amigos montaron una agencia digital y me pidieron ayuda para crear un logotipo que reflejara su actividad. El nombre sería W3 en alusión a las tres WWW. La solución final es un juego de contraste donde el espacio negativo de la W y el 3 generan un cursor.
Sofofa
Andrea Chignoli
Zumbástico
Interescolares USS
Lee Jeans
Silfa
Bci Seguros – Umbral
Habitarte
Elogos
Melody Factory
El Mercurio – WebApp
El Mercurio necesitó implementar una webapp interna que permitiera a ciertos usuarios revisar y aprobar diferentes tipos de transacciones.
Me solicitaron diseñar y construir una UI responsive siguiendo pautas internas conocidas por los usarios.
El resultado fue exitosamente implementado en corto plazo sin contratiempos.
Útiles:
- Diseño
- HTML
- CSS
- JQuery
- Bootstrap
- Fontawesome
Herramientas
Testimonios
"Optimizó proactivamente los sistemas de producción"
Patricio optimizó proactivamente los sistemas de producción gráfica para el proyecto de educacion a distancia de la universidad, y gestiono positivamente la producción multimedia durante su periodo a cargo.
"Analítico, actualizado, transmite confianza y dominio"
"Un liderazgo natural que nunca había visto"
Me he desarrollado bajo su tutela directa e indirectamente y puedo dar testimonio de su excelente relación con clientes, detallado análisis de los proyectos y manejo de timming ideal.
"Increíble capacidad de resolver problemas futuros desde la etapa de diseño"
Un agrado trabajar con Patricio Mas, destaco tu apertura de mente frente a problemas complejos, y tu increíble capacidad de resolver problemas futuros desde la etapa de diseño. Gracias por la experiencia!
"Cumple con los objetivos de la empresa sin descuidar el equipo humano"
Director de Producción con un amplio conocimiento del rubro. Cumple con los objetivos de la empresa sin descuidar el equipo humano y tiene un excelente trato hacia el personal a su cargo. Siempre dispuesto a enseñar y apoyar a quien lo necesite.
"Prolijidad y constante mejoramiento"
"Un diseñador gráfico y web de gran talento"
"Capacidad de ordenar y programar manteniendo una muy buena relación"
"Responsable y proactivo"
Hitos
-
Diseñador Escolar Aprendiz
Veranos entre 1992 y 1994
Mi papá siempre ha sido diseñador gráfico independiente, y hubo un tiempo que necesitaba un asistente. Luego de rotar varios diseñadores, me preguntó si yo quería trabajar con él. Aprendí el proceso de diseño y producción que existía antes del computador: pinceles, tintas, tira líneas, couché, cuchillos, cemento de caucho, ampliadora, revelados, y letrasets, eran parte del arsenal. A los 17 años, ahorré y me compré una bicicleta! En ésta época se produjeron muchos diseños, incluyendo varios que aún existen. Te suena la Serranita? Kilatte? Choco Fruna? Kimbo?
-
Diseñador Gráfico
1998 - 1999
Durante el último año de mi carrera, con más tiempo libre, trabajé con el diseñador Roberto Galaz. Tuve la oportunidad de realizar trabajos de identidad corporativa para la entonces AFP Santa María, y para la película de su hermano Cristián 'El Chacotero Sentimental'. Aprendí mucho sobre cómo liderar un proyecto desde el punto de vista conceptual por lo detallista que era en la dirección de arte. Lecciones que me servirían mucho en el futuro.
-
Título universitario
1999
Luego de cinco largos años de aprendizajes, experiencias, pichangas, y trasnochadas, egresé de la carrera de Diseño con mención en Comunicación Visual en la UTEM. A pesar de que me demoraría unos años más en presentar mi proyecto de título, ya estaba listo para salir al mundo. Además, en esta misma época supe que sería papá! Pronto valoraría lo importante que es tener una buena base de conocimientos y metodologías en el ejercicio del diseño.
-
Director de Arte en Grey Advertising
1999 - 2000
Luego de egresar de la carrera de Diseño, decidí concentrarme en mi proyecto de título. Por lo tanto, un día miércoles renuncié al trabajo que tenía en el estudio de Roberto Galaz. El día jueves supe que sería papá! Qué hacemos ahora? Bueno, la vida nos sonrió y un viernes por al tarde me llaman a entrevista a la Agencia Grey. Habían adquirido un nuevo equipo digital y necesitaban alguien que formara y liderara el equipo de diseño! El día lunes ya estaba trabajando como Director de Arte! Fueron mis primeros pasos en el mundo digital. Apliqué las nociones de diseño que conocía, y aprendí los tecnicismos de HTML, JavaScript, y lo que en ese entonces era una novedad: Flash y ActionScript.
-
Diseñador UI/UX en El Mercurio
2003 - 2005
A través de una agencia intermediaria me contrataron en el diario El Mercudio como diseñador UX y UI en un proyecto interno gigante. El diario necesitaba actualizar su sistema administrativo completo. El equipo que se formó era gigante y multidisciplinario, extranjeros y nacionales, muchas etapas y procesos. Personalmente formé parte del equipo UX, cuando User Experience era recién algo nuevo. Además del proyecto administrativo, tuve la oportunidad de rediseñar y construir el sitio de Corretaje de Propiedades. Creo que todavía está igual :-P
-
Jefe de Producción en Universidad de las Américas
2005 - 2007
La Universidad de las Américas (UDLA) recién había sido adquirida por Laureate y comenzaría un novedoso programa de cursos online. Se reunió un equipo de docentes, sicólogos, y diseñadores que tendrían la labor de construir un ecosistema semi-digital desde cero. Por primera vez tuve la oportunidad de usar el inglés directamente en el trabajo como jefe de producción y director de arte, ya que debíamos coordinarnos con el equipo Laureate en EE.UU. Fue una de las experiencias más enriquecedoras donde pude realmente experimentar con UX y UI para lograr resultados educativos, usando tecnologías como Moodle, Flash, Scorm, y WordPress, entre otras.
-
Jefe de Producción en Cardumen
2007 - 2008
Gracias a la experiencia adquirida liderando el equipo de desarrollo en UDLA, me contactaron de Taisa, empresa IT especializada en ese entonces en el rubro de la banca. Había trabajado previamente con ellos en proyectos con Banco Estado y Banco Santander. En este momento estaban en proceso de división entre informáticos y diseñadores, donde todos los diseñadores formaron una agencia (después llamada Cardumen). Crecieron orgánicamente y necesitaban estructurar sus procesos, jerarquizando responsabilidades, para mejorar la comunicación y finalmente su producción. El resultado fue un equipo cohesionado en un ambiente de trabajo eficiente y grato donde todos gozaban del día a día. Entre tareas, pasos, y entregas, se hacían torneos de FIFA y Guitar Hero!
-
Diseñador Independiente
2008 - Actual
Siempre tomando proyectos paralelos, con un portafolio más abundante, y con algunos prospectos en carpeta, decidí que era el momento de emprender. El desafío era ver si sería capaz de lograrlo. Tenía una buena red de contactos los cuales me ayudaron a conseguir nuevos proyectos, y así comenzó un nuevo camino de muchos altos y bajos, errores y aciertos. Diseñar es sólo una parte del trabajo diario, ahora hay que hacerlas todas: publicitar, cotizar, negociar, subcontratar, cobrar, pelear, reír. Saliendo de la zona de comfort se logra el mayor aprendizaje.
-
Nace Sherpa Digital
2009 - 2017
Después de un año luchando solo, me di cuenta que para crecer necesitaría apoyarme en otra persona. No iba a ser capaz de administrar y producir al mismo tiempo. Conversé con diferentes personas, pero nadie reunía las condiciones o tenía la disponibilidad para acompañarme en la aventura. Un día sin querer me encontré con un viejo amigo de UDLA, Eduardo Baeza, le comenté en lo que estaba y se sumó de inmediato! Comenzaría una nueva historia en Sherpa Digital, ahora compartiendo tareas, disfrutando las épocas buenas y apoyándonos en los momentos bajos. En el camino hemos trabajado en proyectos y clientes pequeños y gigantes. Todo nos dejan un nuevo aprendizaje que nos hace evolucionar.
-
Profesor WordPress en Academia Adity
2016 - 2017
Nunca me he sentido cómodo en un escenario, así que cuando los chicos de Adity me invitaron a dictar el curso de WordPress, aproveché la oportunidad para salir de mi zona de comfort. Además, puedo compartir lo que he aprendido en los más de 10 años trabajando con esta plataforma, una forma pequeña de aportar a la comunidad open source. Afino mis habilidades sociales, conozco gente nueva, profundizo mis conocimientos, todos ganan!
-
Líder de diseño en uPlanner
2017 - 2024
Fue un gran desafío liderar el equipo de diseño en una empresa con productos propios en el área de la educación. Nuevas metodologías de trabajo, reglas de negocio complejas, y productos en constante evolución, mezclado con pandemia, incertidumbre social y coordinación a distancia. Afortunamente, la buena comunicación entre personas muy capaces y solidarias fue la clave del éxito.
