Adobe Muse

Easy to learn and use—no coding, fast and effective free-form web site development and deployment tool.

DOWNLOAD EXERCISE FILES

Pros About Muse

  • Starter Templates:
    (http://resources.muse.adobe.com/collections/tutorials/starter-designs/)
  • Scroll Effects (Motion, Opacity, Slideshow, Edge Animate)
  • Header and footer pre-defined
  • Dynamic menus and submenus based on web page names
  • Manual menus based on dynamic menu widget
  • Button/Image state with transition
  • Create mock-up in Adobe Comp and send it to Muse
  • Smart guides when moving elements
  • Widgets (to create menus, forms, galleries, e-commerce, etc.)
  • States Panel
  • Place Photoshop button
  • Add new content to footer that is not a part of Master
  • Web fonts (Typekit, Edge, Self-Hosted)
  • 100% width objects.
  • Linking made easy
  • Don’t Export Page (triangle)
  • Page Title Suffix (Metadata)
  • Round-trip editing from Adobe other apps (AI, PS)
  • Ability to set page name, title and filename all the same
  • Add tool tip AND alt text for images (accessibility)
  • Automatically create sitemap.xml for SEO
  • Add favicons to browser title from small image file
  • Built-in form with email capability
  • Vertical Move Tools to move page items up or down
  • Vertical Text support
  • Right-To-Left Language support
  • Library panel
  • Collect All Assets
  • Social Media widgets (e.g., Google map, Facebook)
  • Download third-party widgets to library
  • Enhanced set of bullet and number lists
  • reCAPTCHA spam protection
  • SVG import
  • Text synchronizing
  • Layers Panel to organize content like Illustrator
  • Browser Fill option to fill background with a color or image
  • Parallax Scrolling
  • Plan View to expand/collapse pages thumbnails

Similar to InDesign

Like InDesign is a layout program for print, Muse is a layout program for the web.

  • Easy layout of site like InDesign
  • Master Pages
  • Paragraph and Character styles like InDesign
  • Enhanced crop tool (akin to clipping in HTML)
    TIP: You can crop both bitmap and SVG images. To crop a placed image, hold down the CMD or CTRL key and drag.
    TIP: You can drag-and-drop a basic-slide show and the add SVG image to it with the Place gun and it will REPLACE the current set of images.   
  • Place tool to insert multiple images and preview
  • Rectangle and Ellipse Frame tools
    TIP: Move, resize or rotate or delete an image in a frame by double-clicking on it.
  • TIP: In order to create text, you have to draw a text box and type or paste text into it.
  • Place linked element (e.g., SVG, PSD) from Library by right-clicking and selecting Place Linked
    TIP: If you double-click on a placed linked element (e.g., *.psd file), it will open up in the original app where you can make changes. However, to ACCEPT those changes, from the Library, you need to right-click on the element and select Update Asset… This is called round-trip editing. If you copy and paste and image from Photoshop, you will EMBED instead of LINK the image in Muse. If you do this, you will not be able to use Edit Original for this file in the Asset Panel. This technique should only be used for prototyping.
  • Not only can you place image, but you can also place text. However, you cannot place a MS Word file only a text file (*.txt) and it will come in unformatted.
    TIP: Instead of using the Text tool to select text, double-click inside of the text box to select a word, triple-click to select a paragraph and quadruple-click to select all of the text and use the ESC key to get out of the edit mode.
  • You can search Library for Adobe Stock, Current Library or All libraries.
    TIP: You can download an Adobe Stock watermark placeholder until you replace it with your own image. If you want to actual purchase the image right-click on it and select License Image…
  • Click ALT (or Option) key on the plus sign in the Paragraph panel to remove the override properties.
  • Layers panel like Adobe Illustrator
    TIP: Rename the first layer Header and add two additional layers Content and Footer and place content in the correct layer.
  • When drawing a rectangle below other content above the footer, the rectangle will grow and push down to footer
    TIP: If you do need to draw another rectangle but don’t have any space above the footer, start to draw INSIDE the previous box and drag downward to extend the rectangle and then resize it as needed.
  • Assets Panel (akin to the Links Panel in InDesign). The Assets Panel holds content that are in your site; whereas, the Library Panel holds content that is SHARED across all of your app from the Cloud.
    • If the Asset is missing you can Relink it.
    • If the Asset has been modify in an external app (e.g., PS or AI), you can update it.
    • To see additional information about an asset, hover the mouse over it.
    • To get an image alternative text or tool tip, right-click and select Edit Image Properties.
  • There are four type of styles that similar to InDesign:
    • Paragraph
    • Character
    • Graphic
    • Bullet
  • The Glyphs Panel is similar to InDesign. What’s nice is that you can search by type of symbols from a drop-down list:
    • Punctuation
    • Currency Symbols
    • Bullets
    • Math Symbols
    • Common Symbols

Web Design

  • Graphic Style
  • Wrap Panel
  • Link Styles

Responsive Design

  • Easy to set break points (on Master) and view them
  • Responsive menu (hamburger menu)
  • Pinning elements to different edges of the page
  • Create different number of columns on different pages
  • Enhanced scroll effects (e.g., parallax scrolling)
  • Hide (content) at Breakpoint (akin to display:none)
  • Format text on current breakpoint Tool
  • Copy Text Formatting to All Breakpoints, etc.
  • Copy Size and Position to All Breakpoints, etc.
  • HiDPI (High Density Pixels) support
  • Touch-enabled interactivity of mobile viewing by hyperlinking phone numbers to automatically dial when tapped or email addresses to open emails with the recipient address already filled in.
  • Gesture-enabled widgets will automatically convert to touch gestures (e.g., finger scrolling or page swiping) without coding.
  • SVG import - Place or copy/paste SVG images directly into Muse that can be resized without losing resolution, load fast, and look great on HiDPI devices.
  • Scale To Fit with Fill Tool:
    TIP: Create a container and add a large image to it and then select Scale To Fill

Publishing

  • Publish to Business Catalyst, FTP or export to HTML
  • Plan, Design, Preview and Publish buttons
  • In-Browser Editing (IBE)
  • Secure FTP auto-detection

Cons About Muse

No Table Insert Function

TIP: You have two ways to INSERT a table in Muse:

Use a widget

Copy the HTML code for a table and then use Object > Insert HTML to insert it at the cursor in your page. You cna also write you own HTML code in the Edit HTML dialog box that appears.

No Responsive Menu

No responsive menu option (hamburger menu). Have to use an accordion widget that you have to modify to meet your needs.

No Database Connection

Cannot use database content like PHP, etc. or a CMS like WordPress

Other Issues

  • Have to Export to HTML site to view in another browser other than your computer default browser. Then open it up in that browser.
  • Not best for large website or team-based websites.
  • If you modify the code in another editor (e.g., Dreamweaver), you may not be able to update it back in Muse.

Concepts To Remember

  • When the design breaks add a break and redesign. Don’t just set break points for desktop, tablet and phone but where the design breaks down which may be more than three breakpoints. Typically, you will want to go from a three columns (desktop) to a two columns (tablet) to a one column (smart phone).
  • You need to drill down multiple times into a widget to get to element you need. Akin to a symbol in Flash.
  • The last thing you want to do is page content after you set breakpoints for mobile and phone
  • You set most break points on master template but you can set some on the individual pages
  • You need to click on a break point to view them (They are color coded.)
  • You need to pin to the corners (akin to fixed positional) and pin to the left, center and right and let element scroll
  • System fonts will convert to images and should be avoided because you cannot select it on the page to copy it and it is not available to be accessible.
  • You need to go to the Google Webmaster Tool and tie the sitemap.xml to your site
  • File > Place will create <img>; whereas, Frame Tool will create background CSS image. (CONFIRM).
  • If content is not visible or is not working, it may be that it is on the wrong layer. Go to the Layers panel and make the necessary adjustments.
  • You can INSERT HTML content (e.g., Google map, Tables, etc.) into Muse by selecting File > Insert HTML…  OR select some embedded code (e.g. iframe from Google map or YouTube) and copy it and select Paste In Muse to insert it.
  • Favicons is not only used for website. It is useful for user who wants to bookmark your website on their phone. Favicons size is typically 32x32 but you can make is a little bigger (48x48) for Retina display. Also, you can use a jpg, gif or png (with or without transparency).
  • While you don’t have to know HTML, you can still embed some HTML content into your web site from various sources (e.g., YouTube, Vimeo, GoogleMap, Tweeter feeds, RSS, and Social badges like Facebook or Instagram.)
  • Embedding YouTube or Vimeo is more flexible than the widgets that comes with Muse.
  • Even if you create a Single Page website, use the Master Page anyway. This makes the site future proof in case you need add pages later.

Responsive Design

  • Common base size for responsive design:
    • Laptop: 1280x720
    • Tablets: 1024x768 
    • Phones: 640x960
      NOTE: While you should have in mind the common size, it is more import to let the content dictate where the breakpoints should be placed which make your design future-proof for newer sizes that may come out.
  • You should also take into consideration
    • Touch-friendly size (40px x 40px) for buttons
    • Contrast is good in bright or low light
    • Bandwidth (3G or Wi-Fi)
  • Each Master page and individual page has its own breakpoint. Start with the Master page first and then set SELECTED breakpoint on individual pages as needed.
  • There are several levels of responsive design:
    • Page-level (use breakpoints)
    • Content-level (rearrange, resize and pin content)
  • There are several steps that should take when doing a responsive design in this order:
    • Create blank pages with content in header and footer
    • Make responsive
    • Add content to pages
    • Make responsive
  • Breakpoints should NOT be dictated by the page size (1024x768) but by its content. Remember, content is always KING when it comes to design
  • Because you will be rearranging element quite often, use the Align Panel to re-align elements within Break points.

List of Resources

  • MuseGain - hundreds of widgets, the best CMS & the most used e-Commerce to give Muse wings
  • MusexPress - Use the MusexPress CMS to create a website with Adobe Muse and manage it with WordPress
  • Muse Themes - downlaod 350+ widget, thems and tutorials. Build beautiful Muse sites
  • Adobe Muse Resources - Adobe tutorials, events, widgets, site of the day, and other resources
  • Justin Seeley - graphic design totorials including Muse from Justin seeley
  • Adobe Color Wheel - Adode Color CC
  • WEbdesigner Depot - 15+ widgets that take Adobe Muse to the next level
  • Subtle Patterns - Subtle Patterns Plugin to create tile background
  • Unsplash - Royalty free high-resolution photos

Videos

Lynda.com Training

  • Responsive Design Fundamentals with James Williamson
  • Applied responsive Design with James Williamson
  • Photoshop CC for Web Design by Justin Seeley
  • Illustrator CC for Web Design: Core Concepts by Justin Seeley
  • Business Catalyst Integration with Muse by Justin Seeley
  • Creating a One-Page Scrollable Website with Muse by Paul Trani
  • Creating a Small-Business Website with Adobe Muse by Paul Trani
  • Designing a  Portfolio Website with Muse by Steve Harris
  • Designing a Responsive Mobile Website with Muse by Paul Trani