Google Web Designer
Google released a tool for web designers to create HTML5 designs. And wouldn’t you know it, they simply call it Web Designer. I took a few minutes to play with the app and thought I would share my initial thoughts.
And by “initial thoughts” I mean just that. I literally gave this a 5-minute demo to see if it was as easy as advertised. These are just my early impressions, so if you’re looking for a glitzy press release, you might want to head over to Gizmodo or something.
Overview
Google Web Designer is supposed to bridge the gap between web design and web development. Like Adobe Muse CC. Like Hype. Basically, like all the other programs that generate code based off designed layouts. It makes animations and 3D layouts ridiculously stupid and easy for anyone, even if they don’t know a lick of code.
The major difference between Web Designer and something like Muse is that it is free. Well, at least it is at the time of this writing, it won’t cost you a penny.
Another significant difference is the amount of control Web Designer gives you over the code it outputs. My previous experiences with Muse and Hype provided little to no flexibility with the code. In other words, what it outputs is what you get. Google Web Designer allows you to toggle between design and code views while you work. It’s kind of like Dreamweaver in that way, which is nice and familiar if you’ve worked on that platform before.
So why does Google think we need another HTML5 code generator? You probably guessed it: ad revenue. Web Designer is primarily focused on creating banner ads without using Flash. And for that, it could be very nice.
Interface
Google has gotten really great at interface design, especially on its mobile and web platforms. However, I’ve never really used a Google desktop app before, so I was eager to dive in and check it out.
The interface is clean and stark, like its flagship Android and iOS apps. The icons are intuitive and the backdrop is dark, so those who are used to Photoshop should find this very similar and will likely have a lower learning curve going in. Even the toolbars and windows are positioned a lot like Photoshop. It’s pretty uncanny how similar it all feels.
What’s different is the tool selection. Sure, we have the same ol’ circle, rectangle, pen and paint tools. But now we have a slew of new tools like 3D object rotations and tags that add new perspectives to our designs and allow us to see them from different angles. You can even toggle your canvas view to display the front, side and top of your work, showcasing your design from any angle you need.
The right panels offer more context for selected objects. For example, you can set styles and properties of your selected elements right form this pane and even choose from pre-generated components such as a carousel.
Creating Animations
This is the feature that most designers will be attracted to. Working with CSS animations can be such a pain. It’s the one thing that Flash got right and it’s been tough to match that ease of use since Flash was pummeled back in 2010.
Like Flash (or Hype for that matter), Web Designer uses keyframes to direct the motion of objects in the canvas. Place the objects where you want them positioned in one frame, then reposition in the next and Web Designer will handle the transitions in between for you.
You can see the pen I created to illustrate how this works. Basically, I positioned four circles off of the canvas in the first frame, then dragged them into the center of the canvas in the last frame, allowing them to overlap. There are only two keyframes in my demo, yet Google Web Designer was able to generate all the transitions I needed to make them animate smoothly. I never had to touch the code!
[codepen_embed height=”298″ theme_id=”279″ slug_hash=”Cyagp” default_tab=”result”]See the Pen Google Web Designer Output by Geoff Graham (@geoffgraham) on CodePen.[/codepen_embed]
I have to admit that this is so much easier than writing vanilla CSS or even using CSS preprocessors, though I still hesitate using this as a replacement for coding by hand. However, it could be a great first step for those diving into animations for the first time.
3D Objects
This is the other slick feature that will get some attention. Working with 3D objects in CSS just plain sucks. If you don’t believe me, just look at the spec for CSS transformations and come back to hear I told you so.
Google Web Designer changes that quite a bit. Using the Object and Translate tools, you can select any shape on the canvas and change their perspective, skew and position on the X, Y and Z places just by dragging them around. It’s pretty sweet.
But it’s also not unique. Tridiv is another tool that does the same thing, only I think more effectively and with a better UI. If you just need the 3D functionality, I would look there instead.
Conclusion
My honest conclusion is that Google created Web Designer, not to empower web designers, but to serve its own interests. It’s more of a tool for creating ads and banners than it is for creating production-quality websites. And doesn’t that make sense given where most of Google’s revenue comes from?
Don’t get me wrong, though. Web Designer is a nice tool and I’m never one to complain about having more options in the market. Plus, it’s encouraging to see a company like Google care about the web production process enough to provide a solution that will undoubtedly help a lot of people.
Who are those people? My guess is web designers who get design but are uncomfortable with code. The bottom line is that it has the potential to helpful to anyone, whether it be for learning or production. But please oh please, edit the generated code before moving to production and make sure it is semantic and performant.