How They Did it: SnoValuation, Built With Adobe Muse
This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Describe your design workflow when using Adobe Muse. What's the very first thing you do? Do you sketch using paper and pencil? Does your workflow for web differ from that of other media?
My workflow usually depends on the project and how creative the client will let us be. Every project starts with a detailed questionnaire which helps get us into the ballpark before we ever start playing with design, layout or UI.
I usually start with a pencil and paper and start sketching out little thumbnails. Those ideas eventually end up getting larger and more refined. When I’m satisfied with where the various options are going, I’ll take the plunge to make them full-sized (websites in this case) comps in Photoshop. Sometimes, the interactivity is a vital part of the website, so it’s easy to jump into Muse to show how various things might work.
I’ve been designing and planning websites for over 15 years, and Adobe Muse has completely changed my process. It used to be that we’d design a flat website and hand those comps or artwork over to the coders to put it all together. It was like designing and creating all the parts of a car, but then you had to give all the parts to a mechanic to put together. Now you can design, create and assemble everything at once. It’s really revolutionary.
Now I can let Muse be part of my exploration. I find myself building more interactivity into websites since I can try things out in real time and see the results. Suddenly a flat, static website isn’t as exciting as it used to be.
When working on other projects, such as logos or brochures, my workflow doesn’t change all that much. The ideas need to come from somewhere and I find it most freeing to start with a pencil and paper. If you hop on the computer and just start clicking away, you’re suddenly bound by computers, software and each programs unique restrictions. I find that only after I’ve found appropriate solutions on paper, can I choose the right software to create my vision.
How heavily do you rely on other design applications, such as Photoshop, Illustrator, cloud synchronisation, for example?
Photoshop, Illustrator and Muse are my big three. With these three programs, I can do almost anything I can think of as a web designer. The synchronisation of the Creative Cloud has added an extra level of convenience. Suddenly your laptop and your desktop have the same preferences. You can grab any Adobe application (and there are a lot) any time you need and install it. Updates are quick and painless, and you can even upload files you’re working on to make sure you never leave an important file on your other computer.
All in all, the Creative Cloud has changed the way I work, making everything far more seamless and convenient than ever before.
How did you find the Muse process moving from static design into interactivity within a web browser?
When I’m designing a website, I always try to plan in unique ways to engage the user with some level of interactivity. They don’t always make the cut, and you need to be mindful of your target demographic, so some ideas get left on the cutting room floor.
In this case, we had to shelve more interactivity as his target market are ski lodge owners or bankers. They tend to be at the site for facts alone. I’m actually amazed that I was able to get away with the level of design that I was, with this project. Fortunately, the owner of the site happens to be fairly young and hip. If you look at the handful of websites in this industry, they all either look like they were designed in the mid 90s in Microsoft Word. This site really stands out from the crowd.
On sites where more interactivity is welcome, I find Adobe Muse an amazing tool as it provides a bevy of tools “In The Box” (so to speak), which allow you to try things on the fly and see what works and what doesn’t.
It’s refreshing not to be reliant on a coder to translate my vision into reality.
How did you envisage/design interactive elements such as the waypoint effects, where elements are animated in as the page scrolls?
I wasn’t able to use any of those effects on this site, but It’s great to have all sorts of tricks up your sleeve. You never know when a client is going to ask for something or need to have their socks blown off at some point. All the the parallax scrolling options are fantastic and cover such a wide range that it’s easy to introduce some movement to show off a product, keep the user interested or just have some fun.
Were there any aspects of your site which you found particularly challenging to build using Adobe Muse?
The more complicated Parallax scrolling can take some experimenting to get the hang of, but nothing really pops out as being too challenging to build in Muse.
On SnoValuation, I was originally using tabs to switch between two google maps (west coast and east coast), but when I flipped between the maps in any browser, the map (originally hiding behind the other), would never be centered correctly. I eventually found out that was a Google Map bug and had nothing to do with Adobe Muse. We eventually just scrapped the second map as the user can easily navigate to wherever they like in one map.
How much design freedom were you afforded when using off-the-shelf components, such as the contact forms, the carousels, map etc.?
Once again, this site is essentially designed for ski lodge owners and bankers so I didn’t exactly have free reign, but I was lucky enough to have a progressive client that didn’t want a “typical” appraisal site.
The built-in components and the fact that it’s easy to embed code wherever you want, makes it incredibly flexible. If you can’t find what you need in a widget (and there are many options), you can usually just embed the code from a 3rd party site.
The included widgets are great and get better with every update.
I was able to use the built-in form for the contact page, and embed google maps directly. It’s great to have these elements as part of the application, and each new version of the application contains more and more useful possibilities.
On the surface some of these widgets look simplistic, but It’s amazing what you can do, with the standard set of tools, with a little creativity.
I’ve already been in talks with the owner of the site to make new updates that will incorporate a bunch of the new in-the-box capabilities. I’m looking forward to phase two.
Did using Adobe Muse trigger any aspects of the design which you might not otherwise have thought of/dared to attempt?
Using Muse is almost like using Photoshop. It’s not uncommon for me to start building the initial idea in Photoshop, and then move some of the raw elements into Muse for some assembly. Once in Muse, the elements can be flipped, turned, scaled, animated, faded... It’s amazing what you can do, and the beauty is that “what you see is what you get”.
Adobe Muse adds an extra stage of creative freedom.
Working in Photoshop and handing your files to a coder always felt a little empty...like something was missing. Now you can watch the magic come alive and tweak things as you go.
Now, there is no excuse for designers to make boring websites.
Did you experiment with any of Muse's tools which you ultimately didn't need to use?
I am ALWAYS testing out the new tools, when I have time. There are so many available options that you can’t possibly use everything in every site. It pays to experiment with every tool, because you never know if your next project is going to benefit by one of the included widgets. I like to know all of my options, before I make any decisions.
I’m always excited for a Muse update as they seem to have a pulse on the upcoming trends. Learning to use Muse is like learning what your clients are about to ask for.
Once you'd built the final product, did you feel the output needed tweaking manually in any respect?
Fortunately, Muse does a good job of looking and behaving similar on different browsers. I’ll always check on as many devices as possible to make sure there are no surprises down the road, but the tweaking is usually minimal.
The only thing I needed to adjust was to make the header text boxes wider as I was getting a strange break or two, but other than that, there is very little non-design related tweaking.
Muse provides the possibility of building a separate screen, mobile and tablet version of a design. How did you find designing separate versions, and was the end result what you'd hoped for?
The SnoValuation site is fairly simple, so there isn’t a lot lost in downsizing to mobile version. In this particular situation, SnoValuation did not ask for a “tablet" size and I felt that the “desktop” version (which is the default tablet version if a tablet version is not created) translated well enough to leave it alone.
You never know what device someone is going to view your website on. So it’s great that Muse offers the three different versions. It seems a little daunting at first, but it typically doesn’t take that much more effort to re-size your website to be optimized for the two other options. It requires a little tweaking and experimenting, but it’s worth the extra effort to get your message across, regardless of what device the user is viewing.
More Adobe Muse
Take a look at the latest offerings and features from Adobe Muse on the Adobe Muse homepage.