04. Benchmark & Wireframes

1. Benchmarking

Vamos a ver como resuelven las Homepage algunos Bootcamps, para ello utilizo un Documento de referencias donde recojo las características o funcionalidades destacadas de cada home, de esta manera podré ver que tienen en común, que lineas de diseño UI aplican, que tipografías, color, imágenes, navegación, arquitectura de la información, etc.

2. Documento de referencias

Tras analizar 4 de estas webs de Bootcamps (más popular a día de hoy) encuentro que: extraigo una serie de findings que más adelante me serán útiles a la hora de aplicar tanto la arquitectura de la información como la capa visual, de esta manera acumulo una serie de recursos que darán ese aire de seriedad y profesionalidad que debería tener la web del IMMUNE Technology Institute, y de la que actualmente carece.

3. Navegación

Si hacemos un análisis de los navbar para ver y comparar contenidos, podemos ver que el de IMMUNE Technology Institute es muy pobre. Carece de varios elementos clave como son:

Preheader: CTA's a elementos o páginas que nos interesa, como consultas o formularios.
Infórmate: No hay botón de "Infórmate". Es el único que no lo tiene junto a The Bridge.
Idioma: Junto a The Bridge es el único que no ofrece la web en otro idioma.
El número de links a simple vista son muy inferiores al resto. Esto nos dice que la navegación a primera vista no está diseñada correctamente. Debería de crear un menú secundario para abarcar todos los elementos que ofrece de una forma más organizada.

4. Contenidos

Hay una homogeneidad en las home’s, en cuanto a contenido y características de la capa visual, no cabe duda que los contenidos de IMMUNE Technology Institute son incompletos y, la mayoría de sus competidores cumplen con mejores contenidos, más completos y sobre todo, mejor construidos.

5. Wireframes

¿Cómo traducimos esto en algo un poco más visual? Con wireframes, claro, nos ayudarán a estructurar y a comenzar a imaginar la capa visual de la web.

Con todo lo aprendido hasta ahora ya tengo una idea bastante clara de cómo debe ser la estructura y qué recursos debo utilizar para resolver cada sección, como por ejemplo cards, tabs, slider, CTAs, etc.

Ahora sí, puedo empezar a crear la capa visual de la home de IMMUNE Technology Institue, con los wireframes low tenemos una aproximación de cómo debe ser la estructura pero ahora creare wireframes mid para tener una base sólida en Figma.

6. Componentes

Estos son algunos de los componentes creados en Figma una vez clara sus estructura, para agilizar el proceso de diseño visual.

Botones, dots y links del menú con desplgable

He diseñado 3 tipos de botones muy similares pero con distintos colores. Los colores son los que se utilizan a nivel corporativo y se utilizará uno u otro según el color del background sobre el que se posicione el botón.

Los dots también utilizan los colores corporativos. Uno indicará el elemento activo y el resto, los que no son visibles en ese mismo instante.

Los elementos del menú se han creado para tener como opción dos variables, el link con la flecha de despliegue y otra sin esta.