Design and Build Responsive Websites with Muse

This course is for designers who want to learn how to design and build great looking websites and landing pages without writing a single line of code. This might sound too good to be true, but Muse lives up to the hype! Muse lets you jump in and begin creating fully responsive web projects using tools and features that will be immediately familiar to anyone who’s used Adobe InDesign, Illustrator or Photoshop.

Cutting edge features including responsive design, image sliders, full-screen backgrounds, web fonts, scrolling and motion effects and much more are just a few clicks away. You’ll learn how to import graphical and animated content from Illustrator, Photoshop and Animate. You can Publish your site directly from Muse, and even let your clients edit their site content directly in a browser.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Free course refreshers for public courses

Professional training environment with Macs and PCs

Book a Course

  • Price: $ 995.00
    Time: 9:00am – 4:30pm
  • Price: From $995 +GST per day
  • This course is provided as a custom training session only, please call us on 1300 441 891 or make an enquiry below to schedule your training

Course outline - WHAT you’ll learn

Getting started

  • How Muse works
  • About ‘freeform design’
  • Views – plan, design, preview and publish
  • Planning your site – adding pages
  • Designing with Muse – converting sketches into web pages
  • Setting up a Master page for common page elements
  • Using guides and grids
  • Defining headers and footers

Working with Text

  • Understanding standard, system and web fonts
  • Character and paragraph styles
  • Using Glyphs for special characters
  • Using the Typekit font library
  • Setting spacing options
  • Formatting lists
  • Applying background colours and spacing to text frames


  • Creating vertical and horizontal menus
  • Customising menu elements
  • Using States and transition effects to change styles on hover and click
  • Creating dropdown menus
  • Creating a custom menu
  • External links
  • Same-page navigation using Anchors
  • Applying links to text and graphics
  • Creating buttons


  • About size and resolution
  • Placing images as PNG or JPEG files
  • Placing SVG files
  • Using the Assets panel to update images

Working with colour

  • Using the Swatches panel
  • Using the Fill panel
  • Using transparency

Graphic styles and effects

  • Using corner effects
  • Opacity
  • Drop shadows
  • Gradients, fills and strokes
  • Images as backgrounds
  • Defining graphic styles
  • Making a rectangle look like a circle


  • Image sliders – interactive slideshows
  • Social – setting up social link icons
  • Maps – setting up a Google map
  • Forms – building a contact form
  • Menus – defining and customising horizontal and vertical menus, creating a custom menu

Responsive Design in Muse

  • Fluid vs. Fixed design
  • Defining Breakpoints for layout changes at specific widths
  • Allowing text and images to scale
  • Responsive column layouts
  • Formatting text across all breakpoints, or for individual breakpoints
  • Pinning content to a fixed position
  • Showing/hiding elements in breakpoints

Search Engine Optimisation

  • Applying Semantic tags to text elements
  • Metadata – defining descriptions and keywords
  • Setting page titles

Previewing and Publishing your site

  • Previewing in Muse
  • Previewing in a web browser
  • Uploading a site via FTP, or to a Business Catalyst server
  • Editing and synchronising once a site has been uploaded
  • Exporting a site as HTML

  • Contact Us