Building a Website in Progressive Steps: The Home Page
basixvideos

Building a Website in Progressive Steps: The Home Page

on Nov 23rd 2011 with 8 comments
Tutorial Details
  • Topic: Home page design
  • Difficulty: Basix
  • Screencast duration: 29 mins
Download Source Files
This entry is part 3 of 6 in the series Building a Website in Progressive Steps

Building a Website in Progressive Steps

Welcome to Part 3 in Building a Website in Progressive Steps. In this screencast we’ll discuss the inner workings of the home page. The featured area, actionable content area, and priority content areas are going to be our main focus, in that order. They are set in a specific hierarchy for a reason which will be explained in the tutorial.

We’ll also be creating a very important special area, so hit play to find out more…

Step 3: Home Page Design

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

Series Navigation<< Building a Website in Progressive Steps: Header and FooterBuilding a Website in Progressive Steps: Page Elements >>

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

  • Pingback: Building a Website in Progressive Steps: The Home Page | Shadowtek | Hosting and Design Solutions

  • http://ericmontzka.com Eric

    Nice tutorial. I just have one pet peeve with web design tutorials in general- Why don’t they teach a realistic work flow when it comes to handling colors? They always just recite hex codes from their notes, which doesn’t teach anything. Why not pick the color scheme ahead of time, save as swatches, create gradients and drop shadows using the brightness slider, etc.

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

      Good point, I’m glad you brought that up.

      A lot of it has to do with time saving and getting the color exactly the same as planned. :)

      • Mark Hallam

        A good way to get a palette of colors for your design is to pixelate (in photoshop) the main image you are using and pick the colors from that.

  • supprof

    thank you Justin Hubbard
    for a first tutorial you made a good impression
    so hoprfully there will more sooner

  • Pingback: Pinoy Templates » Building a Website in Progressive Steps: The Home Page

  • Mike Kear

    Thanks Justin for this series. It’s really informative.

    A little bit of nit-picking …. lines of type are separated by ‘leading’ – that’s pronounced ‘ledding’ not ‘lee-ding’ . it comes from the old days of hot metal typesetting, when the people making up pages would take a piece of lead type (that’s ‘lead – the soft metal’) and put it into a block, then add a little sliver or two of metal strip (made of lead) to separate it from the next line. The more of those strips inserted made the lines space out more. The process of making up blocks of type with interleaved blocks of letters and strips of metal was called ‘leading’ (pronounced ‘ledding’).

    Doesn’t change the worth of anything you said – I just thought you whippersnappers ought to know the background – from someone who came into the printing business at the tail-end of the hot-metal type era.

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

      Thanks a lot buddy! We learn something new every day :)

  • vohn

    thank you justin for this tutorial it helped me alot!
    I am having a hard time with typography though… can i ask what are the fonts you used in the web template? Appreciate it. thanks again

  • Catalin

    Nice tutorial…only one thing, when you use dummy text you acces http://www.lipsum.com/ and copy from the first paragraph :” Lorem Ipsum is simply dummy text of the printing and…”.

    That is not Lorem Ipsum dummy text but the explanation of what Lorem Ipsum is. The actual Lorem Ipsum text is generated from a button or you can grab the first lines a couple of paragraphs bellow on the same web site :”Lorem ipsum dolor sit amet, consectetur adipisicing eli..”.

    I’m sure you knew that :-), probably you considered dummy text is just ..dummy text but I want to point out a beginner in web design may get confused and think that is actual Lorem Ipsum text… :-)