OUGD504 Design for Web Task 2

In todays session, we were determining the content of our websites in relation to our chosen subject matter. We made out another flow diagram, this time looking at the content of each page itself.

On the home page I chose to include a brief introduction to the website, as well as top stories in the motion graphics world, perhaps including a live feed of these stories, and then went on to consider including a twitter feed in its place, following the most influential or commonly featured designers on the website.

I also chose to include an 'about' page, and while motion graphics is more or less self explanatory, it may interest viewers to learn a bit about the most popular/well known examples of motion graphics, and perhaps some of the most influential names.

I wanted to make this website predominantly news based, so I plan to break down the 'news' heading into design, film/TV and advertising to make it easily accessible to each individual field, so that viewers can easily chose what area they want to look at based on their interests.

On the 'history' page, I don't plan on going into a lot of depth, perhaps incorporating a timeline, which would explore motion graphics since it's emergence in a chronological fashion. I thought it would be appropriate to also include the future of motion graphics and how motion graphics altered the world of graphic design, film and advertising.

I am contemplating including a subscription option, which would be free to viewers but keep them updated on motion graphics all the time, syncing their phone with their live newsfeed perhaps via an app.

We went on to draw out the homepage of our website, basing the information given on it on the lists that we made concerning content. I wanted my webpage to follow a newspaper format, similar to that of thetimes.co.uk, although perhaps not as text based and with a heavier focus on imagery (and videos).

Another idea I tried was that of a 'feature of the day' which would be a motion graphic feature on a landing page, which would be updated daily based on trends within the website or new motion based releases.

This would allow the viewer to skip it and enter the site, or to automatically enter it after the feature has finished, and the viewer would then be taken to a page based on one of the other three options I explored.

After completing these, we went around the other tables with sticky notes leaving feedback on other peoples designs. My responses had some similarities:

- 'I like the idea of a landing page with the "feature of the day" - relevant to the concept of the site.'

- 'Unless you were going to put motion graphics on a landing page, I wouldn't use one as it's not relevant. Like the idea of the live feed from twitter.'

- 'Good concept, well thought, keep expanding your ideas. I like the banner on number 4.'

OUGD405 Module Self-Evaluation

Photoshop Postcards

After our Photoshop induction we were given a brief in which we had to create a series of postcards using Photoshop. We were each given a shape and were required to find examples of this shape around the college, take photos and edit them to create a series using photoshop.

The shape I was assigned was a square and I immediately thought of all the windows around the college, however after taking some photos of them, I didn't like how inconsistent they were with each other. They were all square but otherwise they had little in common, they were all spaced differently and I didn't see any other links.

After attempting to find some common ground with them I just decided to change the series. After spending hours in the mac suite trying to finish something I started taking pictures of the keyboard. I thought this could work well as, while most of the keys are square some aren't, so there would be some subtle variation in photos of different areas of the keyboard.

I wanted the subtle differences for example, blemishes on the keyboard, to be extremely defined, so I adjusted the levels, which exaggerated the dirt and fingerprints on the keyboard. I also wanted them to appear quite eerie and creepy so I increased the hue and brought the saturation down, which gave it dirty green undertones.

However this still left the image looking a bit basic so I adjusted the composition of the whole image. I made separate layers from sections of the image that intersected a key or a character on the keyboard and moved them around to break the image up.

Since the colours are all fairly neutral this wasn't an overwhelming change, it just makes it worth a second glance to identify the difference. I wanted to keep the back simple but include 'Leeds College Of Art' on the front. However, due the nature of the design and the characters on the keys I had to increase the lightness to let the type stand out.

To make the disconnection of the image a little more obvious I reduced the opacity of the background, bring the disjointed parts forward.

Final Postcards

Research, Collect, Communicate - Final

After taking into the account the feedback I received during the final crit, I decided I wanted to adapt the final to fit the criteria more. However I found that it was difficult to make small changes to it and make a big difference, so I decided to almost completely start again.

I wanted to keep the Tube Map so I just changed the colours to make them more similar to the original tube map. I also incorporated the original Underground logo and adapted it to read 'Overground'. I kept the collection of awards and nominations, and decided to make the whole thing more focussed on a new release of Special Edition DVDs, so while it was a book jacket I was designing, I wanted it to be released in a celebratory manner so that I could include a lot of film based information.

I did some research into facts about the film but more 'behind-the-scenes' facts that would interest someone who may have seen the film and know the facts. It also prompts those who haven't seen them to put these facts into practice and it may make the experience more interesting to them.

