[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!