Getting Started with Composer

WHPS Initial Design Concepts

• WHPS homepage
• School homepage
• Interior page

About the Design:

What is the primary objective for the homepage?

smart design, easy to access info, share and celebrate achievements, inform, and communicate

What type of content do you want to include on your homepage? Consider how these elements match the overall goal of the site.

great photography, video, infographics, news and events, links

List three adjectives to describe how you want the site to look and the type of message you want to convey?

sharp, easy, professional

Considerations:

• Overall, design focus was to keep the design as clean and ADA compliant as possible. The use of white space is designed to allow the user some place for their eyes to rest, between all the video and visual elements. The fonts used are the Google Fonts Fjalla (the taller font) and Lato.
   
• The header is sticky and follows the user down the page.
   
• The menu is designed similar to https://www.marymountrome.com/. It opens on click and has the search that as well. The Directory, Quicklinks, and Login links are dropdowns.
   
• The video in the top banner will be the height of the browser window on desktop with an arrow to take them down to the next section of the page at the bottom. The user has the ability to pause the video if needed. Video cannot display in the mockup but will be applied to the actual site. Here's a sample using WHPS students. School specific videos will capture the feel of the school, students, and staff as well as highlight special characteristics and special events.
    
• Important headlines display over the video. You can list as many as you would like, but we recommend no more than five. There is also a link to the news section/archive.
   
• The calendar is in a slider with a link to view the full calendar. You can control which calendars appear in this section.
   
• The grid boxes are designed to be call out buttons to specific sections of your sites. There must always be six here in order for this to function properly. All the hover states are blue.
   
• The infographics are links that open panels with additional information. 

Exploring the Design:

• Menu Styles: Hovering over "Login" and clicking on "Menu" will show you their respective styles. Please click close on the menu to return to the main Invsion screen to continue viewing the mockup.
   
• Arrows: Please hover over the right arrow on the image slider.
   
• Buttons / Icons: Please hover over the "View All Events" button and the Facebook icon in the footer.
   
• Grid Boxes: Please hover over the first entry.
   
• Infographics: Please click on the second stat. Clicking close returns you to the main Invision screen.

Finalsite Training: Select Composer

Additional Tutorials

• Banners

  • Banners Length: 1:36

  • Create a banner Length: 1:45

  • Add banner to page Length: 2:49

  • Clone banner Length: 1:35
     

• Editor

  • Resizing and cropping images Length: 5:27
     

• Elements

  • Add elements Length: 1:44

  • Layout elements Length: 2:33
     

• Pages

  • Create a page Length: 1:30

  • Page settings Length: 1:25

  • Move a page Length: 1:25

  • Page statuses Length: 4:26

  • Create redirects Length: 3:38

  • Linked pages Length: 3:40

  • Page layouts Length: 2:39
     

• Toolbars

  • Composer intro Length: 3:16

  • Composer environment Length: 6:25

  • Bottom toolbar Length: 4:59

Software Guide: Resources

• Getting Started

  • Displaying Files and Media Length: 5:34

  • Resources: Uploading and Editing Files (v2.0) Length: 4:46

  • Resources Overview Length 7:06

Getting Started Guides

Webinars

• Webinar: Composer Overview Length: 1:15:53

• Click on Composer at this Video Training library for the following:

  • Composer Intro Length: 3:16

  • Composer Environment Length: 6:25

  • Bottom Toolbar Length: 4:59

  • Create a Page Length: 1:30

  • Add Elements Length: 1:44

  • Layout elements Length: 2:33

  • Page Settings Length: 1:25

  • Move a Page Length: 1:25

  • Banners Length: 1:36

  • Create a Banner Length: 1:45

  • Add banner to page Length: 2:49

  • Clone Banner Length: 1:35

  • Page Layouts Length: 2:39

  • Page Statuses Length: 4:26

  • Create Redirects Length: 3:38

  • Linked Pages Length: 3:40

  • Webinar: Page Manager to Composer Length: 39:53
     

• Webinar: Page Manager to Composer Length: 39:53
   
• Webinar Schedule for daily sessions

Take an Interactive Tour

When you’re logged into Composer, click to take an interactive tour:

Goals:

• Simplify the user experience. Think engaging simplicity.
   

• TL;DR Avoid extraneous info. Don't migrate content just because it already exists in Page Manager.
   

• Quality images rather than clip art
   

• Combine similar info on the same page using accordions, tabs, and columns. This will lead to fewer overall pages to maintain.
  
  

• Pay attention to how pages will display on mobile devices.
   

• Take advantage of elements (and shared elements) that feed content into pages.
   

• Use smart file naming conventions and keep organized in Resource Manager.
   

• ADA compliance: avoid tables and pdfs when possible, alt text, video captioning/transcripts, avoid "click here for..." Accessibility Quick Reference
   

• Talk to your admin about what you want to highlight as important headlines over top video banner, in the 6 interactive buttons, and infographics for your school's homepage.

Login to Composer