March 18, 2009

Getting Started with Web Design – The Layout

No matter what you may have been told about designing for the web, the layout is the most important part of any design. Whether it’s radical and experimental or the same two column layout you see on so many blogs, layout is king in the design world.

What makes the layout of a website so important? For starters, all of your content falls in line with one of the areas defined in your layout. The colors you pick for your color scheme also apply to areas and functions in your layout.

Think of the layout as the blueprint for a building. After you’ve recieved your commission details, you plan out the structure and function of the site at large. After-all, that’s the definition of design, the planning of the function of things.

Tips for Creating Your Layout

Creating a layout can be more complex than some new designers bargain for. The most essential question to ask yourself when making your layout is this – what is the most important part of the site?

If the most important part of your website is the content, then you would want to leave plenty of space for easy, readable content. You might also want to plan for image styling, or other such accents to the content. If the main focus of your design is multimedia content, you would want to plan your ideas around the interaction with the content. The main function of the website determines what kind of structure it will need.

Another important thing to remember when creating your layout is how the user will interact with it. You want users to be able to find the tools that they need quickly and use the site as efficiently as possible. Be sure to map out user controls if such a thing is called for. This includes things like navigation menus, experimental navigation, media controls, etc.

How to Create Your First Layout

(This is where the CSS and HTML knowledge are going to come in handy.) Instead of creating your first ever layout from scratch, you’ll want to begin by learning how to modify a premade one. The best way to do this is by downloading free templates and working with them to see how they work. There are many sites to get free website layouts, and they include:

  • http://www.freewebsitetemplates.com
  • http://www.oswd.org
  • http://www.layouts4free.com
  • http://www.freewebtemplates.com

Remember that you’re going to need a text editor of some sort to mess around with the plain text code of these templates. The best way to learn is to practice, so get to figuring out how to work with layouts and see how they’re put together!

What questions do you have about layouts? How do you determine the layout for a new site? Share your thoughts and experiences below.

No related posts.

reliable web hosting
  • Sayz

    I usually start by following the rule of third and then trying to make a rough draft on paper, choose few candidates which might makes a good choice before implementing it.

    Defining what we want to bring to the design, considering
    1. The audience
    2. Layout flow
    3. White Space

    and also ask a few question like
    1. What will the audience see at first glimpse?
    2. What do they know by just looking the homepage.

    Don’t jump into coding or CSS immediately, try to make several pieces of layout and try to find out which one is the best.

    That’s what I did… any correction is welcomed..

  • Corey Freeman

    @Sayz
    Well everyone has their own design process. What you do doesn’t require a “correction.” If it works for you then go for it. This series is for those absolute beginners who just want a place to start.

CommentLuv Enabled