31

Muse is a WYSIWYG web site editor. It allows you to visually create every page of your web site without knowing or having to know any sort of coding.

Adobe Muse – Design your website from scratch without any Coding knowledge

Adobe Muse LogoWhen it comes to building a web site from scratch, the very idea of having to code, structure and implement HTML, CSS and other factors into a page scares off most trying it for the first time. There are many programs out there that utilize an idea called What You See Is What You Get (WYSIWYG) but even these programs can overwhelm those trying to build a simple web site.

Adobe, a pioneer in making things easier both online and off, is working on a program called Muse. Muse is an all-in-one WYSIWYG web design program that allows you to truly take control of all aspects of designing a web page without learning how to code or how to do it from the ground up.

What is Adobe Muse?

Muse – which is still considered its “code name” by Adobe – is a WYSIWYG web site editor. It allows you to visually create every page of your web site without knowing or having to input any sort of coding.

Adobe breaks down the features of Muse into four categories: Plan your site, design with freedom, add rich interactivity and publish your site.

Plan your site:

Planning your site has three major components: Sitemaps, master pages and site-wide properties.

(8) plan your site

Sitemaps allow you to create a map that will let you change the overall structure of your web site more efficiently. Master pages allows you to set up templates of sorts to keep elements among similar pages in one place. Site-wide properties allows you to set up such factors as page width, margins and alignment across a whole site without having to change these on each page.

Design with freedom:

Design with freedom has 12 major components: Familiar Adobe tools, dynamic page resizing, image optimization, round-trip editing, text and paragraph styles, precise typography, backgrounds, pin to browser, headers and footers, flexible width, asset management and preview your design.

(9) design with freedom 1

Familiar Adobe tools lets someone who has experience with other Adobe products use the same type of tools and functions. This can make it easier to get used to using Muse. Dynamic page resizing makes extending a web page easier and more intuitive than trying to figure it out as you add images, text and more. Image optimization makes PSD and PNG files look the best they can when published. Round-trip editing allows you to edit images in Adobe programs such as Photoshop and see instant updates in Muse.

(10) design with freedom 2

Text and paragraph styles allow you to save CSS-based properties without knowing a clue about CSS. Precise typography makes sure you are using web-based fonts so there is no issue displaying text when published. Backgrounds are optimized just like images and allow you to easily create dynamic ones that showcase what your web site is all about. Pin to browser allows you to pin an object to a page to make sure it is always visible no matter where you scroll on a web page.

(11) design with freedom 3

Headers and footers allow you to save display information at the top and bottom of a page across multiple pages in a given site. It will also make sure the footer shifts properly every time you add content. Flexible width allows you to create pages that adapt to what a person’s screen width is when browsing.

Asset management keeps track of images across your site and allows you an easier way to link to one at a moment’s notice. Preview your design gives you the chance to see what your web site looks like before it is published.

Add rich interactivity to your website:

Add rich interactivity has eight major components: Auto-generated navigation, defined object states, embedded HTML, anchor links, slideshows, tabbed and accordion panels, light boxes and trigger and target.

(12) add rich interactivity

Auto-generated navigation allows you to create drag and drop-style menus as you change pages in your sitemap. Defined object states give you more control over the objects you import into a web site. Embedded HTML allows you take coding from Google Maps, YouTube and other sites and put them on your web sites seamlessly.

Anchor links are an important part of web page navigation and Muse makes it simple to set them up, edit them and see just how your visitors are bouncing around a single page.

(13) add rich interactivity 2

Slideshows give you the power to create one right within Muse itself. You can drag and drop pictures into a widget to create one in no time for display on a web page. Tabbed and accordion panels allow you to create a more visually appealing experience for readers who are engaging a lot of text on a particular page.

Light boxes let you highlight images by drawing focus to them. Trigger and target allows you to create areas on a page when a user rolls over them that will display more information.

Publish your site:

Publishing your website involves four major components: Trial sites for testing, Adobe hosting, browser compatibility and export to a provider.

(13) publish your site

Trial sites for hosting allows you to create a temporary web site on Adobe’s server to see what it looks like live. Adobe hosting offers you a chance to host your site through their company for a more long-term solution.

Browser compatibility lets you test out your web site and see how it works for different browsers people may use to visit your content. Export to a provider allows you to use FTP uploading to get your web site on the Internet through a third party provider.

How to get Adobe Muse

Muse is currently free until version 1.0 is released. Adobe anticipates that release to be in the Spring of 2012. Adobe wants to roll out a subscription service for Muse which would cost users approximately $180 US a year ($15 a month) or $20 US a month. While this could change by the time the software actually launches, you are not losing out on anything by trying Muse now.

If you are interested in trying Muse for free, you should to visit Adobe’s website. Once you’re there, click on the “Get Muse” button.

(2) install

Adobe’s AIR installation pop-up will greet you. Click on “Open” to begin the installation from here.

(3) install

You will be asked to make sure you want to install Muse on your computer. If you are sure, click “Install” to continue.

(4) install 2

Now, you want to choose a destination for the install along with whether you want a shortcut on your desktop. Otherwise, Muse will install a shortcut in your Start Menu for you. Click “Continue” once you have selected your options.

(5) install 3

Muse will then begin installing on your computer.

(6) install 4

Once finished, Adobe’s installation service will let you know. Click “Finish” to close the window.

(7) install

You have now successfully installed Adobe Muse on your computer and can begin using it.

When you open it for the first time, you will need to register yourself with Adobe. Make sure to read through the terms and conditions of use. This is beta software. That means that glitches, bugs and other errors can occur because it is not finished software. By agreeing to use it in this state, you cannot blame Adobe if anything goes wrong when building your web site.

(14) start using muse

Once registered, you will be welcomed into Adobe Muse. You can work on web sites, edit them and do just about anything you want to start creating your own place on the Internet.

(15) create new site

The pros of Adobe Muse:

  • Adobe offers a comprehensives help and tutorial service for those wanting to learn how to use Muse.
  • Additional tools for building your web site are built-in and free to use.
  • Everything you could ever want to do with a web site is integrated into how you design it.

The cons of Adobe Muse:

  • Can be overwhelming the first time you open it and take a look around.
  • Still in beta testing which means bugs can cause a less than desirable experience when building sites.
  • If you do not know how to use site maps, creating your first site can be frustrating to get the hang of.

My first impressions of Adobe Muse

I know that Adobe Muse and I just met, but it was love at first sight. I am a diehard Macromedia Dreamweaver fan and for years have used the functionality it offered to create various web sites. In the new world of the Internet, where web site design, compatibility and the growing changes HTML5 present, I have been looking for something in a WYSIWYG web site editor that brings together everything a web site should have now and make it easy to duplicate.

Adobe Muse, I believe, just may be that tool. Stay tuned to TechNorms for Muse updates along with a walkthrough to create your first web site with Adobe’s latest project.

You can download Adobe muse here.