Most sites contain templated information that can be found on every page of the site. In this tutorial I’ll go over how to incorporate the design aesthetic that we’ve created for the site so far, and what to include in the footer to make valuable use of the space.
Call To Action:
It’s common to not finish the site with a next action, but I think it’s a good opportunity to add some call to action. In this example, prior to those final footer blocks I’ll use a stock photo from pic jumbo. In the first video I added some color and opacity to the hero unit, so I’ll copy those same filters to use on the photo above the footer.
I will commonly include some call to action that will be on every page, so I’ll choose relevant CTAs, and create an attention grabbing headline.
Going back to balance, looking at how we started on top, we have a dark area, so I’m going to add a dark area to complete the site at the bottom.
In this example I create 2 sections, using color to indicate the difference. I use a dark gray at the very bottom to put some standard information in, like the copyright.
Common Footer Items:
When it comes to deciding what to include in the footer section, include the things that users expect to see there. Typically this will contain:
- Contact Form
- Social Media Links
- Contact Info (ie. address, email and phone number)
- Map of Location
- Sign up for Emails
Where it’s necessary, add a title to the section. In my example I grabbed a headline font that I used higher up on the page and labeled this ‘Contact Information’.
Font Awesome, which we downloaded in the previous video, has icons you can use for the different social media icons.
Since you can’t embed a real map in your file, grab a screenshot and add the image into your design.
Once you’ve got your footer content finished, it should align well as evenly sized columns, so for this example each footer content piece is one third horizontally.
- Repeat styles that you’ve used already in your design. I like to try to keep styles to a minimum.
- Reuse the colors, and font styles where you can. This will be helpful for the programmer when the page gets turned into code.
- You’re not hired to just make things pretty, but to make things effective, so try to think about users intention when making decisions about content to place at any point on the page.