# 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.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FfOw1b91eYM9U836LnHK9%2FBootcamps.jpg?alt=media&#x26;token=dd086b30-a7a6-4fed-9168-c7b1f2354488" alt=""><figcaption><p>Bootcamps</p></figcaption></figure>

### 2. Documento de referencias <a href="#id-494b" id="id-494b"></a>

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 <a href="#id-3ed7" id="id-3ed7"></a>

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.&#x20;
* 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**.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FZg7pd427tkbeYsM30rV1%2Fmenu-ironhack.jpg?alt=media&#x26;token=b1be21c5-8eff-48db-b18a-1f1b366421ad" alt=""><figcaption><p>Ironhack</p></figcaption></figure>

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FTUtRCON9gPURZkPmLVSr%2Fmenu-neoland.jpg?alt=media&#x26;token=7941eabe-4fc9-4bc1-8191-4143309f4a01" alt=""><figcaption><p>Neoland</p></figcaption></figure>

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FSnAAsfmr6KGZOtOetA9t%2Fmenu-nuclio.jpg?alt=media&#x26;token=e6690ea9-9f06-4f1a-aafd-3dec6cb9f1bd" alt=""><figcaption><p>Nuclio</p></figcaption></figure>

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FvdnS9sWZfXUeIkxMw5KI%2Fmenu-bridge.jpg?alt=media&#x26;token=86f4ea75-ec2f-49ee-a919-4980d0c42198" alt=""><figcaption><p>The Bridge</p></figcaption></figure>

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2Fk92sofKOJ2TIYxwfVJbT%2Fimmune.jpg?alt=media&#x26;token=078a0b4d-3d69-4b9e-873d-90e4081441fe" alt=""><figcaption><p>Immune</p></figcaption></figure>

### 4. Contenidos <a href="#cfac" id="cfac"></a>

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**.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FoLR5Mi7xhbKyzlu7vRAE%2Fencuesta.png?alt=media&#x26;token=566d3ef8-eabe-4b2c-b047-5e36ddb8b353" alt=""><figcaption></figcaption></figure>

### 5. Wireframes <a href="#id-494b" id="id-494b"></a>

¿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.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FrKOxGB7UTeQEFrWdTZxv%2Fpicture.jpg?alt=media&#x26;token=8ad09a9a-fbd6-4e7e-8078-217c83c8f3cc" alt=""><figcaption><p>Wireframe Low</p></figcaption></figure>

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.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2F0r468c8lQf5ZAzKRdsDn%2FSketch.jpg?alt=media&#x26;token=5e0c909b-b46f-462d-add0-f63c9f730225" alt=""><figcaption><p>wireframe</p></figcaption></figure>

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**.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2F3vUe82LUj6Q8XhCGHXlN%2Fwireframe.jpg?alt=media&#x26;token=a17e68db-4371-46ea-8f22-ce8a8ab64303" alt=""><figcaption><p>Wireframe Mid</p></figcaption></figure>

### 6. Componentes <a href="#id-494b" id="id-494b"></a>

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

1. **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.

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FRIR9JKPVWxq9LcAWBTMu%2Fbotones.png?alt=media&#x26;token=db52bfae-e82c-41b2-8312-25557029a97f" alt=""><figcaption></figcaption></figure>

2. **Cards**

He creado 3 tipos de cards que serían para el carousel de los cursos, otro para reflejar los casos de éxti y uno último para los posts.\\

<figure><img src="https://4010071912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjnFvxknzVac1CBFQbzW0%2Fuploads%2FqMvWUehFLPBsK9HKw0ho%2Fcards.png?alt=media&#x26;token=bb9babb2-df19-4c58-8bf2-ea3991a51fed" alt=""><figcaption></figcaption></figure>
