Caso práctico: una propuesta visual para el Marine Life Institute

Proyecto:

El objetivo de este ejercicio jugar a imaginar cómo sería la página web de una marca de ficción sacada de alguna película o serie. Lo veo como una forma divertida de diseñar nuevas interfases sin ahondar en temas de branding. En todocaso, espero que te diviertas leyendo sobre el proyecto tanto como yo haciéndolo. ¡Allá vamos!

Presentando al Marine Life Institute

Dado que me crié junto al mar y siento un gran afecto hacia el océano, quise escoger para este experimento una película que me evocase esta atmósfera marinera.

Me apetecía, por otra parte, desarrollar una propuesta relacionada con alguna institución científica y del ámbito museístico, por lo que acabé llegando al MARINE LIFE INSTITUTE, un acuario que viene a ser el escenario en donde tienen lugar los acontecimientos de la película de Pixar de 2016 Finding Dory. En este centro basaré toda la propuesta.

La única pista acerca del logotipo y de la identidad visual del MARINE LIFE INSTITUTE viene a ser este fotograma del metraje, pero ya resulta más que suficiente para trazar un icono e imaginar unos colores.

Realmente me fascinan los acuarios, y el reto de sugerir una identidad visual apenas reflejada en el metraje, me resultaba de lo más atrayente. La interfaz del Marine Life Institute debía reflejar una apariencia profesional, sin renunciar por ello a un aspecto lúdico y comprometido con la preservación de la naturaleza.

Vayamos paso a paso, primero, desarrollando algunos componentes básicos…

Desarrollo de algunos componentes básicos

Para empezar este ejercicio, he depurado el logotipo del Marine Life Institute, apenas sugerido en el fotograma de Finding Dory, e imaginado unos colores asociados a la marca, quedando el resultado de la siguiente forma:

Reconstrucción del logo del Marine Life Institute.

También he imaginado una propuesta tipográfica, una paleta básica de marca y algunos elementos visuales:

Tipografía propuesta.
Paleta básica.
Algunos elementos gráficos.

El resultado...

Sin entrar en grandes desarrollos, a continuación presento una propuesta básica de diseño visual para algunas secciones de la página ficticia: una landing page, un ejemplo de llamada a la acción y otro de posibles dinámicas web que podrían encajar con el modelo de negocio.

¡Vamos a verlo!

Para la landing page he buscado reflejar bien el concepto del océano, tan importante para el Marine Life Institute, y destacar de manera reforzada la principal llamada a la acción del negocio: la venta de tickets.

Propuesta de landing page para el Marine Life Institute.

Como ejemplo de otras posibilidades de llamada a la acción, he puesto en acción los colores y los elementos gráficos desarrollados. He escogido bordes redondeados en algunos objetos para reforzar el concepto acuático de la marca. Por último, me gusta llamar la atención al espectador por medio de algunas sorpresas visuales.

Propuesta de llamada a la acción para el Marine Life Institute.

A modo de ejemplo de otras dinámicas web, me ha parecido que sería interesante reflejar un horario ficticio de actividades del parque. Una vez más, he retomado el juego de llamadas a la acción y sorpresas visuales para captar la atención del visitante.

Ejemplo de una posible dinámica web para el Marine Life Institute.

Un pequeño extra: interfaces móvil

Aquí me he puesto del todo creativo y he tratado de sugerir cómo podría lucir el Marine Life Institute en dispositivos móviles.

He ideado una propuesta de blog y, por otra parte, una interfaz de aplicación didáctica, acompañada de su propio logo y gráficos.

¡Echa un vistazo!

Propuesta móvil de blog para el Marine Life Institute.
Propuesta de interfaz para app didáctica para el Marine Life Insititute.

Conclusiones del proyecto

Esta vendría a ser, en general, mi propuesta para una web de acuario siguiendo la identidad del Marine Life Institute.

El ejercicio se trata, más que nada, de un simple esbozo de línea a seguir para una interfaz web centrada en el ámbito del UI, sin entrar de lleno en estudios de experiencia de usuario, que por otra parte podrían resultar de lo más interesantes.

Espero que te haya gustado tanto como a mí el resultado y que hayas pasado un buen rato leyendo esta propuesta.

¡Nos vemos en el próximo proyecto!

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 del proyecto y las imágenes:

Todas las fotografías usadas en este proyecto se encuentran bajo licencia de Creative Commons y han sido obtenidas en los bancos de Pexels y Pixabay. Dejo a continuación sus referencias:

*Quisiera agradecer a todos estos autores porque, aunque me gusta bucear, me hubiera sido logísticamente imposible salir con una cámara yo mismo a captar las imágenes.

Los iconos utilizados forman parte de la biblioteca de recursos de Material Design.

El prototipado de las interfaces ha sido desarrollado con Adobe XD (que no tiene en realidad nada que envidiar a Sketch).

Finding Dory es una obra original de Pixar. (Tampoco es que sea mi película favorita, pero es una buena película).

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.