Building A One Page Small Business Website With Adobe Muse

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.
      Download Images
    • 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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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’.
Preparing Work Space And Setting Up The 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.)
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.)
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Preparing Work Space And Setting Up The Header
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.
Establishing Slideshow
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.
Establishing Slideshow
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’.
Establishing Slideshow
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.
Establishing Slideshow
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.
Creating ‘Services’ Section
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).
Creating ‘Services’ Section
37. Move the text box to left side of the canvas as shown below.
Creating ‘Services’ Section
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.
Creating ‘Services’ Section
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.
Creating ‘Services’ Section
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.
Creating ‘Services’ Section
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.

Post a Comment

0 Comments