Uno de los principales retos de una compañía, es el de generar lealtad de un cliente, esto se puede lograr ocn diferentes estrategias, una de las principales estrategias es la de conocer y premiar a tus clientes leales. Con esto en mente, generamos para Grupo Delta un sistema de puntos (Rewards) que será utilizado en sus diferentes puntos de venta, además del sistema de puntos desarrollado por Big Pink, en Girasolo nos tocó diseñar las tarjetas de lealtad.
Tarjetas de Lealtad, diseñadas para Grupo Delta por Girasolo
La tarjeta, fue diseñada a partir del logotipo original del grupo Delta, además, se creó en conjunto la campaña: no rompas tu cochinito y paga con puntos, campaña que utiliza loa mismos elementos gráficos que las tarjetas con diferentes copy y call to action.
Pósteres informativos para poner en punto de venta.
Con este proyecto, se espera concoer de mejor manera al cliente, y generar promociones con valor para ellos.
¿Te interesa generar proyectos integrales para tu negocio? Contáctanos: hola@girasolo.com
Te invitamos a conocer nuestros proyectos en nuestra página de internet: http://www.girasolo.com o en nuestras redes sociales Facebook + Instagram
El manual de identidad es para los estudiantes de diseño la culminación de su carrera, muchos de los proyectos finales en la carrera de diseño gráfico son precisamente el entregar manuales de identidad, sin embargo, existe un nuevo concepto que está ganando popularidad entre los que realizan diseño y es el design system, pero, ¿Qué es un design system y para qué sirve? para responder esta pregunta, primero abordaremos qué es un manual de identidad.
¿Qué es un manual de identidad?
El manual de identidad es un documento en el cuál se señalan las guías de imagen de una marca, compañía o producto; en él, se especifican colores, formas, tamaños, guías, tipografías de acompañamiento, ejemplos de usos gráficos (papelería, medios digitales, envases y empaques, etc.), también, el manual de identidad declara las prohibiciones y los usos incorrectos.
Página del manual de identidad de nuestro branding.
Entre las ventajas que brinda tener (y respetar) un manual de identidad se encuentran (como su nombre lo dice) ayudar a que la marca sea coherente e identificable y por lo tanto, genere en el usuario una afinidad y reconocimiento, un buen manual de identidad, ayudará a que se realicen decisiones que tienen que ver con imagen de una manera más rápida, ayudará a que todos los puntos de contacto con usuario final apoyen a la labor de reconocimiento y por lo tanto ayudarán al posicionamiento de marca.
Entonces: ¿Qué es un design system?
Para entender qué es un sistema de diseño primero, debemos comprender que es un Ecosistema Vivo, es decir: un proceso iterativo, a diferencia de un manual de identidad, el sistema de diseño puede cambiar todos los días,
¿Qué contiene un sistema de diseño?
Guías de estilo; son guías acerca de cómo hacer las cosas para generar coherencia entre diferentes productos o dispositivos; colores, fotografías, animaciones, formas, tamaños, tipografías, etc., en resumen, todo lo visual, pero, además, deberá componerse también, de una guía de estilo sobre contenido y tono (comunicación).
Pattern libraries (Librerías de patrones); está formada por elementos de diseño de interfaz de usuario; es decir son elementos de diseño que aparecen continuamente en un producto digital como pueden ser: botones, formas, íconos etc.
Component libraries (Librerías de componentes); está compuesta por todos los elementos y componentes de un producto digital con su código, estás librerías tienen como objetivo ayudar a los diseñadores y programadores de una manera más eficiente.
Se puede entonces, definir el design system como un sistema que ayude a agilizar el proceso de diseño de productos digitales, pero a su vez, ayude a mantener la coherencia gráfica entre diferentes dispositivos.
Por lo tanto: ¿Es el design system un manual de identidad para productos digitales?
No, el principio de un design system es el de facilitar la colaboración y comunicación entre quienes desarrollan productos digitales, es decir: entre desarrolladores (programadores), y diseñadores, de manera que se establezca un lenguaje y metas comunes.
Además, el design system contiene aquellos elementos que se repiten durante el diseño de un producto para que puedan reutilizarse de manera ágil, y que se pueda eficientizar el desarrollo.
El manual de identidad, debe formar parte del design sistema (en la guía de estilos).
¿Por qué debería saber sobre design system?
La respuesta es sencilla, puesto que cada vez se desarrollan más productos digitales (desde páginas web hasta software y apps), conocer y alimentar sistemas de diseño será una ventaja competitiva para diseñadores y desarrolladores.
Muchas compañías tienen abierto al público sus sistemas de diseño para que conozcas qué puede contener y te inspires a armar el propio, te dejo el link de algunos.
La mayoría hemos escuchado sobre la importancia del trabajo en equipo, cómo aumenta la eficacia y calidad de los resultados, cuando trabajas en equipo con programadores que tienen distintas habilidades y talentos, es de suma importancia buscar que la forma de programar se estandarice y no se convierta en una complicación innecesaria; para ello, es recomendable establecer y seguir una serie de buenas prácticas.
A continuación, te platicaré algunas de las buenas prácticas que implementamos en BigPink.
Legibilidad en el código.
La legibilidad es muy importante, debes escribir tu código, pensando que cualquier programador lo pueda comprender, además, ten en cuenta que entre más complejo sea tu código, más difícil resultara dar mantenimiento en el futuro.
Leer código fuente.
Escribir código fuente es mas fácil que entender el código escrito por otros, muchas veces nos encontramos con código desordenado, o con la documentación de código incompleta, por eso, leer código fuente te ayudará a entender la diferencia entre código de buena o mala calidad, también, te ayudará a mejorar tus habilidades de programación.
Estructuras de control e indentado.
Con tu equipo de trabajo, deberán acordar un estilo de sangría en su código, para tabular o delimitar bloques de código, con esto harán que su código sea más fácil de leer.
Valores fijos.
Cada vez que tengas un valor concreto en tu código, el valor debe ser almacenado en una constante, así, ayudarás a reducir el mantenimiento ante cualquier modificación que afecte la estructura.
Comentarios en el código.
Los comentarios en el código, deben ser para favorecer la comprensión del código y no para introducir mayor complejidad en su entendimiento, realiza los comentarios por bloques, cuando consideres importante reflejar la importancia de alguna línea en tu código, puedes agregar comentarios al final de esta.
Caracteres únicos del español.
Procura escribir código en inglés y que tu teclado esté configurado en este idioma, ya que caracteres como la ñ o las tildes pueden generar errores al no ser caracteres ASCII.
Testear el código.
Siempre debes estar realizando este paso, incluso, después de haber realizado un pequeño cambio en tu código, de esta manera, evitarás frustraciones futuras al momento buscar un error.
Tamaño del código.
La longitud de un método no debe exceder 100 líneas de código sin causa justificada, recuerda que siempre puedes hacer uso de un método dentro de otro. Por línea, evita la incorporación de más de una instrucción que rebase los 80 caracteres.
Compartir.
Compartir conocimientos ya sean técnicos o profesionales con tus compañeros, motiva a que se puedan ayudar mutuamente a mejorar y logra que el trabajo en equipo funcione mejor.
Investigar cosas nuevas.
Es muy importante que te intereses en los temas a aprender, que tengas inquietudes al respecto y que, fundamentalmente disfrutes programando. Existen muchas herramientas y plataformas que te pueden ayudar a expandir y mejorar tus conocimientos, siendo productivo(a) y de una forma divertida, sin generar estrés y aburrimiento.
La programación requiere de paciencia y resistencia a la frustración, tal vez, el trabajar con código ajeno o tratar con datos desactualizados puede dificultar tus tareas asignadas, pero debes perseverar y seguir adelante.
¿Alguna vez has escuchado hablar sobre DevOps? existen varios puntos de vista sobre el término DevOps ( Develop / Operations ), pero la gran mayoría coinciden en que es una cultura que promueve la comunicación entre el departamento de desarrollo (Development) y el departamento de Administración de sistemas (Operations).
La cultura DevOps tiene como objetivo acelerar la entrega de software de manera ágil asegurando la calidad del software, todo esto, por medio de buenas prácticas, herramientas de integración de código, pruebas automatizadas, administración de infraestructura, etc.
Las prácticas más populares de la cultura DevOps son las siguientes:
Infraestructura como código: Infraestructura como código es un método de automatización que está basada en prácticas de desarrollo de software. Los cambios realizados a los sistemas y sus configuraciones específicas son bien definidas y capturadas en archivos de configuración (scripts, playbooks, manifests, módulos).
Integración continua ( CI ): La integración continua es una práctica de desarrollo de software mediante la cual los desarrolladores combinan los cambios en el código en un repositorio central de forma periódica, tras lo cual se ejecutan versiones y pruebas automáticas.
Entrega continua ( CD ): La entrega continua es una práctica de desarrollo de software mediante la cual se preparan automáticamente los cambios en el código y se entregan a la fase de producción.
Herramientas DevOps más populares: Red Hat Ansible, Jenkins,Terraform, Chef, Docker, GIt, GitLab, Kubernetes, Nagios, Puppet.
DevOps en BigPink
Nosotros en BigPink adoptamos una cultura DevOps que va desde la configuración de los proyectos, testing y pruebas de integración de código hasta entornos automatizados con despliegue continuo ( continuous delivery ), para ello, implementamos las siguientes practicas y herramientas:
Configuración de proyectos: Todos los proyectos son configurados con GIT como sistema de control de versiones de software, así como el uso estricto de linters para detectar errores de estilo y mantener el código limpio.
Infraestructura como código (IaC): Toda la infraestructura la manejamos como código por medio de configuración de plantillas cloud formation para Amazon Web Services.
Integración continua (CI): Para la integración del código utilizamos GitLab como plataforma de repositorios privados en donde por medio de Pipelines ejecutamos varias pruebas (build, linters, testing, etc.) para asegurar la calidad antes de que el código sea integrado en el repositorio central.
Entrega continua (CD): Para lograr la entrega continua se automatiza el despliegue de nuestros proyectos por medio de Pipelines programadas en GitLab que se conectan a nuestra infraestructura previamente montada en Amazon Web Services, una vez pasadas las pruebas de integración del código.
Construye
páginas, más rápidas y con mejor experiencia de usuario gracias a
React y
su virtual dom.
React
es una biblioteca de JavaScript
para construir interfaces de usuario basada en la creación de
componentes;
su principal característica es el Virtual
DOM
que es una copia en memoria del DOM real, este Virtual DOM se encarga
de hacer actualizaciones hacia el DOM real (La interfaz gráfica que
ve el usuario) de manera atómica gracias a su librería diferencial
capaz de detectar los cambios que existen en ambos DOM y poder
renderizar solo los elementos que han cambiado.
Funcionamiento del Virtual DOM de Reactjs
Con
este render atómico react proporciona una UX superior a cualquier
Framework o librería para front, asi como un mejor performance al
solo renderizar los cambios y no el componente entero dando una
sensación de fluidez en tiempo real de la aplicación web.
En
Girasolo
buscamos
la innovación en la tecnología para ofrecer mejores resultados en
todos nuestros proyectos, por ello esta vez decidimos implementar
react en uno de los nuevos proyectos del área: la página oficial de
BigPink(nuestro spin
off).
Inicio Página Big PinkExtracto de la página en su versión Inglés.
Obteniendo como resultado un sitio web ligero para el usuario, que renderiza al instante la información además de ofrecer otras características atractivas para el cliente como: el intercambio de props con lo cual se puede reducir considerablemente el código ya que los componentes son reutilizables, el multilenguaje en la aplicación con lo cual tu sitio web esta un escalón más arriba en los estándares de Ux, además, react es isomorfico lo que significa que: con el mismo código, somos capaces de renderizar tanto en el cliente como el servidor. Por tanto, cuando llega un buscador como Google, con la misma base de código se le puede entregar el HTML con el contenido ya renderizado, lo que lleva a que una aplicación React sea capaz de posicionarse tan bien como una aplicación web tradicional que renderice del lado del servidor, como es el caso de un desarrollo tradicional o un desarrollo basado en un CMS como WordPress, todo esto gracias a Nodejs.
Extracto de la página en su versión Español.
En
conclusion React nos permite un desarrollo ágil, ordenado y con una
arquitectura mantenible, focalizada en componentes y que nos ofrece
un gran performance.
A
continuación, se muestra un poco de lo que se logró realizar con
ente framework.
Un buen
nombre, debe tener historia, debe ser recordable, debe ayudarnos a generar el
concepto de comunicación.
Ya en el
pasado te había platicado acerca de: la importancia del naming, cómo una buena marca, afecta a la percepción general y futuro
éxito de la compañía, hoy te platicaré de BigPinkun spinoff de Girasolo, cómo surgió, y cuál fue el proceso para selección de
nombre.
Desde el
inicio, este fue un proceso diferente, ya, a inicios del 2019 habíamos decidido
que el área de tecnologías de información llevaría un nombre diferente, la
decisión se da principalmente por dos factores:
Aunque
la cultura organizacional es similar, en el fondo es diferente.
La
más importante; el
cliente final es bastante diferente, y aunque la base de clientes fue la misma
que se tenían en Girasolo quién nos atendía era diferente, hablaba
diferente, y, por lo tanto, deberíamos presentarnos diferente a una agencia de
branding y comunicación.
Ya que no
teníamos un cliente concreto (nosotros, toda el área éramos el cliente), y
tampoco teníamos fechas concretas, abordamos el proceso de una manera distinta,
lo que, por un lado, alargó el proceso de naming (casi 45 días para
tener una propuesta), por el otro lado, ayudó a nutrir el concepto de marca y
diseño, derivando en complementos de comunicación visual, que actualmente se
utilizan en la marca, (colorimetría, símbolos, etc.).
Durante 30
días en uno de los pizarrones de la oficina se fueron acumulando nombres que
los integrantes del equipo fueron creando, algunas traían inspiración la marca
empresa madre: Girasolo, otras más, la actividad de la nueva empresa:
Desarrollo y Tecnologías de la información, y otras tantas no tenían (a la
vista) una inspiración concreta,
después, se invitó a todos quienes participaron con nombres a hacer un pitch
¿Por qué su idea debería ser la
ganadora y bautizar a toda la empresa? A dicho pitch, fueron invitadas personas
del área de Girasolo, concretamente nuestra directora de Diseño, y nuestro
encargado multimedia.
Se seleccionó
como ganador la propuesta de BigPink¸ algunos de los factores que
ayudaron a escoger esta propuesta fueron:
Una
marca jovial, que represente a quienes la integran.
Una
marca fácil de pronunciar (y de recordar) y si no es fácil de recordar, nos
recordarían por color, los rosas.
Una
marca que representa nuestros orígenes, La Piedad Michoacán, en otros
tiempos capital del cerdo; y cuando uno describe un cerdo, lo describe así, es
un animal, grande y rosa.
Diferencial semántico, extracto de presentación de Pitch sobre naming: BigPink
Además del
concepto de marca, otra de las cosas que ayudaron a triunfar a esta propuesta
fue su concepto de comunicación (aunque no tenía logo e imagen aún), se
presentó la propuesta con algunos colores que conformarían el diseño final,
dichos colores (salvo el negro, KEY), fueron seleccionados a partir de RGB y no
a partir de pantones o CMYK, sin embargo, son desviaciones de
CMY, lo que ayudó a dar un concepto poderoso, nacimos digitales, pero venimos
de una empresa de diseño, haciendo notar así, nuestra fortaleza, hacemos cosas
funcionales, pero visualmente atractivas. (en ocasiones incluso en nuestra
papelería corporativa, pueden verse cuadros en nuestros colores, simulando una
guía de impresión).
Presentación corporativa, donde se muestran: forma de usos y colorimetría en General.
Parte
esencial de un pitch poderoso, es hacer que tu audiencia se imagine lo
mismo que tú, y convencer a un grupo de ingenieros, a que su marca y colores
corporativos fuese el ROSA, era una tarea complicada, por lo que se invitó a
los asistentes a imaginar estar en un congreso de TI, que se imaginaran los
stands, la publicidad, y como están integrados, y de repente, entre todos los
stands, vean uno color rosa, uno que sobresaldría por puro color, la imagen fue
tan poderosa, que ayudó a que muchos votaran por esta propuesta.
Página de contacto al final de las presentaciones.
Girasolo Blog 