Adobe Muse is a powerful tool which has made web designing surprisingly easier and interesting. Easier in terms of no code requirement to create professional websites and interesting in terms of full control over the design unlike other drag and drop applications.
One of the most impressive features of this WYSIWYG application (What You See Is What You Get) is that it provides an appropriate work flow for assisting the designer in step by step development of the website.
After you finish this tutorial, you will:
Have clear understanding of every technical and design aspect of Muse.
Know how to design professionally in less time.
Know about some free resources where you can find stunning graphics for your website.
Create a fully-functioning one page website in no time.
Requirements Of This Tutorial
You will need to download certain images, vectors and fonts in order to create this site. But you can still follow along without these assets. For organizing the content properly, make a separate folder for your site.
Go to pexels.com and download:
4 images of size 1160 x 480 for slideshow. Here’s a screenshot from pexels. You can put this size in the ‘custom size’ box on this website.
6 images of size 271 x 208 for ‘services’ section.
1 image of size 1160 x 692 for ‘Contact Us’ section.
Go to freepik.com and download:
One cross icon (you can edit this icon in illustrator or just download the png file from feepik).
6 face images for ‘Testimonials’ section.
Go to subtlepatterns.com and download ‘brickwall’ pattern for ‘Testimonials’ section.
As you’ll proceed with this tutorial, I will tell you how to download the required fonts (it can be done inside Muse).
Use the dummy text from lipsum.com.
LET’S GET STARTED!
Preparing Work Space And Setting Up The Header
1. Create a new site by going to File > New Site (Ctrl+N) and put the values as shown below. Don’t forget to check the check-box that says ‘Sticky Footer’. Click OK and you’ll have the PLAN mode. Double click A-Master located at the bottom in a grey area. You will create everything on this master page.
2. Choose text tool from the tool box located at left hand side of the application window. Click and drag on the canvas or page to make a text box. Go to text panel (Ctrl+T), under fonts dropdown, look for Web Fonts and choose ‘Add web fonts’ and download the following fonts:
Rammetto One
Chunk
Questrial
Raleway
Nobile
PT Sans
Ubuntu
Lobster
After downloading these fonts, delete this text box.
3. Go to Layers panel located at right hand side of the application window. If it is not there, go to Window menu > Layers. You’ll see there a layer named Layer 1 (blue color). This is the default layer and everything you create or place on the canvas goes in there. Double click this layer and name it as ‘Header’.
4. Inside layers panel, click the little folded edge paper icon located at bottom right corner. Clicking this will create a new layer with red color. Again, double click this layer and rename it to ‘Content’.
5. Click and drag this content layer and place it below the header layer. We have done this because we want our header to be at top of everything.
6. Select header layer and collapse the layers panel.
7. Select rectangle tool from the tool box or hit ‘m’ on the keyboard.
8. Draw a small rectangle on the canvas and make sure that its border color is blue which indicates that this object is inside header layer.
9. Go to Transform panel located at top right hand side of the application window. Leave width (W) and put 50 inside height (H) field and press enter. (Don’t worry about X and Y values.)
10. At the top of page, you’ll see two lines of blue color (shown in screenshot below). These are called ‘guides’. When you hover over the first guide, it says ‘Top of page, drag to adjust padding above page’ and the other one says ‘Header, drag to adjust position’. Setting up these guides in the very beginning is very important.
11. Now, as we have created a rectangle of H=50, click, hold and drag the ‘top of page’ guide until the box that will appear below once you start dragging will say Y=50.
12. Similarly, drag the header guide above to the top of page guide until it says Y=0. We have done this to set up our header area. (You might want to experiment with placing these guides at different positions for different results, but it is good for now.)
13. Select the rectangle that we just created, drag it to the header area so that it fits properly.
14. Now, we have to increase the width of rectangle and make it 100% so that the header will look perfect on every screen size. Expand the rectangle to both the edges and make sure it snaps with the edges. An orange guide will appear which ensures that the object has been snapped. As you increase the width of rectangle, the pop-up will say W=100% or W=1160 when you’ll reach the edge.
15. Keep the rectangle selected, click the word Fill underneath the application menu and set the options as follows. Choose the first color as Black and second color: R=37, G=37, B=37.
16. Go to File > Save site. Save your site every time you make a change.
17. Create a text box and type in – ‘example.com’ and change it’s formatting as shown below.
18. Adjust the size of text box so that the whole text appears in one line. Select this text box and drag it over the black rectangle. Align it to the vertical center of the rectangle (a blue line will tell you when it is centered) and snap it to the left border as shown below.
19. Create a text box and type in – ‘Home’. Change its formatting as follows. Adjust text box’s width and height accordingly. You can do this from transform panel also. Mine is W=52, H=17.
20. Copy and paste this text box and type ‘Services’ in the new one. Adjust the width. Drag and place this text box next to home with a very less difference between the two. Again, the guides will help you in proper alignment.
21. Copy and paste this text box for four times more and type – Why Us, Testimonials, Contact Us and Newsletter. Place these text boxes one by one at equal spacing next to ‘services’.
22. With selection tool selected and shift key pressed, select all these text boxes one by one. Go to text panel, change the color to white. Pick the group of these boxes and place it over the header rectangle. (Vertically centered and aligned with right side page border). This is our Menu.
23. Again, with selection tool selected and shift key pressed, select these text boxes, the rectangle and example.com text box. At top right hand side, you’ll see an option called Pin. Click its top center box to pin these items. This means, when the user will scroll through your site, this header will stay fixed at the top. It is very useful as the user will not have to scroll all the way up just to choose another option.
24. Go to Layers panel and lock the header layer. This can be done by clicking inside the box to the left of layer name. When you lock a layer or any object, it will not affect its appearance but you’ll not be able to select these items unless you unlock. We have done this in order to completely eliminate the chances of accidentally moving the items.
25. Select content layer and collapse the layers panel.
Establishing Slideshow
26. Go to widgets library located at right hand side of the application window. If it is not there, go to Window menu > choose Widgets library. Expand ‘slideshows’ section and select ‘Blank’. Click and drag this object onto the canvas. A black window with slideshow options will pop up.
27. Make sure the options are set as shown in the image below. Under parts section at the bottom, uncheck the check-boxes that say Prev, Next, Captions and Counter. We don’t need any of these.
28. Click anywhere on the canvas to make this pop-up disappear. Now, carefully click inside the slideshow. By clicking it once, you’ll see that ‘Slideshow’ has been written in the ‘the type of current selection area’. It is located at top left corner underneath the application menu. This area allows you to see what you have selected. It is a very useful feature when the layout gets complicated. Click again and you’ll notice that the description says ‘Hero Image’.
29. Increase the width of hero image manually by expanding it from the middle. Snap it to both the edges of page (to make it of 100% width) and to the bottom of header rectangle as shown below.
30. Go to transform panel and put H=500.
31. Open the slideshow options again by clicking the small blue circle with white rectangle inside it (it is located at top right corner of the slideshow).
32. Click the folder icon next to ‘Add Images…’ option, browse for the images that we downloaded for slideshow. Select all four and click open.
33. Go to File > choose ‘Preview page in browser’ or Ctrl+Shift+E and see how your slideshow will work once the site is live. I recommend you to memorize the keyboard shortcuts I am using in this tutorial. Doing this will help you speed-up your design process.
Creating ‘Services’ Section
34. Now that we have set up our header and slideshow, its time to create sections for every item that we added to our menu. Let’s get started with ‘services’. Create a text box and type services in it (all letters small) and change it’s formatting as follows.
35. Double click inside this text box and select just the letter ‘I’. Change its font to ‘Chunk’ and leave everything the same. Adjust the height of this text box. When you’ll decrease its height, a dashed line will appear at a certain point and the box will not get shorter. Do not reduce the size after that. This is the lowest height possible with this font size.
36. With the text box selected, go to transform panel and set the rotation angle to -90 degrees (90 degrees negative).
37. Move the text box to left side of the canvas as shown below.
38. You might want to zoom out a little to see all the content at once or to adjust the objects properly. To do this, try typing different values (less than 100%) in zoom level section at the top. After typing the value, press enter.
39. Go to File > choose ‘Place’. Select the first image that we downloaded for our services section. Click open.
40. The cursor will change its appearance to a place gun loaded with an image. Click on the canvas to place it. Move and place it so that it aligns with the top of ‘services’ text box.
41. Copy this image and paste it twice. Select these pasted images one by one and align them at equal spacing with the first image.
42. Select the second image, right click it and choose ‘replace image’ (it’s the last option). Browse for second image and click open. Replace the third image also.
43. Create text boxes for the information about services and apply formatting for headings and paragraphs as written below. The guides will help you to align them properly.
For Headings: Font: Raleway Bold, Size=20, Color: Black, Left aligned and 100% leading.
For Paragraphs: Font: Questrial, Size=15, Color: R=67 G=67 B=67, Left aligned and 120% leading.
44. Place three more images as we did in previous steps and similarly create description text for them. You should have the following result.
Final Result of ‘Services’ Section
Creating ‘Why Us’ Section
45. Next is ‘Why Us’ section. This one is a little complicated. Be careful in selecting the objects. Firstly, create a rectangle of 100% width and H=996. Fill it with a color (R=47, G=48, B=55). Right click this rectangle > Arrange > choose ‘send to back’ (not send backward).
46. Expand your working area by clicking and dragging the ‘bottom of page’ guide so that you’ll have enough space to create content that will be put on this rectangle we just created.
47. Scroll down to white empty space and make another rectangle of W=351 and H=351. Fill it with white color and no stroke.
48. Go to ‘corner radius’ option (it is located next to stroke underneath application menu). Click all the corners to make them round and put 500 in the box next to it.
49. You’ll have a circle. Drag this circle onto the rectangle and adjust it as follows. Next to corner radius, there is an option called ‘Opacity’. With the circle selected, put 14 in this box.
50. Create a text box and type in – why us (all small). Change its font to Rammetto One, size=100, Color R=241 G=244 B=247, leading 100% and make it center aligned. Put this text box inside the circle and align it properly.
51. Now we will create the dashed lines. Make a rectangle of W=9 and H=9, no fill. Click the word ‘stroke’ next to fill. Choose color R=241 G=244 B=247. Click the chain icon to break it and put ‘1’ in bottom stroke weight.
52. Copy this one side stroke rectangle and paste it a multiple times. Arrange them in one line (zoom in a little with the zoom tool if you are finding it hard to see these rectangles). Once you get the desired length of your dashed line, select all these rectangles, right click and choose ‘Group’. Copy and paste this group for other dashed lines.
53. For inclined dashed lines, try putting different rotation angles in transform panel. I have used 150 and 30 degrees. You will have to delete some rectangles from this group in order to have shorter lengths. Adjust these lines near the circle as shown below.
54. Now we’ll add some more text for numbers, headings and descriptions. Use the following settings for each one of them and adjust these text boxes as shown below.
For Numbers: Font=Rammetto One, Color: R=196 G=214 B=193, center aligned and 100% leading, size: 200 (for number ‘1’), 160 (for numbers ‘2’ and ‘3’) and 120 (for numbers ‘4’ and ‘5’).
For Headings: Font=Raleway Bold, Size=18, Color:White, Center aligned and 100% leading.
For Paragraphs: Font=Questrial, Size=16, Color: R=241 G=244 B=247, Center aligned and 120% leading.
Final Result of ‘Why Us’ Section
Creating ‘Testimonials’ Section
55. Again, create some space to work by dragging down bottom of page guide. Make a rectangle of 100% width and H=486.
56. With the rectangle selected, click the word ‘Fill’ and click ‘Add image’ next to image option. Browse for brickwall pattern image that we downloaded. Under Fitting option, choose ‘Tile’ to fill the entire rectangle with this texture.
57. Scroll down to empty space and make a text box of size W=406, H=289 with the help of transform panel. Type in – ‘what others have to say’ (all small). Change its font to Rammetto One, size=70, make it left aligned, color values R=37 G=37 B=37 and leading=100%.
58. With this text box selected, click the word stroke, apply right stroke of weight one and of black color to it. Drag this text box and put it over the rectangle with brickwall pattern.
59. Next step is to add testimonials of customers. For this, we’ll use the round face vector images we downloaded from freepik.com. Again, come down to white empty space so that you can customize your composition properly.
60. Go to Widgets library and drag ‘Blank’ from compositions section onto the canvas. Click the plus sign to add three more triggers. Carefully select the first trigger and ensure your selection with the help of current selection area that says trigger. And right next to it, there is an option called ‘Active’. Click this to expand. Select ‘Normal’ state and choose ‘no fill’ and ‘no stroke’ for this state. Repeat this for every state that is Rollover, Mouse Down and Active. Go to transform panel with the first trigger selected and put W=10, H=10.
61. Repeat the previous step for every trigger we have. This means, apply no fill and no stroke for each state and transform the triggers to 10 x 10 size. Move the triggers closer to each other.
62. Now. We’ll customize the targets for each of these triggers. The large rectangle you are seeing is the target. Select first trigger and select its normal state from states panel. After that, select the target for this trigger and apply no fill and no stroke for every state. Then go to transform panel and make the target of W=360, H=370.
63. Repeat the previous step for every target. Just make sure that you first select the trigger, make it to normal state, then select the respective target with normal state and then apply no fill and no stroke. You will not need to change the size of every target. Just do it for one and it will be applied to all.
64. Now, we’ll start adding content to this composition. Go to File > Place and open first face image and place it outside the composition. Drag this image and put it inside the composition now. You’ll see that a blue circle will appear at its top right corner which indicates that this image is now a part of composition.
65. Create three text boxes – one for person’s name, one for his/her designation and one for the statement or review. Apply the formatting as written below and put these text boxes inside the composition. Just make sure each one of them has a blue circle at the corner.
For Person’s Name: Font: Nobile Medium Italic, size=18, Color: R=37 G=37 B=37, center aligned and 100% leading.
For Designation: Font: Nobile, size=15, Color: R=37 G=37 B=37, center aligned and 100% leading.
For Statements(with inverted commas): Font: PT Sans Italic, size=18, color: R=69 G=64 B=68, center aligned and 100% leading.
66. With the face image selected, apply stroke of weight 4 on each side, color : white, round all the corners and increase the radius until it wraps around the image. I have use 100 as corner radii.
67. Go to ‘Effects’ (located next to rounder corners option) and check ‘shadow’ check-box. Put the values as; Color=Black, Opacity=37%, Blur=12, Angle=78 and Distance=5.
68. Repeat the previous steps (from 64 to 67) for adding content to every target and save the changes (Ctrl+S). Put this composition over the rectangle with brickwall pattern.
69. Now, select the whole composition (make sure with current selection area) and expand its options by clicking the little blue circle. Set the options as shown below. Hit Ctrl+Shift+E and see whether it is working fine.
70. You should have the following result.
Final Result of ‘Testimonials’ Section
Creating ‘Contact Us’ Section
71. Next section is Contact us. We’ll add a background image, a form and some text boxes in this section. Firstly, make a rectangle of 100% width and H=692. Fill it with an image that we downloaded for this section and choose ‘scale to fill’ under Fitting. Change its opacity to 72%.
72. Make another rectangle of same width and height and fill it with a gradient. Put the gradient values as; Opacity=90% to 46%, Color: Black to R=69 G=64 B=68, Focal Point=66%, Direction: Horizontal and Size: automatic. Put this rectangle over the image and make sure it snaps with every edge.
73. Go to widgets library. Under forms, select ‘simple contact’ and drag it on the canvas. A window with form options will pop up. Put Form name: Contact Us Form, Email to: put your email address in which you want to receive information entered by the visitors, After sending: select ‘stay on current page’. The last option is ‘Edit together’. Make sure it is checked. This way you will have to make changes just to one field and they will be applied to all. Click anywhere on the canvas to make the options box disappear.
74. Select the form. Click the label ‘Name’ and click it again until you see ‘Label’ written in current selection area. Hit delete. Repeat this for email and message labels and delete them.
75. Select the form again and select first form field that says ‘Enter Name’ until you see ‘Text input’ in current selection area. Apply no fill and bottom stroke (weight one and color white) for each state that is, from Empty to Focus. For the error state, select no fill and bottom stroke of red color with weight 1.
76. After that, with email field selected > choose its empty state again and customize the text font and color for each state as written below.
For empty, non empty and focus state: Font: Questrial, size=14, color: white, left aligned, 100% leading and no italics.
For rollover state: just change the text color to R=196 G=196 B=196 and no italics.
For error state: change the text color to red and no italics.
77. Click and select Submit button. Choose its normal state, round all the corners with 40 radii and increase its width as shown in the screenshot below. Change its font to Raleway Bold, size=20, center aligned, color: R=241 G=244 B=247, leading: adjust the text ‘submit’ in the center of button by increasing this value (I have used 130%).
78. For its rollover and mouse down states, change the stroke color and text color to grey (R=127 G=127 B=127). Finally, for its ‘submit in progress’ state, change stroke and text color to sky blue (R=41 G=171 B=226).
79. When you select ‘submit in progress’ state for this submit button, you’ll see that there is another text box that says ‘submitting form…’. Select this box and choose its ‘submit in progress’ state. Change the font to Questrial, size=14, color: grey, center aligned and no italic. Choose its ‘submit success’ state and change the text color to sky blue (no italic). Choose its ‘submit error’ state and change the text color to red (no italic). The contact form is ready.
80. Make two text boxes. Type in – contact us and in its second line, type ‘all fields are required’. For contact us text, use the font: Rammetto One, size=60, color: R=241 G=244 B=247, leading=100% and left aligned. For ‘all fields are required’ text, use the font: Nobile italic, size=26, color: R=241 G=244 B=247, leading=100% and left aligned. For this text box, apply bottom stroke of weight 1 and color white.
81. Type some paragraph in the second text box that we created. Use font: PT Sans Italic, size=14, color: R=241 G=244 B=247, leading=120%, left aligned and space before=15.
82. Put these text boxes and the form on the image that we placed. Adjust them as follows.
83. Create one more text box for some contact information like office address, email and phone numbers. Put this text box on the image. You should have the following result.
Final Result of ‘Contact Us’ Section
Creating Footer
84. The last section is footer. There are three guides at the bottom namely – bottom of page, footer and bottom of browser. What you have to do now is to make sure that ‘bottom of page’ guide snaps with the bottom of contact us section and the ‘footer’ guide coincides with ‘bottom of page’ guide. After that, you can drag ‘bottom of browser’ guide down to adjust the space you require for the footer.
85. Create two rectangles of 100% width and H=168 for the first one and H=37 for the other. Change the fill color of large rectangle to white and use R=47, G=48, B=55 for shorter one.
86. Select the first rectangle and try placing it in the footer area. It will not go there. Instead, the bottom of page guide will start expanding downwards. To make this rectangle a footer item, check the ‘Footer’ check-box located at top right area of application window. Do it for second rectangle also.
87. Now place these rectangles in the footer area and make sure that the large rectangle is slightly above the footer guide. Bottom of colored rectangle must snap with the bottom of browser guide. Otherwise you’ll see a little white gap after the footer which does not look nice.
88. Create text boxes for footer and type in whatever you want. Just check the ‘footer’ check-box for the text boxes you’ll add. I have added some text containing Disclaimer and copyright information.
89. The ‘Made with Adobe Muse CC’ badge can be added from widgets library under social section. You can also add links to your facebook page, twitter, google+, LinkedIn, Pinterest, YouTube channel or vimeo link.
90. The copyright symbol and many other symbols that you see next to All rights reserved text can be added from ‘Glyphs’ panel located at right hand side of application window. If its not there, go to Window menu > choose Glyphs.
Creating ‘Newsletter’ Section
91. Till now, we have designed sections for all menu items but one and that is ‘Newsletter’. Let’s do something interesting with it. Remember the cross symbol we downloaded, it will be used here (its okay if you’ve not downloaded it, you can still follow along). Firstly, select the Newsletter text box and note down its width and height from transform panel. Mine is 81 x 17.
92. Now, open widgets library and drag ‘Lightbox Display’ from compositions section. Delete first two triggers(located at top) and delete all the captions(located at bottom). Make the size of third trigger same as Newsletter text box that is 81 x 17. Change its fill and stroke to none for all states.
93. Drag newsletter text box and put it inside this trigger in such a way that all the edges of text box coincide with edges of trigger. Now drag this group and put it again in the menu where it was placed previously. What we have done is that we have applied a link to Newsletter text box. When the user will click it, the website will fade out and the target will appear.
94. Next step is to customize our target. Select the grey area and ensure that current selection area says ‘Target’. You will have to click three times to select it. Change the fill and stroke to none for all its states.
95. Add two text boxes and simple contact form (delete its name and message fields and keep the email field only). Drag them inside this composition and make sure all of them have blue circle at their corners.
96. Customize the form as we did in the contact us section. You should have the following result. For ‘Stay in touch’ text field, use font: Lobster, size=40, color:white, center aligned and 100% leading. For description text below it, use font: Ubuntu Light Italic, size=14, color: white, center aligned and 120% leading. Change submit button text to ‘Subscribe’.
97. Now select the close button, move it and place at top right corner of this lightbox display as shown below. Click inside it until you see ‘Label’ written in current selection area. Delete the label.
98. Change fill and stroke of this close button to none for all the states and make its W=40 and H=40. Go to Fill > add image and browse for the cross image. Choose ‘scale to fit’ under fitting option.
99. Click Newsletter and you’ll see a blue circle at its corner. Click it and make sure the options are set as follows.
Final Result of ‘Newsletter’ Section
Creating Hyperlinks
100. The final task left is to apply links to each section. To do this, choose the ‘link anchor’ option located at the top middle area or press the letter ‘a’ on your keyboard. You’ll see that the cursor changes its appearance to a place gun loaded with a link anchor.
101. When you click on canvas to place this, a dialogue box will pop up which allows you to rename an anchor.
102. Create link anchors for every section we have designed, that is, Home, Services, Why Us, Testimonials and Contact Us. Place the anchors at top of every section. Home anchor is shown below as an example. Placing these anchors is an important step and should be done carefully. When the user will click a particular link, the website will scroll to the position where anchor has been placed.
103. Now we’ll apply the links. To do this, select ‘Home’ text box. Go to ‘Hyperlinks’ option (located at the top), click the little down arrow to expand the list. Here you can see all the anchors that we just placed. Link it to ‘Home’ anchor. Repeat this step for other text boxes except Newsletter as we have applied a lightbox display to it.
Final Result after Creating Hyperlinks
Final Touches – Changing Page Properties And Adding Favicon
104. Inside Plan Mode, right click the home page and choose ‘Page Properties. A dialogue box will pop up. Choose ‘Options’ tab and under page name, put – ‘Welcome to example.com’ and click OK. This is the text that’ll appear at the top of browser window.
105. Go to File > Site properties. Under Layout tab, the last option is ‘Favicon’. When you hover over it, a pop up will appear describing what a favicon is and what the optimal size should be. It is good to add a favicon as it helps in making your brand stand out and also serves the purpose of helping the users to easily identify your site if they have bookmarked it.
Testing And Exporting
106. Test your site by going to File > Preview site in browser or Ctrl+Alt+E. Don’t choose ‘Preview page in browser’ this time as the links do not work in page preview. You might want to try placing the anchors at different spots in order to ensure that when the user will click a link, the site will scroll to the right section and right position.
107. At last, go to File > Export as HTML (Ctrl+E). Under site URL, put any name like ‘example.com’ and choose the location. Click OK. The website is ready.
Final Result Of Each Page
Front Page
‘Services’ Section
‘Why Us’ Section
‘Testimonials’ Section
‘Contact Us’ Section
Footer Section
‘Newsletter’ Section
CONCLUSION
I am sure that you have got everything I promised you will after following this tutorial. This is just an example. Play around a little with this awesome tool and design stunning and professional websites while exploring endless creative possibilities on the way. Thank you.
Visit us at InstantShift.com