Tuesday, October 2, 2007

Tutorial : Efficient Layout

I shall consider this as a web design tutorial because its rather more than a tip ;) Efficient layouts are of relatively high importance in todays sites but there are still some who do not take the necessary action needed to ensure that the layout of their site is user friendly.



Efficient
:

  1. "user friendly"
  2. "gives what the visitor needs fast"
  3. "fulfilling the purpose of the site"
  4. "benefiting the owner of the site with whats intended eg. sales"


Not many people understand or bother to research on the concept of efficient layouts. It does not only apply to websites/Internet but everything that can be read examples being :
  • Books
  • Newspapers
  • Magazines
  • Brochures

This web design tutorial is going to zoom in specifically to creating website layouts that are efficient.



Web Users Do not read



Web Users do not read, they scan. Research findings by Jakob Nielsen shows that users of the internet/web do not really read in depth but scan through. It has been analysed that these people read a particular web page in an F shaped pattern from left to right.

Go over to the following page for a more detailed explaination on the F-shaped pattern theory : Jakob Nielsen's F-shaped theory.



From this F-shaped theory, it is found that having in mind the following while planning your site's layout is important :
  • Users would only scan your text in general
  • Place the important stuff at the top as that is the most concentrated time spent
  • 10 seconds is what it takes to make an impression on screen


Visit the site above for information on web usability, I highly recommend it as the guy is qualified and recommended by many magazines.



Plan, plan , plan

Planning is very important and I cant stress how further important it is. Some tips/steps on planning efficient layouts :


  1. Get a paper and a pencil. (Yes it is worthy of a step because it is important ;))
  2. Write out your target audience.
  3. Research on the net regarding behavior patterns of your target audience. Include also reading patterns and attention spans.
  4. Mark out areas on the "paper site" where you are almost sure your audience would not miss.
  5. Put labels of the purpose of your site in these areas. (for example : content, sales, images. But STRICTLY NOT ADS.)
  6. Block in other less important areas like navigation, ads, branding, logos.
  7. Make sure your layout sort of conforms to the rough F-shaped pattern for your important stuff. Also, do not forget behavior patterns and such of your target audience.
  8. Open up a graphic editing program like Photoshop and mark in what is on your paper on screen.
  9. Your layout is done. You can move on to designing now!


Sealing the deal



To ensure that your site works as how you planned it to be, gather a group of friends, be it offline or online, and get them to go to your site. Ask them questions after that like "How easy was it to get to -insert important stuff here- ?" or "What did you wanted to do with the site?" and if the general consensus was what your site was intended for, then congratulations.


Otherwise, spend some more time researching and coming up with a final layout that works. It takes time yes, but think of the benefits you would be getting off it. After all, Time is of an investment. ;) I hope you've gained something from this web design tutorials.

Till then,

Jasa.

31 comments:

Happy said...

Thanks for sharing
web site design
tutorial,tell how we can apply efficient layout on everything that ca be read

aliens infotech said...

i sharing your design......

by
Search engine optimization

oracle said...

I like your blog.I have very impressed from your blog.Hope you like mine too:
web design new york

Anonymous said...

Thanks for info. Great blog you have here.

Anonymous said...

Thanks for sharing...good work.

Wedsite Design India said...

From your post i got new point.

Thanks for sharing your resources.

Anonymous said...

I am very new in the Website design. I am very interested in this field. your blog is very nice. I think I can get lot of information from your blog. your blog is very helpful for Web design and Web design services

Unknown said...

Thanks for sharing buddy. More power.

San Diego web design

Web Design Quote said...

Really helpful tutorial.Your blog is really useful for the users,Especially for the fresh web designers.In m y point of view with the help of your blog they can get a lot of information related to the web designing.

Web Design & Development Company said...

thanks for sharing very useful information.this is very helpful for me. Memphis Web Design

Web design India said...

Excellent
Thanks for your nice Layout design
Other benefits of Web Design services are better utility and cross-browser accessibility.

Web design Sydney said...

Really great and awesome post written on web design. Tips included in this post are very helpful for beginner SEO and Web designer. Thanks for sharing this awesome post.

Web Design India said...

Thanks for the wonderful post

seo services said...

Hi, I agree with every statement that you have made in the post and I really appreciate your effort in gathering up the information. Thanks for it.

icarous said...

nice blog, kinda struggling with web layout myself. Your tips are very much appreciated.

Create an Online Shop said...

Thanks a lot for ur great tutorial dude !! It looks interesting to know much about website designs.

web design manila said...

This tutorial was amazing and impressive. I like it. I will refer this to my friend. Thank you for sharing.


Shasing

web designing company said...

An excellent blog nice information shared. Thanks for presenting this brilliant blog.

Cris Monde said...

I agreed to all information you have stated above. Thanks for sharing it to us.

Cris | Web Design Company Philippines

access training said...

Layout is plays a key role in web design. As we know beautiful layout will able capture more and more visitors. And I am thanking that you have shared good information about the layout.

Website designing said...

The 4 different and efficient layout for web design is shared on the post here. Good post

Unknown said...

Website layout is important factor and it is the First impression of Business.


SEO Sydney | SEO Melbourne | SEO

Web Designing India said...

Very fruitful do's and don’t's for an efficient web design.

Rahul Vyas said...
This comment has been removed by the author.
Jenice said...

The above tutorial is highly convincing. I find all these points very good and after learning all of them one can easily design an effective page. Thank you so much for sharing.
customer experience analysis

SEO Company Bangalore said...

This is very appreciative blog,It can describe the affordable web site design.In the competitive market quality-website is a perfect choice for good business.
SEO Service Bangalore | Internet Marketing Company Bangalore

Anonymous said...

Your post was very impressive because of its content. I find it informative and valuable. Thank you for sharing.
website design

Unknown said...

Its a very helpful tutorial. I do agree that its the layout of the website that captures the attention of a visitor. So the layout of the website should designed in such a way that it catches the attention of more and more visitors.
observing the user experience

Anonymous said...

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.
website design

SEO Experts in Bangalore said...

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.

Website Design Company Bangalore
SEO Company Bangalore

Unknown said...

Hi,Semiotics is a very important aspect of communication on line because you want that the people identify positive values and take positive measures in your site.The good Web Design Cochin exceeds esthetics but also implies semiotics.Thanks...