Co.Design

Adobe Muse Lets You Design Websites Without Knowing Code

Is that necessarily a good thing?

Adobe makes programs like InDesign, Illustrator, and Photoshop, which enable nearly every graphic designer on the planet to create nearly every piece of visual content you've ever laid your eyes on. Naturally, their bread and butter is making graphic designers happy. So their newest product, Muse, hopes to make life even easier for designers—specifically ones working in more traditional mediums who are being tapped to take on more web-based projects—as an ultra-simplified, graphically focused tool for making websites.

Muse's biggest selling point is that designers don't have to learn code (or "markup languages") like HTML, CSS, or Javascript to break through the barrier of designing for the Internet. As Muse's engineering director, Joe Shankar, says in the introductory video, "We're going to change the way websites are built for graphic designers."

For some design firms, learning code isn't a bonus, it's a requirement.

Using an interface that's much like Abobe's InDesign, designers can quickly and easily create websites as a series of dynamic documents which generate the necessary HTML code for them to be published online. Elements like navigation bars and pull-down menus—typically complicated Javascript features—are included as a series of widgets that can be dragged and dropped onto the page. As a technological achievement, it's incredibly impressive. Brian W. Jones, a graphic designer who knows some HTML and CSS but doesn't consider himself "fluent," was amazed that he completed the tutorial and built the tutorial website in about three hours. "I still think it's important for a designer to understand markup," says Jones. "But I think this has huge potential. For certain, small-biz clients of mine, I think it has its place." Jones plans to redesign his own website with Muse.


Muse allows designers to build a template that can be easily edited for each website page

It's easy to see that Muse will allow designers who are skilled at creating beautiful print layouts to easily turn their work into a simple, fully functioning website. But for designers who have taken the time to learn how to design and code their sites—a group that Adobe engineer Jason Prozora-Plein says in the video is "very small"—they're frustrated that Muse is providing a shortcut to what they think should be a mandatory rite of passage for anyone working on or near the web.

"Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside," says Frank Chimero, an independent designer and illustrator who wrote an excellent post arguing the case for code. "It’s important to realize that the web is an experiential medium. It’s 4-D: there is change over time as users interact with the work. Still images of sites are no good, much like how a still from a movie only gives a faint sensation of what it is to see the film."

For some design firms, learning code isn't a bonus, it's a requirement. Randy J. Hunt, creative director at Etsy.com, won't hire graphic designers who don't know how to write code, even if it's not their primary job. "It's about understanding your medium," he says. "A designer that intends to create websites or make interactive products must understand the moving parts that they're working with. In fact, they must be able to create them. Being able to manipulate means you can actually make your design decisions in the medium."


Muse uses an interface and toolbar that will be familiar to anyone who has used the Adobe program InDesign

Adobe's last attempt at a WYSIWYG (what you see is what you get) web design tool is Dreamweaver, which Adobe acquired from Macromedia in 2005. With an interface that toggled between code and images, Dreamweaver was the darling of Web 1.0 designers, but was criticized because the code it generated wasn't as good as what a designer could do by hand—especially when it came to web standards, a movement to make content flexible and compliant across browsers and devices. Dreamweaver has improved, but now Muse—with its code completely hidden—seems like a step back. One of the champions of web standards, design guru Jeffrey Zeldman, says while he likes Muse for its ease of creating layouts, it still doesn't answer his plea for a better Internet. "Software can't generate HTML that is search-engine friendly, accessibility-friendly, and portable between desktop and mobile," he says. "Only web design professionals who understand semantic markup, responsive and adaptive web layout, and mobile user interface can do that."

But maybe Muse can serve a greater purpose for designers who aren't comfortable learning code—or who don't have the time—in the way that they interact with clients and developers. John Morefield, an architect who is working on a new site, used Muse to create a close estimation of the website which he can share with investors and other people working on the project. "I can generate and iterate on this much quicker than a wireframe Photoshop mockup," he says. "This tool allows me to get feedback from someone, change it up, send them a link, and let them view it." Morefield says he's able to express his ideas more clearly than a sketch or slide deck because he's working in the medium—which moves the project faster. "I think that's the niche this should fall into," he says of Muse. "That way I, as the creative but non-code-oriented cofounder, can actually generate useful work in the pre-launch phases of the project." Later, he plans to pass the his prototype to a web developer, who can recreate what he made (and fix any potential bugs, he says).

Morefield says he's able to express his ideas more clearly than a sketch.

