All Articles Adobe
How to Create a Website With No Code Using Adobe Muse
Tareq Fadel on Sun, April 21st 3 comments
If you want to create a website, you MUST know how to code. Well, while the knoweldge is priceless, this isn't strictly true as Tareq fadel discovers when using Adobe Muse.

Adobe Muse is a great addition to Adobe’s Creative Suite. Adobe Muse is part of the Creative Cloud and can be obtained as part of the Creative Suite Cloud subscription, or you can subscribe to Adobe Muse independently. Alternatively, if you’d like to follow along to this tutorial and you don’t have a copy of Adobe Muse, you can download a trial from Adobe’s website.

If you’re a print designer or new to design altogether, then this tool is a great way to get you building websites quickly and with little fuss. It shares a lot of the features from other Adobe packages and it’s closest to Adobe InDesign. So if you’ve used InDesign in the past you’re half way there with knowing the software. The advantage of using Muse over other web authoring software is that there is no code to learn or write. The software takes care of it for you and implements and designs the site using a graphical user interface. Also a lot of the interactivity is taken care of by something called widgets which we’ll look at in greater detail later on.

In this tutorial, I’l show you how to plan, design, preview then publish your site to the web. We’ll look at creating a simpler version of the macProVideo site. 


1. New Site

When you launch the software for the first time after installation, you will be introduced with a welcome screen. The welcome screen allows you to Create A New Site and open recently opened sites. What we’re going to do is Create a new site.

Welcome screen


You’ll be shown a dialog box with a few settings. 

New site


The new update that Adobe Muse had received allows you to create three design layouts: desktop, tablet and mobile. This allows the designer to create one website that responds to the device that is viewing it. This is referred to as “Responsive Web Design” or RWD. In our tutorial we’ll be looking at creating a Desktop version

Initial layout


Please explore the settings that are there, and we’ll only change one and that’s the Min Height to 600 but keep all others the same and click OK.


2. The Plan

In this section, we plan the number of pages that we have and how they relate to each other. We’ll be designing 8 pages and the tutorial page will have 2 sub-pages, article 1 and article 2. You add pages by clicking on the [+] on the right of the Home page. If you’d like to add sub-pages then these are added on the [+] at the bottom of the page. Go ahead and add the following pages to the right of Home Page: How It Works, Pricing & Plans, Tutorials, Forums, Support and add the sub pages to Tutorials. To name the pages just double-click the names underneath each page.

Plan


You’ll also notice that Muse has added an additional page at the bottom called Master. We’ll be using the Master page to control the default layout for all the pages from here.


3. The Master Page

Double-click the Master Page in Plan View and this takes you into Design View. Here, we’ll add the Header and Footer of the page. Also the menu will go here.

Master


First, we’ll add a black background to the header. Use the Rectangle Tool (m) at the top and click and drag to draw a rectangle the size of the top of the header from edge to edge. Then choose a Fill of Black and Change the stroke to 0.

Import


Next we place an image, go to File->Place... to pick an image which will be the logo of MacProVideo. The file would need to be a web format JPG, PNG or GIF. Resize it using one of the corner handles until it is the desired size on the page and place it top left corner. Next, we’ll make it a link to link to the home page. Select the image and from the application bar choose the drop-down list for Links and choose Home. After that we need to add a menu. On the bottom right, there will be a panel called Widgets Library. Under the category Menu, choose Horizontal and drag and drop it on top of our rectangle. Muse will automatically create a menu depending on the construct of our site from our plan.

Menu


We don’t need the Home in the menu and we’d need to change the colors, position and options of the menu. First, lets remove the Home from the menu. Go back to Plan at the top and right click the Home Page and choose Page Properties... 

Page Properties


Keep all options the same and change Menu Options to Exclude page from menus. Then go back to the A-Master Tab or double-click Master again to take you back to design. On the far left, adjust the Header guide to match the bottom of the black rectangle

Header


4. Footer

Create a text box with the text tool and type (or copy and paste) the text into the box. We then need to format it. To format it, you’ll see a Text option on the top bar or you’ll see an option to change the font, size and color. They’ll also see some paragraph styling options. We’re going to set the text to Helvetica, size 12 and set the Leading to 160%. Select the first line and change it to bold by clicking on the Bold T in the application bar

