The navigation was a bit of a challenge.  The selected state was quite fiddly to develop because I wanted the text to resize without dropping out of the green strip. Here’s what I did…

Above is the text at normal size, and below is the text 5x bigger than normal.

I extended the white background at the top of the image so that it would cover the green strip when the text is resized and not look too out of place.  The selected state is actually two images.

This is what the background image for the right half of the link looks like.  It’s long to allow for long links.  When the link is small, it looks shorter.

While I was working on the site, Nat showed me a really good way to make the site more maintainable and use less code.  The site is made up of strips of content – the header, main content, sponsors and footer, and these all have very similar properties (things like they all have a width of 80% and the same amount of margins).  Rather than repeating the CSS for each class, we added a class within each strip called “section”.  So if we needed to make a change to the layout and instead make the width 70%, we would only need to change this in one place.

So what’s this all about?

It’s not easy for young people starting out in the web design/development industry.  There seems to be the assumption that teenage-webbie-wannabies are only interested in making a quick buck.  Many don’t attend conferences or meetups, and there are few courses that use up-to-date material.

There are so many young people aspiring to work in the industry who have grown up with the Internet, and are pro-active in using it.  Many have learnt HTML through customising their MySpace profiles.  In a few years, there will be a huge increase in the number of people in my generation publishing content, and not knowing about things like accessibility and web standards.  This could slow the pace at which the web is progressing.

When I became a part of the Boagworld production team, I was contacted by a number of people my age who were just starting out in the industry and asked for careers advice and tips on starting out.  Many more have come out of the woodwork since. I got in contact with a few of these people to ask them if they thought it would be a good idea to build a website aimed at young people starting out in the industry.  We decided to work together to build ScrunchUp to give advice on best practices, accessibility and web standards.

ScrunchUp will be a magazine-style website with content aimed at young people.  We’re working hard to bring it to you as soon as possible, although many of us are starting courses this month so you’ll have to bear with us!

So a big, big thank you to everyone who has made this possible including Jamie, Teifion, Ollie, James, Alistair and Jane.

Room for Improvement

Some of the aspects of the website that the Headmistress, Mrs Murrell, was eager to improve was the site’s accessibility (to comply with the disability act), usability (to make it intuitive for non-Internet-savvy users) and also the image that the site represented of the school. (At the end of the project, I produced an accessibility report and manual for the website editors).

Design

I presented the school governors with 20 different designs to choose from. Some might say this was perhaps too many, but the governors were not sure exactly how they wanted the website to look, so a range of rough ideas was, in this case, more ideal than a few.

Construction

In December, I started making the website on the CMS (content management system) Drupal.

The features include:

1. a 360 degree panoramic view of the entrance (with hopefully more to follow)
2. an interactive map of the building
3. the photo in the header is randomly selected from a library of photos, showing different aspects of the school
4. there is a search box to help the user find the content they need

CD case design

Some of the audio lessons are available for download on my client’s website, and the full set are available on a CD. He didn’t have any specific preferences for how it should look, but simply needed the design to look ‘professional and modern’. I had a look at other English language websites and CDs, most of which seemed to have London landmarks like Big Ben and red telephone boxes. I chose a picture of the London Eye because it is a modern landmark and an interesting shape.

The image was taken by Oliver Wardell who was kind enough to give me permission to use his photo.

Above is an image of the disc design. I chose to use blue and silver as the branding, and a sans serif font because of the modern and professional connotations.

Flash Game

Next up was a Flash game. My client wanted a summary game that he could add and modify to each audio lesson he made. Luckily, he’s comfortable with using Flash, so I only had to create a template which he could add questions and answers to. I made most of this at Kempt where I do work experience. Have a go and let me know what you think.

The design process for the menu was very informal. I chatted with my client on MSN, sending designs every few minutes, and adjusting them to her specifications. This made communication a lot easier because the design was being made in real time.

Initially, she sent me a Publisher document with the content, and an intricate pattern which she had drawn down the side. She explained that she wanted this strip to be visible when the menu is closed.

This is one of the first designs I came up with. The font I chose of the name of the takeaway is more sylised to give it a fresh and personal appearance. The ‘dishes’ heading text uses the same font, but in black to give it a professional look. I replicated the drawing to be set behind the titles and in gold to make it look like a more high quality take-away.

Then I thought I’d play about with the colours a bit. The pink was inspired by a very unusual and striking Japanese restaurant near where I live which has a hot-pink and purple colour scheme. My client preferred the green and gold design because of the connotations with lemongrass, so I continued with this design.