As a non-designer who has been pressed into Internet service when making my own website, I can see the allure of Muse. I taught myself (very basic) HTML and CSS to customize a Wordpress template to my liking, but I certainly wouldn't be able to produce a website with complicated graphics like Muse's tutorial site with my current skill set. Sure, I'd like my site to look prettier. But at the same time, I'd rather know how every piece of code affects the final product. I want to be able to understand why something's broken on my site and how I can fix it. And with resources like Code Academy, a series of free, online tutorials for learning things like HTML, and the entertaining video series Don't Fear the Internet, there's really no reason for anyone, designers or non-designers, not to at least try to learn.


A website for a fictional Katie's Cafe, which was created using the Adobe Muse tutorial

For someone who wants to create a static, image-driven site, like a wedding website or a small business page, with information that doesn't have to be updated or changed very often, Muse might make sense. And that's why it's smart for Adobe to make Muse free for the first year, as it will lure in the non-designers or amateur designers with the promise of building their own website, then charge them a monthly subscription fee when it launches. But with no way to connect it to a content management system, it's not much use to anyone who envisions having a dynamic, interactive website, with features like a blog component (which is pretty important, in my mind). And although Muse is made for designers, it's not going to catapult any print designer into a successful web design career, because those kinds of features are what clients want. "Muse will help some people create websites," says Zeldman. "But it can't replace the skills of a competent professional front-end designer any more than auto-accompaniment can replace musicians."

