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.


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

  • As stated before, the minimum age is 62 to start out with Can you buy Modafinil online ;
    chairman and chief executive officer, pmi mortgage insurance co.

  • You really make it seem so easy with your presentation but I to find this topic to be actually one thing which I feel I’d by no means understand.
    It seems too complex and very large for me. I am having a
    look forward for your next put up, I’ll try to get the hold of it!

    Feel freee to visit my web site :: lisinopril side effects

  • It’s going to be end of mine day, however before end
    I am reading this enormous article to improve my know-how.

  • Greаt weƅsite уоս һaνᥱ ɦеге but Ⅰ ᴡaѕ
    ѡantіng tо қnoѡ іf уoᥙ
    κneԝ οf аny cоmmսnitу foгսmѕ tɦɑt cօᴠег the ѕаme tⲟⲣicѕ diѕсuѕseɗ in tҺіѕ агticlе?
    I’ԁ гᥱɑⅼⅼү ⅼονe
    tⲟ Ƅе ɑ рɑгt ߋf
    ǥrօup ѡɦеге І сan ɡеt sսցցᥱѕtіⲟns frοm օtһег eхрᥱrіеncᥱd indіᴠiɗᥙɑls thɑt ѕһaге thе ѕamᥱ іntегеst.

    Ӏf үou һaνе any ѕuɡցᥱѕtiοns, ρlᥱɑѕe lеt mе
    κnoѡ. Aρρгесiɑtе it!

    Ϝеᥱⅼ fгее tߋ νisіt mʏ ᴡᥱƅpaǥᥱ; оптимизация сайта в москве

  • you are truly a excellent webmaster. The web site loading pace is incredible.
    It sort of feels that you’re doing any distinctive trick.

    Moreover, The contents are masterpiece. you’ve done a excellent
    activity in this topic!

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

Trackbacks / Pingbacks