This document aims to give some best practices for people working on site designs.


Themes


There are three themes available for selection, which can be selected in Admin > Settings > Design:


Classic (deprecated)


Our original design, which is now deprecated due to its dated look. Though this option is still selectable for legacy purposes, we don't recommend it.



Verge


Launched August 2015, Verge featured a more modern design, a full-width navigation bar, and the addition of a hero grid for beautifully displaying featured content.


Compact (recommended)


Our most recent (and therefore recommended) design iteration, Compact removed borders on the navigation and offered a mobile-friendly floating navigation option, redesigned the hero grid with some "tiny joys", and added a hero image as an alternative to the grid. 


Design Elements


Although much of a site's layout is static, there are many design elements that can be changed. We’ll cover them all individually.


Header


The header sits at the top of the page and draws the most attention. It contains the logo, which will often set the tone for the rest of the sites design.


There are three main types of header designs:


Logo - this is the most basic design. A logo can either be set to size Normal, Large, or Banner. Transparent logos are recommended in almost all cases and PNG is typically the best image format (though a GIF will work).


Logo might need some modification. Best to have the raw file but you can probably work with any image type. Look at the current site and look at the logo. Do we want to make the logo the header? How large do we want that? Scale it accordingly. If you have a small logo you can add some text elements to it and make it look better.


Example: https://canadianultimate.com/


Banner - this is a rare, but effective design. It involves a non-transparent banner whose colors match that of the rest of the site. Banner size looks best around 1045 x 155, but feel free to play around with different sizes that might work for you. 


Note that banner only works in the "Verge" layout. 


Example: http://manly.ultimatecentral.com/\


Logo with Background Image/Buttons - also known as the 'Hero Banner', this design works well for displaying a logo over a photo background, as well as inserting tagline and subtitles, and most popular of all, buttons with calls to action for pages on the site.


If selected, the background image should be high resolution with action in the center of the image. In almost all cases, a background image should be a photo, not a design, gradient or solid color. If you’re using a photo, you’ll want to break the images up with some solid colors. Put a pattern on top of the image.


It’s important to understand that a background image can range from a short, long rectangle to a tall, narrow rectangle depending on the viewing device of the user.


Example: http://pada.org


Hero Grid


The 'Hero Grid' is a series of five blocks, one major block and four supporting blocks. These blocks can be occupied by an event, a page, a product, or a post. For a page, it will pull in the “media item” image under Sharing and Search, for the others, it will pull in the default image.


The Hero Grid can be enabled by clicking "Page Setup" on any page, but is typically used on the home page. 


The grid is meant to be something that is frequently updated, but it’s always good to give it an initial design that inspires!


You typically don’t want photos in the hero grid if you have a photo background, so if you’re using the grid layout, you should try for a solid color or patterned background.


Note that images will need to have an 83:100 aspect ratio to appear without clipping on the Hero Grid in desktop mode (and should fit inside a 55:100 aspect ratio box in order to appear without clipping on mobile). 


Example: http://www.pacificweightliftingassociation.org


Hero Image


A Hero Image is an alternative to the Hero Grid, and features a large image slideshow that can span the width of the page, if necessary. As long as high-quality and high-resolution images are used, the hero image can be a striking alternative to the grid.


Like the Hero Grid, it is selectable by accessing the Page Settings of any page (the gear icon). 




Colors

The site colors determine the navigation and button colors. Match these to what the you currently use for your logo with the Chrome extension “Colorpick Eyedropper”. Use at max three colors. You can choose additional colors using a color wheel, like paletton.com. Choose your primary color, and choose the tetrad option.


For color schemes, consider using similar colors on top of each other instead of always opposite colors. It gives sites a cool effect.


Note: Hyperlinks will always take the 'primary' content color.


Background

The site background is the finishing touch on a great design. A great background can make a good design great. Think of it like ice cream cake. Mmmm, cake.


Backgrounds can either be photos, a pattern, nothing, or a gradient. Don’t be afraid of a blank background, with strong colors and a visual header, it can look quite modern and elegant. If you do want to use a solid color background, strongly consider adding a gradient effect (http://rocultimate.org/ is a good example).


For sites with headers with photos in them, or grids with photos in them, it’s probably best to go with a pattern or a gradient.


For standard logo sites, a photo looks best. Find photos on Creative Commons. Photos often look better with some sort of pattern over them, like a vignette, a swirl, gingham, etc.