E-commerce & Internet Marketing Blog: Tips and tricks in internet marketing. Latest trends in web design.

Draw the web site’s structure diagram & draw the web pages’ layout

Once you have gave a deeper thought about the goal of your website (read about “First steps planning your web design” by Carlo) you need to think about how the web pages (with text, image, video, input forms, etc. content) will be structured.

Good starting point would be to first try to think of what message you want to give the visitor straight away on a front page? Don’t forget that first very few seconds are most critical part when website visitor decides whether to leave of continue browsing.

Then you should think about the menu structure – what should be in main menu, what should be in sub-menus.

It’s always a good idea to graphically visualise the structure of the website (mindmap/flowchart) as that will make your web designers life much easier and higher the chance that you’ll get exactly what you need from your web development team.

Example hierarchy mindmap of example planned web design.

Example hierarchy mindmap of example planned web design.

Of course you can just use a pen and paper to draw the web site structure, scan it and send it to your web designer. This example mindmap was drawn using free web based and easy to use tool DabbleBoard (even no registration needed) and often we use open source freeware mindmap software called FreeMind but it might be easier to use a paper and pen for those who are less computer-literate.

Most web development companies including us will also provide you the service (we offer it for free for fist 2 hours) to create the website’s structure, hierarchy and functionality documentation.

Now you should think about the web design layout. Where should be the main menu, sub-menu or maybe separate menu for products/services. Where should be banners, advertisements, search box, login area, breadcrumbs etc.

It’s again a good time to take a pen and paper and draw the main page and any other pages needed. Again pen and paper + scanner is just fine, too but if your a Mac user then there’s a perfect software called Keynote and if you’re Windows user then open source freeware OpenOffice‘s  Impress or not so free MS Office’s PowerPoint will be good choice.

Click on the image to see full size.

Click on the image to see full size.

Please, note that the minus of the Horizontal menu is that you should decide the amount (maximum +/- 1 or 2) items there will be. The vertical menu can extend downwards therefore it’s more functional. Of course there’s always drop-down menu option for horizontal menu but main menu items are limited. Vertical menu can have submenus when main menu clicked and also drop-right or drop-left menus.

When you have drawn and written a bit more detailed structure of your website it’s always a good idea to have a short phone call to go it all through all together.

Edit:

Mockingbird: Online wireframe toolCreate and share clickable mockups of your website or application with Mockingbird, an easy and fast wireframing and prototyping tool.

  • It´s a interesting advice.I should it comment to TLG company that treets these items very often. http://www.tlgcommerce.com

  • Weather – sunshine/rain/snow/etc.
    whether – giving options e.g. whether or not; whether you choose option a or option b…

    Hope that helps :)

  • Very useful article, fantastic, thank you for writing this!

  • Fantastic post. Great.

  • Great!thanks!

  • Thanks Kittie:) Corrected typo.

  • I’m not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for great info I was looking for this info for my mission.

    Feel free to visit my webpage custom website

You can follow any responses to this entry through the RSS 2.0 feed.

Trackbacks / Pingbacks