Create a Responsive Website with Adobe Muse CC

In this Create a Responsive Website with Adobe Muse CC course, you will first establish the design of your website by learning how to first 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 adding parallax effects. Lastly, you’ll finalize your website by reviewing publishing options.

More about Muse & this training course:

• 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.

Chapters
GETTING STARTED WITH ADOBE MUSE CC 26:11

•  Introducing Adobe Muse
•  Looking at Examples of Responsive Sites
•  Exploring the Interface
•  Planning Out Your Site

DESIGNING A SITE 55:54

•  Starting a New Site Document
•  Placing Images
•  Drawing Shapes
•  Using Vector Graphics
•  Placing Text
•  Advanced Text Styling

ADDING INTERACTIVITY 27:57

•  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

MAKING YOUR SITE RESPONSIVE 43:19

•  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

CREATING A PARALLAX EFFECT 30:22

•  What is Parallax?
•  Getting Started with Parallax
•  Creating a Motion Scroll Effect
•  Creating an Opacity Scroll Effect
•  Creating a Fill Scroll Effect

FINALIZING YOUR SITE 12:28

•  Adding a Favicon, SEO & Testing
•  Exporting & Publishing Options
•  Conclusion

Instructor: Martin Perhiniak
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.

Martins Motto: Do not compare yourself to your role models. Work hard and wait for the moment when others will compare them to you.