further web development / refinement

Had a tutorial with my mentor Belinda today - the first in five weeks - and it went well. There are some more refinements and alterations to make to the website, which I hope to complete in two days. I feel a lot happier with the overall look of the website now. Next week I'll be finishing at least two scenario films, and working on an online presence for the whole project.

Catalogue photography & new london train line

For the degree show catalogue, I need to submit an image that represents my project. The obvious one would be the home page of my website, and I might well choose that one. However, we are using degree show funds to pay for a professional photographer (Tomas Valenzuela Blejer) to take a photograph for everyone, so I didn't want to waste the opportunity to get a good photograph. I spent a few hours brainstorming ideas and came up with this image - above. It would be great to know if you think it represents my project?

Also today, I travelled on the newly opened Overground line today (the old East London underground line, extended) - and wanted to put a couple of photos on here! It was exciting as it only opened yesterday, it was very empty and clean, it travels through brand new stations - like Haggerston, above - and there were lots of people taking photos of it at each station. This has been a massive project, with buildings knocked down, new bridges put up, new stations built - since 2007. So it is nice to see the project right the way through like this.
Also, it gets me to uni in 45min for £1.80, instead of 1hr 30min!

returning to web work

After leaving this part of the project for a couple of weeks, I have really enjoyed coming back to it the past few days. I haven't received any feedback from my mentor yet, but I have some good constructive stuff from a couple of friends, so I used that as a starting point. I also looked at the elements of the pdf that I wasn't happy with previously.
As you can see, I have changed the header banner - I feel that it is significantly better than the previous one. I also tried putting the menu buttons at the top of the page layout - Although this does give me more space to play with, I think that I prefer the original layout.
Below, you can see I've added a hand written tag line to the 'eat right' title. Not 100% sure on the final wording of this yet, but I like the way it looks with the page.

Above you can see that I've also been putting the data I've collected into each page. Click on the picture to enlarge it.

I've been using a brilliant site called walkit.com to work out the best route around all the shops, the distance, time, etc - as well as how long it would take to walk to the different restaurants above. As well as telling you the distance between two places in London (in miles, km and steps) and the best route between them, it also works out how long it would take to walk, how many calories you would burn, and how much carbon you've saved by walking!

Finally, above you can see the map I've created. Using the traced map of N1 that I created in February, I've made a map of the local area around me, and the route that would take me to all the local shops I need for the meal plan. This took ages but I'm quite pleased with the way it looks. I want to avoid using google maps for the website.

Real food images and data collection

Since my last post, I have planned 3 days worth of seasonal, ethical, healthy, March meals (10 meals). I've bought the ingredients in local shops as much as possible, and mapped and photographed these shops. And then I've put my rusty maths skills to use, working out how much each meal costs per portion, nutritional information, etc. I've also made each meal, timed it, written out my own versions of the recipes, and tried to take good photographs of each one. I originally only allowed 2 days for data collection in my timetable - which is unrealistic. Luckily, it has been fairly simple to compile the data at the same time as working on the other elements of the project.














While collecting data, I've been working on the scenario films, and have been getting feedback on the website work that I did, ready to improve it next week. The films haven't gone to plan but I have allowed time for that so it shouldn't matter too much. I have planned two scenario films entirely - working out the sequences of photographs I need, etc - and a possible third. I came up with another 3 or 4 scenarios which would require additional data collection / real workshop scenes.

I've taken the photographs required for a couple of the sequences, however when working on them yesterday I realised that I need to have the finished pdf of my website in the background of each. It would be mad to go through all 80 or more images for each scene and replace the computer screen using photoshop! So I need to re-shoot these sequences once the web work is complete. I have got to grips with the basics of Premiere now, so it shouldn't take too much time to turn the photos into a film, once I have the right images.

For other scenes, I need to have the real data - i.e. a route around all the shops, on foot - which I have only just worked out! So both elements of the project have been more complicated than I planned for. Tomorrow I'll be taking more photographs for the scenario films.

first pdf completed & saatchi

Yesterday I finally completed the pdf file showing every page of the website. It still needs more work doing to it - lots more - but I'm going to come back to it in a couple of weeks to improve it.
I've put some images here of a few of the pages.
I got some really helpful feedback on it from a friend, and I've sent it to my mentor to look over, but it would be great to get feedback from you as well - anything you think of, about the layout, the colours, the usability of it, etc.


