Tinkering

Apologies for the extended period of silence. This has been mainly to do with the fact that after my initial excitement I became less and less happy with that initial layout design. I’ve been tinkering with it, thinking, pondering, surveying the web scene, tinkering some more, sketching, getting frustrated, etc etc!

I now have something that looks rather different. It’s not finished by any means but I am finding myself more satisfied with the look of this. What do you think?

As you have no doubt noticed, that is only the top of a page! But I was so struck by how was turning out so far I wanted to blog about it before I finished the rest of it. This is pleasing to my eye. The image in the header is not the image that will be used in the final website – just a temporary one with the feel of what I want to have in there.

I was originally going to have different colours for the different channels … they were previously in boxes, and now are tabs, so maybe the tabs should be different colours. I would like to use colour to define the different channels and keep the same colour throughout each channel. But maybe that can be done in another way rather than using coloured tabs – I rather like them the way they are. We shall see.

Back to it!

Top Page Layout mark 2

I probably should have done a wire frame for the sub-sections but I got carried away with the top level css layout. I’ve got mark 2 coming along nicely now. Here’s a screenshot:

Obviously the header image is only a scrappy one I threw together for this layout. We will need to get that redone – I will enlist the help of Emma in the Business Office for that one I think I will have to stop poking at it now though – I’ll spend weeks tweaking and poking and prodding if I let myself!

I’m now going to make a basic wire-frame layout for the sub-section pages, or what I’m calling layer 2. There are four main sub-sections in layer 2 – one for each of the coloured squares, and they’re each going to use the colour from the square to let you know you are still in that section. I need to work out how to have the tabs showing at the top and make it clear which page you’re on by making sure the tab appears attached to the page, while the other tabs are obviously behind the page.

Layer 2 also contains things from the links at the bottom – About, Contact, Jobs, Publications, Links and Sitemap. I’ve not decided yet how these sub-sections should look … probably like the other layer 2 pages, but without a tab being selected – just showing them all behind the page.

Layer 3 will be for delving deeper within the main layer 2 sections – eg on layer 2 for Visitor Centre, there will be links to various topics – these topics will each be on a layer 3 page with the Visitor Centre colour branding.

Back to work!

CSS Layout

I’ve created a CSS layout for the top page of the site. Now be warned, it doesn’t look very exciting! It’s just a wire-frame kind of thing – positioning the elements in the right places. It took quite some time to get my head round it – I’ve done some css before but had always relied on tables for my layout, but I decided this time it had to be CSS only – no tables at all. So, without further ado – presenting the first layout page.

Next job is to layout sub-pages I think, before I move on to prettifying it!

Scribblings

Today’s work has been mainly away from my computer screen, hence the silence until now. I’ve been spreading out my papers and thinking and scribbling!

One of the things I’ve been thinking about is that all that dialogue between Wendy and Aeron yesterday was a bit crazy! I suppose it helped me to think through what the user is wanting, but it was slightly mad! If you based the whole design of our site on what I said yesterday it would just be a search button – that was all Aeron apparently wanted So I think it needs a bit more thought. Instead of writing out a dialogue, I’ve tried drawing the interactions this morning, and included alternative ways it could go with Aeron, as well as a sketch for John and Jane:

Sketches of possible scenarios for some site visitors (pdf file)

I’ve realised today that I’ve left out someone from my personas. I used John the scientist as a potential collaborator, but he was more interested in the research we are doing and not really getting into how we can work together. Perhaps I could develop John’s persona or create a new one which represents individuals or companies who are coming to our site to see how we can help them achieve something. They want to see what expertise we have, what we are offering in terms of potential consultancy, and how we’ve worked with other companies in the past and currently. This has lead me to think we need an area something like “work with us” with relevant information in it.

This afternoon I’ve been thinking about how the front page might be laid out, bearing in mind the various types of visitor. I’ve used our current web stats and the site map on our existing site to work out which pages are used regularly, and which are most popular, to give me an idea of what the real users are wanting to see on our site, not just what I think they want (via my personas). I’ve completed my first sketch of what it might (or might not!) look like:

 First sketch of possible site layout (pdf)

I didn’t note on that sheet that part of the visitor centre’s job would include presenting information for media types, but info for them will obviously also come in the news bar on the right hand side. Press releases would contain links to relevant further information, contact details and relevant photographs.

It’s quite exciting to have a first sketch drawn. I know it’s still very early days but it’s fab to see what might be the look of the new site! In fact I’m not content with that pdf link – I want a jpg of the sketch right here:

Comments please, anyone who is reading this? Is there anyone?!