Nueva Página Girasolo

Así es, actualizamos el sitio web de Girasolo te quiero platicar un poco sobre la tecnología, proceso y desarrollo de este proyecto.

Después de un par de años con nuestro sitio web, decidimos actualizar nuestro sitio web, entre las razones para hacerlo se encuentran: 1. Dar mayor frescura y facilidad de uso, esto debido a la incursión al mundo digital de la compañía (tenemos una división exclusiva para el desarrollo de productos digitales: BigPink). 2. Dar un énfasis a nuestro portafolio que se visible, fácil de identificar y de verificar. 3. Cambiamos parte de nuestra imagen (aunque no cambiamos el logotipo, sí cambiamos su forma de uso, y sus colores de acompañamiento).

Main de nuestro sitio web, se buscó un diseño sencillo pero llamativo y poderoso, crentrándonos en lo importante. visita: http://www.girasolo.mx

El diseño del sitio web corrió a cargo de mis compañeros, quienes me entregaron versiones desktop y mobile de la página, para poder traducir a web sus propuestas utilicé diferentes tecnologías y herramientas, a continuación te platico un poco al respecto.

Utilicé el sitema de regillas bootstrap un framework CSS y JavaScript diseñado (por Twitter) para la creación de interfaces con un diseño responsive es decir, un diseño que puede adaptarse a diferentes pantallas de manera más rápida e intuitiva.

Además, se utilizó JavaScript ya que permite realizar todo tipo de aplicaciones cliente/servidor, tambien es utilizado para crear efectos visuales que dan dinamismo a los sitios web y ofrece la psoibilidad de interactuar con este, para crear una sensación de comunicación entre el sitio web y el usuario.

Extracto de nuestro sitio web.

Debido a que somos una empresa de desarrollo utilizamos GitLab para llevar un control sobre el desarrollo, así, es posible versionar el sitio y mantener una mejor calidad entre cada actualización (este sistema, es utilizado para todos los desarrollos internos de Girasolo / BigPink), esto, nos da la posibilidad también de mantener respaldos de ellos.

Algunos aspectos a destacar de Gitlab son:

  • Alojar proyectos de forma gratuita.
  • Facilita la manera de compartir proyectos (dentro y fuera de la comunidad).
  • Reduce al máximo errores humanos que se pueden presentar durante el desarrollo, además, de que te permite detectar fallos más grandes de una manera rápida y sencilla.
  • Ofrece todos los beneficios de sistema controlador de versiones GIT, pero además cuenta con herramientas extras.

Para que un sitio web sea seguro, y funcione de manera óptima el hosting es crucial, nuestro sitio está alojado en AWS plataforma en la cuál somos expertos, algunas de las ventajas de AWS son:

  • Facilidad de uso: AWS está diseñado para permitir que los proveedores de aplicaciones, proveedores de software independientes y distribuidores, puedan hospedar de forma rápida y segura su aplicación.
  • Flexibilidad: Puedes seleccionar desde el sistema operativo, el lenguaje de programación, plataforma de aplicaciones web, hasta base de datos y otros servicios que llegues a necesitar.
  • Rentable: Pagas por lo que necesitas, sin plazos ni compromisos forzosos.
  • Seguro: aplica un enfoque integral para proteger y reforzar tu infraestructura, incluye: medidas físicas, operativas y software.

Desde el punto de vista comunicación nuestro sitio cuenta con herramientas avanzadas de google y facebook.

Desde diseño, se da un enfoque mayor al portafolio, además, es un sitio seguro (certificado SSL).

Te invito a concoer el nuevo sitio de Girasolo.

Milton Ventura – UX BigPink
milton@girasolo.com
www.girasolo.com
www.ThinkBigPink.com

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

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