You can create a Muse website to offer end users a streamlined and fully functioning experience. In this video, you will review the different layout aspects to understand how specific values or options affect the visual aspect of the site. The tutorial will lay down the Adobe Muse fundamentals so you can easily modify them to suit your preferences.
All right. Now it's time for us to create our new website inside of Muse. The easiest to do this is just go to File > New Site. you can also do it directly from the splash screen, but in this case I'm just going to bring up the New Site dialog box. And so, when you first get into this dialog box, it's probably a little intimidating and that's okay, there's a lot of options in here. So just take it piece by piece. And hopefully it'll make sense once we get finished. So at the very top here, we'll start at the top and work our way down. You get to choose your initial layout.
And so you have the choice between desktop, tablet and mobile phone. If you are comfortable designing for mobile first, start with the mobile phone. If you are more comfortable designing for desktop interfaces than go ahead and choose desktop. If you're coming from the In Design world and you've done several DPS documents, you might be more comfortable with a tablet. Any one of these is fine. You can always add the alternate layouts later on. So if you start with tablet, you can add phone and desktop later. If you start with phone, you can add desktop and tablet later, etc.
I'm going to stick with the desktop for now. And then let's move on down here to where it says page width. Now this is an interesting area to focus on here. Page width. Because a lot of people want to know how wide should my website be? And the answer to that is however wide you want it to be. Most modern websites today, I would say, don't go below 960 pixels wide in a desktop environment. And in fact, because monitors are growing so large today, I would argue that anything less than 1000 pixels or maybe even 1200 pixels is a little too small on a desktop as well.
Usually, I start off with something pretty simple here. I start off with just like 1,000 pixels and 1,000 pixels just gives me a nice easy round number to work with when I'm generating columns and things like that. So, I can easily space items out on my web page. Minimum height. This box is a little misleading. It's not the actual height of your web page. It's the minimum height that your web page is going to be. Because Muse has dynamic pages that adjust to the content you put in them, you're never going to be able to set a definitive page height on every single page.
It's just not going to happen. Some pages are going to have more content than others. Some you're going to have to scroll, some you're not going to have to scroll. And so, minimum height just means, okay, give me a minimum area to work with so that I can start to add content to this thing. So, 500 is fine. Absolutely, I think you'll go way over that. So, I would try to keep this number low, if you can. That way you can always exceed it. And, you never have to worry about going less than that. Over here on the right, Columns, Column Width and Gutter. We are going to get to these in just a minute but what I want to focus on now, is right down here at the margins.
Margins in Muse are a little bit different than margins in something like, let's say, InDesign. These are purely for your benefit. They have no bearing on the output whatsoever. These are purely for layout purposes. Giving you a sort of safe area inside the document to lay objects out in. I personally don't use margins. So I take these all the way down to zero. And I do that because I don't really need that because most of the time in modern web design we're pushing things all the way out to the edges of the browser window and I use the page width as sort of my margin.
I know that if I start with a 1000 pixels chances are I'm not going to run into the edge of anybody's browser window because most modern browsers are larger than a 1000 pixels on these new monitors that we have. So we don't have to worry about that. Okay. Once I set up all my margins to zero, then I come over here to the columns. And so when we create multi column layouts in Muse, it's not actually like a segmented column layout like you would see in a catalogue or something like that. This is more for layout purposes. Again, you're creating yourself a grid.
And so you can go anywhere from like eight to 12. Some people even push this up to like 16. I actually prefer 12 columns, which gives me a column width of 65, and I stick with a gutter of 20 with this 1,000 pixel wide grid. It just makes for a nice, clean, easy numbers to remember, 1,000, 12, 65, 20. That's very easy for me to remember. I don't know why it's easy for me to remember but it is. You just figure out what works for you and what works best for each layout that you work on. And, this will, sort of, fall into place.
Now, padding down here at the bottom. Padding refers to the area that you sort of give an extra bit of space to either at the top or the bottom of your page. So, if you want your website to go edge to edge and not have any space in between your page and the browser window. Take these numbers down to zero. If you do want a little bit of space, at the top or bottom, then leave them at whatever you want. But in this case, I am going to take it down to zero. So that everything go edge to edge. Also, you'll notice that you can't change the left padding right here.
That's because right now, center horizontally is turned on and center horizontally is turned on by default, because most websites today are center horizontally in the browser window. You can uncheck this box and your website will then become left align. Meaning, it will just sort of be attached to the life side of your browser. Currently, there is no way to make your website to the right side in the browser, in Muse. So, if you want to do it left, uncheck this box. If not, just check it and it will be it horizontally centered. The last option in this dialogue box is down here at the bottom.
And it refers to resolution. You have the option of choosing standard resolution or high DPI. In parenthesis it has 2X. Let me explain exactly what this means. A few years ago Apple came out with a phone that had, what they called a Retina Display. And since then, everybody has been creating devices and monitors and phones that have this high resolution or quote unquote high DPI screen. Basically, what it means, is that the screen resolution is really, really high.
So much so that you can't see the pixels with your eye. That's why they call it Retina Display. And so basically what you have to do in order to make graphics look good on this is you have to scale them up 200%. So, this is asking you do you want me to create at 2X graphics? Graphics that look good on retina displays. If so choose that, if not, OK. Now, you may see a dialogue box pop up when you do that. That warns you that creating high DPI graphics will increase file size and load times of your website.
That is true. Larger images and things that are at 2X do take up a little bit more space, and they do take a little bit longer to load. But you're trying to deliver a consistent experience across all devices. So my recommendation is to use high DPI when and if you can. Once you have that just hit OK. And now you have created you website. And so now your ready to go in and start planning out all of the different aspects of your website. And if you think of something along the way and you think oh, man I should have change this in the dialog box or something like that.
That's okay. You can always go back and modify the site properties, and that's what I will show you how to do in the next movie.
- Becoming familiar with the Muse interface
- Creating a sitemap
- Setting up master pages
- Working with headers and footers
- Importing and embedding graphics
- Scaling, rotating, and aligning page objects
- Wrapping text around images
- Working with web-safe and Typekit fonts
- Creating links
- Adding menus for navigation
- Inserting an interactive map
- Adding a Facebook Like button
- Building a Business Catalyst form
- Exporting the site to HTML