Etiqueta: BigPink

¿Qué es un design system? Y si estudias diseño ¿Por qué deberías saberlo?

ChenBrimacDeja un comentario

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.
Mailchimp es un gran ejemplo de design system, sencillo y efectivo: http://ux.mailchimp.com/patterns/buttons

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.

Extracto de Design system Shopify: https://polaris.shopify.com

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.

IBM es un gran sitio de inspiración para crear design system: https://www.carbondesignsystem.com

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.

@ChenBrimac
chen@girasolo.com
www.girasolo.com
www.ThinkBigPink.com

Buenas prácticas de programación en BigPink

Andrea HernándezDeja un comentario

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.

Andrea Adriana Hernández
www.girasolo.com
www.ThinkBigPink.com

Importancia de GIT

miguellpz1995Deja un comentario

Dentro del desarrollo de software existen distintos tipos de herramientas que nos ayudan a solventar alguna necesidades específicas, las cuales facilitan la parte de desarrollo, implementación, despliegue, documentación, o testing. El día de hoy yo les hablaré de una herramienta para desarrollo de software profesional que nosotros internamente usamos en cada uno de nuestros proyectos, GIT.

Pero para poder hablar de git, primero tenemos que saber qué es, de dónde surge y cuál es su función.

Git es un sistema de control de versiones, el cual es distribuido, es decir, que bajo un mismo proyecto múltiples programadores pueden trabajar y desarrollar en conjunto. Es de código abierto así que es totalmente gratuito, se puede adaptar fácilmente a un proyecto pequeño así como a uno grande, cuenta con una gran documentación en la web y es muy usado por los programadores, es una herramienta muy útil a la hora de hacer correcciones a bugs y documentación de proyecto ya que cuenta con una línea del tiempo de desarrollo.

Git es un sistema multiplataforma, lo que quiere decir que podemos usarlo con Windows, Linux o Mac OS. Git también cuenta con plataformas de desarrollo colaborativo, o también llamadas red social de los desarrolladores, donde se alojan los repositorios, el código se almacena de forma pública pero se puede hacer privado con una cuenta de pago, algunos ejemplos de esto son github.com o gitlab.com.

En el caso de nuestra empresa, nosotros usamos git y lo combinamos con el uso de gitlab ya que este nos ayuda a hacer CI/CD (continuous integration / continuous delivery) que son terminos muy utilizados en el DevOps.

Para ponerlos un poco más en contexto CI es un proceso en donde cada cambio que realizamos en nuestro código debe ser testeado y verificado por las pruebas que hemos escrito con anterioridad.

CD es el mismo proceso anterior, solo que de una manera más automatizada y además nuestros tests de aceptación o acceptance tests deben ser de una gran calidad. Porque Continuous Delivery se asegura de que cada cambio realizado esté listo para ser lanzado a producción.

Para trabajar eficientemente con git es necesario tener un gitflow eficiente pero, ¿qué es un gitflow?, según la pagina oficial de Github https://github.com/doapps/software/wiki/Gitflow.

Gitflow es un flujo de trabajo de basado en git que fue publicado y popularizado por Vincent Driessen. El flujo de trabajo de Gitflow define un modelo de ramificación estricto, diseñado en torno a la versión del proyecto. Esto proporciona un marco robusto para la gestión de proyectos grandes.

¿Por qué usar Gitflow?

Por los siguientes motivos:

  1. Desarrollo Paralelo
  2. Colaboración
  3. Área de puesta en escena de la versión
  4. Soporte para reparaciones de emergencia

Nuestro gitflow es uno de los más estándares, comenzamos con dos ramas principales que son máster y develop, la rama máster está protegida y nunca se sube nada directamente a ninguna de estas cuando se va a realizar una nueva funcionalidad. Nunca se trabaja sobre ninguna de ellas lo que se hace es posicionarse en develop, actualizar con el repo remoto y después crear otra rama en la que se trabajará con el prefijo feature, una vez terminas la funcionalidad se sube esa nueva rama al repo remoto para ser revisada por medio de pipelines, y de ser aprobada, se integra con develop.

Cuando se va a corregir un bug el proceso es bastante parecido, solo que en lugar de feature se usa el prefijo Hot-fix, cuando el proyecto esté listo para mandarse a producción se hace un merge entre develop y máster para crear la primer versión o relace esto se repite conforme a los relace que son lanzados.

Como pueden ver, git es una herramienta muy útil para los desarrolladores que cuando es manejada debidamente, acorta tiempos de desarrollo y ayuda con la gestión de software, en el siguiente enlace les dejaré algunos de los comandos que son más usados en git por si les interesa.

https://github.com/miguel199529/Notas/blob/master/GIT.md

Miguel Ángel López
www.girasolo.com
www.ThinkBigPink.com

Naming – BigPink

ChenBrimac2 comentarios

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 BigPink un spinoff de Girasolo, cómo surgió, y cuál fue el proceso para selección de nombre.

Web BigPink http://www.thinkbigpink.com

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:

  1. Aunque la cultura organizacional es similar, en el fondo es diferente.
  2. 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.

Think Big, think BigPink |

@ChenBrimac
chen@girasolo.com
www.girasolo.com
www.ThinkBigPink.com