Seleccionar página
Infotipos: 10 años diseñando información para el conocimiento

Infotipos: 10 años diseñando información para el conocimiento

En este 2020 cumplimos 10 años y para celebrarlos decidimos renovar nuestra identidad y sitio web rediseñando nuestro logotipo y otros elementos de comunicación con el fin de adaptarlos a las nuevas formas de leer contenidos en internet.

Nueva imagen de Infotipos en nuestro landing page.
Nueva imagen de www.infotipos.com

Lo primero que hicimos fue cambiar nuestro lema de «Diseñando información para el entendimiento» por «Diseñando información para el conocimiento«, ya que pensamos que el diseño de información no solo facilita la comprensión de todo tipo de contenidos sino que también genera un puente para adquirir nuevo conocimiento.

Rediseño de identidad

En principio reestructuramos y suavizamos la forma y los contornos de «Infotipo», nuestro símbolo y mascota, quien no ha acompañado desde que iniciamos este proyecto en el 2010 y el cual nos representa como diseñadores de información gracias a su alta capacidad de síntesis, simetría y recordación, conceptos que caracterizan a nuestra disciplina.

Infotipo 2010 vs. Infotipo 2020.
Infotipo 2010 vs. Infotipo 2020.

Posteriormente seleccionamos una nueva tipografía para nuestro logotipo, esta es Roboto font, una familia de fuentes tipográficas moderna y accesible del tipo sans-serif diseñada por Google. También ampliamos el kerning (espacio entre letras), eliminamos el slogan y adaptamos el nuevo símbolo buscando reducir el peso visual de la identidad anterior, con el objetivo de hacer que nuestra nueva imagen pudiera adaptarse a varios formatos, plataformas y tamaños, logrando que hasta el elemento más pequeño tuviera muy buen contraste inclusive en reducciones menores a un centímetro.

Infotipos 2010 vs. Infotipos 2020.
Infotipos 2010 vs. Infotipos 2020.

Cambio cromático

Simplificamos nuestra paleta de color adaptándonos a los colores de temporada 2020/2021 según el Pantone Color Institute. Seleccionamos el Blue Depths (Azul Indigo) como nuestro color dominante para simbolizar trayectoria, seriedad y profesionalismo. Luego buscamos generar altos contrastes con colores como el Amberglow (Naranja Otoñal) para elementos de poco tamaño como botones y algunos subtítulos; también decidimos utilizar azul, violeta, verde y rojo para los llamados a la acción y para categorizar nuestras líneas de servicios.

Por último empleamos los colores blanco y gris como neutralizadores y para permitir descansos visuales en áreas donde pueda haber bastante información y se dificulte la legibilidad.

Paleta de color 2010 vs. paleta de color 2020.
Paleta de color 2010 vs. paleta de color 2020.

Nuevo diseño web

Otro reto que asumimos fue el nuevo diseño de nuestro sitio web, en donde buscamos hacer mucho más simple el acceso a nuestra información y adaptarnos a las actuales formas de lectura de los usuarios de internet. Luego de definir nuestros propios requerimientos, realizar la arquitectura de información y hacer un bocetaje rápido a partir de wireframes, decidimos elaborar un prototipado avanzado en Adobe XD, un editor de gráficos desarrollado por la empresa Adobe Inc para crear prototipos que permiten verificar la interacción y experiencia de usuario de aplicaciones móviles y páginas web.

Prototipado de alta fidelidad de la nueva página web de Infotipos.
Prototipado de alta fidelidad de la nueva página web de Infotipos en Adobe XD.

En nuestro nuevo diseño comenzamos por incluir un landing page o página de aterrizaje que nos permitió hacer llamados a la acción para todas nuestras secciones, también redujimos la cantidad de opciones del menú estableciendo una arquitectura de información más sencilla y navegable. Posteriormente incluimos formularios de contacto en todas las secciones para que nuestros clientes puedan escribirnos en el momento en que lo deseen buscando así una comunicación más efectiva.

Landing page de la nueva página web de Infotipos.
Landing page de la nueva página web de Infotipos.

Para las otras secciones mantuvimos la unidad gráfica en estructura, paleta de color y estilos visuales y tipográficos con el objetivo de hacer que nuestros usuarios perciban que siguen dentro del mismo sitio a pesar del recorrido que decidan llevar haciendo click en cualquiera de las opciones de nuestro menú.

Diferentes secciones de la página web de Infotipos.
Diferentes secciones de la página web de Infotipos.

Posteriormente hicimos pruebas de diseño responsivo y adaptativo aprovechando las opciones que nos brindó el tema DIVI de WordPress, el cual tiene un constructor de páginas que permite previsualizar el cambio que tendrían todos los elementos de diseño en pantallas de computador, tabletas y celulares.

Otra prueba fue verificar realmente si cada una de las secciones de nuestra página se estaba adaptando adecuadamente a todo tipo de dispositivos, por lo que probamos de forma sincrónica cada ajuste de imágenes y textos en varios formatos de pantalla:

Pruebas de adaptación de imágenes y tipografía en diferentes dispositivos.
Pruebas de adaptación de imágenes y tipografía en diferentes dispositivos.

Como puedes ver, nuestra metodología de trabajo nos permitió cumplir con los objetivos que nos habíamos planteado desde un principio. Si te gustó nuestra nueva imagen y el proceso con el que rediseñamos nuestra web, y crees que podríamos hacer lo mismo para tu portafolio digital, blog, página personal o empresarial, te invitamos a que nos escribas por medio de nuestro formulario de contacto o nuestro correo electrónico contacto@infotipos.com

¡Gracias por leernos, nos vemos pronto en nuestro próximo post!