How I launched a website in a day with Adobe Muse.

[Edit: See the site live at odibeesans.com]

I own a copy of Adobe Muse as part of my Adobe CC subscription. I've wanted to try it out for some time, as it claims to put the power of the web developer into a designer's hands. Essentially, you can theoretically turn your design (done in Photoshop or similar) into a fully-functioning, responsive website, without having to write a single line of code.

I've always been suspicious about programs like this. The worry for me was that programs like this will spit out unnecessary, bloated code, and will never do as good a job as a developer. So I decided to spend no more than a day learning to use the software, and to see if I could actually build a working, one-page website using Adobe Muse, and publish live to a domain.

My project would be to create a website for my font, Odibee Sans. I made this font in one day (a one day build or 'ODB'), so making the website to accompany it in one day seemed fitting.

I went to Photoshop and began laying out the design for my one page website. Obviously, I wanted the site to be responsive (look good on mobile) so I kept it as simple as possible, with a three-item menu and centred content throughout the page (no need to stack elements on smaller screens). It would need a little intro copy, some information about me, the designer, and a link to download the font. Also, the website would need to host my custom font, to be used as headlines across the page.

With the design done, I went to Adobe Muse and started off watching the program tutorials. There is an excellent resource here for beginners, which guides you through the whole process of building a responsive website in Muse.

You begin by setting up a master file. This contains any content that will be displayed across all pages on the site, or in our case, the header and footer. You can import Photoshop elements layer by layer, which is super handy for inserting items like full-screen images, or png buttons. What's also handy is importing your entire document as a flat guide to build on top of. However, I found that it was easier to prepare my assets using the 'generate assets' feature inside of photoshop, and then import them manually. This is where you just type '.png' at the end of a photoshop layer and it creates a png file for you in a separate folder. I use this feature all the time when I make email newsletters and it allows me to also control the file size of each asset. For example, if I want a jpg at 70% quality of the original, I simply type '.jpg7' at the end of the layer!

I then had to insert the custom fonts that I wanted to use on my site. My design only used three fonts; my 'Odibee Sans', the Google font 'Raleway' and the wonderful 'Font Awesome' for icons. But unfortunately none of these were standard system fonts, and they all had to be uploaded to Muse, which is then hosted within the final export.

With the background colours and text inserted for my header and footer, I then had to set rules for each element so they stay in the position I want them in as the browser resizes. For instance, I always want my menu items to be fixed top-right of my screen, but the footer elements should stay centred. This takes some trial and error using the 'pin' and 'resize' settings in Muse.

With the header and footer created, I moved to the home page design via the sitemap in Muse. There wasn't much of a sitemap in my instance, as it was only one page, but this is where you can create multiple pages for your website. My menu therefore, would only use anchor links to certain sections of the home page.

From here it was just a case of exporting my assets from Photoshop and inserting them into Muse. Luckily (because I'm super-organised) I had already set my styles using the CC libraries in Photoshop, including all colours and fonts. So when I went to set the styles for links, 'h1' and paragraph tags, all I had to do was click the button in the libraries panel.

The hard part was telling Muse what should happen as the browser resizes. I wanted my hero image to fill the width of the browser, but not scale on resize, so that it remains centred. This took some figuring out. Essentially, you create a rectangle with an image 'fill' of 'heroimage.jpg', and then set the fill to 'Scale to Fill'. More on this here.

I then decided on my breakpoints for the site. This is the browser width under which the content should change, and luckily this is super-simple to set up in Muse. You just drag the width of the page until the site 'breaks' (e.g. the content spills off the edge or the design no longer works for that screen size) and click the little plus symbol at the top of the page. Then simply move or resize the content until it looks nice. I only needed three breakpoints; one for when the text was too wide for the browser, and one for when the main title 'Odibee Sans' no longer fitted the screen. Everything else either scaled to fit, or was already designed to fit on a mobile screen (e.g. the header and footer).

With the site previewing well in my browser and looking good on mobile screens. I created my anchor points on the homepage (Object > Insert Link Anchor). Amazingly, Muse includes a beautiful scroll feature, rather than 'snapping' to a point in the page. So when a user clicks a menu item, the page scrolls nicely down to the correct section. I then styled each and every hover state for my links, and added 0.2 second fade to each hover, which is a lovely control feature.

After testing the site like mad in browser (option+command+E to preview) I was ready to publish. I already owned some hosting space and mapped my freshly bought URL from Godaddy (I won't go into this here). All I needed now was to add my ftp details into Adobe Muse and hit publish! This is an excellent feature and one which I've used before in Dreamweaver, as it saves you having to export the files and upload manually via an FTP client. It also means that I can make live changes whenever I want directly in Adobe Muse and the software will only update modified files whenever there are changes.

I was blown away with how fast the whole process was. I went from design to live in about 5 hours! But this only took so long because I was using the software for the first time. As an Indesign user, the keyboard shortcuts are very similar, and after watching the tutorials I was flying around the software. Also, adding Google Analytics, metadata and favicons was super simple.

Check out the site live at odibeesans.com and download my font for free!