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!
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.
¿Qué hay detrás del diseño de páginas web? ¿Qué procesos hay que llevar a cabo para lograr un diseño funcional y atractivo? Éstas preguntas pueden rondar la cabeza de cualquier persona que quiera contratar a un diseñador para hacer su página web para su empresa o producto.
Muy pocas veces el diseñador es claro en el proceso que se seguirá para llegar al resultado final y esto puede repercutir en una falta de comunicación y estancamiento de las fases del proceso. Es importante que tanto el cliente como el diseñador estén claros en los pasos a seguir para que así el proceso se de sin problemas.
En Infotipos nos hemos dado a la tarea de resumir el proceso ideal que llevaría el diseño de una página web. Decimos ideal porque no siempre se dispone del tiempo o los recursos para llevar a cabo cada uno de los pasos sugeridos (a veces no se pueden hacer tantas pruebas con usuarios, o tantas correcciones o bocetos iniciales por ejemplo). En este caso tomamos como ejemplo los pasos que seguimos para realizar la página web de Infotipos. A continuación puede ver el proceso que hay detrás del diseño de páginas web (haga click para verlo en grande):
Esperamos que haya quedado claro y que tome en cuenta estos pasos para el momento en que se decida a tener su propia página web. Aprovechamos para invitarlo a que nos contacte (visite nuestro formulario de contacto o conteste este mismo correo) si necesita que colaboremos con usted para el diseño de su página web o para realizar una infografía como la mostrada aquí.
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.
