Lessons
Lesson Info
Getting Started with your Document
This is the final site that we're gonna create today. It's a small site, I know, but because we want to create something and show you just the nuts and bolts of the program, this is what we're gonna work with. Now, when we create a site in Muse, you're gonna find that you can create what's called a responsive website. Now a responsive website means that if you look at this page of this site on different screen sizes, like a phone, or an iPad, or whatever it happens to be, you can make it look good, and you can make it work, basically, and in here, we can take our designs and we can change them depending on what somebody's viewing this in, which is amazing. I think that's phenomenal. You're gonna see that working with responsive web design there's some great things we can do. So let's jump in, I want to get started. So I'll keep this open, I'm gonna close this page, but in order to create a brand new site, what I wanna do is come under File. Now if you just opened Muse, and you have not...
hing open, you're gonna see the start screen, and you're gonna see that you can open by clicking an open button, or open existing documents that you have. I'll come under File, New Site, that'll create a new site for us, and when you first start in Adobe Muse, you're gonna find that you have a couple options here. You have what's called Fluid Width, and you have Fixed Width. Fluid Width is responsive web design. Now, hopefully you understand responsive web design, like what that means. Everybody tells me that the international hand symbol or hand gesture for responsive web design is this. Every time I ask somebody, I say, well what is it, I see this in the audience, and I guess that makes sense, 'cause you're trying to take content on a website a web page, and you're trying to make it so it looks good on different screen sizes, right, that's a Fluid Width site. Now, if you want to create a Fixed Width site, you can. That's like a 1998 type website, right. We're gonna go with Fluid Width, keep it responsive, and we're gonna set what's called the Max Page Width. This is the maximum width that this content will go. If you set a max page width at, I don't know, 800, if somebody had one of those cinema displays or something like that, you're website would look like a postage stamp in the middle of it, 'cause it can't get any wider than that 600. So what we try to do, is we try to go with something that we can use today, I'll do like 1100 or or something like that. There are columns and different things we can set. We don't need to worry about that. The columns are, if you've ever worked in InDesign or Illustrator, you've probably worked with guides before, that's pretty much what they are, and we have advanced settings, and just don't touch those, okay. When you get started, it's one of those things where you, as you get in, further you get in, you're gonna learn about these things. I'll click OK, and that's really all we need to do to get started. Now once we create our site, what I'm gonna do is I'm actually gonna save it. So I'll go up to File, and choose Save Site, now it could use Save Site As, it doesn't really matter. I'm gonna call this MySite, which I wouldn't do, but I'll just click Save, don't worry about, just for demo. Now that's actually what's called a .muse file. This is a file that's gonna contain all the content for our site. Muse works similarly in some ways to like an InDesign or Illustrator, if you place images for instance, you can link to them, they're all linked. So if you have a site, you can send the linked files with it too, if somebody needs to work on it, that type of thing. Now when you first create the site and you open it up, you're looking at this. This is essentially is where we're gonna go, and this is called Plan mode to start, we're gonna plan out our site. We're gonna add pages for our website. We're gonna work with even master pages, which are, they're kinda like templates, a starting point for ya, and you're gonna see we have other modes as well. If you look in the upper-right corner, I got Plan, Design, and if I go to Design, it's gonna open up the page or the homepage in Design, and this is more what we're expecting with the program, right, you're seeing tools, you're seeing panels, you're seeing all this stuff to be able to work. We also have Preview and we have Publish, when we're, you know, getting close to test or you know, get it out of there. So I'll click Plan again to get back there, and we work in Plan mode, what we're gonna do is we're gonna go in and say all right, we're gonna setup a few pages. So in here, to add pages to your site, you can do this now, you can do this later, it doesn't really matter. I'll do it now, just so we have it. If you want to add pages, just hover over one of the thumbnails here, and you'll see the pluses, just click on a plus. If I click to the right here, it'll add a page to the right. I'll just go in here, and we're gonna say this is Portfolio, and you need to spell this correctly, and the reason why I'm saying that is because this is actually gonna be your menu, if you put a menu on your pages, which you probably will. I'm gonna make another page, I'll just hover over Portfolio, click on the plus to the right, and this page, I'll just call it Contact. Now these are what are called the top level pages. These are the pages that are gonna show up in the menu, in the main menu, if you want to make one of those. Most sites have the menu bar along the top or somewhere along the side, et cetera, these are the pages that are gonna show up in there, these are called parent level or top level pages. Now we can also make what are called children or child pages beneath parent pages. If you wanted to have, if you went to a site, for instance, and you hovered over a menu item, and a sub menu showed up, those are children pages. So if I come to Contact, maybe I want to do this, maybe I want to have a Contact Form on the Contact page, and I want to make to where if somebody fills out the form, and if they, you know, do it, they hit Submit, we take them to a Thank You page, so this could be a child page that we're taking them to it. So if I come under Contact here, you're gonna see the plus, if I click, I can just call this Thanks or something like that. Now, when we build pages, like I said, we can move these around, we can do all kinds of things if we want to. We can reorder these if you just drag them. Look what I'm doing here. You're gonna see it's a little tricky actually than just dragging them. You gotta watch for this color area to show up. If I see that, I can reorder things if I want to do that. Now I'm gonna put it back where it was. You can delete pages, there's a little x in each corner. You can do all kinds of things with these. You can also view the page thumbnails larger if you want, and see them in different ways, so there's a little size slider up here, make 'em a little bigger, make 'em a little smaller, and what's cool is when you start adding content, if you ever come back here to Plan mode, which you probably will, you're gonna see your content on the thumbnails out here, so that'll give ya an idea of what's on that page. All right, so, we've got our document set. What I'm gonna do is I'm gonna save this site, so I'll go to Save Site, and the next thing we're gonna do, is we're gonna go through and I'm gonna start to talk a little bit about master pages and get ya in to responsive design.
Ratings and Reviews
wendy fite
Tasked with creating a website for a friend's start-up, I looked at various template driven tools in the market and also signed up for this Creative Live class. My experience with CL classes is wonderful and this Quick Start class for Adobe Muse CC did not disappoint. Brian Wood is very knowledgeable. His pace is fast, and the content he presents is awesome. He de-mystified Muse for me (I am generally a Photoshop/Lightroom users). After the class I was able to start packaging the information story-boarded for the website content so I can confidently design the first draft. I also bought the course so I can revisit some of the tips and tricks. Recommend this course.
Vince Tutay
I've always been curious to see what Muse had to offer but didn't know where to even start. This was a great intro to take you through the steps you would take to design and publish a site. Brian does a great job in explaining stuff which you can easily follow if you have the program open!
Phyllis Bostanci
I didn't know Adobe Muse was easy! Thanks Brian, can't wait to watch the rest of the videos in this series.