Adobe Muse in Review
January 31, 2015 11:02 pm
If you are a webmaster, Adobe and website creation equals Dreamweaver. If you are a designer, Adobe and print media equals InDesign. The modern-morphing of designer and webmaster creates a new equation: Adobe Muse.
Adobe Muse is an innovative program that takes the time, hassle, and frustration out of creating a website. It is the non-coder Graphic Designer’s solution for creating websites from scratch. Even those who strictly use code to design websites will appreciate the freedom of creativity that has inspired designers of print media.
Although I am a designer at heart, for over twenty years I have also been a “coder-purist” in regards to creating web pages. In my early days of creating websites, I coded directly into notepad, then I utilized Dreamweaver’s “split” screen tab to take full advantage of design and coding elements. This year, Adobe Muse is fast becoming my preferred web design program.
In the spirit of full disclosure, for the past three years (since the program was in its late Beta stages) I’ve explored Adobe Muse from a distance. With consistently new features, and improved enhancements, Muse has come a long way from its initial release (to date, through 2014, there have been eight prevalent version updates). My appreciation of the little program with a big punch has grown with each new release.
The current version of Muse (Adobe Muse CC 2014.2) is overflowing with unique features to create interactive webpages that rival sites generated with conventional coding. Even standing up to pages created in Adobe Dreamweaver. The most important reason I am converting from pure coding to Muse, is the ease … and yes, fun … of creating web pages.
So, what makes Muse so cutting-edge? The User Interface (UI) for a start. In appearance, the UI is closer to Adobe InDesign than to Adobe Dreamweaver. The creative working space is divided into two sections: Plan and Design. The Plan mode is the staging area of your web design. It consists of a Master Page area on the lower half, and the actual Webpage sitemap in the upper section.
Plan Mode: Final Site Map in the upper section, and a variety of Master Pages in the lower section
The Master Pages act as a template for your webpages (desktop, tablet, or phone), allowing for consistency of web design throughout your site. Normally, only one or two Master Pages are required. However, you can add as many Master Pages as you wish to fulfill your design needs.
The Arthurian Map Page is based on the Map Master. The Author Page is based on daybreak Master
An important option when creating a new site in Muse is the Resolution Box. There you can chose either Standard or HiDPI (2X) resolution for your site. This is an essential feature when creating websites for Retinal Display devices. Also, the ability to utilize Scalable Vector Graphics (SVG) is vital when creating sites with Retinal Display devices that require large and crisp images that load rapidly. Plus, Muse automatically provides a raster backup image for those rare occurrences where older browsers do not support SVG format.Creating pages in Muse is a constant toggle between the Plan and Design modes. As the name implies, you plan your site in Plan mode, yet it is within the Design mode where the “magic happens.” The Design mode’s UI is consistent with Adobe’s trend to make seamless transitions from one design program to another.
In the Design mode the UI has all the basic elements that you would expect to find in Adobe’s Design programs: removable panels that collapse, tool bars, text panels, color swatches, effects, and widgets. The different Styles Panels (Bullet, Character, Paragraph, and Graphic) make it easy to create numerous styles, and the best part … Muse auto-writes all the code.
Muse sports exceptionally unique Bulleted and Numbered lists that allows users to create Bulleted lists from a variety of fonts. Once a specific Bullet list is created it can be saved as a Bullet Style. This is a huge timesaver if your site is list intensive.
What truly makes a Muse site dynamic are the Widgets. On one page I added YouTube videos along with Google Maps, utilizing a drag and drop Muse Widget. There is even a Widget to turn your website into a functioning online retail establishment.
Muse Widgets make it easy to add interactive Google Maps and YouTube videos
On another page I created interactive content by using the Accordion Widget. I was impressed that I could add images as well as color backgrounds to the different states; making a truly one-of-a-kind design element that viewers can have fun exploring.
I was also impressed that I could copy Google Book Preview HTML Code (a non-Muse Widget) and paste it directly into a page. This action resulted in the creation of a small, yet fully functional, Google Book Preview button to appear on the page. I also added a PDF file with a click of the hyperlinks panel. Then, I created unique navigational buttons (rounded edges, drop shadows, transparent backgrounds) all without leaving Muse.
With the Tooltips function, I composed a complicated interactive map. I used the Anchor and Pin functions on several occasions to add additional interactivity to pages by inserting a “flying” hawk image to take viewers back to the top of long pages.
Although Adobe Muse is code-free, it does have a relatively steep learning curve. One feature that took a lot of reading, researching, and tweaking was Parallax Scrolling. Once you master the ins-and-outs, of the ups-and-downs, it generates some amazing effects. Similar to my “Flying Anchor Hawk,” I was able to create a hawk that soared gracefully down the page. It was a fun exercise, yet Parallax Scrolling can become a bit gimmicky if overdone.
Creating a Parallax Scroll Effect: 1 Place image. 2 and 3 Make certain all states are without fill or stroke.
4 Add shadow to hawk with Effects function. 5 and 6 Adjust the Parallax Scroll motion.
Results of above Parallax Scroll: Hawk floats from center of information boxes and across page
I was impressed with the ease of use of the majority of the features, functions, and widgets. However, I was very disappointed in Muse’s Form Widget, which I initially added just to give it a test drive. When I did a trial upload run, the only page that malfunctioned was the Contact page, which included the Form Widget. The page would only partially load, and then the browser would stall. I redesigned the page (which I hated to do). When I removed the Form Widget the redesigned page loaded without any errors.
The only other problem I encountered when viewing the uploaded page, was a caution message in Internet Explorer (version 11). Whenever I first opened the site, a warning box would pop up with the following message: Internet Explorer restricted webpage from running scripts or Active X controls. Once I clicked the “Accept Blocked Content” button the site loaded with no further problems.
Even with those little quirks, the fully 64Bit operating system makes Adobe Muse a smooth and fast web designing program. Besides supporting an SVG format, Adobe Muse now also synchronizes text from desktop to tablet to phone. Muse also includes SFTP and FTPS support, making it extra secure when publishing pages to a hosting site other than Adobe Business Catalyst.
Although not a new feature for this current update, Muse has an outstanding spellcheck. Coupled with the new Find and Replace feature, it provides a second pair of eyes to edit a site for typos, or across the board overlooked site changes.
Adobe Muse is an outstanding web design program for all levels of webmasters. For anyone just getting started creating webpages, Adobe offers a ton of tutorials, as well as an additional widget site filled with many free or low-cost widgets to spark your creativity.
For the pros used to working with Adobe Dreamweaver, you will most likely be itching to get into the code. I admit my fingers were code-twitching during my first few days of working with Muse. However, once you get used to the ease of use, and the fun of design, you too may take the code-free leap. As a side note, a Muse created site can be export to HTML, and from there the source code can easily be read, and (if you must), tweaked.
Once again Muse impressed me when I exported to HTML. Muse efficiently and automatically extracted the content on all my webpages, then divided the content into specific sections, creating folders for: images, css, fonts, assets, and scripts. Muse even created a sitemap document.
Like all advanced programs, Muse is not an open and use program. It takes some time to get used to a new way of web design. Muse is not the perfect solution for all webmasters. Yet, that is the beauty of the Adobe Creative Cloud … the Muse team is constantly creating a stream of infinite, innovate features and functions. So, who knows, one day Muse may surpass Dreamweaver as the preferred web design tool.
As for me … now, instead of concentrating on code (which over the years has turned from simple HTML to a complicated formulized headache), I can now design a site that caters to my instinctive creativity, instead of being concerned about entering complex, precise code.
Adobe Muse is a Creative Cloud Only program. You can purchase Adobe Muse as a single subscription, or as part of Adobe Creative Cloud Complete. Visit the Muse purchase page to find the price that meets your needs.I have only touched on a handful of the features available in Adobe Muse. Please check out the Adobe Muse website for all of the program's features. While you are there, take a test drive with the tutorials … they are sure to spark your imagination and inspire the web designer in you.
Images cannot be copied or printed without permission.
as they sit down and talk candidly with
Contributing Columnist, Dee-Marie,
Author of "Sons of Avalon: Merlin's Prophecy"
Visit Dee-Marie on Twitter: Dee_Marie_SOA
January 31, 2015
Please note: If you find the color of the text hard to read, please click on "Printer-friendly" and black text will appear on a white background.
Please take a moment to join Renderosity's Newsletter List to receive news and information from Renderosity!