Click on any phrase to play the video from that point.
[♪♪] [ADOBE TV Presents]
[Rufus Deuchler in...]
[♪♪] [CS Insider Design]
Hi there. My name is Rufus Deuchler, senior worldwide design evangelist at Adobe Systems.
In this episode of CS Insider we have with us Danielle Beaumont.
And you're a group manager for a project called Muse, right?
Do you want to talk a little bit about that? >>Sure, absolutely.
So yes, my name is Dani, and today we're going to take a quick look
at a product we've had under development for a few years.
It's Project Muse.
Muse allows visual designers to create websites without actually having to hand code any of it.
So very similar to using something like InDesign to lay out a magazine,
you can lay out a website.
I have here on the screen an example of a website.
This is Kevin's Koffee Shop.
And what we're looking at is the plan mode of the site.
I have the ability as I'm designing my website to really decide
how do pages order within themselves, how do they lay out,
how do I interact with them.
And based on how the site structure for the website is set up,
it'll actually affect the navigation within the site.
If I jump in to a master page area here--
so this is a paradigm if you're used to something like InDesign
that probably makes a lot of sense--
master pages are content that actually reoccur across the website
and allow you to come in and define components that will propagate.
In this particular design, on the master page
I want to show off just some of the basic features.
I've got the ability to define the browser area.
So I have a background area here.
In this example I've gone in and placed an image.
I could go in and fill my browser with, for example, a color instead
and actually delete that image.
It's rather brash, but very quickly when I go in and close that out,
it's going to affect all of the pages in the site the way you would expect a master page.
[Deuchler] It looks like a master page in InDesign.
[Beaumont] Exactly. So it propagates throughout the whole bit.
That's a little scary, so we'll go on back and pick a little gentler color.
We'll go back to a fill of none, and I am going to go in and browse for that image once again.
The beauty of Muse is that something like a placed image in the background,
although this is rather large, Muse is going to cache it in the background
so that I optimize and really only load it once when I'm in the browser.
So I've got a header area, a footer area here.
The beauty of Muse is that it actually dynamically will resize the page
based on the content that we're looking at.
So if I had a very large bit of content, all of my footer bit is going to reoccur easily on the page.
If I come back in to my master layout--actually back out in to my site plan layout,
I can see the master page propagate the site.
If I wanted to now come in and pull down in File to preview the site in the browser,
Muse very, very quickly is going to render HTML, CSS, JavaScript, jQuery.
In all honesty, as a designer you don't even have to worry about that.
No. I don't want to worry about that. >>Exactly. Not many designers do.
So as I work, Muse is going to generate the code for that site for me
and allow me to easily preview it and take a look at it.
Once Muse renders the page in the browser,
I get a beautiful website that has lots of interactive components.
I've got, for example, a Flash animation pasted on the page here--
[Deuchler] And that's a Flash animation I could do with InDesign, for example.
[Beaumont] Absolutely. >>[Deuchler] Right? And then import that into a Muse project.
[Beaumont] Exactly. So Muse supports popular formats like GIF, PNG, JPG,
and Flash animation as well.
As I resize the document, you'll notice that certain components are in a fixed position,
so I have clouds that don't move.
If I resize back out again, I can see that the background is fixed.
I have persistent components like a Share button
using things like a Lightbox effect so I can focus the content of my design
on getting social, for example, without having to take them to another page.
So in this master page I can create the content that's going to repeat throughout the site.
For example, I may want to, instead of having a photo in the background image,
perhaps I want to use a repeating tile so it'll load much more quickly in the browser.
[Deuchler] Like a pattern of something. >>[Beaumont] Exactly.
So what I can do for that is come in to my control strip here and click on Browser Fill.
I'm going to go ahead and browse for an image.
And in this example it's going to actually just be a small tiled image.
It's very small. It's going to load very quickly. >>[Deuchler] Just a couple of pixels, right?
[Beaumont] Exactly, just a few pixels across.
When I select it, I can come in and under Fitting select that I tile it
both horizontally and vertically.
So when I click off now and actually preview my page in the browser,
I'll see instead of a photo in the background, I've got this nice tiled image
that's repeated in the background.
My page has a nice transparency so I can see it come through that page.
That's actually a very classy solution,
and you can create these sort of repeating backgrounds with Illustrator or Photoshop
and then import them as a PNG or a JPG or GIF and create really anything.
So basically what you're telling me, Dani, is that this application
is perfect for designers to create websites because I can use the knowledge that I have
with InDesign and Illustrator and Photoshop and get all this together inside of that application.
That's exactly it, so that as a designer you don't have to relearn the skills that you already know.
You can leverage what you know, but you're just basically designing for the Web
and not focusing on code any longer.
Wow. This looks very, very interesting.
I am going to be very curious to start using it.
Thanks so much for presenting that to us today.
My name is Rufus Deuchler for CS Insider. Thank you, Dani, for coming today.
Absolutely. >>See you soon.
[♪♪] [Executive Producer - Bob Donlon] [Director/VFX - Kush Amerasinghe]
[Producer/Offline Editor - Karl Miller] [DP/Online Editor - Erik Espera]
[ADOBE TV Productions - tv.adobe.com]
