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.
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.
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 tool – Create and share clickable mockups of your website or application with Mockingbird, an easy and fast wireframing and prototyping tool.