September 5, 2011

Some Musings on Adobe Muse

This week I came across an interesting article about Adobe Muse. Adobe Muse is a front-end web design program that is geared toward designers who… well… don’t know code. If you watch the video Adobe put out (which is on the article page) it’s more like Adobe Muse is a way for designers to break away from scary icky difficult code. Parts of that video reminded me of a teenage girl on a bad sitcom going “Ugh, but like, MATH IS HARD!”

With Muse, you create the design and the program creates the HTML, CSS and even Javascript for you. Working as a web designer for the past 4 years (the kind that actually builds the front-end as well designs) I thought I’d give this program a look. My initial reaction was one of contempt. Say what Adobe? You want to replace ME?! You want to dumb things down to the point where designers who know nothing about tags and properties can just upload a site and call themselves a web designer?! Another excuse for clients to discredit my asking price? Another excuse for people to say, “Oh anyone can build a website, I’ll just do it myself.” Sigh. So, how “easy” it is to build a website with Muse?

The short answer: pretty darn easy. I will make clear, right here and now that I did not read any tutorials. I jumped right into Muse and let my intuition take over. I decided to finally build the website for a side-project I’ve been working on. Using Photoshop, I created a mockup and then re-created the mockup in Muse. Right there is my first complaint. Why do I have to use two Adobe programs to create one website? If Muse does all the front-end and has similar tools and functionality as Photoshop, shouldn’t a designer also be able to design the site in Muse? I tried using Muse’s “Place” feature to import layers from my Photoshop file. That didn’t work so well. After a few saves the linking started to get wonky and the wrong image would show in several places. After a frustrating bit of problem-solving I decided it’s best to just slice up the Photoshop file and export the necessary images. In less than a day I had exported my site:

Here is the site map area of the program. I actually like this. It’s a nice way to choose which page you want to edit and a fast way to copy and paste elements. I also liked the master-page idea. The master page is where you put the elements that you want on every page, like the top-nav. For some reason I had issues with the logo going under the nav when I added new pages. The logo would appear normal on the master page, but the other pages were affected. After some frustration I ended up just copying and pasting in place the logo on each page.

Below is an example of the dropdown functionality. You can drag the dropdown element from the “Widget Library” onto your page and voila, you have a working dropdown menu. Sort of. It was a bit frustrating trying to get this to work. Although it turned out alright on the website - I’m still not happy that the two sub-categories are aligned center. I wasn’t able to figure out how to align them left. This is where a designer who knows code has the advantage. I figure that once my website is built, and I’m building more on my own than in Muse, I will make the desired changes. Working on the dropdown I also realized that you are limited to “stroke” or “no stroke”. Using CSS there are options for: border, border-top/bottom, border-left/right and there are several different border options, like dotted/dashed/double/solid. Muse really has to add similar functionality to their program.

I think Muse has to eventually add a simple text-editor. As of right now it doesn’t support web-fonts like Google fonts. After every export, I’ve been using Smultron to add the Google font import code for their stylesheet and changing the site-global.css file’s font-family to the Google font I chose. Since web-fonts are the designer’s dream, and Muse is supposed to be for the “designer”, it should really be able to be more friendly web-fonts.

In the end I still have mixed feelings about Muse. Do I like doing less coding? Yeah… admittedly I do. The site looks great so far across different browsers on Mac and even the iPhone (screenshot below). (As of right now I still haven’t looked at my site on PC - I will give an update if it’s wonky when I check my work PC.) I was able to design without worrying how I’m going to build it, which made me feel quite free to go nuts. After seeing the way Muse handled the slideshow widget (web design examples) I feel confident I could make it look much better using my own code. I’m not a very creative coder. I am creative however when I see how things work, I’m more of a rip-apart-and-edit coder. So for the freedom it affords, and the ability to mess with their code later - I like Muse.

After the world’s honeymoon with Muse, Adobe says that early 2012 for their official release Muse will be on a subscription program. I am not thrilled about this. I would like to just pay one price rather than shell out $15 - 20 a month/$180 a year. I appreciate their ability to make constant updates to the program with a subscription service, but I don’t know if I’ll really get $15 a month’s worth out of the program unless I was freelancing more often. Also, where’s the student discount?! Will they have one? Not sure right now.

Overall I think Muse is great for a simple website, like the one I built. If you want to add e-commerce functionality or a blog, I think you may be better off with a stand-alone site or at the very least a Wordpress. Like the article I mentioned boils down to - there is no replacement for knowing code. If you want your site to act and look a certain way, you’ll have to code it yourself. Adobe’s idea that code is too hard for the “true designer” is insulting to us hard-working web designers. I don’t appreciate a corporation selling the idea that designers shouldn’t have to know code to make a good website. I appreciate Muse’s ability to build the basics, but it would be a better program overall if it let the designer/coder in to do their work.
  1. mediascape posted this
blog comments powered by Disqus