Try Tuts+ Premium, Get Cash Back!
Building a Website in Progressive Steps: Header and Footer
basixvideos

Building a Website in Progressive Steps: Header and Footer

on Oct 31st 2011 with 17 comments
Tutorial Details
  • Topic: Header and footer design
  • Difficulty: Basix
  • Screencast duration: 31 mins
Download Source Files
This entry is part 2 of 6 in the series Building a Website in Progressive Steps

Building a Website in Progressive Steps

It’s time for Part 2 of “Building a Website in Progressive Steps”. In this part we’ll
be discussing the header and footer, whilst designing them at the same time in Photoshop.

Step 2: Header and Footer Design

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Additional Resources

Series Navigation<< Building a Website in Progressive Steps: WireframingBuilding a Website in Progressive Steps: The Home Page >>

Justin Hubbard is elion on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Since 2007 Justin Hubbard has been helping businesses by creating timeless, memorable logos as part of a branding package and modern, user-friendly websites. "Creating websites, designing logos and building mobile applications, that's what I do and I love it! It's gives me great pleasure to be able to help businesses grow through their web presence; and when it's successful, that's the best feeling anyone could ask for."  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.ia-khan.com Imran

    It is very nice and helpful tutorial for those who learning basics of Web Designing.
    Thanks for sharing a wonderful tips and tricks.

    • http://www.justinhubbard.me Justin Hubbard
      Author

      You’re welcome Imran :) I’m glad you enjoyed it

  • supprof1

    thank you justin. you did a good job
    looking forward to the next tutorial
    great job

    • http://www.justinhubbard.me Justin Hubbard
      Author

      Thank you, glad you enjoyed it :)

  • Pingback: Building a Website in Progressive Steps: Header and Footer | Shadowtek | Hosting and Design Solutions

  • Shawn

    Excellent tutorial. I am really looking forward to Part 3.

  • Venkatesh

    Thanks for useful tutorial.

  • http://theisnygaard.dk Theis Nygaard

    I’ve always wondered how to align elements in proportion to one another. Thanks for that tip!

    Good tutorial. Keep them coming!

  • http://www.equotemd.com/ Michael

    Once again, excellent! I actually really like how you structure your groups. Very well organized. Cannot wait for the next one Justin!!!

    • http://www.justinhubbard.me Justin Hubbard
      Author

      Very good. I am happy you are getting something out of these :)

  • dario

    thank you for sharing your knowledges. for a newbie (like me) are very precious :)

    (sorry for my english)

  • mxl

    Justin thanks for your tutorial, I saw the first one about the wireframe, I’m at university now and when we’re given a project we’re often required to sketch it out first, I think our lecturers go overboard sometimes, asking for 30 pages sketches (we use a5) and then outta the sketches we’re often ask to provide 3 prototypes/wireframes…it’s sometimes daunting to sketch 30 pages, often times we just create “filler” pages, there’s a professor if he ask for 30, you better provide at least 25, it was engaging watching your wireframe…I think sketching (pencil/paper)could be more effective at first, since the idea of this is not to spend too much time creating a wireframe, with pencil/paper you can draw freely…maybe when one is skilled in using Azure the the pencil/paper stage can be excluded.

    Can I ask you one favour if it isn’t too late…do a one page scrolling tutorial, there are so many web design tuts on here which are good but they’re all the same, I’m yet to see a one page one, would love to watch a screen cast of this, maybe you can code it as such?

    Thanks and keep up the good work

    • http://www.justinhubbard.me Justin Hubbard
      Author

      I will definitely keep you’re idea in mind. Many people enjoy one page websites and they’re definitely useful for certain situations.

      Pencil/Paper definitely have their uses but personally I find it to be just as easy, if not easier to use a wire-frame program. Using a pencil however does allow your mind to flow freer since you’re not trapped in the box that is your computer screen, lol. Especially for things like Logos and Icons, you must start with Pencil/Paper to sketch these out. Some would even say that you’re not a logo designer if you don’t sketch it out on paper first.

  • http://www.youtube.com/user/izvarzone Some Guy

    That’s nice but I’m not fan of eye-balling, because that’s increasing coding time drastically (see reinventing the wheel anti-pattern)

    • http://www.justinhubbard.me Justin Hubbard
      Author

      Yes, eyeballing has it’s pros and cons for sure

  • http://cinitriqs.deviantart.com CiNiTriQs

    Well, nice tutorial, light weight, practical, easily explained, brings out the basics again (whether one uses a grid or just a designers eye ;) )

    • http://www.justinhubbard.me Justin Hubbard
      Author

      Happy you enjoyed it :)

  • Shawn

    Hi Justin

    When can we expect part 3 to arrive please?