I am now not going to be proceeding with this site redevelopment. It’s rather disappointing after the work I’ve put in, but there we are. So not much to blog about right now.
I may come back and blog about my efforts to help out Sid with his Senescence Wiki …
After a meeting yesterday, the plan is to keep working on this prototype and aim to launch the new site when we become “New Org”, which is planned for April 2008. Some of the mad ideas I have are going to take quite some time to get working, so it is good to have a decent length of time available to work on this. I’m all fired up now! 
I’m going to be arranging a meeting for various interested people to get together and work further on what features we want, and what tweaks are necessary to the design and structure I’ve come up with so far. More to come on that.
Yes I know - it’s been ages!
I’ve got a prototype up and running now - there’s not much to it, but it gives the feel of what I hope to achieve. It needs work on images and there is no actual real content, but it’s a start:
An example sub-page is the Visitor Centre:
Other work has made this take rather longer than expected, and I’m waiting to get some feedback before taking it further. Obviously some of the changes that will be taking place here make me a little unsure whether this will be a project that goes ahead now, or gets put on the back burner until we have more information about the new organisation we will be part of.
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!
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!
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!
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?!
I should have put this up at the beginning of the blog. This is Ben Hunt’s (WDFS) list of the main points of the design process:
Know what you’re doingKnow what the site needs to doKnow what the site’s visitors wantGet a good picture of the personality and style of the web siteSketch out highly successful scenarios- Organise views into a site map
- Sketch the essential features & look
- Map your visitors’ attention
- Arrange the visual elements to work together
You can probably gather that the ones with lines through are the ones I’ve worked on. I’m not sure I’ve worked on them thoroughly enough, but that’s about where we are in the process. Still early days.
More tomorrow!
Ok, here’s where the sceptical readers (Tony, if you’re still reading!!) have to suspend the disbelief … the next stage (according to Ben Hunt of Web Design from Scratch, and Alan Cooper in About Face 2.0, and others I’m sure) is to look at the dialogue between the primary user persona and the site persona. Yes, I am talking about a fictional user talking to a fictional, capable of speech, piece of html sitting on a web server. Suspend that disbelief!
So Wendy, our friendly bubbly scientist site persona (I’ve just named her) is ready and waiting for someone to come along and ask her something … and here comes Aeron our farmer … what happens next?
Ok, Aeron is today thinking about silage … he’s wondering if he should carry on as he always has making it the usual way. He’s heard talk of some new-fangled way of doing it (bear with me, I have no idea if this is really new-fangled or not, but it’s an example I’m working with!). So he thinks that IGER might be able to shed some light. He types in our URL and Wendy springs to life on his PC.
Wendy should now be conveying an impression of being ready to help, not jumping up and down shouting what do you want to do today, but poised and ready for Aeron’s first question.
Aeron scans the page looking for somewhere that looks like a good place to start. He spots a box with a button marked Search next to it and types silage. So he’s asking Wendy a question - “Wendy, what do you know about silage?”. Aeron is not particularly interested in the links on the front page of the site, but he is made to feel comfortable by the way the site looks. The way Wendy looks I should say 
(I’m finding this quite bizarre!!)
So the search results come back quickly. Wendy presents Aeron with some possible options and he scans through looking for what he needs. He can’t find exactly the right thing so Wendy asks him if he wants to add a search term or perhaps search within his current search results (which probably is the same thing really) - he adds the word “milk” because he is looking for silage making methods which increase milk yield. The number of search results is reduced and he finds a likely option. Clicking the link takes him to a page which explains that bicrop silage feeding results in higher milk production despite containing less protein. Aeron is pleased to see this information and wants to find out more about how to go about this. Somewhere around on the page, Wendy has provided a list of “related pages” - intelligently anticipating that he might want to delve deeper, while not throwing too much information at him at once. Wendy is subtle about this.
So Aeron gets the information he needs - he prints of a few pages of info on setting up to produce bicrop silage, and goes away happy