Now what I'm doing is collecting and creating the real data and images needed. Most of the images in the pdf are from online sources and the text is mostly made up or guessed. So I need to sort that out now. I've written a list of all the data needed and how to get it - so now I am in the process of doing that.
I forgot to mention here that last week I went to see Richard Wilson's 20:50 at the Saatchi gallery. I've wanted to see this exhibition for years - since long before I lived in London - so I was excited to see that it would be returning to London again. It is in the basement of the gallery. The installation is basically a room filled with oil, with a path cut out into the centre. The reflection looks so realistic that my boyfriend (who had a cold and couldn't smell the oil!) thought it was just a room, and couldn't understand what I was looking at. I have to say that from photographs, I think it worked better when the Saatchi gallery was in City Hall - because the wooden panelled walls and windows were more interesting - but it was still a great experience to finally see it in public.

aesthetic development and research

I got some feedback about the designs I came up with on tuesday, and since then, I have been developing them further, and started to make up the files and layouts for each page. The designs I did on Tuesday were in Photoshop - so I started by translating these to inDesign. I also scanned in some brown paper of my own - until now I have been using an image from the internet.
As you can see above, I'm still using 'fake' data and images at the moment - but as soon as I finish all the layouts, I'll be collecting the minimum real data required to demonstrate the website believably.
I tried different colour and outline combinations to start with.

After I had done this (the process shown above took a whole day), I did some research. The working title I've chosen for the website is 'eat right'. I'm not 100% comfortable with this - as it implies that to eat any other way would be wrong - and that is not the point of the website. But it is the name that I am most happy with so far - and it is simple and short. I found a couple of online sites already using this name - see below.
The Guardian's eat right is interesting because it hadn't come up in any of my project research so far - confusingly, because it provides meal planning services and dieting help. As this is so mainstream it probably means that I wouldn't be able to use the name 'eat right' in the real world.
This American website also uses the name. I'm not concerned with this right now though - I'm back to focusing on the website. Today I continued to develop the aesthetic, mixing what I already had with hand-drawn outlines.
I also spent some time buying suitable fruit & veg (oranges, courgettes, limes, cucumber, nectarine, and avocado - all of which made me feel guilty as they were from tesco and not in season!), carving letters into them, and photographing them to create the web page header.
The header made the existing teal colour look very dull, so I sampled colours from the header and tried using them in the rest of the page. I also changed the hand-drawn element, as I thought the black was an extra, unnecessary colour.
Above is the image of where I'm at now. I'm much happier with the body of the page (although not 100% sure on the hand-written buttons), but need to work more on the header. I want to try using a computer-generated font for the outlines, and just photos of the food surfaces, not carved in. I could also try cutting the letters from any food. And I could try hand-drawn outlines.

Tomorrow, I want to work more on the layout of each page - I haven't actually counted how many pages there are to lay out yet, but I'll try to sort the layout for all of them. It would probably be sensible to do that with a master page, so that when I come to change the header or colours, I can do it in one go.

I still intend to meet the deadline I set, for sending a finished pdf of the entire site to Belinda (my mentor) by the end of tomorrow, to get her feedback. However, the pdf isn't going to be finished to the standard I'd hoped - it is a slow process.

layout experiments

I found a shop that sold produce in old-style market bags - as above - but I'm not sure how I could use this within the design. This time I worked using jpegs in Photoshop, then placing them in the inDesign file. I was also using the correct web proportions - as opposed to before when I was just guessing.

In both of the layouts above, there are too many colours and textures - I want to take elements from each, just the most successful ones. Tonight I'm going to brainstorm ideas for names and try to make a decision about the look I'm going for - so that tomorrow I can really get on with designing each page, using the techniques above.

edible letters

I used a technique similar to this on my foundation course, and also in the first project of this year. I want the website to look like it is clearly about food, at first glance, without having to read any of it. That's why I wanted to try making the header of the page literally from food.
I used ketchup, sweet chilli sauce and mayo on brown paper. I like this aesthetic better than the letters carved from fruit or veg, BUT it doesn't really fit with the 'healthy' focus of the website. Ketchup, mayo and sweet chilli sauce are all processed foods, high in sugar, salt and fat - which kind of rules them out, even though I like the way they look here.
With the fruit and veg, it's possible to be seasonal, although that would mean a constantly changing header. I think that the effect doesn't work well with the pear as there isn't much contrast, but maybe with something like a cucumber, this would look better.
I have to say that this is my favourite aesthetic so far, because it was the most fun to experiment with - but I don't know if that translates across to the reader, or even if it should - the subject is quite serious.

Aesthetic / brand / identity

I'm now in Easter 'break' - so won't have any tutorials for four weeks. 8 weeks away from assessment, I'm now working toward final outcomes. This week I'll be working entirely on the website - a pdf of every page, with real data, the aesthetics and name for the site, the online presence for it, and demonstrations of how it would work.

Today I've been trying to come up with a name - something which is very hard for a food-based project, as there are lots of restaurants, blogs and organisations out there already, all with original names! (EAT, Sustain, etc) It will be hard not to tread on anyone's toes. A short, one or two word name for the site is what I need. I've written down a lot of ideas but haven't found the right one yet - I'll work on that this week.

I've also worked some more on the ideas I had last week about how the website should look. My mentor was keen on the brown paper element, mixed with hand-drawn and computer generated. I like the brown paper because it has a market feel - maybe I could use that classic market stall handwriting somewhere too. I worked more with fonts today - choosing which ones to use, and what colours looked best.

At this stage in the project it is getting really difficult to explain to people! I've been working on it for so long that I know everything about the project, and it is easy to forget that other people don't. I need to work on explaining it better - both for my presentation exam, and for the show!

Cooking workshop sequence and web identity work

Yesterday and this week I've been working on ideas for the visual look of the website - somewhere between home-spun and professional. I came up with 5 ideas in my sketchbook, and yesterday I tried to mock these up on Illustrator. There are two examples here. It took a lot longer to do than I thought! There is a lot of work still to be done on this.

Above is the sequence I've been working on today. I'm not happy with it at all! But it is a start. I used Premiere and got to grips with the basics of it. I want to improve and extend this movie so that it shows the whole scenario around the workshop, including how the website is involved. Pete advised me to put subtitles with it to support. He also said that i could take film footage and merge that in too, quite easily.