Web 2.0 part… 4?? Layout!!

So you’ve got all the stuff you want, now you gotta position it in a certain way that draws attention. Well common websites have the following parts:

  1. Containing Block: a.k.a “wrapper”, this basically wraps all the contents of your site into 1 entity, technically speaking it can be the body tag, or div tag.
  2. Navigation: this indicates a bar of a series of buttons/tabs that allow you to navigate to different pages and contents
  3. Logo/Header: the unique signature of your site. It is highly recommended that you have one. I don’t (not yet)
  4. Content: The main information notice board of your website. Needless to say you gotta convey certain information. It doesn’t have to be words, can be videos/gallery/whatever. But the point is that it’s the main focus
  5. Whitespace: I think this is super important. You gotta leave some room to breathe among all the contents and stuff.
  6. Footer: This part is optional and it normally contains logistic information such as copyright, additional info, contact info and such.

Everything combined is called “Web Page Anatomy”:

Web Site Anatomy

Web Site Anatomy

Now what’s the deal with all the lines and stuff. If you study photography or just happen to be curious like I do, you’ll definitely know “Rules of Thirds”. So what is it? Rules of Thirds is about splitting your horizontal and vertical views into 9 equal blocks. I’ll just quote the definition from Wikipedia then:

The rule of thirds is a compositional rule of thumb in visual arts such as paintingphotography and design.[1] The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.[2] Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.

So believe it or not this rule of thumbs actually works pretty well. So the outline of your website should follow this rule for maximum effects. You should also know about the Golden Ratio (a.k.a phi) as this concept have been used for a long time already and it is surprisingly effective. I think it has something to do with human perception of visual images and proportions.

Another rule you can use is implementing balances: either symmetrical or asymmetrical. Symmetrical balance is pretty natural. Everything is split into 2 and have similar settings, thus create balance. Like Facebook: the content is in the middle while the left navigation bar and the right sidebar have the same width.

Asymmetrical balance is basically having 1 huge item on 1 side and several small items on the other side, thus combining still maintain the balance. For example this one:

Asymmetrical Balance

Asymmetrical Balance

Personally I’ve implemented some of those rules in my resume. So if you’ve downloaded the source file you’ll see something like this (open the file using Illustrator and press Ctrl+Y):

Resume Layout

Resume Layout

Now I’ve created the wrapper(container) by leaving out horizontal and vertical margins in the resume. Header is located on top. Navigation bar here are the categories (Education, Work Experience, Leadership Experience, Skills) are on the left side. Those are combined with the chronology takes up around 1/3 of the horizontal space, leaving 2/3 as the main content. I also leave plenty of space in it so that the content won’t look too cramped up inside.

So there you go. Those are the lessons I’ve learned about web 2.0. It’s definitely NOT everything about web design and stuff but I’ll keep on designing and you should too!!!


4 thoughts on “Web 2.0 part… 4?? Layout!!

  1. Aaditya says:

    Cool stuff man!

  2. Dave says:

    How can I download your resume template?? I really like your design.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: