Musings: The Ups and Downs of Adobe Muse

Adobe Muse / process / web design / wireframes   Posted on May 1, 2015 by Erin Malick Thompson

We're forever on a quest for a bulletproof solution to efficiently and effectively craft and present website wireframes and designs to clients. I've written previously about my experiments with a handful of programs and their ability to handle responsive output. But since we haven't felt "sold" on any particular solution — yet we still have the ongoing need — I recently decided to try Adobe's latest effort toward a solution: Adobe Muse.

Adobe Muse CC opening screen

Ok, so it's not exactly bulletproof, but it does have some nice features.

Some pros:

  • Master pages: those of you familiar with InDesign will love this feature, which allows you to easily create one (or many) master pages and then apply them to your site pages. Then, if you need to edit something global (say, a navigation link in the header), you can update the master once, and it will automatically apply to the pages based on that master. No need to perform the same edits to each page of your site.

  • Linking between pages: this is not unique to Muse, but it's something we (at Blueprint) haven't been able to utilize with Adobe Illustrator, our historical wireframe solution. It's especially useful if there are nontraditional interactions in your site that you want to help a client understand. For instance, I used Muse to draw up some wireframes involving a 3-step sign-up process, and the process is much more clear if you can actually click a "continue" button between steps and see the result when a new wireframe loads (compared to viewing three flat PDF pages that have annotations describing what will happen).

  • Helps you visualize your site full screen: with Muse, you can draw a rectangle that runs from the left edge to the right edge of your canvas, and the result is an element that appears to span full screen in your finished prototype. This is much closer to your intended finished product than a fixed-width JPEG of a wireframe, cropped to fit in a storyboard.

  • Pins element to browser: on my recent set of wireframes, I was able to "pin" social media elements to the right-hand side so, no matter the width of the display, they were stuck to the side. While not having this feature is certainly not a deal-breaker for me, it was very easy to do with Muse and means we didn't have to use annotations to convey our intention to the client — they can see it with their own eyes.

  • Quick/easy to publish: Muse makes it really quick to turn your working files into a functional prototype. Our current process involves generating JPEGs and then generating a client review web page that features said JPEGs, which isn't a lengthy process, but it's even easier to just click the Publish button on Muse.

So Muse is really nifty in a lot of ways. But like I said, it's no panacea.

Some cons:

  • There's no circle shape tool: Designers that are used to dashing off a circle in no time with the circle tool in Photoshop will scratch their heads in bafflement when they only see the rectangle tool in Muse. This is not to say you can't make a circle with Muse — you just have to do it with the rectangle tool and its corner radius feature (see blue arrow in the image below). This approach actually makes sense since Muse outputs HTML, and it gives you the flexibility to easily create rectangles with one, two, three, or four rounded corners. But it does mean you have to expend a little more time to make a circle, and your "circle" won't scale if you try to resize it. Want to know more? Check out Adobe's tutorial.

    Adobe Muse corner radius tool

  • Controling the height of the page is funky: Muse has these guides on the canvas that you can drag to increase the page height and to set the upper confines of the footer, but it wasn't a seamless process. For some reason, some elements I created were somehow connected to the footer or bottom border, and whenever I would increase the page height by dragging the guides lower, those elements (which were positioned higher up on the page) would shift down too. Extremely irksome. I'm sure I was doing something wrong, but I was on a deadline and didn't have time to dig and figure out the issue. I had to just sort of work around it. But if I get a good handle on it, I'll share some advice in a future post.

  • Form widgets are inflexible: At least as far as I could tell, Muse form widgets aren't conducive to editing (and how often do your actual form fields match a widget's fields? Um...never!)

  • Muse's photo editing tools are lacking: I didn't spend much time looking for these since I was just using Muse for wireframes, but I did not see tools for photo editing. So if I were to use this for web design, I think I'd still need to use Photoshop and then bring pre-edited elements into Muse, rather than being able to do everything in one program. Sigh.

  • Deleting pages didn't prompt me for a redirect: I needed to delete one of my pages, but then I had to manually change all links to that page to the new page. Why couldn't Muse just ask me, during the deletion process, which page to redirect existing links to? If you delete a paragraph style, it asks which style to apply instead, so I don't think it would be too hard for Adobe to implement a similar feature for page links.

But all in all, I liked what Muse had to offer. I'm looking forward to exploring its tools for creating responsive prototypes. Stay tuned!

Search the Blog

Blueprint Tweets

RT @RTBiQPolitical: “Go broader than in previous years for targeting. With digital you can see what is working and what isn’t and adjust” -…

Wednesday April 03, 2019

RT @stduggan: Targeting 2.0 panel. Patrick McGill, “campaigns cannot over rely on previous election campaign data to win.. if we had we wou…

Wednesday April 03, 2019

Happy #OpeningDay2019! Every year we watch this classic Field of Dreams speech to celebrate the start of baseball s… https://t.co/pf54LmFsZ6

Thursday March 28, 2019

Visit BlueprintTweets ›

Contact Us

202.681.0215

info@blueprintinteractive.com

1155 Connecticut Avenue, NW
Suite 601
Washington, DC 20036

Or submit your info and let us know what we can do for you!