Planet
header phone
background
preview
phone
phone
background
Lemon
Flowers
Neon
Pinky Sky
Stairs
Chair
phone
Smartphone
Smartphone
mobile
phone
cloud
cover image
hero image
rift
iphone
day one
day two
blue gradient
blue gradient
white gradient
black gradient
black gradient
trees
mystery
free will
phone
phone
Google
Lemon
Neon
Stairs
Flowers
Pinky sky
Chair

How we pushed the web further with AMP

Two platforms. Endless possibilities

Expertise
Design, Development and Prototyping
Platforms
Web and Mobile
Deliverables
UX and Development
Interested?
Visit Templates

The Brief

Google's open source framework, AMP, aims to enable the creation of websites that are lightning fast, beautiful and high-performing across all devices.

While Google initially launched AMP in early 2016, they wanted to better showcase its capabilities and how content creators could use it to bring the web to life.

That's where we came in. We joined forces with The AMP Project to inspire publishers, break misconceptions and completely redefine what’s possible in the open-source framework.

 

We came to MetaLab to push the boundaries of what’s possible when using AMP. We’re thrilled that they ran with this idea and created beautiful, highly interactive sites for us.

“
Quote
Matt Ludwig
Project Marketing Manager, AMP
“We came to MetaLab to push the boundaries of what’s possible when using AMP. We’re thrilled that they ran with this idea and created beautiful, highly interactive sites for us.”
Matt Ludwig
AMP Project Marketing Manager
Template #1

Art gallery as
proving grounds

After some brainstorming, we landed on the idea that online art galleries and museums are typically fun, abstract and don’t play by the rules when it comes to following conventional web layouts.

With this in mind we created a faux art gallery as proving grounds for redefining what was possible in AMP. The end result was a fun and interactive site that used the best of the initiative and built new on its foundations.

Our team relied on the power of AMP to ensure the site was beyond performant, and introduced new features and components into the framework including custom micro-animations, parallax experiences, hover states and other delights.

Bringing in
some depth

We even played with an immersive VR version for consideration. Try it out on your phone here.

Template #2

Traveling on AMP

It was important to prove AMP can handle more commonly used and complex sites. Users across the web are browsing, shopping, and searching 24/7. What better way to showcase AMP can improve all of those activities than pretending you’re booking your next trip.

Pushing the limits

In building an example travel booking engine, we allowed users to search by destination, filter by activities, and find things dynamically; all while maintaining the speed and performance AMP is known for. By sweating the details on this one with micro-animations and moments of delight, we were able to push things even further in the open-source initiative.

Responsive site, happy life

We wanted to take the time to ensure that the responsiveness AMP can handle is made clear to mobile audiences. Our design and engineering teams ensured each page can be loaded on any screen size while still looking & feeling great.

The Results

Both the AMP project and MetaLab teams are excited at the possibilities we're introducing to the world with what AMP can do. The site templates are free to use and found at
www.ampstart.com
Have a project for us?
Home

We make

interfaces.