A diario las cifras sobre el COVID-19 aumentan considerablemente, y en países como Colombia y México el número de contagiados, recuperados y decesos sigue arrojando estadísticas posibles de comparar.
En Infotipos decidimos visualizar los datos que publica Google en el Mapa del Coronavirus, aprovechando que esta herramienta permanece actualizada y utiliza una gran cantidad de fuentes de información confiables.
Mapas del Coronavirus de Colombia y México en Google.
Nuestro proceso inició haciendo la búsqueda el domingo 17 de mayo a las 16:50 horas. En ese momento Google había actualizado los datos para ambos países 23 y 24 minutos antes, por lo que nos fue posible utilizar cifras comparables muy recientes.
Datos del Coronavirus de Colombia vs. México en Google.
La primera información con la que trabajamos fue con la de cantidad de confirmados, personas recuperadas y muertes. El resultado fue un gráfico de barras en Illustrator que nos permitió visualizar rápidamente las equivalencias entre datos e imágenes (en este caso las barras o rectángulos).
Diagrama de barras comparativo entre Colombia y México.
En este gráfico se puede apreciar una gran diferencia de contagios entre las dos naciones, sin embargo, para comprender mejor la problemática, esta información se debe contextualizar, por lo que resolvimos cambiar la propuesta de la siguiente manera:
Visualización de datos del Coronavirus entre Colombia y México.
Conclusión
Es muy importante entender el contexto de los datos y en este caso particular el gráfico de burbujas (círculos) nos permitió ver que la población de México es casi el triple de la de Colombia, lo que nos hace suponer que este es uno de los principales motivos de la gran diferencia entre las cifras de cada país relacionadas con la pandemia.
Si te gustó este ejemplo de visualización de datos y necesitas diseñar algo similar para tu empresa o sitio personal te invitamos a que nos contactes por medio de nuestro formulario o correo electrónico contacto@infotipos.com
Gracias por tus comentarios, ¡te esperamos en el próximo post!
En tiempos de pandemia la visualización de datos se vuelve una ayuda fundamental para poder entender la magnitud del contagio. En el caso del Coronavirus, Google a desarrollado el Mapa del Coronavirus (COVID-19), una herramienta que se actualiza diariamente y que interpreta, contrasta y compara datos de todo el mundo de diferentes maneras.
Mapa del Coronavirus (COVID-19). Imagen: Google
Lo primero que se puede apreciar es una proyección cilíndrica de la tierra que muestra de forma plana todos los territorios centrados inicialmente desde la línea del Ecuador. Esta representación rectangular permite ver el mundo en su totalidad y también la cantidad de contagios mediante círculos de diferentes tamaños conocidos como gráficos de burbujas.
Mapa de burbujas
La unión entre mapas y burbujas se menciona en la página The Data Visualization Catalogue como Bubble Map. En el catálogo aclaran que este tipo de visualizaciones son muy buenas para comparar proporciones sobre regiones geográficas y Google las ha sabido mejorar agregando interactividad para que las personas puedan hacer búsquedas específicas por país e informarse de la cantidad de contagiados, personas recuperadas y muertes.
Otra funcionalidad de esta herramienta es que actualiza su información con mucha rapidez gracias a la base de datos de Wikipedia y también se complementa con contenido estadístico y noticias de cada región. Cabe aclarar que estos datos no reflejan la totalidad de los casos de contagio ya que según Google su disponibilidad varía dependiendo de las fuentes de cada zona.
Datos comparativos del Mapa del Coronavirus. Imagen: GoogleInformación estadística del Mapa del Coronavirus. Imagen: Google
En Infotipos.com también diseñamos mapas y visualizaciones de datos. Si te interesan estos temas o necesitas realizarlos para tu empresa o uso personal, te invitamos a ver nuestro trabajo y líneas de servicios en www.infotipos.com/proyectos y ponerte en contacto por medio de nuestro formulario o correo electrónico contacto@infotipos.com
Gracias por tus comentarios, ¡te esperamos en nuestra próxima publicación!
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.
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.
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.
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.
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 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.
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.
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.
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!
Nos complace informarles que Infotipos es patrocinador del concurso/evento Trash Can Art 2 que se llevará a cabo este 15 de Octubre en la ciudad de Puebla (México). Invitamos tanto a empresas como a artistas y diseñadores independientes a participar en este proyecto ecológico y artístico que además puede servir como plataforma para dar a conocer su marca o servicios. A continuación les dejamos el poster de la convocatoria (click para agrandar):
Esperamos que se animen a adquirir sus basureros y demostrar sus habilidades artísticas y de diseño, y que sobre todo, este evento sirva para ayudar a difundir un poco más la cultura ecológica y este tipo de concursos con fines sociales.
Recientemente tuvimos la oportunidad de hacer el rediseño de la página web de la Radiodifusora La Primera y tanto el cliente como nosotros hemos quedado bastante satisfechos con el resultado. A continuación les platicamos un poco sobre este interesante proyecto.
Página web anterior al rediseño
Los objetivos principales del rediseño eran:
Cambio de imagen ya que la emisora inauguraba su nueva radio frecuencia en FM.
Reflejar una imagen más alegre dado que el giro de la emisora es bastante popular.
Esta nueva imagen, a pesar de tratar de ser más alegre, no podía reflejar falta de seriedad o profesionalismo dado que uno de los fuertes principales de esta emisora es el generar noticias exlusivas para la ciudad.
Mantener un enfoque principal en las noticias y permitir que el usuario escaneara los contenidos con más facilidad.
Qué acciones se llevaron a cabo para lograr los objetivos de rediseño:
Se rediseñó el logotipo para reflejar una imagen más moderna y activa, se mantuvieron los rasgos y colores esenciales.
Se cambió el diseño del menú principal sustituyendo las tipografías por algo más fuerte. Este nuevo menú invita al usuario a explorarlo más que el anterior.
Se crearon nuevos banners para la parte superior. Estos banners reflejan gran parte de la actitud musical y alegre de la emisora. Mientras el usuario está viendo la página rotan cada cierto tiempo.
Se eliminaron los bordes redondeados del cuerpo de la página para darle un look más moderno.
Se rediseñaron los botones (llámanos y escucha la radio) para coincidir con la nueva imagen.
Se cambió el fondo azul sólido por un gradiente utilizando color para darle mayor profundidad a la página.
Las notas tienen nuevos encabezados que facilita su separación entre una y otra, de esta forma el usuario puede navegar entre ellas más fácil.
Se cambiaron las tipografías de todos los encabezados para servir mejor como separadores y también ayudar a la nueva imagen.
Se reorganizaron las secciones de las barras laterales para que obedecieran a las prioridades de los usuarios al usar la página.
A pesar de que varios cambios que se mencionan pueden parecer bastante sencillos, en conjunto brindan una imagen fresca y un cambio considerable que renueva efectivamente a la marca.
Página Web rediseñada:
Esperamos que este ejemplo de uno de nuestros proyectos haya sigo de su agrado. Si desea que Infotipos trabaje con usted para rediseñar algún material o página web, no dude en contactarnos a través de nuestro correo contacto@infotipos.com o por medio de nuestra forma de contacto en nuestra página web.
