Muse CC: Create a Responsive Website


 Learn how to create a fully-functioning, trendy website in Adobe® Muse™ CC. This course walks you through the whole process from planning to publishing. Follow along using the exercise files provided, and pick up all the necessary techniques you need to work on your own website projects confidently.

Length: 3 hrs 16 min

This title is available in the
Total Training All-Access library.

Subscribe Now


In this Create a Responsive Website with Adobe Muse CC course, you will first establish the design of your website by learning how to plan out your website, and then design your page elements and add interactivity with links and buttons. Next, you will explore the full capabilities of Adobe Muse by making the site responsive for it to look good on all screen sizes and by adding parallax effects. Lastly, you’ll finalize your website by reviewing publishing options.

Sample clip


  • Muse is great for portfolio sites, micro-sites, landing pages, and simple or small business websites.
  • Muse is ideal for graphic designers who are creative, not keen on coding, who would prefer to create something unique instead of amending templates, and who are good at Photoshop, Illustrator and Animate (knowledge of InDesign is also beneficial).
  • Responsive design used to be a separate application called Adobe Reflow, which got merged into Muse in 2017. This made this product even more robust and an excellent tool for web design.
  • Parallax scrolling effects can be incorporated into your Muse projects, as well as static & fluid breakpoints.
  • Muse has full support for web fonts, so make sure you use them in your projects. Avoid adding text in image format, always keep your text written to improve the SEO of your site.
  •  Muse allows you to implement a visually designed, yet truly responsive website. Elements that you add to your pages can be optimized for everything from a very large, high resolution desktop browser, down to the smallest, low bandwidth mobile device.
  • There are no pre-made themes in Muse. Instead you design your website from scratch. Fortunately Muse has built in some solid support for design. For example you can make lots of customizations to blocks: set opacity, blur, border radius, border sizes, add drop-shadows, scroll effects and more etc.
  • Your job is to visually design the site using a freeform design canvas. From there, Muse figures out how to generate modern html, CSS and JavaScript code to assure that the design will be as consistent as possible across all of those browsers and devices.





Introducing Adobe Muse

Looking at Examples of Responsive Sites

Exploring the Interface

Planning Out Your Site

Chapter 02: DESIGNING A SITE 55:54

Starting a New Site Document

Placing Images

Drawing Shapes

Using Vector Graphics

Placing Text

 Advanced Text Styling


Creating Navigation Elements

Adding Buttons & Links

Inserting a YouTube™ Video

Inserting a Slideshow

Adding a Google™ Map

Adding Social Media Buttons

Inserting a Custom Form


Setting Breakpoints & Page Width

Adjusting the Master Page Layout Based on Breakpoints

Adjusting the Home Page Layout for Desktop Display

Adjusting the Home Page Layout & Text for Tablet Display

Adjusting the Home Page Layout & Text for Mobile Display

Designing a Hamburger Menu for Mobile & Tablet


What is Parallax?

Getting Started with Parallax

 Creating a Motion Scroll Effect

Creating an Opacity Scroll Effect

Creating a Fill Scroll Effect

Chapter 06: FINALIZING YOUR SITE 12:28

Adding a Favicon, SEO & Testing

Exporting & Publishing Options


Martin is a Certified Adobe Design Master and Instructor. He has worked as a designer with companies like Disney, Warner Brothers, Cartoon Network, Sony Pictures, Mattel, and DC Comics. He is currently working in London as a designer and instructor as well as providing a range of services, from live online training to consultancy work, to individuals worldwide.

Martin’s Motto “Do not compare yourself to your role models. Work hard and wait for the moment when others will compare them to you”



You may also like…