[Top image: A still from the video for Radiohead's House of Cards]

Add New Comment

75 Comments

  • Mocquery

    It is rather amusing to see the responses posted by guys embedded in code. 70% of them write bad code anyway! so there goes that argument.   To be fair, this is why they do what they do, they are employees essentially, regardless of whether or not they have made it out to run their own web "design" company, joke.  They are not businessmen.  We who employ these people have a far broader view of the commerce world.  You have to sell, this requires gloss. Design is gloss.  No managing director is going to care if it renders 0.7 seconds slower or if the code is non-compliant.  Time to wake up and smell the coffee guys.  Good job Adobe, keep it coming.  Empowering creative people is what makes the world go around.  Empowering guys that write web code, does not.

  • Smukdesign

    great post really informative at the beginning i loved the idea of muse but as i read on the little noise i heard saying this was a bit wrong became louder. it does devalue the beauty of code 

  • Lindsay

    The education, experience and genetic blocks that form the base of a competent designer is normally similar no matter the area of specialization, only in a later stages of training and work will designer diverge to a specialized field. I really admire people with skills when it comes to this field because you cannot just do it without thinking how to make it look fabulous. Sometimes what is fabulous to you may not be to others. 

  • peter

    When I first read of Muse on this web site and after watching the nice promotional Video from Adobe, I was eager to try out the Beta, thinking "OMG, this must be the next big thing!" and "it's going to put me out of business!" (I'm a web programmer by trade). So I downloaded it.

    After playing around with it for some time, I felt utterly relieved: "Same old Adobe Air crap, ugly, buggy and very, very Beta": Ugly HTML, ugly CSS, ugly everything. 

    You can't just take the concept of beautiful InDesign and slap it onto HTML!

    Now, why am I bitching? Because Adobe, being a big, wealthy company, having invented almost everything that matters in terms of 'desktop publishing'and thus making the according revolution possible, has still not understood the whole notion of HTML and the web - they're still stuck with the (now very old looking) notion of the 'paper metaphor' and 'WYSIWIG' (we still love PDF, being a relic from this era). But the web does not work this way. Even the most hardboiled breed of 'graphic designers' must realize that time has moved on and that beautifully handwritten CSS files are sexy.

    So, for now I'm relieved and expect to 'fill in the gap' between 'the arts' and 'technology' (isn't the latter a form of art, too?) for the time to come, feeling very happy to learn new things every day, feeling frustrated at times by the same gap and the general lack of understanding by a majority of people.

  • MarkShepherd

    @Tyler Travitz
    +1
    @Stephen Olmstead
    Let's get real: designers aren't going to have a clue how to optimize a LAMP or do custom modules development beyond whatever crapware Wordpress offers. Developers help keep the "purdy" online. See http://sixrevisions.com/infogr... for a good laugh.
    --
    How cute; print designers thinking they can know anything about online media. Have we already frogotten the horrors created by FrontPage (now SharePoint Designer)? What good is a design if there's not thought to the actual content (see Information Architecture). When I need to prototype, I use a lower fidelity package (see Axure, SmartDraw) so the focus isn't solely on design.

    Let's get some facts straight:
    - "master page" == template
    - bloated code == lower SEO

    Way to set the industry back Adobe; I personally can't wait until HTML5 is fully ratified so we can all dump your Flash crapware.

    IA+development/coding > design. Full stop.
    :wq

  • Oxmedia Digital

    @ adobe they just played around with some stuff and came up with a prototype app, they than sit down with there bosses and release it as a web designers tool for the next generation, lol :))) adobe losing blood, html5 shot you badly :)))

  • Derp

    "But with no way to connect it to a content management system, it's not much use to anyone who envisions having a dynamic, interactive website, with features like a blog component (which is pretty important, in my mind)."

    Wrong! Muse has functionality built in to it to make front end pages for Adobe's own extremely powerful CMS, Business Catalyst.

  • Spark

    Umm... doesn't Softpress Freeway already do exactly this, but much much better? What is it with Adobe and applications with the word 'Free' in? First they killed Freehand, which at the time was streets ahead of Illustrator, now they're gunning for Freeway.

    To all the web people that say designers shouldn't build websites - you're probably right, but then techy people shouldn't try to design them either - and that happens a LOT more.

  • Spark

    Freehand was streets ahead of Illustrator in the early days. I'm talking pre-Quark, pre-Macromedia, the days of 'Aldus'. That's why Adobe bought it and ripped off the best features. Pasting inside things instead of the much improved, but still clumsy, clipping masks being one of many.

    I started in the days of Letraset... :) 

  • Leonidas Argidisouvlaki

    Uh, when was Freehand EVER even on par with Illustrator? You obviously have much to learn, young padawan.

  • Joby Elliott

      I think you're underestimating the amount of creativity involved in the technical aspects creating a good front end. I'm primarily a designer, and as such I spend a lot of my time doing design. I've never met a programmer I would pass of my designs to, though, without worrying that they would take my pretty visuals and bog them down with ugly user experience.
    It's also not uncommon for something to prove less feasible than you thought once you start trying to actually build it or use it in the real world, and it takes a creative touch to tackle those on the fly changes that are pretty much always going to pop up.There's art to be had in the technical side, too.

  • Ralph

    This is so wrong. In my opinion, if graphic designers want to create websites then they should learn to code. If they don't want that or they don't have a feel for it, then they should team up with a coder. It's just simple as that, but shame on Adobe... you've just created another piece of software that spit out a 'code mess' that search engines and screen readers won't understand.

  • csc3

    John Morefield (from the article) gets it right, imo. I don't necessarily see it as the ultimate tool for building websites, but it seems to be a great tool for making & presenting comps.

    It's probably good enough for small websites as well, like the one shown in the example. 

  • Error601

    I can see how Muse would be a great tool to prototype a site or page templates (and VERY small sites), but as a tool for creating full sites, no way.

  • Marie Borodenko

    Muse's tutorial page doesn't validate - 36 errors and 35 warnings - for this reason alone I won't be using it.

  • grandiose

    Muse  and tools like muse are just a phase in the evolution of computer
    programming. Tools like muse are what is referred to as  very high-level
    programming languages; a programming language with a high level of abstraction
    Programming used to be done using combination of zero and ones. Now, with
    programming languages like Java, one could write a pretty neat computer app
    in near queens english. On the other hand, there are languages like the
    micrsoft visual programming language for robotics programming.

  • ReignMan

    There is no reason that a web designer should be required to perfectly hand code a site. They need to be able to look under the hood and know what's going on. They need to know when to use HTML5 and not Flash. They need to know when and why Ajax is useful. 

    Design is not about making something look pretty. It's about using text and visual elements to communicate a message in a clear and original manner. The best way to communicate a certain product or service might be to create an ugly design. I son't think anyone is asking coders to master visual communications  (design).

    This is were the line needs to be drawn. Let designers and art directors be creative with text and graphics while coders are being creative with code. What ever happen to working as a team. It seems that these days everyone is expected to sit in front of a computer and avoid face to face. Collaboration between groups should be encouraged. Creativity increases is cross functional group settings. 

    The fact of the matter is, if you're a truly talented creative, your boss will not allow your time to be wasted coding. If you can generate ideas and designs that sell, She would be a fool to have you sit in front of a computer and worry about browser compatibility. If you what designer to handle multiple roles, teach them to art direct, insist that they become experts on your clients product or service. Teach them to pitch ideas and sell their creative. Having them collaborate with programmers will teach them all they need to know to design smart interactive.

    All of this cross functionality has created an internet of boring copy cat design. Take a look at CSSremix.com and you'll see what I mean. Brilliant code and some good design but man it all looks the same. A good coder can find a site they like, find some icons and trendy clip and create a pretty nice looking site. But, did they put any thought in to marketing and messaging?

    Point being, designers look at a site a programmer designed and think the same thing a coder does when he looks at a designers code. Photoshop does not make a designer and Dreamweaver certainly does not make a coder.  

    For those of you that are rock stars at both... I hate you!