Getting started with Muse is easier than it looks. However, when you open the application for the first time, you may find it slightly unfamiliar. But be patient, after a day or two you will be surprised to find that it is actually pretty simple. For those of us who have used Photoshop or Illustrator, it will be even easier; the workspace in Muse is very similar to other Adobe's applications. Having said that, doing some simple things in Muse can be somewhat tricky for beginners.
We have ten tips and tricks to help beginners get started with their projects.
1. Breakpoints
You may have heard of ‘responsive design’ and making your website work for as many devices as possible. Some people try to embrace this idea by creating sites with 10+ breakpoints. However, as the saying goes, less is more.
You can have as many breakpoints as you want, however, having more than four breakpoints will make it difficault for you to maintain your projects. A fully responsive site can be achieved with a maxiumu of four breakpoints.
Do not be obsessed with the idea of "default breakpoints", Muse has a visually manageable breakpoint system, so just follow these steps:
- Design your website, and forget about the smaller devices, focus on the larger breakpoint (ignore what developers say about "starting from the smaller one", we are Muse designers).
- When you are done with the larger breakpoint, make sure that you have as many fluid objects as possible (objects with responsive width), so they can resize proportionally regardless of the breakpoint size.
- Grab the breakpoint handle in Muse (at the right side of the canvas) and resize it down slowly. At any point, if you feel the layout looks bad, or if the responsive content is squished, then place a new breakpoint and rearrange the objects.
2. Master Pages
Anything on a master page will show up on any page that the master is applied to. Master pages are great for placing things you want on every page (such as menus or footers). You can also set page/browser fills on the master page to apply it to your site.
By default, when you create a new page, the master page will be applied to it. You can create multiple master pages and apply master pages to each other. You can apply a master page to a page by dragging the master onto the page. To remove a master page from a page you can right-click on the page, go to 'master', and select 'no master'.
Tip
You can combine master pages, all you need to do is to assign one master page to another master page. It's useful when, for example, you want to have multiple colors of master pages, but still have some elements remain consistent on all of them.
Do not combine master pages on more than two levels, in other words, do not assign a master page to a second master page, and the second to the third. Two levels of combining is good but more than that can cause you trouble.
3. Resize panel
When you select an object, you can access the resize option. There are four resize options:
None: Object size remains the same and doesn’t change at all. If you want your object to stay on the page, you need to make sure your object is smaller than the next smallest breakpoint. For example, the purple object will start getting cut off because it is larger than 960px.
Responsive Width: Object width changes relative to the browser width.
Responsive Width + Height: Object width and height changes relative to browser width.
Stretch To Browser Width: Object is stretched to browser width. Height is not affected.
Note: Responsive width + height can cause issues with the positioning of text boxes and other objects. Use this resize option carefully.
4. Rectangle Tool
This is a super versatile tool. You can use it to create background fills. You can use it with the rounded corner radius feature to create circles and rounded rectangles. It’s more convenient to use the rectangle tool to create circles/rounded rectangles because it’s super easy to change the object into a different shape.
The rectangle tool is also great for images. While you can place images directly with the image frame tool, I prefer to use the rectangle tool because it’s much more flexible than the image frame tool. There's more resize options and it’s easier to change the size of the object. To use the rectangle tool for images you just have to draw a rectangle and add your image as a background fill.
5. Creating Perfect Buttons
It’s very simple and easy to create your own buttons with the Text tool. Just create a text box, set the alignment in the Text Panel, and then set the spacing in the Spacing Panel. Add a color through the Fill Panel.
Here’s an example of a button and it's settings:
Or, create buttons with State Buttons. State Buttons are simple containers that can hold both text and images. You can freely move the text and images around in the State Buttons. They can be found through the Widgets Library panel under Buttons.
Tip
The Spacing values cannot be changed on each breakpoint separately, so as soon as you change them on a breakpoint it changes on all breakpoints, but we can use the Leading (line height) value instead:
- Create the text box.
- Align the text to the center.
- Use the line-height value to control the height.
By using the line-height value in Muse, the text always stays at the center of its container, and the value can be changed separately on each breakpoint so we will be able to control it on each breakpoint separately.
6. Adding Links
To add links, select an object, go to ‘hyperlinks’, and click on ‘add or filter links’.
You have the option of choosing a page within your Muse file, or you can type the full URL that you want to link to (http://www.link.com)
You can also link to specific parts of a page by using Anchors. First, click on the anchor icon or hit ‘a’ on your keyboard. Name the anchor. Now, the anchor name will show up in the hyperlinks dropdown.
7. Typekit & Text Formatting
When using Muse, you may notice that there are three different kinds of fonts: web fonts, standard fonts, and system fonts.
- Web fonts are ready for use on the web. There’s an endless variety of them and they are accessible to everyone who visits your site. You can use Typekit, Edge, or self-host your own web fonts.
- Standard fonts also work on all devices. However, you’re limited to a much smaller set of fonts, maybe 20 at most, so standard fonts place a lot of restricts on your design.
- System fonts are fonts that you have installed on your personal computer. If you use system fonts they will be published as images, instead of text. This is bad for SEO purposes and for the web. This means that you’ll rank low on search engines (like google) because they can’t read your text (since it’s an image). In summary, don’t use system fonts.
It’s best to use web fonts. A popular method is Typekit, which is included with your Creative Cloud subscription. It gives you access to thousands of premium fonts. The Typekit library can be accessed from within Muse.
Adding fonts from Typekit is simple. Go to File > Add/Remove Web Fonts… and then in Typekit, you can search and browse fonts. Click on the font(s) that you want and a checkbox will appear. Click ok, and then the fonts will be added to your library. Alternatively, you can go here and look at all the Typekit fonts in your browser.
In addition to the Text Panel, you can edit how your text is formatted. You choose to format your text the same way across all breakpoints or you can choose to format your text on just the current selected breakpoint so that you can make your text look great on all breakpoints.
8. Vertical Move Handle
The vertical move-handle is a useful tool that allows you to quickly push objects down a page by simply dragging the handle.
This is great for when you want to add space to fit additional content in the middle or top of your page. The handle will show up on the left side of your page when you click on an object.
9. Pinning
The pinning tool allows you to control the position of your objects so that they can be in the right place for every breakpoint. There’s two kinds of pinning: pin to browser and pin to the page.
Pin to browser allows you to pin an object relative to the edge of your browser. Objects pinned to the browser will always be showing on your page even if you scroll down the page. Pin to the browser should only be used on objects that you want to always be showing.
Pin to page allows you to pin an object relative to the left, center, or right of your page. Now you may be wondering, how do I decide how to pin an object? There are no set guidelines for pinning, it is mostly trial and error. You’ll find that some objects don’t need to be pinned at all. Just try different things and preview your page in browser to see if it’s working the way that you want it to.
10. Preview Page In Browser
Now, the best way to see how your page looks is to preview it in the browser. There’s a preview button at the top right but it’s not as accurate as previewing your page in the browser. You can access the ‘Preview Page In Browser’ feature by going to File > Preview Page In Browser or you can hit CMD + Shift + E (CTRL + Shift E for windows) on your keyboard.
You should use this feature frequently to make sure your site looks and acts the way that you want it to. To see how your page looks on specific breakpoints, change the size of your browser to the desired breakpoint width and then refresh the page (or preview it again). Simply resizing the browser width doesn’t give you the most accurate preview of your page.
This list isn’t comprehensive by any means but hopefully, you learned a new trick or two that will help you spend less time being confused by Muse and more time designing great websites in Muse.
