Una landing page para ArteEscuela.com

Proyecto:

ArteEscuela.com es una escuela online dedicada a la enseñanza de disciplinas artísticas, como el dibujo o la pintura, a través de un espacio virtual específico, profesores expertos y un enfoque eminentemente práctico.

Con la identidad de marca ya definida por el cliente, surgía la necesidad de crear una landing page que fuera atractiva y eficiente.

Propuesta UI con bloques intercambiables

Debido a la importancia que cobra el storytelling en este caso , y en cualquier landing page en realidad, planteé el proyecto desde su fase inicial en forma de bloques informativos multifuncionales e intercambiables que pudieran reflejar cada aspecto del relato de forma variada y esquemática.

Propuesta de bloques intercambiables con algunos de los esquemas planteados para el proyecto. El objetivo es que la marca encuentre un espacio variado para contar su relato.

Efectos visuales y elementos interactivos

Al estar la identidad de marca ya decidida, mi labor en cuanto a los elementos visuales del proyecto se centró más bien en la adecuación de dicha identidad a las necesidades de la interfaz.

A continuación, algunos de los desarrollos implementados en esta parte del proceso siguiendo el componente plástico de la identidad de marca.

Métodos de resalte de texto.

Estilo de hover en los botones.

Marcos de imágenes.

Pictogramas de Material Design.

Adaptación de los módulos a la propuesta visual

Con la identidad ya establecida, los esquemas bien planteados y el aspecto general de los elementos desarrollados, se puede ir dando forma a los diferentes bloques de la propuesta. A continuación, una pequeña muestra de los wireframes elaborados para el proyecto:

Sección hero.
Bloque informativo con pictogramas y columnas.
Bloque informativo con imágenes y texto.
Llamada a la acción.

Aspecto en dispositivos móviles

Para terminar, es necesario ajustar las propuestas a interfaces móvil. Este proceso debería ser sencillo siempre que se haya tenido en cuenta esta necesidad desde el primer momento, por lo que durante el desarrollo posterior solamente debería consistir en unos pocos ajustes.

Sección hero en móvil.
Llamada a la acción en móvil.

Conclusiones del proyecto

Con las propuestas decididas, se puede pasar a la fase de desarrollo para trasladar todas las pantallas al entorno web y comprobar su desempeño real.

Lo más fascinante de este proceso de diseño viene a ser que, pese a que existe un marco de eficiencia y unas reglas predefinidas para asegurar la usabilidad, al final cada marca tiene su propio relato y un sello específico que da lugar a interfaces únicas y originales.

Pablo Bonnet <br> <span class="charge">Diseñador web & Creativo digital</span>

Pablo Bonnet
Diseñador web & Creativo digital

Dueño y señor de estas tierras. Quien gestiona el cotarro en este lugar.

Sobre mí

Acerca de las imágenes:

Algunas de las imágenes utilizadas en este proyecto proceden de bancos de imágenes libres de derechos, por lo que me gustaría reconocer a sus autores:
Los prototipos para el proyecto han sido elaborados con Adobe XD.

Contacta conmigo

Escríbeme para cualquier colaboración, proyecto u oferta. Generalmente tardo entre 1 ó 2 días en contestar.
También puedes encontrarme en estas redes sociales. Si te urge contarme algo, seguro que por aquí te leo antes:
¡Aviso! ¡Cookies!

Esta página web usa cookies para mejorar tu experiencia. Al seguir navegando aceptas su uso. Para enterarte de más, puedes leer la Política de Privacidad y Cookies.