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!
Al realizar cualquier producto de diseño uno de los principales puntos en los que hay que prestar atención es en la continuidad, uniformidad o consistencia en cada parte del proyecto. Es un caso especial en el diseño de portales y páginas web, ¿Qué pasa si por ejemplo en una página web, el menú es de una forma en alguna sección y cambia por completo en la siguiente? Aparte de confundir al usuario y hacerle la experiencia de uso mucho más difícil, estos cambios denotan una falta de organización o falta de profesionalidad en la empresa.
Para este artículo nos enfocamos en analizar los portales o páginas web del Gobierno Federal de México. Este caso es curioso ya que se puede tratar como si fuese un mega portal y que cada subsección del mismo es la dependencia de una página de gobierno (SCT, Telecomm, CAPUFE, etc). A pesar de las dimensiones del proyecto, la imagen del gobierno federal, está claramente estipulada y definida, cada secretaría tiene su propio color e identidad, pero en conjunto mantienen una uniformidad bastante clara en cuanto a tipografías y estilos gráficos.
Uniformidad en títulos
Sin embargo el caso de las páginas web o portales es bastante curioso ya que parece como si cada página hubiera sido elaborada por gente distinta tratando de emular la imagen general. Esto resulta bastante obvio al hacer una comparación lado a lado de las páginas, incluso el simple hecho de abrir varios de estos portales en un navegador, puede delatar los errores en los que han caído:
No hay uniformidad en títulos ni favicons
Como se puede ver en la imagen de arriba, no hay uniformidad en los títulos de las páginas, ni en los favicons (pequeñas imágenes que se muestran al lado del nombre). Algunas no tienen título (y se puede ver solamente la dirección web), otras no tienen favicon, y en general todas están redactadas de diferente forma.
Análisis del cuerpo de las páginas web
En el caso del cuerpo de las páginas las inconsistencias son mucho más obvias, a continuación las analizaremos brevemente por medio de la imagen que hicimos (dar click para verla en completa en grande):
Análisis de los portales del Gobierno de México
Encabezados: Si se ponen lado a lado los encabezados, se puede notar de inmediato que intentan seguir una misma línea pero que cada uno lo hace a su modo. Algunos cambiando la tipografía que usan para el título, otros moviendo el formulario de búsqueda (y poniendo el botón de búsqueda de diferentes colores), y algunos otros colocando un logotipo mal proporcionado o que se sale del tamaño que debería tener.
Imagen de portada: La imagen principal que se usa como destacada en cada portada tampoco es consistente entre los portales, en algunos casos está mal su tamaño y queda desproporcionada, en algunos otros ocupa más o menos espacio del que debiera.
Últimas noticias: En este apartado al parecer cada portal le dio el estilo que quiso a las noticias. Algunos con fondo en degradado, otros con divisiones, cada portal eligió, las tipografías en colores diferentes.
Subsecciones del portal: Esta pequeña sección varía tanto en estilos que no pareciera que se tratara de la misma en ningún caso. Algunas usan íconos, otras simplemente son listados, cada portal le dio los márgenes que quiso.
Íconos de seguimiento y sociales: Cada portal tiene una sección en la que enlistan de qué forma el usuario puede seguirlos en redes sociales. Ponen unos pequeños íconos que en cada portal resultan ser diferentes aunque lleven a los mismos servicios. Y no hay consistencia en cuanto a los servicios ofrecidos.
Conclusiones
Tal como se mencionó, se trata de un proyecto bastante grande, pero por lo mismo debería llevar muchísimo cuidado en esos detalles. Sobre todo tratándose de la cara que le da el gobierno a sus ciudadanos. Lo que más extraña en este caso es que seguramente se tenía una plantilla bien definida para que cada sitio fuera diseñado así, pero es muy probable que al momento de desarrollarlos, no se haya tomado en cuenta o se hayan pasado por alto estas revisiones. Todos estos errores sin duda le quitan profesionalismo y credibilidad a los portales del gobierno, y por ende afectan la imagen que los ciudadanos tienen sobre el mismo.
Esta mini consultoría con estos portales de gobierno, es un ejemplo de lo que Infotipos podría hacer por su empresa, para ayudarle a mantener una imagen que refleje el verdadero valor de su negocio y sobre todo para generar la confianza necesaria para que sus clientes consuman sus productos y servicios. No dude en contactarnos (medios de contacto) si desea que colaboremos con usted realizando una revisión o consultoría del estado actual de su página web o cualquier otro producto de diseño.
Estamos de fiesta en Infotipos ya que el día de hoy se celebra el Día mundial del diseño o lo que muchos también llaman Día del diseñador. Es por eso que hemos decidido recopilar un par de infografías que hablan sobre nuestra profesión y que además ayudan a demostrar la habilidad que tienen para ayudar en la visualización de temas extensos.
La primera diseñada (por la revista NeoPixel) para dar un vistazo eficiente y comprensivo a la situación laboral de los diseñadores en México. Para este caso se tomaron los datos de una encuesta y se mostraron de una forma más llamativa y organizada de forma que de un vistazo y sin tener que haber leído la noticia, uno se puede hacer una muy buena idea de la situación general en el país.
Infografía sobre Diseño y Diseñadores en México
La segunda infografía nos da un vistazo sumamente comprensivo sobre el perfil del Diseñador Web. Una gran serie de datos que incluyen desde en dónde vive hasta cuánto gana, de dónde obtiene su inspiración y cuál es su grado de educación ( click en la imagen para verla en grande). Una vez más se trata de gran cantidad de datos que se visualizan y comprenden mucho mejor mediante el uso de diversos elementos visuales y una correcta jerarquización de la información.
Infografía sobre Diseñadores Web (click para ampliar)
En ambos casos es evidente que los beneficios de las infografías pueden ser aplicados a gran cantidad de campos y que así como en un caso se está describiendo una situación compleja en un tiempo y lugar determinado (en la primera infografía), también pueden ser usadas para hablar de temas muy específicos y a profundidad (como sucede en el segundo caso). Sea como sea, una infografía bien diseñada siempre permitirá al lector una mejor comprensión y retención del tema tratado y ayudará a muchos otros a interesarse por temas que tal vez en primera instancia hallaban poco atractivos.
Si usted requiere ayuda para explicar, enseñar o demostrar un tema complejo o con muchas vertientes de información, acérquese a nosotros y contáctenos para que le ayudemos por medio de una infografía o instructivo.
Le damos la bienvenida a nuestro blog y a este boletín en el que periódicamente publicaremos una serie de artículos escritos por nuestros expertos con el fin de darle tips, ejemplos y casos de éxito que podrían ser de utilidad para su empresa y negocios. Por esta misma vía podrá conocer la gama de servicios que podemos ofrecerle y las diversas formas en las que le podemos ayudar a conseguir más clientes o simplemente a mejorar procesos internos en su empresa o negocio.
En infotipos nos especializamos en 3 áreas: Visualización de información, Diseño editorial e Interacción Humano/computadora. A continuación algunos ejemplos de cómo le podemos ser de utilidad:
Visualización de información
Infografías: Haga más entendibles y efectivos sus materiales didácticos (libros de texto, monografías, presentaciones, carteles)Instructivos: Entregue a sus empleados manuales de uso fáciles de entender para optimizar los procesos en su empresa
Señalización: Implemente sistemas de señales entendibles que le pueden ayudar a resolver problemas de tránsito y localización de áreas en su espacio de trabajo
Diseño editorial
Documentos impresos y electrónicos: Mejore sus productos editoriales (periódicos, boletines, revistas, informes anuales, folletos) para captar la atención de sus clientes y promocionar mejor sus productos y servicios
Ilustración: Mejore la presentación visual de sus productos y transmita ideas de manera efectiva, directa y sencilla
Interacción humano/computadora
Diseño Web: Optimice su página web para que sus clientes puedan conocer mejor sus servicios y estar en contacto directo con usted. Aumente sus ventas al estar disponible las 24 horas durante todo el año. Cree una comunidad de usuarios alrededor de sus productos y servicios para conocer lo que quieren sus clientes
Consultoría en Usabilidad y Arquitectura de Información: Descubra por medio de un diagnóstico el por qué sus clientes no están comprando a través de su tienda en línea, por qué no encuentran sus productos, o simplemente descubra si se frustran al visitar su página web
Si desea contactarnos para solicitar algún servicio, lo puede hacer por medio de nuestro formulario (formulario de contacto y cotizaciones) o directamente a contacto@infotipos.com. Para conocer un poco más sobre nuestros servicios, método de trabajo y promociones directamente en nuestra página web www.infotipos.com o bajando nuestra presentación (bajar presentación). También lo invitamos a que nos siga en Twitter (@infotipos) o que nos visite en Facebook y LinkedIn.
