Home   →   Blog   →   How to Build a Website Prototype With Adobe Muse

How to Build a Website Prototype With Adobe Muse

When it comes to creating animated prototypes for websites and mobile apps, our design team normally prefers using tools like InVision and Adobe After Effects. Nevertheless, we’re always open for experimenting and often try alternative UI prototyping tools, especially when we have to deal with unusual tasks.

This time, we decided to explore Muse, a website building tool from Adobe. Let’s see how it worked out.

Muse logo

The case

The team needed to present a fully functional landing page for an elite eyewear company’s website. The page is a long read featuring several scroll transitions (including parallax scrolling effects), a product catalog, and headlines and photos appearing with “fade in” and “fade in up” effects.

Why Muse?

Adobe After Effects was simply not the right tool for the task. Although animating such a page with After Effects would take comparatively little time, we still wouldn’t have got a fully functional website prototype with working transitions and scroll effects.

InVision, in its turn, doesn’t support parallax scrolling effects, and our prototype had to rely on these effects heavily.

So, we needed a tool designed specially for creating responsive websites and able to preview prototypes right in the browser.

Create gorgeous HTML5 websites without writing code,” the headline on the Adobe Muse’s homepage was saying. It seemed to be exactly what we were seeking for.

Muse allows creating text headlines, paragraphs, buttons, input forms, blocks of media content and more right on the fly. Actually, you can build a whole website from scratch using Adobe Muse, but it can deal with a landing page prototype no worse.

Adding content and working with parallax effects

The landing page mockup was created in Sketch. Then, content was exported as .svg and .png files which are fully compatible with Muse.

Next, we had to add scroll transition effects to the page. In Muse, working with scroll transitions is operated via the “Scroll Effects” toolbar that contains motion, opacity, slideshow and animation settings. ​

Setting motion speed in the Scroll Effects toolbar in Muse

Here, to create parallax scrolling effects in Adobe Muse, as well as “fade in” and “fade in up” effects for appearing elements, we needed only to play with motion and opacity settings: the former allows to set the initial and the final values of the scrolling and fade effects’ speed, and the latter does the same for the animated elements’ opacity.

It’s pretty simple, but it may take some time to experiment with different values’ combinations before you get a smooth result.

Adding CSS animation effects to the prototype

The “Scroll Effects” tools in Adobe Muse allow to create smooth and beautiful parallax scrolling effects, but we also needed to include several animated headlines to our prototype which wouldn’t depend on the scrolling speed.

To do this, we linked jquery and animate.css libraries to the prototype using the WOW.js plugin. Here’s a video that explains how to do it in detail:


 

Muse allows to assign classes to the created elements and to insert an HTML code right into a page and into the <head> container.

A few more valuable features

Adobe Muse also allows to adding anchor tags that allow a user to jump to a specific location on your page. Anchor tags are often used to create a navigation bar for landing pages.

“Scroll Effects” toolbar is active only when you have a fixed page width. Thus, if you want to make your prototype adaptive and to apply scroll effects to all the elements, you’ll need to set and adjust breakpoints. Breakpoints mark the segments of the screen that can change their proportions or disappear completely depending on the screen or the browser’s window sizes.

Exporting the prototype as a .html/.css file

As soon as the prototype was ready, it was time to hand it over to our web development team, so they could in prepare it to the presentation in the actual web environment.

Adobe Muse can export a prototype as a .html or a .css file, which means that our  web developers got a full-fledged website organized as a set of containers. Thus, the developers had only to edit the existing and add new elements.

muse file export

Final thoughts

Of course, working on this landing page, we weren’t able to explore the full potential of Adobe Muse, so, for now, there will be no ultimate conclusion. We continue testing Muse and have already rated it as an alternative to usual tools we use for creating prototypes for desktop apps and websites.

The tool is not flawless, though. It really lacks libraries for layers’ animation, the possibility to work with masks, and the “Scroll Effect” toolbar is not as intuitive as it can be.

Yet, I’d recommend trying Adobe Muse if you want to build a prototype functionally close to an actual website and have no experience of using other similar tools - Muse is quite friendly for the newcomers, yet quite functional to appeal an experienced designer.

Links:

Responsive web design with Adobe Muse

Our Dribbble page

Our Behance page

comments powered by Disqus