Alfalfa Studio is an award-winning design firm that offers a full set of services, including brand strategy and identity, animation and film, interactive and web design, and more. The team recently completed their first project with Adobe Muse CC, the professional tool that enables designers to create websites without writing code.
The result is an engaging new site, New York is my Muse. As you explore the site, you also explore Manhattan from the perspective of 16 local designers. Participants include Jan Wilker of karlssonwilker, Allan Chochinov of Core77, and Willy Wong, Chief Creative Officer of NYC Tourism Board.
The Alfalfa Studio design team included Rafael Esquer, Gabriela Mirensky, and Guillaume Boucher. Their task, Mirensky says, was to build a site that "offered multiple layers of content provided by New York–based star designers, giving it a very personal tone. We want it to be the hub where the New York design community shares their amazing city with their peers — its secrets and surprises, the places that inspire them. With charmingly simple graphics, inspired by handcrafted native art, the visual style of the website will pay homage to individual personality, celebrate imagination, and return to the seductive allure of the beautiful." Figures 1–6 show the many stages of their thought process.
From the start, Alfalfa found plenty of useful shortcuts in Adobe Muse. Mirensky highlighted several: "Adobe Muse CC offers the same powerful typesetting capabilities as Adobe InDesign CC, Illustrator CC, and Photoshop CC. Adobe Muse also makes finding hyperlinks easy, which helps speed up the process. With a simple search we were able to locate stored links in the library, which were then activated with just one click. It prevents mistakes in retyping existing information. We also found that, given the ease with which you can create and reorganize pages, creating the visual sitemap using Adobe Muse is fast and clear."
Adobe Muse is part of Adobe Creative Cloud, which gives members instant access to new features as soon as they're ready. The advantages of this continuous upgrade process were apparent to Alfalfa when Adobe introduced a Layers feature in an Adobe Muse update during the map project. It helped Alfalfa organize all of the map site's components, including images, widgets, menus, footers, headers, and sidebars.
At mid-project, Adobe Muse introduced scroll motion effects, which allows page elements to be set to move in different directions at different speeds with the scroll of a mouse. The functionality lent itself perfectly to the site concept, and Alfalfa Studio refreshed the site design (see Video 1).
Video 1. Landmark Manhattan buildings zoom through the home page as you scroll down, thanks to Adobe Muse CC scrolling effects.
When you visit the New York is my Muse site, it's hard to remember that Alfalfa created its look, feel, and functionality without writing code (see Video 2).
Video 2. Tour the website — and Manhattan — in this short video.
Click on the blinking home icon to reveal a series of colored dots (created using the Accordion widget) that represent each of the designers who contributed to the project. Roll over a colored dot to reveal the name of the designer; Alfalfa used the Tooltip widget for that behavior.
Click on a colored dot, and the page refreshes to show a custom map of Manhattan with the designer's hot spots highlighted. Navigate through each designer's individual tour of the city by clicking on the icons that appear in color when associated content is available. Alfalfa Studio implemented this navigation style using the Anchors feature in Adobe Muse. Since each icon is an anchor, choosing a spot on the map triggers a hovering layer of question and answer content. For example: What is Timothy Goodman's favorite post-project celebration? Catching a Knicks game. Where would Jan Wilker most want to live? One Park Avenue South.
As you click back and forth, the background map moves up or down to accommodate the next piece of information, which was easy for Alfalfa to implement by inserting these internal links or anchors. The Adobe Muse framework also allowed for a more linear navigation style, triggered by selecting the "next" and "previous" arrow buttons within the content layer.
Alfalfa applied scrolling effects in different ways throughout the site:
What you don't see is the work Adobe Muse does behind the scenes: Everything is optimized so the site loads quickly, is cross-platform and cross-browser compatible, and is discoverable by search engines like Google.
Alfalfa Studio found that Adobe Muse can facilitate faster site building while using a more visual approach. The creative process can lead the way, and sophisticated effects like scroll motion aren't off-limits to designers who prefer not to code.
Mirensky weighed in with her take on how Adobe Muse might fit within their workflow in the future. "We are going to use Adobe Muse when we need to have something online quickly, and when we are able to skip many of the technical aspects that prevent most print designers from publishing a site. Publishing with Adobe Muse is easy — you can publish directly from Muse to host with Adobe or choose to host with any other provider. Inspired by New York Is My Muse, one of our design interns was able to publish his own portfolio website — from beginning to end — using Adobe Muse in only a couple of days."
There are many resources for learning more about Adobe Muse. Newcomers who want to dip their toes in may want to visit Getting started with Adobe Muse CC. From there, you can download a free trial if you're not already a Creative Cloud member. Then you're set to walk through a short tutorial on creating your first website with Adobe Muse.
The Adobe Muse website has additional tutorials, upcoming events, and the inspirational Site of the Day. And for a more in-depth look at scroll motion effects using Adobe Muse, see the June 2013 Inspire Magazine article on the topic.
Dave Klein is an online marketing consultant based in Boulder, Colorado. He has worked with several Adobe partners focusing on 3D software and technologies since early 2000. Reach him at kleinnewmedia.com.