In the design below, I brightened the colours to make them look more fresh and appealing. I also tried a swirly image behind the name of the takeaway.

The next design looks very similar to the one before it, but the swirly pattern behind the takeaway name is slightly different.

One of the things I wish I’d asked sooner was what sort of paper the menus would be printed on. I assumed it would be on standard white paper. At this point, my client said they would be printed on a glossy paper, which changed the way I thought about how it should look. On standard matte paper, small printed text doesn’t work well if the background is darker than the font colour, but on glossy paper, the text is much sharper and easier to read. So I tried a black background, and changed the ‘dishes’ headings to gold.

My client really liked this design, and used it as a template for the real thing.

On Tuesday, she gave me the printed menu. Below are a couple of photos of it.  A few elements have changed as more content was added.

Pre-Redesign

The previous incarnation of the site was made entirely in Flash. It was made to look like a book with tabs down the side. When a tab was clicked on, a hand would turn the page.

When I first made it, I was immensely proud. But a lot of people didn’t like it because Flash = Bad. Personally, I love Flash because of all the cool stuff you can do with it. But a lot of people don’t love it at all and want nothing to do with it (which is understandable but perhaps a little unfair) …I think I’ll leave that rant for another day.Besides that, I wanted a site with a blog so I can indulge the emo teenager in me, and to get to grips with stuff like CSS and PHP. No doubt this site will have something so terribly coded that it will turn into a black hole and destroy the Internet. (Therefore, I’d really appreciate it if you could point out my ignorance so I can amend the offending code.)

Preparation

I started planning out how it would look a few months ago. I knew I wanted something quite far removed from the typical web 2.0 shiny buttons look, but also look modern, and reflect my personality.

One of the things that surprises people when they find out more about me is how I hate using computers for tasks that humans can do just as well, or even better, which is surprising because I seem to spend most of my time on the computer. Drawing pictures straight onto the computer is great because if you make a mistake, you can go back and change it. But I think some of the best websites incorporate hand-made images. Websites such as webdesignerwall.com are a perfect example of this.

I think this area of design is likely to make a huge come-back because vector drawn images are so common now. In my opinion, a hand-drawn image, although a bit more rough around the edges, shows more personality than a perfectly precise computer-drawn one. Which I think is great because I love drawing and using computers!

So with this in mind, I started sketching out ideas.

Ideas

I find sketching ideas out onto rough paper is essential before opening up graphics software because it’s quick, and not restricting. If I were to start with the software, I’d worry too much about the details rather than the bigger picture.

Overall I think I did about 12 sketches of how it would look. Every time I started a new sketch, I’d think of something else I could add or move about.

Below is what I thought my final design would look like. I did this on Macromedia (now Adobe) Fireworks. I made a few modifications because I wanted things like a Flickr feed and a blogroll.

Building the Site

So now I finally had my idea. The next step was to put this onto my site. This was much more problematic than I’d anticipated, hence the reason it took so long! I’d transferred my domain but it hadn’t been sent properly, and seemed to be dangling in limbo. It took a while to sort out, but it seems to have all transferred over now.

CMS Dilemma

I originally wanted to use the CMS Drupal, which isn’t really a blogging CMS, but out of the ones I’d tried (including Joomla! and Mambo which I hated), Drupal was the most intuitive. However, I had yet more problems installing this. (The 5 minute install is such a lie!) and decided to try Wordpress. Good decision? Well, as much as I love Drupal, I think Wordpress suits the needs of this website better.

Coding

I started off with the default template and modified that, then when I understood what I was doing, I loaded a blank template and started from scratch. I have been CSSing for a few months now (since I was lucky enough to go on Rachel and Drew’s ‘Edge of My Seat’ training course) so I’m feeling quite confident with using CSS. (In fact, I think it’s the best thing since Ben and Jerrys made half baked cookie dough icecream!) But I’m still learning, so this was a great opportunity to put into practice what I’d learned. PHP is very new to me, and although I did as little as I could get away with, it seems a bit less scary than before I started. Tools such as Firebug proved invaluable!

Why Maban?

And finally, why did I choose the name Maban? I wanted something short and easy to remember, but also with a hidden meaning that described my ‘brand values’. I tried clicking Wikipedia’s “random article” link to come up with some ideas, and one of the articles was about a word called ‘Maban’ that is an Aboriginal word for magic. Perfect!