Back to top


Expressive Web

The Expressive Web

DESKTOP, MOBILE, TABLET

As mobile devices become more popular, content is needed to be delivered onto multiple platforms and browser sizes. The Expressive Web showcases 12 prominent new HTML5 and CSS3 features. This site was created by Big Spaceship for Adobe to showcase and envision the future of the web.

Credits: Art Direction, Dave Chau
Design, Jay Quercia
Development, Stephen Koch and Georg Fischer

Launch Project

ROLE

Design, 3D Modeling

SOFTWARE

Photoshop Illustrator Cinema 4D After Effects

TIMEFRAME

14 weeks




Showcasing the Features


Design

The team consisted of two very talented designers Jay Quercia and Dave Chau. I worked with them to help tell the story of the new HTML and CSS features. Since the technology was so unused, the designers and developers had to literally work at the same computer to get the layout and animations correct. This allowed me to learn a lot about the new features and how the design to development process actually works.

The Expressive Web The Expressive Web The Expressive Web

Project Highlights


Responsive Web Design

The Expressive Web intelligently restructures to fit in any browser size. This allows the user to enjoy a similar experience without compromising readability. To demo the new HTML 5 Media Queries feature users can collapse or expand their browser windows (on a desktop computer) and watch the hamburger build up. Each browser size has a custom style sheet allowing the content to fit perfectly.

Responsive Design

3D Models to PNG

To achieve the isometric view each webpage's assets were first created in Cinema 4D. I was lucky enough to work with brilliant developers (Stephen Koch and Georg Fischer) who developed a way for the designers to rebuild the 3D models in a web application. Those cube locations would then be converted to code so each cube could be built as a PNG.

PNG Cinema Models