Building a Simple Website With Adobe Muse
basixvideos

Building a Simple Website With Adobe Muse

on Oct 19th 2011 with 37 comments
Tutorial Details
  • Topic: Adobe Muse
  • Difficulty: Basix
  • Screencast duration: 32 mins
Download Source Files

Adobe Muse is a beta web design application aimed at the non-coder. If you’re a stranger to code, have never designed a webpage, come from a print background (but are familiar with applications such as Adobe Illustrator) Adobe Muse allows you to create straight-forward yet functional websites.

Today we’re going to build a simple website, as an introductory exercise to Adobe Muse.

The Screencast

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Michael Clawson is ‘Chief Fish’ at Big Fish Creations, an advertising and digital media company in the Sierra town of Graeagle. His background began in Silicon Valley when Apple Computer and Adobe Systems first made their mark in Desktop Publishing. He was introduced to interactive media early in his career, transitioned to production artist, and later, creator and lead principal of an Interactive Department at a major advertising agency. Specializing in branding across multiple media platforms, his diverse repertoire includes a hybrid combination of designer and developer with emphasis on graphic design, branding, photography and communication.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • mindaugas

    crap :)

    • http://www.snaptin.com Ian Yates

      I did wonder how this subject would be received – I suppose that kicks of the proceedings..

  • http://www.imageworksllc.com Joshua Briley

    Perfect for small static sites. I wondered about CMS integration. Anyone know if there are plans to make this “WordPress/Drupal/Joomla/etc. friendly?”

  • http://twitter.com/jholyhead James

    The tutorial itself was well presented and informative, but…

    If you can’t be bothered to learn HTML and CSS, then do the internet a favour and don’t build a website because whatever you build will suck.

    You can probably get a handle on HTML and CSS in a couple of hours, and from there, you can learn as you build your site. Your site will probably still suck, but at least you’ve learned something that will make your second attempt suck less.

    I consider the envato network to be a place where motivated people can learn how to do *stuff*, not where lazy people can learn how to avoid doing *stuff*.

    • dj

      @james… I can share a bit of your angst when you have “bonded” with an educational site to the point that when you show up for your “daily fix” at the “feet of the prophet” only to find that the time slot has been pre-empted by something that you can’t use. However, in terms of the branding of Webdesign Tuts, perhaps there’s room for material that “motivated people” can use to keep abreast of the field, what’s available and what others are doing. What do you think?

      The unfortunate point, as I mention in my post below, is that this Tut could have actually been BOTH very easily with the addition (and loss) of just a small amount of material – and the posting of a demo. Perhaps they can do that by editing/adding to the “show notes.”

  • dj

    An interesting product for Adobe – I can see how they think there’s a niche market for this; however, as you stated Ian, the market is probably NOT to the Web Design Tut’s audience any more than a tut on how Microsoft Office can export to an HTML file would be.

    It was hard to hear over all the jungle music but I believe Michael said that Muse ‘wrote all the jquery code for you’ in the background. And he did flash through a directory of files – of sorts. What I really wanted to know was what kind of job Adobe actually did with their codes! (I can tell you that whoever wrote the MS Office export code didn’t seem to have even a remote clue about what was needed by web-developers.) So I downloaded the “source files” hopeing to take a look. The only thing there was a .muse file – what gives? Are all the css, js, html files compacted somehow inside that file type and require an adobe reader to view?

    To my way of thinking, this tut could have been dramatically improved from a “show-and-tell” into a “real tutorial” by: (in addition to loosing the distracting and annoying jungle music) loosing 10 minutes of the repetitive “fleshing out” of extra pages and actually examining the code inside the files. Such basic things as “is it using HTML5,” “what kind of CSS hooks is it using,” “how much SEO is being built into it,” and “how hard are they making it to do personal preference TWEAKING to the code?”

    You don’t have a “DEMO” button for this project – is it, per-chance, still up on some server somewhere that we can take a look at? And perhaps, analyze with Firebug?

    • dj

      It may not be obvious, but what I was implying here is: I wonder if Adobe want’s this product to be some type of paradigm shift away from the “design it in photoshop –> cut it up and code it in HTML –> move it to WordPress” model to something like: “Design and obtain structural code in Muse –> finish tweaking it in HTML.”

    • David

      I may be wrong, but from what I heard I’m assuming the muse file is the master template, which can then be published using business catalyst, or ‘exported’ to a regular site structure. You could probably take a look at the code by downloading a Muse beta and exporting the project file.

  • http://brocknunn.com Brock Nunn

    These types of products, while interesting are usually just a distraction for end users on their way to either searching for or learning how to design. While I think adobe is to certain extents is really trying to make up for the demise of flash, I almost find it a slap in the face to those of us that make our living creating well thought our designs for our clients. I do think edge is great, but as a site element tool. But this… I hope the future is none too bright.

    • http://www.monochrom-fotoart.de mono

      I totally agree! Edge is a nice ‘tool’. But with this thingy, Adobe is trying to get a new wysiwyg-editor on the market, to fill it’s pocket with even more money and catch lazy customers who will try to do *stuff*. I’m kinda scared of this thought. Webdesign has made major progress in the last years and months, but this is not a progress, it’s a step back. I don’t feel this is pushing the web forward.

      Maybe it’s the revenge for the denial of flash ;-)

  • http://www.bigfishcreations.com Michael Clawson
    Author

    Thanks everyone for the feedback so far.

    You may look at the code on the trial site here

    http://dishup.bigfishcreations.com/

    Or, you can download the source files above.

  • Florian

    Are you serious? I love most of your tutorials, but this is just bullshit. Why do you even publish something like this?

    This site is about education. By teaching something like this, you teach people how to ruin websites. This may sound hard, but it’s the truth.

  • Gianluca

    Come on man, this isn’t bullshit.
    Well the final code is …. ehm …. just … ugh…. way too far from perfection.
    This tut on webdesign+ is like an easter egg under a christmas tree : totally out of place.
    Anyway the result is for sure better than most wannabe-sites out there.
    As others stated before me, Muse is just a tool; an experienced webdesigner can use it to make good looking sites, a total noob can use it to make the same errors he would make with dreamweaver and co.

    I don’t know why Adobe is spending so much effort targeting the noob users… We will see if this become a full product.

  • Pingback: Building a Simple Website With Adobe Muse | Shadowtek | Hosting and Design Solutions

  • Joseph

    I can understand why some people don’t really care for this.

    I myself have to feign excitement whenever my web design teacher gets on his Muse kicks. I’m an old fashioned code-loving guy, and I like to get my hands dirty; so a part of me wants to label this as a means for the careless, artsy people in design to shoe-in on my work. (Between you and me; they still don’t stand a chance.)

    That being said; I could definitely see this as a means of prototyping.

    In the end it’s just another wrench in our toolbox, and it all comes down to how we use it; if at all.

  • Tom Green

    Be with you in a sec … just slipping into my asbestos suit….

    Jeeze, guys, le’st stop with this over reaction. I find it illuminating that you find a way to slam the app but you all used the same key word : “tool”. That’s all it is and,maybe, it is the ideal tool for jobs that aren’t worth even opening Dreamweaver. Muse is a screwdriver. Dreamweaver is a wrench. Edge is a hammer. Use the tool for the job. That is sort of what is being said here.

    The other point is Muse is in Labs. If you have a serious beef with the app, there is a forum at http://support.muse.adobe.com/muse?from_gsfn=true . Want to tell Adobe the app is crap, that is the place to do it.

  • Brad

    I find some of the comments here disturbing. If a tut is below your dignity level them possibly you should just walk away from it. There may be people who just want to create small personal sites and this would be a great way for them to do it. I think it would behoove everyone to remember it may not be our place to decide who, how and why everyone might want a website. The website in this tut may not be a site that most of us would create, nor does this app appear to be one that is going to take a designers job away soon. Everything has a place

    The tut was excellently done. I enjoyed the tut and seeing something different from Adobe. Although I kept taking my headphones off to see where the zen music was coming from :).

  • http://adeeb.org adeeb

    This software is a step backwards in web design & coding.

  • Brett

    I’ve used Muse for a little while and I think the UI of the software is pretty great. I was able to build a simple 3 page site with buttons, a slideshow and a form in about 25 minutes. Much faster than would be possible with hand-coding.

    However, what threw me off was when I actually looked at the code it generated. It’s awful and severely bloated. If you were to design it yourself by hand with writing the code I’d expect it to be much less than what Muse produces which we all know affects load times for websites.

    It has a lot of potential for those that are looking for a simple way to use their own designs to build out a site but don’t want to mess with the frustrations of Dreamweaver but it needs to be able to write good code and I don’t think that’ll be possible with a program for a long time.

  • http://www.eggdude.com Taiger

    You know those clients with a budget of $200? Well, this might be for them.

    However, I wouldn’t do it. I would rather charge more and launch a site based on a purchased template that had some half-decent code behind it.

    I have dealt with templates with worse code than Muse though.

    Definitely not the right place for this article. It would be more suited for something like Freelance Switch, “how to make a little money off your cheapest clients”.

  • Mike

    Ok, not everyone wants to learn HTML or coding but there are people out there who are talented designers who could use this application for simple sights with basic funtionality.

    If you want to get into coding and the snobbery involved…I have worked with a lot of coders who look down on those who cannot, and by the way I can, then thats fine, but dont decry those who cannot or dont want to.

    This is marketed at the wysiwyg people but that does not mean that it does not have a place here

  • Riks

    I have used Muse (codename) couple of times when I had to show a client a quick mock up of the page layout. After creating the layout in Illustrator and Photoshop, Muse was a quick way to make those simple layouts ‘live’.

  • edwinhollen

    For a super-simple layout, Muse is great.

    Anything beyond that, nope. The code is unfathomably bad.

  • Corey

    I am on disability and was sponsered by them and I was unable to learn much coding because they would only pay for so much. So since I don’t have coding this is helpful. I know its not going to do what someone can when coding but I wouldn’t of been able to get a basic site going without something like this.

  • Alistair

    Just to echo the sentiment of another comment Author.

    CRAP.

    I’ll forget this by the morning.

  • Chris J

    I see one major thing here. Coders who make a lot of money who don’t want to lose business to graphic designers who may be able to do decent websites now for far less. And they’ll look better.

    If there is a small restaurant who has scans of their menu online in lieu of a website because they can’t afford to pay a designer and coder $1,000 – $2,000, then this maybe be the only way to improve their site. A bunch of extra code may cost them more in the long run, but not if they only get 10 or 20 hits a day. Pretty much any free host offers a few gigs of traffic per month before they start charging.

    Also, this is a BETA. It’s possible they will slim the coding down by the final release.

    Coders gonna hate, but Artists are VERY excited by this.

    One last thing, I looked at the tutsplus.com main page… PSD, Audio, CG, Vector, hmm yep Web Design for a Web Design app. Looks like the right place.

  • Ikhsan

    However, I like this tutorial,
    this give me new knowledge about web design..
    Thanks.

  • Anthony Alexander

    The horse may not see the automobile as progress, but it knows shit when it sees it

  • Michael Sandiford

    Bless all you coders, you sound just like us graphic designers did in the late 90′s. Problem is, if it works then thats all that matters. You can whine about the code all you want but if the users experience is good then thats that. Most people don’t look under the hood. I’m all for these non coding software, the more they develop the better they will get.

  • Jane

    Excellent….been waiting for a program like this for years, been a graphic designer for 12 years and this is FANTASTIC.

  • Atul Madhugiri

    Quit complaining about its lack of features etc. I think this is a great tool for mock ups and wire frames. However, I do agree that this is not the best for creating whole websites.

  • http://www.jaycutlet.com Jason

    HAHAHAHAHHAHAHA every one of you retarded HTML CSS WordPress kiddies seem so butthurt that Adobe decided to take the initiative. Coming here moaning because people will now be able to produce websites without having to jump through hoops. You’re like the dummies who cry about immigrants taking your jobs, or machines taking your jobs, or jobs being outsourced to locations where people don’t have a stupid sense of entitlement.

    Face it: Muse will phase out the absolute stupidity that is a Print designer being left out of getting a job just because he wasn’t taught code in university and some no life twat who spent hours and years on end trying to learn useless crap like WordPress, HTML and CSS. Muse WILL prove just how absurd the idea of havign to write this stuff up from scratch really is.

    You shouldn;t have to write up code every time you need to move a damn image on the screen, or insert a form, or change the colour of a link. U mad u mediocre designers who only have your coding and CMS knowledge to stand up on are going to have competition from random Photoshop and Illustrator users? hahahahha it’s delicious.

    Thankyou Adobe for hearing the voice of reason.

    • kaybee

      actually, i’m one of those mediocre designers. That’s why i gave myself time and years to improve myself in the graphic part and i’m leaving the hardcoding part to my developers. still think this software is crap. Not only ofr the coding part, because i agree with you: it’s stupid complaining about software that can steal jobs to someone. People who do quality products doesn’t have to fear innovation.

      The problem of this software is that it still engagé the client and the visual communication in too many few options. Having a good developer is the real way for giving the best communication. This software is just…meh…just tried it and i have to say i’m retty disappointed.

    • Bryan

      Agreed.

    • kushal kant

      Excellent….been waiting for a program like this for years, been a graphic designer for 12 years and this is FANTASTIC.

  • http://apphotography.businesscatalyst.com Anthony

    wondering if webpages in Adobe Muse can be audible…

  • Zliver

    Muse is totally shit! I am a hardcore coder and Muse sucks! I am so hardcore, I don’t use any framework, because as a hardcore coder, I do all by myself! I am even using the good old Windows Editor, because all other things, like code highlighting and autocomplete, are not pure!

    Okay, enough of that. I know how to code, at least HTML, CSS and JavaScript (enough to use jQuery well) and I think Muse is great. Simple sites that don’t need any server side programming will be easy to create. And after all, a coder can check the code and change things for SEO or adding other stuff later.

    In the end the client doesn’t care how its made, he just wants it to be made.

    And to all coders: For people who create technology, you are very conservative…

  • James Crandall

    Thank you for putting this tut. up. This was a great baseline for me to start.