Adobe Muse – The Future of Web Design?


Some seem to be pursuing Adobe's new product, codenamed Muse, as the start of a new era in web design. I've been experimenting with Adobe Muse for a couple of weeks now and I must say that I am a little torn between love and hate for the product.

Will you be my Muse? Adobe Muse is touted to be the next big thing in WYSIWYG (what you see is what you get) web design. Basically Muse lets designers who have no interest in working with HTML or CSS code to create interactive fully functionaling websites. The idea is nothing new. Products such as Dreamweaver and Frontpage were supposed to have been doing this for years now, but those implementations never quite got away from exposing the designer to HTML and CSS code. You would get so far into creating a web page with Dreamweaver and then realize that to get the design exactly as you wanted, you would need to switch to code view to tweak the final bits.

Many of the limitations with previous WYSIWYG tools was down to the way that the document's layout engine was implemented. Adobe's Muse steps away from the accepted browser based design view in favor of a pixel based implementation similar to that used by Adobe tools such as InDesign and Photoshop. In fact, you may be forgiven for thinking that you were looking at InDesign when you first see that Adobe Muse workspace. Adobe's aim was to create a tool aimed at designers and it shows – there is no code view!

Adobe Muse is still in beta, so there is likely to be many changes before the scheduled release in early 2012, but there seems to be a focus on keeping the interface very intuitive. When you first open Muse, you have the ability to create a new site or open an existing site. There are no options to specify whether the site uses any server side tech like PHP, .NET or even databases. No options to select if any CSS or JavaScript files will be embedded or external. Adobe have even gone as far as hiding all files from the designer. There is not a Files panel in Muse – the closest you'll get to seeing a file is through the Assets panel which reminds me a lot of the Links panel from InDesign. Simplicity is the order of the day here.

What you do get when you decide to create a new site is something akin to the new document options when working with a print document. Width, minimum height, number of columns, margin and padding – pretty functional but enough to get you going. The columns act purely as a means to help laying out page elements such as images and text boxes.

Getting started in Plan view. Once the appropriate site layout options have been selected, Muse then places the designer in "Plan view". Adobe has decided to divide Muse into four main areas, each of which correspond to a clearly defined process within the web design workflow. Plan view provides designers with a visual layout of the structure of the website and allows them to add and build page templates called Master pages. Master pages correspond with the Master pages of InDesign and most of the initial site design is done via these master page templates.

Design view – deja vu comes to mind. Muse's Design view provides the tools to design and populate the Master pages and periodically the content pages that make up the site. This is where the magic happens and where Muse really sets itself apart from the products already in the web design space. Think Adobe InDesign … and just keep thinking InDesign. Strokes, fills, gradients, image and text boxes, text wrapping, spacing and gutter options, character and paragraph styles, they are all there.

From Design view, it is possible to position any type of element at the pixel level without affecting any other element or the layout of the page. Design elements can even sit under or over one another. Elements can be cropped, rotated and have filters applied to them as if they were standard layers in any print design package. This is pretty powerful stuff for designers that have no wish to learn anything about HTML or CSS. The real magic appears though when you find the web components that are included in the Widgets Library panel. Adobe provide a couple of prebuilt compositions that include groups of common web objects like custom tooltips, featured news areas and dynamic galleries, but they also allow you to mix and match from basic components like lightboxes, terms and tabs. The Widget that I thought would be most useful to designers would be the navigation bars. It is now a breeze to create custom styles drop down and fly out menus, all of which automatically update themselves when you add new pages through the Plan view.

Finally once you are happy with the design and have created the site content based on your Master pages, Muse then provides two options for publishing your newly created masterpiece to the web. The first option is to export the web site from Muse as HTML, CSS and JavaScript to a folder of your choice. This is the most traditional option that then allows you to upload your website using any FTP client to web hosting of your choice. This was the option I used because I already had the hosting available. The second option is to use Adobe's own Business Catalyst service. The Business Catalyst service provides a managed hosting solution for either a monthly or annual subscription and the client is integrated directly into the beta version of Muse. Once you have a Business Catalyst account, it is simply a matter of providing your email and password details and your masterpiece is published to the web. Publishing for print is now more complicated than getting a website online.

The good, the bad and the down right horrific … My question has been, do I write a web design training course based around Muse or am I wasting my time? Now when I started this article, I mentioned my love hate relationship with Adobe Muse . Yes, it really has become easy and more intuitive to create good looking, interactive websites without the need to code anything, but there is a caveat. To provide you with these free form tools Muse is having to create the HTML, CSS and JavaScript code in a very reusable way. The limitations of previous web design tools like Dreamweaver were essentially imposed because the mark up (HTML etc) was kept reasonably clean and precise. The flexibility afforded by Muse means that the code in the background is extremely 'heavy'. There are an abundance number of nested HTML tags within tags all with class attributes to provide page element reusability. So although the code is valid in terms of specification, the unavoidable implementation is horrific. Looking at the code the Muse generates, you would be forgiven for having flashbacks to the days of nested table based design. The other issue, is that any object that has a filter applied to it or is rotated, is automatically converted to an image. I assume that later on there will be an option to dynamically apply these filters and transitions through CSS3 rather than using alpha transparent PNGs.

With that said, the product is still in beta. A lot can change between now and the future release and I would expect a lot of those changes to be in the resulting code that Muse generates. At this point, if Adobe Muse went to release as is, designers would love it and developers would hate it. There is a lot going for Muse and I think it is a brave step from Adobe to develop a product that could receive a lot of praise from designers but also a mountain of criticism from developers and various standards projects.


Leave a Reply