Font


Press escape and select the text box using the select tool (shortcut V) and in the application bar at the top, make the text box a footer object. Also adjust the footer guide above the text box.

Footer


5. Menu

Resize the menu to fit the width of the page.

Menu adjustment


Next, select one of the boxes in the menu and in the color panel change the color to Orange to match the logo. You can use the color picker on the panel to pick the color from the logo.

Menu color


Select the Label within the menu and change the font at the application bar at the top. Choose Helvetica Size 16.

Menu font


To the right of the menu, you’ll see a blue circle with a white triangle. When you see that it allows you to change the options of the menu. Change the Menu to show All Pages from Menu Type and leave all other options

Menu options


6. Home Page

Go back to plan and double-click the home page. First we’ll place a banner that fits the width of the page. File->Place and insert the image and resize. Next we’ll add 4 summaries to articles with an image and a short description for each. We’ll create one and duplicate. Same as before File->Place an image and resize. Next we’ll add a text box that is roughly the same size as the image and change the size of the first two lines and make them bold.

Home Page Content


Select both the image and the text box and group them using Command-G or Object-G.

Home Page Layout


We’ll copy and paste so that we have another copy and place it to the left of it. Next, select the original group and the copy, and copy both of them. This should give you 4 Picture/Description pairs and place the last 2 beneath them to create a grid.

Group & Duplicate


7. Preview

Next we’ll preview, on the top click on the Preview and this renders the website that we’ve designed so far into a simulated browser. Whilst designing, not only at this stage and on a regular basis, visit the Preview pane to test and preview how your site will look like. To properly test the site, choose File->Test Site in Browser to test the application in your default browser and this is what other users would see.

Preview


8. Upload

There are a couple of ways that you can upload your site when it's finished. The first is to use Adobe Business Catalyst that is included with the Creative Cloud package or host it using your own hosting provider via FTP. The first option, Business Catalyst takes care of all the technical settings and hosting and provides a simple method of uploading and maintaining your existing site. To use Business Catalyst, just click on the publish button and fill in the details that you had registered your Business Catalyst site and the rest is done for you.

Business Catalyst


The other option is FTP which is the popular method as you choose and provide your own hosting. There are thousands of hosting providers and you sign up with a third-party hosting provider and they’ll provide you with the details. Once you have the details you click File->Upload to FTP host... 

Business Catalyst


Fill in the details from your third-party provider and Click OK and the Adobe Muse will upload it to the FTP host.


9. Conclusion

You can see that we managed to create the bulk of the site and we didn’t write a word of code. Adobe Muse takes care of all the technicalities and allows you to concentrate on just the design. We only added content to the home page but once you’ve created the pages in the Plan stage and seen how to design one page (Home Page) then adding the rest of the content is the same. We know that all pages link to each other as we’d tested it in Preview and in the browser. So from Planning to designing to Previewing and publishing our site, we can see that the process is as simple as one-two-three.


Related Videos
Comments (3)

You must be logged in to comment.

  • MoXoM
    Great article! I've been using Muse since it's Beta release and have found it to be a great application and worthy step-up from iWorks. I hope to see more articles soon... I'm currently working on my own personal website at the moment which you can check-out at: www.halabalu.com Site is built entirely from Muse using my own design and I've integrated DISQUS, JotForm, SoundCloud and AddThis. I'd appreciate any feedback.
    • 6 years ago
    • By: MoXoM
    Reply
  • Tareq Fadel
    I'm glad to hear that you found the article useful and great website too. It's good to see that you've integrated other web services into your site.
    • 6 years ago
    • By: Tareq Fadel
    Reply
  • MoXoM
    Thanks for the kind words. Muse really is a great application. Hopefully they'll add more widgets in the future so that we don't have to integrate external services....
    • 6 years ago
    • By: MoXoM
    Reply
Quicklook Guide
HTML & CSS 100
Dream It. Do It.
Do you want to learn Quicklook Guide?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: