Graphic Design 103: Style Your Header

Graphic Design 103: Style Your Header

Today we are going to talk about how to choose your own font and color for your site's main title header. This can be done in the website design area of your team's site.

When designing your team's page, we have already looked into a few key areas of graphic design and we will need these skills today. The first in Graphic Design 101: Keep It Simplewe talked about how to simplify your homepage layout and background. In Graphic Design 102: Get Pixel Perfect we explained how to keep your images clean and crisp.

To get to the graphic design area, go to Team Admin > Website Design and then click Website Layout Configuration.

graphic-how-to

In order to best match your team's theme, stick with team colors and remember to contrast with your background image color. For example our team colors are light navy blue, black, and grey and we are the Oregon Sharks.

sharks-GRAPHIC-103As we design our web page, we see that two of our team colors are dark and would contrast well with a simple light background. So we chose a simple pattern for the background image and upload it to the Custom backgrounds area of the Website Template Manager.

1024-by-768-1

Next we need to adjust Title part 1 and Title part 2 to reflect our team's name and colors. In the Website Template Manger, input your team name, location, slogan or a combination of the three. In this example we are going to use our Team Name/Location and split it up. We chose to go with contrasting colors black and navy blue instead of grey with the background image so that the team name is easy to see and stands out. In the image below we show you what it would look like without contrast and then again with contrast.

Header Color Animation

Next, select your team's colors for Title part 1 and Title part 2 by clicking on the custom color buttons/box and selecting your teams color choice. If you know your team's "hex" color value or RGB colors you can enter them into the HTML color code area.

If you do not know your color codes you can upload your team's image/logo to imagecolorpicker.com to get your RGB or hex codes.

Hex Picker

Finally choose your team's font and font size. To choose a team font for Title part 1 and Title part 2, click Font Style then select your font. Next select Font Size and select a size for each title. If you would like to know what the available fonts look like before applying them, click the Sample Font Styles link. This may take some testing, but we find that font sizes above 20 work best. Using a clean and easy to read font only improves your look. For example, we used Impact because it is a bold font and selected sizes 55 and 37.

Screen_Shot_2015-04-28_at_9.17.39_AM

Lastly, if you are a USA Swimming team and have icons/medals/USS names on the top right-hand side of your homepage, check to make sure that your USA Swimming Badge/Icon does not drop down with your changes. This happens with large font sizes or long slogans.

usa-swimming

Keep up the great graphic design work and remember to take time and style your header to match your team colors and logo.

Here is how our example site turned out:

Oregon_Sharks

If you are interested in taking your team's brand and your TeamUnify site to the next level, our team of graphic designers will work with you to truly customize your website. Our graphic designers have worked with hundreds of teams and can customize all areas of your site to create one that's truly original. Click the button below to learn more.

Learn More

 

Leave a Comment