I made a collection of sort of 'fact bubbles' and incorporated them into the structure of the book by eliminating the character illustrations. Initially I went back to the idea of the map of mountains and rivers but found that two maps might have been a bit pointless and I wanted to have some variety.

To fill it out more and stop it from looking as sparse as the previous version, I included the synopsis of The Fellowship Of The Ring on the reverse side with the bubbles. I made some adjustments to the dimensions as it was a little too short before. I changed the colours to fit in with the map and made the background to the information white, so the contrast would make the whole design much more legible.

I kept the type in the same structure as the originals, and just changed the typeface to London Tube, keeping it consistent with the map. This structure just helped it become a bit less formal than if i had left it following one basic line.

I was much happier with this second version than with the first, and although I feel I could have explored the info graphic idea in relation to my topic in more depth, enabling me to fill it out more, it seemed much more in-keeping with the brief. Since I designed this after the final crit, I was limited for time and I would have liked to design all three covers with slight noticeable variations, more so than the three covers I did before which were all the same in terms of info graphics. However, I think this one turned out better than the over-simplified originals.

Research, Collect, Comminucate - Development

I wanted to include a Middle Earth tube map and a few character profiles, no matter whether I decided on a poster or book jacket, so before I decided which to do I designed these parts first.

I drew out a still image of Frodo, Gandalf and Gollum from the films and outlined them. I kept it simple and left out facial expressions, partially to allow a reader to make their own assumptions on facial features but mostly to keep it minimalist and simple. I didn't want to overwhelm a viewer with information about the book and a hugely detailed image.

Initially I wanted to break down the image, using my primary research, to show the words that people used to describe each character in percentages, giving the viewer an idea of how to see the character before reading.

I lined out each section after measuring the fractions according to the 6 most commonly used words (or similar words), but found that when it was filled with the colour it looked too busy and it would be more effective filled in in different shades of the colour theme I planned to have for each design.

When designing the tube map, I wanted it to be similar to the London Underground map but make it fit a more medieval style to fit the theme of the books. I varied the lines to be different shades of the colour theme of each book.

I printed a basic map of Middle Earth and by following the plot of the book I marked out the route taken by Frodo in his journey to Mordor. I added lines for each area of Middle Earth to fill out the map and give the reader an idea of the length of their journey.

In the image above the type is difficult to see but in order for it to be legible on a dark blue background, I had to use the lightest shade that wasn't white to keep up with the theme.

I found that the information I had gathered would be most appropriate for a book jacket so I returned to that idea and starting designing the layout on InDesign. I based the measurements on an A5 sketchbook I had, including an extra 5cm so the jacket can fold into the book. I chose one colour for each book and varied the shades for the illustration and tube map, to keep them consistent with each other in terms of style.

I started designing another map to show and compare the significant mountains and rivers in terms of height and depth, however after giving some thought to the layout of the jacket I wasn't sure I would be able to include it if I wanted the tube map to be large enough to be legible.

I started to design the jackets themselves on InDesign, separating the sections out with varied shades of one colour. I found that while keeping all of one book blue, another green and another brown, they each became quite individually overpowering, as a lot of the colours were dark. The font remained Helvetica on the jacket, apart from the London Tube font I used for the map. I wanted to keep it as simple as possible in the hope to compromise for overwhelming the rest of it was.

To make the jacket slightly more infographic based, I did some research into nominations and awards but almost all that I found were for the films. I then decided to make the focus of the jacket to be a new design as a celebration of a Special Edition DVD release so that I could still use this information for it. I chose the most prestigious awards and placed them in a compact layout.

I maintained the structure of the type for the awards in the type for the title, varying size to put emphasis on some of the words. I printed them to make sure they were the correct dimensions and found that the type on the inside of the jacket was cut off at the edge. Similarly some of the sections folded too far over into the next section, and the colours and small size of the type for the tube map weren't completely legible due to them being on such a dark background, so I had to, change the colours of the lines and type, as well as adjusting the size of all the type.

When I printed them all off for the final crit I was unhappy with the colours as they didn't appear linked to each other and were much more varied than I planned on them being, some on the Fellowship edition appearing more violet than blue. While that could have been due to the printing, I was unsure on the colours prior to this. When printed, the information also seemed more sparse when I wanted the information to be the main focus.

The feedback I got from the crit was similar to my own feelings about it, where the simplicity I tried to exaggerate gave off that there seemed to be a lack of time invested in the design. While this wasn't the case as I had changed my plan so many times, I saw exactly what was meant. I decided after the crit to spend a few more days adapting the design to make it strictly information based.