Web Designer Blog
The latest news and tips from the Google Web Designer team
Helping developers bring their creative vision to life
Monday, March 21, 2016
Over the past two years, we’ve focused on building Google Web Designer into a comprehensive HTML5 authoring tool that every developer would want in a toolkit. We heard from developers and evolved the product to suit their needs, building sleek animation features, hand-editable code, direct integration into ad servers (AdWords and DoubleClick,) and recently, a new intuitive
dynamic creative workflow
.
With these features in place, we wanted to test the capabilities of the product. We challenged an internal team of designers and developers to build an ad with all the beautiful, interactive capabilities that an advertiser expects, using only Google Web Designer. Using imagery from the Google Cultural Institute’s World Wonders collection, the team came up with the following:
We interviewed Tristan, the lead developer of the creative, to discuss some of the challenges designers face while using ad creation tools and he was very enthusiastic about how Google Web Designer has made his life simpler.
How would you rate Google Web Designer’s ability to help hand-coders who don’t like to use similar products?
Google Web Designer passes the most difficult test of any visual development environment: it respectfully gets out of your way when you prefer to assemble things by hand.
Is working with external libraries using Google Web Designer still a problem?
I can easily build on Google Web Designer's component library using jQuery and the GreenSock Animation Platform (GSAP) to customize and display items however I wish. I push them onto the screen, I slide them them off. I switch videos on, then I silence them again.
Manipulating animations with less development time is the biggest challenge for developers. How did you approach this while using only Google Web Designer?
Instead of building animations inside the timeline, I can use GSAP to rotate HTML elements in 3D, twirl them around to reveal secondary content, and stagger movement for visual clarity. When handling dynamic content, these techniques are invaluable.
How easy/difficult is it to use for a novice developer?
Google Web Designer provides a number of components which require no advanced API knowledge whatsoever. I can display a client's video playlist straight from YouTube. I can assemble swipeable product galleries with dot navigation. I can display a map with custom pins dropped at nearby retail locations. Any one of these things by itself is something a client would love to see in their lightbox unit.
The Google Cultural Institute lightbox unit imagines a very simple menuing system. It's a starting point. Behind the scenes, this piece illustrates how programmers and designers alike can seamlessly blend components with custom code to produce beautiful work quickly.
Want to know how Tristan and team built the ad?
Download the source code here to know more!
Posted by Tristan, Sales Animation Interactive Designer
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
English
events
exit
fluid layout
gallery
google cultural institute
google web designer
Google Web Designer Blog
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
Google Web Designer Tips - Part 2
2017
December
April
March
2016
November
June
May
April
March
February
Feed
Follow @googlewdesigner
