UI Overview – Google Web Designer


JON REID: Hello, everyone. My name is Jon Reid, and I’m
one of the engineers that works on Google Web Designer. In this video today,
I’m going to cover the high level of
the user interface and how you can customize
it for your own uses. I’m not going to go into
any detail about any of the individual features. We have lots of other
videos for those. So please check those out. We’re going to start here at the
opening screen for Google Web Designer. You can see there’s
lots of different ways you can get started. If you need help, you
can find some help. You can create a new file. You can use a template. We have a wide
variety of templates that you can explore and
use for your different uses. We also have a recent
file list here, which lets you open any
recent files that you have. And you can open a file
just using the file picker if you have
one someplace else. I’m going to start off
by creating a new file. I’m going to create
an ad. I’m just going to give
it a quick name here. And you can see there’s
lots of different files that I could create. I’m going to use
these dimensions and keep the animation
mode in advanced. So it’ll start off in
advanced mode in the timeline. And here, you can see the user
interface for the application. If you’ve used
other design tools, this probably looks
familiar to you. Over here on the left, we
have our individual tools, and across the very top, we
have the tool options bar. As you pick different
tools, the options will change depending upon
what tool you’ve chosen. We also have the dropdown
menus across the top here File, Edit, View,
Window, and Help. In the File menu, you can
do the usual file things, like for example, you can
open a recent file here. I’ll open another overview
file so that you can see that. And then you can see we have the
individual files in a tab bar here. And then you have
the Edit, View, and Window dropdowns, control
what panels are open here. You can see the responsive isn’t
open, so I’m going to add it. And so now the
responsive is open. And if I want to, I can
close it and now it’s gone. Also across the top
here, we have the ability to switch between Design
View, which is this view, and Code View, which lets you
access your code directly. We also have the ability to
pick different ways to preview, with different browsers to
preview your work in, and different ways
to publish your work. Over here on the
right hand side, we have the individual
panels that you’ll be using to do your work. These panels can be arranged in
any order, in any way you want. You can move them from
one group to another, or even create their
own separate group. And if you want, you
can even move things from one side of the
application to the other. And we also have
the ability to be able to have
floating panels now. So these don’t even
have to be docked, and they can be of any size. You can move these
panels to left or right. The timeline can go
from top to bottom. So you have the ability to
move the timeline to the top or the bottom there. We also have the ability to
save these setups so that when you’ve
made these changes and you’ve gone ahead and
exited the application, when you open the
application again, the layout will be there. So you’ll have your workspace
saved the way you want it. We also have our
Pages menu here, which you can use to
add different pages. We have the breadcrumb
so that when you use that to dig
into the DOM structure, the breadcrumb will be here. And we have the Zoom
control as well. In the timeline,
we have the ability to switch back and forth
between Quick Mode and Pro Mode and to preview animations. That about takes care
of it for the high level overview of the application. As I said, we have
lots of videos that cover in detail these features. So please check those out,
and thanks for watching.

Leave a Reply

Your email address will not be published. Required fields are marked *