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

Design Elements


Although much of your 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 draw 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.


Examplehttps://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.


Examplehttp://pada.org

    • The background

    • The logo

    • Navigation color

    • Primary color


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 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 with other photos as a 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


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.