starting to think about page structure

The diagram above shows you the three distinctive design areas, which are determined by the content of a website.

First off, the image is exactly 1024 x 768, however as you can see quite a bit of this area is taken up by the browser, so you are actually left with considerably less space to work with. What you do have left needs to be thought of as three distinctive areas: 

The header is where the site's information (such as the title, subtitle and so on) go. Also some buttons, such as 'contact' or 'FAQ' or 'Home' may go here as well. Essentially this is the area that will be initially visible when someone comes to your site and so this is the place where they are most likely to see things. Next, comes the area through which someone would access the (initially hidden) content, such as pages, things grouped together as labels (categories in wordpress), also links to other sites, and so on. So, in a word, this second area is the menu. It is highly desirable that this part (along with the header, of course) stays consistently visible throughout your site. And then third, is the part of your site that changes and is updated very often - the main window, or the content.

You should be aware that these areas do not need to be placed in the way that I have put them here but can be located quite differently as well. So, as an example, a menu could be on the right side only, or it could be on both sides (as it is here on this site), or it could even be on the bottom or the top like a narrow band running underneath the header. Again, the header could be on the side or even the bottom - in which case you would of course need a special frame so that it would always slide upwards and stay visible inside the screen. What is important is that you need to be aware of these three parts and that all of them are accounted for in your design.

................................................................................................................................

content issues: blog vs. website

As you are working on your content and your mind map one important decision to be made is whether you will have a blog or a regular website. While a standalone website is good for certain kinds of content (say, product sites or artists portfolios), when it comes to most web content my personal bias is in favor of blogs. I have this idea that blogs get a far better viewing response since they are open to social interaction. Yet another thing which makes blogs very attractive is that in their very nature blogs are updated very frequently through new posts. These posts see to it that a blog is structured quite differently from a regular website in that the home page of a blog consists of a post roll in which the latest post is displayed at the very top and things progress in counter-chronological order as you move downwards. 

The good news is that most blogging domains let you have the best of both worlds in that you can add pages to your blog which then make it work in a fashion very similar to a regular website with a home page and sub pages that can be reached from it either through a top bar or a page widget. While wordpress lets you have an unlimited number of pages and even lets you nest pages within pages (thus giving you the full hierarchy of a web architecture), blogspot is somewhat stingier in this regard and lets you have only 10 pages and no nested pages.

 (Tip:  What you can do however is create a secondary site at blogspot which has the exact same layout and design as the primary one. This is done very easily by exporting and then re-importing the blog once the structure of it is somewhat established. The secondary site you can then link to the main site and use custom created posts that you put on it as the sub-pages of your primary blog. ) 

Another type of combo which you can also consider is to attach a blog and a regular website. To give an example: At some point I intend to start a gallery on this site. For this I intend to do a perfectly straightforward thumbnail layout using Photoshop and Dreamweaver since it would be kind of silly to try to get that style to work within a blog format. This gallery I will then link to the blog with a separate link category or maybe even under a separate page where I have a bit of an explanatory text or something. Needless to say, the design of the gallery site (which is put together with Dreamweaver) and the actual blog will have to be consistent and this may end up being a bit of a design challenge to solve (but more on this type of stuff later...). And then the other thing to be aware of is that in terms of logistics, you need to either have your site externally hosted or run your own server so that you can access ftp, etc.

In terms of blogging domains, my favorite these days is blogspot. I used to be a die-hard wordpress person but the fully customizable template editor (wow - they even give you the code!) at blogspot has made me a convert. Of course, you are not bound by the user friendly services of public blogging domains - if you want to suffer you can also create your own blog from scratch or bust your chops by using wordpress technology embedded into your site and then spend long blissful hours configuring the CSS. ;-) :-)...

But one way or another, user friendly solutions or hard graft, in terms of the big decision - blog or website or combo platter - make your mind up pretty much now, I would say.

...............................................................................................................................

the mindmap/preliminary site plan

Once you decide upon the content of your site it is time to become more specific and also to start putting your material in some sort of a hierarchical order. A very good way of doing this is through mindmaps.

Now, you can conceivably draw a mindmap on a piece of paper or a whiteboard. The thing with analog means is that they do not allow for too many changes of mind - every time you want to make a change you have to painstakingly erase things and start all over since obviously there is no such thing as copy paste in the physical world. A website is a living, dynamic thing, subject to many changes as you progress, and so it is a good idea to use a software for this. Freemind is opensourced and fantastic.

The screenshot above is a preliminary site plan for this site and I have put it here to show you how Freemind basically works. Insert gives you a child node and enter gives you a sibling node. You can write as much or as little explanatory text into the nodes. You can link nodes up with arrows and also cluster nodes through clouds. And there is even more that you can do with this, such as that you can add images and hyperlinks also.

So, next step: Download Freemind now and start putting together a preliminary site plan for your site.

.................................................................................................................................