Home > Design - Imagery, Banners & Landers >

Create Interactive, Animated Rules Landers With Google Web Designer (12)

09-09-2014 02:36 PM #1 caurmen (Administrator)
Create Interactive, Animated Rules Landers With Google Web Designer

Hey everyone!

So, I've been using Google Web Designer for a while now, and I'm starting to find that it has some pretty exciting capabilities.

So here are the first two in a series of tutorials on things you can do with it!

This time, we're looking at designing an interactive, animated rules lander with the usual "questions fading in/out" functionality - with no coding, and only a little bit of CSS modification.

Enjoy!

Part 1: Simple Interactive Rules Lander



Part 2: Adding Interactive Animation



I hope that was useful! Questions, comments, suggestions, thoughts on things you could do with this? Post 'em below!

09-09-2014 02:44 PM #2 cmdeal (Veteran Member)

Awesome tutorial!!!

I really like this video format.

Caurmen rocks.

09-09-2014 03:00 PM #3 romubrug (AMC Alumnus)

Yep very good and useful tuto. Thanks!

09-09-2014 03:38 PM #4 stackman (Administrator)

That looks solid, pretty useful for the non-techie

09-09-2014 10:33 PM #5 inkling (Member)

How does it compare to muse, esp. for mobile designs?

09-10-2014 03:15 PM #6 caurmen (Administrator)

Both GWD and Muse are pretty terrible for mobile designs, particularly if you need them to work across a variety of mobile devices.

Muse is more user-friendly, whilst GWD produces less bloated code.

But there is currently no good mobile design tool I'm aware of - although I haven't tested Pinegrow yet.

09-10-2014 04:10 PM #7 gcellis (Member)

I bought Pinegrow and started to learn how to use it and bootstrap 3. I subsequently read that bootstrap is bloated and since I'm starting in mobile, I've since paused my attempts.

Do please take a look at Pinegrow, @Caurmen ☺.

09-11-2014 03:37 AM #8 zeno (Administrator)

I have tried a few.

CoffeeCup Responsive Layout Maker is OK - makes good code, but I find the interface such a PITA to use.

Stupid way of editing things and styling, takes too long.

Honestly the bestest way I have found so far that involves the least hair pulling is to make some templates then use the following:

1. Multiple monitors.
2. Adobe Edge Code
3. Adobe Edge Inspect
4. Several mobile devices in front of you for previews
5. Use rem font sizes and % div sizes so that things are mobile responsive i.e. adapt to screen width.
6. Learn Edge Code keyboard shortcuts and keep a nice template dir with layouts and CSS snippets.

Seriously... it's worth just making lots of stock templates that you can use as a quick base for anything.

Pro mode: hire a designer who's job is to do this for you.

For responsive screen scaling I have used nothing better than Edge Animate - it scales everything based on screen width so aspect ratio is maintained, but it does it all with JS, the exported pages are heavy for mobile, and it's a bitch to edit CSS afterward for changes you want to make.

09-11-2014 04:31 PM #9 caurmen (Administrator)

@gcellis - may be worth looking at some of the lighter responsive frameworks too. I believe there are a bunch out now all claiming to be faster/better/more features/better-tasting than Bootstrap.

09-12-2014 09:02 AM #10 gcellis (Member)

For responsive screen scaling I have used nothing better than Edge Animate - it scales everything based on screen width so aspect ratio is maintained, but it does it all with JS, the exported pages are heavy for mobile, and it's a bitch to edit CSS afterward for changes you want to make.
@Zeno: How do you handle the exported page for mobile since it's so heavy?

may be worth looking at some of the lighter responsive frameworks too. I believe there are a bunch out now all claiming to be faster/better/more features/better-tasting than Bootstrap.
@Caurmen: What are some of the lighter frameworks out there?

09-12-2014 10:33 AM #11 zeno (Administrator)

Quote Originally Posted by gcellis View Post
@Zeno: How do you handle the exported page for mobile since it's so heavy?
You can't do anything to make it lighter really, so you just have to go with CDN hosting the whole thing.

09-15-2014 03:10 PM #12 caurmen (Administrator)

The one I've heard recommended recently is Pure - http://purecss.io/

4.4kb total.

Note: I haven't used it - yet. However, I'll add it to the "things to try" list.

Home > Design - Imagery, Banners & Landers >