> For the complete documentation index, see [llms.txt](https://aitors-organization.gitbook.io/immune-institute-or-analisis/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aitors-organization.gitbook.io/immune-institute-or-analisis/05.-diseno-en-alta.md).

# 05. Diseño en Alta

<figure><img src="/files/MtVNt1mCueWP9baBuvjA" alt=""><figcaption><p>Immune | Mock Up</p></figcaption></figure>

### 1. Descripción <a href="#id-7af4" id="id-7af4"></a>

* La primera franja con fondo de color negro es el preheader. A modo de carousel muestra **CTA's** para llevar al usuario a consultar **"Financiación"**, **"Másters más solicitados"**, **"Casos de Éxito"**,...
* **Menú Primario** | En éste menú aparecerán los links que te redirigen a páginas que no tienen que ver directamente con los cursos, sino con la empresa, Immune, empleo,... Además he añadido un botón de **"Más información"** para que el usuario pueda realizar una consulta sobre cualquier duda.
* **Menú Secundario |** He creado un menú secundario específico para las distintos tipos de categorías de cursos, másters, Bootcamps,*...* que pfrece la escuela. Percibirá la información de una forma más ordenada. Incluye un segundo idioma (inglés).
* El **hero** contiene un claim con un curso en concreto y un botón que te conduce a la **Single Page** de el Bootcamp seleccionado. Funciona a modo de **carousel**, de tal forma que aparecerán los cursos más demandados (máximo 4).
* Como **divisor** entre el hero y la próxima sección, he añadido un **contador numérico** que ofrece unas cifras y una información que puede ayudar a tomar una decisión positiva a la hora de decidir si finalmente realizará un Bootcamp, máster o curso.
* A modo **carousel**, podemos encontrar una serie de **cards** que corresponden a los distintos másters, bootcamps y cursos. Tendrá una longitud máxima de 10 elementos y se ordenará desde el más demandado al menos demandado.
* **Partners** **tecnológicos**. El usuario se sorprenderá e ilusionará por la idea de poder ser contratado por cualquiera de estos **gigantes tecnológicos** que dominan el sector.
* La siguiente sección conducirá al usuario a una nueva en la que podrá informarse de los métodos de **financiación**.&#x20;
* A continuación encontramos de nuevo un carousel que habla de **casos de éxito** de antiguos alumnos que nos explican qué estudiaron y en qué empresa se encuentran actualmente.
* De nuevo otra sección muy similar a la que nos ofrece información sobre la financiación solo que en éste caso, le pregunta al usuario si tiene **alguna duda de cualquier tipo**. Hay un botón que conduce al usuario a un formulario y lograr así un **lead**.
* Lo que nos encontramos antes de llegar al **footer**, es un contenedor con los últimos **posts** sobre noticias del sector, de la escuela o respondiendo a diversas dudas que pueda tener un usuario que esté planteándose realizar alguno de los cursos.  Bueno para el posicionamiento orgánico (**SEO**).
* Hay un **elemento flotante**. Un botón de **whatsapp** que le permitirá al usuario comunicarse rápidamente con el departamento comercial y resolver sus dudas.
* Para finalizar nos encontramos con el footer, en el que tenemos los elementos que aparecen normalmente en esta sección, **RRSS**, **uso del sitio web, contacto, links de interés, input para suscribirse a la newsletter, mapa del sitio,...**

El diseño se ha planteado con una estética **minimalista** que permite a las distintas secciones y elementos respirar sin dejar de ofrecer toda la información fundamental.

### 2. Diseño en alta <a href="#id-7af4" id="id-7af4"></a>

<figure><img src="/files/6unVv6jX195m4tIPcKkt" alt=""><figcaption><p>IMMUNE Technology Institute</p></figcaption></figure>

### 3. Figma  <a href="#id-7af4" id="id-7af4"></a>

Aquí puedes visualizar el proyecto realizado en Figma, el diseño y sus componentes.

{% @figma/embed fileId="e9OHIqRTY04myoMIjyYYp4" nodeId="0:1" url="<https://www.figma.com/file/e9OHIqRTY04myoMIjyYYp4/Immune-Home?type=design&node-id=0-1&mode=design&t=2xlCQD0FCvjO3ygx-0>" fullWidth="false" %}

**Link |** <https://www.figma.com/file/e9OHIqRTY04myoMIjyYYp4/Immune-Home?type=design&node-id=0-1&mode=design>

### 4. Antes y después  <a href="#id-7af4" id="id-7af4"></a>

Comparación del diseño actual con el diseño propuesto.

<figure><img src="/files/m0ImEuI5RpO4JakR2vDZ" alt=""><figcaption><p>antes / después</p></figcaption></figure>

### 5. Conclusión  <a href="#id-7af4" id="id-7af4"></a>

Pienso que la web tiene muchos servicios que ofrecer y se puede hacer mucho mejor. El contenido es bueno y tiene mucha información, pero debería unificar los estilos, generar un diseño más moderno y minimalista acorde a la competencia y, fomentar mucho más la toma de contacto con la escuela. Más CTA's que permitan generar más leads y ofrecer una asistencia más directa e inmediata.