After a couple of weeks for people to get settled into the second year of the IMD course, we are now starting to take steps toward our final piece for this unit, the group project. The first step in this process is to create the groups that will be completing the projects. The below people are the members of my group:
This week the members of our group met up to decide what we wanted our site to be about, as well as a general idea of what we would like the site to look like. We came to these decisions based upon research into the area of healthy living and our individual skillsets.
In addition to this we also identified the skills of each member and how best to use them in this project. It's very handy that we've known each other for years, as we already know what each of the other team members is capable of.
Over the past two weeks our group has been working on various aspects of the Group Project, from working on aspects such as the Site Logo, or the Site Mascot. In the end I got selected to produce the site design and this post will cover the process I used to create the concept of the site design.
As I mentioned over in my Independent Learning for Week 6, I have the tendency to sketch site designs pretty much any time one enters my head. This is the case with the site design that our group has decided to use as the design for the finished piece in Week 12.
The first sketch was a generic site that struck me one day whilst sat in class. The heading navigation is, to me, somewhat reminiscent of the navigation used on the Apple Site. After this is leapt straight to the site content, as illustrated below.
It was at this point that I realised that, with a certain amount of adaptation that this could quite easily be made to work as the design for the site that our group have decided to work on for our end piece.
One of the first things that I knew needed to be added was a space for the site's "mascot", a character named Alex, who would be present on each page explaining to the user what the page was actually about. A quick sketch later and I had the following sitting before me:
You can make out some handwriting on the right hand side of this image. This is because I gave the sketch to the members of the team, asking them for feedback. For the most part the group were happy with the design, with people asking for me to experiment with a few aspects of the site, mainly the way that the navigation and logo were laid out. After another few minutes the following was produced:
At this point I again asked for feedback, where I was informed that I had misunderstood what they had meant previously. I had shifted the whole navigation, menu and background for the area down to beneath the mascot. What they'd wanted was for me to move the navigation down and add a similar background to it as the original header. Once they made this clear to me I quickly produced the following, final, sketch:
At this point the members of the team seemed rather pleased with the design, to the point that I have since been able to begin a breakdown of the image into HTML elements (seen in the sketch above) for translation into a coded layout for the site.
Last time I documented the conceptualising, on paper, of the site for my group's project. Over the past fortnight I have been converting the sketches showed in that entry into a template into which content can be added to.
The content of the site will be laid out using a grid system, using XHTML to structure the layout and CSS, with a mix of JavaScript and jQuery being used to add functionality to the design.
A copy of the site's template can be found here. Please note that there is no actual content on the pages at this point in time, except for filler text.
Over the last few weeks I have set up a shell for our site content to be inserted into. This week we have decided, in a general form, who is adding what to the site. This allows everyone in the group to add HTML, CSS and JavaScript into the design. My particular contribution to JavaScript aspect of things is to create an interactive site-map.
A copy of the site-map I have created, using a tutorial in an issue of Web Designer Magazine, can be viewed here. Please note that the site-map doesn't truly represent the page listing for the site, it is just a completed piece of design awaiting actual content.
Over the past several weeks the various members of my group have been working hard on the important details of the site design, such as aspects of HTML code and JavaScript.
As a result of this, I have found myself finished with the majority of the aspects of my own tasks, other than those dependent upon other members of my group. Hopefully I will be able to finish these final tasks by the beginning of next week.
Last week I wrote about how I was waiting on other students to supply content for me to add to the site. In the end I had to get Simon Fraser to add the content as I have become bogged down with PDP work.
I did, however, find the time to undertake some work on the group project. This week I set up jquery includes to allow us to have a master template of repeated content in the sites, such as the header, the navigation and the sidebar. Normally this is the kind of thing best handled by server side technology, but this will do until we are able to make use of such technology.
This is the final week of the semester and submission week for our group work. Crunch Time.
Because of this I have spent a lot of time bouncing between various aspects of the site design, polishing off minor details and helping other group members get their code implemented in the site. There have been a few problems with this that I had to get Simon, our JavaScript Guru, to look into them further.
In addition to this we have all been working hard on finalising our group writeup, which will be submitted tomorrow morning.