• Translate    
  • Quick links     
Our Mission is to inspire and prepare all students to realize their potential and enhance our global community.

Department of Technology

Town Hall
50 South Main Street
West Hartford, CT 06107
Office Suite 409
Jared W. Morin, CIO 

Getting Started with Composer

 

 

WHPS Initial Design Concepts

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

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

 

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: https://westhartford.redesign.finalsite.com/admin

West Hartford Public Schools

50 South Main St, West Hartford, CT  06107

T: 860-561-6600

F: 860-561-6910

email page print page small type large type
powered by finalsite