30 Days to Your First Website Design

Lesson Notes * Social Icons PSD * Footer Designs for Your Inspiration

Transcript Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to wrap up our PSD design by finishing off our footer. We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• First we’ll ask ourselves about the role of footers in web design
• We’ll then take a look at a couple of examples
• Before diving back into our psd and finishing off our own footer
• Then, as ever, I’ll ask you to complete an assignment.

The footer of any given web page is the bit right at the very bottom. That doesn’t mean it ranks poorly against other sections of a web page – in fact, studies have shown that in terms of a user’s attention span on any one area of a page, the footer comes in a close second to the very first bit at the top. It makes sense too – as we’ve spoken about, a user will typically scan a web page, not absorb it in detail. If they’re scrolling their way to the bottom of the page, past everything else, and nothing specifically catches their attention, they’re inevitably going to end up at the footer, where they’re forced to stop and take a look. It’s therefore an ideal opportunity to encourage users into taking further action.

Designers use footers to display necessary information such as copyright details, but footers are also ideal for housing social links, contact information, newsletter sign up forms. They can be perfect for reminding users of something you were suggesting in your features area.

You can use a footer to express a final bit of personality before the page ends: PooganSporch. Introduce users to an intriguing fact about your firm: Dribbble. Or how about additional navigation? They can be a way of saying “OK, so you didn’t find what you were looking for, try one of these links.” Mozilla. Or they can simply be a subtle way of sealing the rest of your page: Headlamp Creative.

We’re going to opt for the last example in our own design. We don’t need out footer to contain much information; we just want to leave some copyright details, and some subtle, yet striking social links. It should compliment our design quite nicely.

Let’s open up our PSD and remind ourselves where we were.

First off, we need to get ourselves some social icons. You’ll find these freebies by Umar Irshad ideal – check out his dribbble pageor go directly to designmoo.com to download the PSD. We’re not going to use them in their current state, but they’re an ideal starting point and they’re perfectly scalable too.

[Live Photoshop demo not included in transcript.]

OK, it’s time for some further reading: nothing too heavy, but you might want to take a look at this roundup of inspirational footer designs on NOUPE.com And before we jump into the next video, I’d like you to get your hands dirty and finish building up the psd with our footer.

Next time on 30 Days to Your First Website Design we’re going to begin transforming our PSD into working browser magic. We’ll take a look at prepping our design. I’m Ian Yates and from all of us at Tuts+ thanks for watching!