Darwin

Darwin

Cliente : San IlDefonso

Trabajo : WebDesign , Html, Css, Responsive, Parallax.

Descripción del proyecto : Exposición organizada por cinco de los museos de historia natural más prestigiados del mundo, Darwin llega a México al Antiguo Colegio de San Ildefonso. La muestra ilustra la época, los lugares y personas que influyeron en la formación de las teorías que marcaron un antes y un después en la percepción del origen y la naturaleza de las especies. Compuesta por especímenes, artefactos, manuscritos y objetos, se trata de la exposición más completa del renombrado naturalista, una oportunidad de aprendizaje que te invita a reflexionar sobre las acciones y responsabilidades que tenemos como seres humanos para fomentar una convivencia armoniosa entre todas las especies del planeta.

Mi trabajo sobre este proyecto empezó desde la concepción, creación de un benchmarking, analysis FODA, creación de la mapa del sitio, wireframes, maquetas en photoshop hasta la programación en html5, css, integración de plug-in en Javascript.

El sitio está creado sobre una base de una página, con scrolling vertical. El scrolling vertical se hace automaticamente al hacer clic en el menú o botón siguiente. Los elementos gráficos cómo fondos de pantallas son en diferentes capas y aparecen, se mueven a diferentes momentos, velocidades, con efecto parallax. Eso para divertir el usuario, proponerle una experiencia original, un viaje a través del universo de Darwin. También, decidí de meter poco textos, el sitio se presenta cómo una invitación a visitar la exposición.

Description du projet : Exposition organisée par cinq des musées d’histoire naturel les plus prestigieux du monde, Darwin arrive à México, via El Antiguo Colegio de San Ildefonso.

 

Mon travail sur ce projet a commencé depuis la conception, la création d’un Benchmarking, étude de cas, de la compétence. De cela, j’ai monté l’arborescence du site, les wireframes, maquettes de design en photoshop, avant de passer à la programmation html5, feuilles de styles css3, intégration et modification de script javacript pour la partie d’animation avancée tel que le parallax et scrolling.

Le site a éte créé sur la base de page unique, avec scrolling vertical.

Le scrolling vertical se passe au clic via le menu principal ou via le bouton suivant, symbolisé par une flèche. Les éléments graphiques tels que fonds d’écrans ou blocs de texte sont posés sur différentes couches et apparaissent, se déplacent de manièrse indépendante et controlés grâce à l’effet parallax.

Cela apporte une dynamique au site, un effet de surprise pour l’utilisateur qui cherchera à jouer avec l’interface et le site. Cela apporte également de la vie, un effet de profondeur, comme un premier pas invitant à visiter et en connaître plus sur l’exposition.

 

1- Introdución

La sección de introducción del sitio aparece con una animación de fondo. La barba de Charles Darwin toma vida, florece diferentes especies. Esta animación esta hecha en video (After Effects) y convertida para el sitio via html 5  en los formatos siguientes: ogv, webm, y mp4. Cada de los logos  viene con un link y lleva al sitio oficial (UNAM, Conaculta, San Ildefonso) en una nueva pestaña.

2- Quién es Darwin

Con efecto de parallax, al hacer scroll la figura de Darwin se desplaza más rapido que el fondo. El bloc de texto aparece de la izquierda hasta su espacio dedicado.

3- Exposición

El Elemento de la iguana está separado del fondo que representa una de las salas de la exposición.

Según la resolución de pantalla, se ajuste los elementos. Son 3 fondos diferentes, uno para cellular, otro para tabletas y otro para resoluciones más grandes. Eso con el fin de valorar la información visual y enfocar sobre lo importante. Que cada experiencia de navegación sea la mejor possible.

4- Entrevistas

La sección entrevistas está animada cómo un adn, aparece los elementos desde los bordes hasta el centro de la pantalla. Cada uno de los expertos tiene su encadre con portada.

Al hacer roll-over, aparece una pequeña animación css3 con la información sobre el experto cientifico. Su nombre y puesta.

Al hacer click se abre en una light-box la video (via canal Youtube de San Ildefonso)

5- Créditos

La sección Creditos sigue el diseño del Cartel. Utilize las mismas tipografías del Cartel que convertí en Webfont. Son compatible con los diferentes versiones de navegadores. La información se centra en resoluciones inferiores a 1024px.