The Design Gallery

Standard Homepage

The standard website homepage.  This has all the basic information needed for users to know what the site is about, and where to go next.

Here we use out of the box look and feel without changing anything in the header.  This is the way the majority of your pages will look.  Use the layout took and box backgrounds to add unique images to your pages.

Homepage Example: Landing Page Header

This is a variation on the standard example that we have.  In this version we update the page properties to set the header to a landing page format.  This will allow the image in the first box to extend up behind the header navigation.  The navigation area is automatically darkened to provide good contrast.

Layout Design

We have also altered the page layout to show how different layouts will impact things like image size and content flow.  Remember that many uses will have different devices from the one you use to create the page.  Think reponsively and make sure that your content will always work good from deskop to mobile device.  Sections 1 - 50 will line up in rows in a mobile device so keep your page flow knowing that at some point a user will not see things in columns, but all rows.  

Homepage Example: Landing Page Header, motion content

This homepage users the landing header style and the content also makes use of our card style which allows the background image to show through the navigation.

Motion Styles

We have two sections with cards which help separate content into more easily seen smaller pieces.  It also uses motion styles that help make the content feel interactive as you scroll down.

Presentation Pages

Presentation pages are used to highlight events or special sessions that you want to bring to people's attention.  This style strips out the header navigation to focus on the content. 

The best use for this is a landing page that you use as a promotional email or deep link that is coming from a vanity url.  Since there's no headers navigation its best to keep the information self contained.

Parallax

Parallax allows you to overlay an image on the screen with text.  The image can be fixed, zoom, or scroll as the user moves up and down the text will move at a different rate than the background.

These pages are great for presentation or events that you want to promote.  You can use artwork / past event images to help create a dynamic page.  

Check out the styles on parallax for more examples and how to setup the effect on your own page.

User Directory

Rather than building a separate page for each user that is in the department/center why not use an info block?

View all users at once and even edit their content in one file.  End users can select any user to learn more without going through multiple pages.

This example is very simple and uses the standard out of the box styles and does not set up any filters.

User Directory: Badges

Rather than building a separate page for each user that is in the department/center why not use an info block?

View all users at once and even edit their content in one file.  End users can select any user to learn more without going through multiple pages.

This example is based on the same user data as the default but we've added the 'directory-badges' style to it.  This transforms each user information into something that looks like a name badge.  Users see the image of the person with all their contact information in one space.

This style is responsive and will update the layout based on user's screen size.

User Directory: Profiles

Rather than building a separate page for each user that is in the department/center why not use an info block?

View all users at once and even edit their content in one file.  End users can select any user to learn more without going through multiple pages.

This example is based on the same user data as the default but we've added the 'directory-profiles' style to it.  This transforms each user information into something that looks like social media profile.  Users see the image of the person in a circle and each user can add in a unique header image to be used in their profile header.  

When users open the full view of any profile the header image is displayed larger across the screen.  This style is useful if you want to personalize each user with a different image that suites their personality, job, or specialty.

This style is responsive and will update the layout based on user's screen size.