dida - review for d203 (graphics)

DiDA D203 – Get Set!

Candidate Number Dan Foy Centre Number 02145 1 23329

D203 Review

Contents

The Project as a whole........................................................................2

Aims and objectives.........................................................................2 The plan ......................................................................................2 Test users and reviewers...................................................................2 In retrospect… ...............................................................................3

The graphic products ..........................................................................4 The gift bag ..................................................................................4 T-shirt.........................................................................................4 Logo ...........................................................................................5 Medal..........................................................................................5 Web graphics.................................................................................6 ePortfolio.....................................................................................6

My performance ................................................................................8



The Project as a whole

Aims and objectives

I had a few aims and objectives for this SPB:

• Successfully plan and manage the project and my time;

• Create and develop bitmap and vector images that are appealing to the target audience;

• Create an effective ePortfolio;

• Be more efficient and successful than in previous SPBs.

I believe that I have met my objectives. I have managed to stick to my deadlines in this SPB better than in any of the previous SPBs. I have also made better use of my project plan in this SPB by referring to it before each session, and better use of my project diary (‘Journal’) by keeping it regularly updated.

I can measure the effectiveness of my products by my feedback:

• “They look professional and inspiring” – Ryan Burns on the web graphics

• “It looks authentic” – Ben Harrison on the medal

• “I think it’s funky – it looks like a designer t-shirt” – Stefan Hawkins on the t-shirt

The abundance of positive feedback such as above outweighs negative feedback and is indicative of success.

The plan

My plan was quite effective. I created 3 significant versions of it and used it as an indicator of my progress. For the most part I managed to stick to my plan, although it had to be altered slightly on occasion where tasks took longer than anticipated.

It was harder to manage time effectively during D203 than the other modules because of the lack of time. Although we didn’t have drastically less class-hours to complete the work, having 16 hours per fortnight on a single SPB was quite intensive and left less time for receiving feedback, planning and so on. The deadline was also more rigid than in previous SPBs.

Test users and reviewers

I chose a variety of test users and reviewers. I received both unrecorded vocal feedback, and directed feedback on purpose-created forms. I received feedback from a number of 12 and 13 year olds in particular for the t-shirt and gift bag products as these users are in the oldest out of the 9-13 age range and therefore are most likely to give relevant feedback. I chose a wider range of ‘young people’ for the medal and web graphics because the term ‘young people’ is broader I was



receiving poor feedback from the 13 year olds. This may have been my fault for not creating a targeted-enough feedback sheet.

In retrospect…

The project went quite well. I do have a few regrets, however.

Firstly, I wish I had revised my idea to create a set of wallpapers rather than 3 separate ones. If I had had time I would’ve redesigned them in such a way that the text and the images fitted together.

Secondly, I wish I’d had more time for my ePortfolio. It is functional, but with an extra 2 or 3 hours I could’ve improved it considerably and made it more graphics-orientated. I could’ve made a gallery for the thumbnails rather than pasting them into one big image, for example, or rounded off the corners of the main ePortfolio.



The graphic products

The gift bag

The purpose of the gift bag is to hold the t-shirt; it also has a secondary use of advertising the Get Set! Campaign.

The gift bag includes features that make it specialized to its purpose:

• There is a representation of a t-shirt on the back that can have a size code entered in it – for example S, M, XXL;

• There is a very large outline of a runner that covers 2 sides which emphasises the event that it was created for, and is also a visual link to the t-shirt design;

• The text ‘Get Set’ and ‘fun run’ are included on the side to further advertise the event and the campaign.

I created my bag as a net design which I created myself from primary research into the construction of gift bags. I created it in Macromedia Fireworks as a 1/2.5-scale PNG vector, which means that it can be scaled losslessly. This is useful for resizing the bag for different sized t-shirts or if extra items are to be given out at the event, and the format also keeps file-size down (relative to the bitmap filesize).

The gift bag has assembly instructions printed directly onto it, with extra instructions available in my annotation document. I then took a picture of it and showed scale using a ruler. I didn’t put a scale on the design because this would detract from the design – better to have the dimensions on a separate document.

The gift bag design is very similar to the t-shirt design and as such is suitable for boys and girls. When I exhibited the bag in my tutor base, I got generally equal interest from both boys and girls.

The feedback on the giftbag was positive on the whole, with most negative feedback being down to taste (“I dislike the colours of pink, red and yellow” – Rodney Green) or misunderstanding (“Size needs to be bigger” – Stefan Hawkins on the 1/2.5-scale model). I think that I could improve my gift bag by making the assembly instructions clearer to follow, and perhaps by numbering the glue areas etc.

T-shirt

The aim of the t-shirt is to appeal to children aged 9-13, to be used as a reward for taking part in the Get Set! Fun run, and to advertise the campaign.

My t-shirt features a large outline of a runner and a dust trail that implies speed, which is representative of participation in the fun run. This is also a visual link to the gift bag. The Get Set logo appears twice – prominently on the front and also more subtly on one of the sleeves. This is good advertising for the campaign. The t-shirt is also not predominantly boyish or girlish without an overuse of typically boyish or girlish colours (except blue on the background, but it isn’t a particularly boyish blue and there isn’t any camouflage patterns or anything like that). This makes it attractive to both boys and girls. This is reflected in my feedback.



I decided to create my t-shirt as a set of images that can be transferred to a blank white t-shirt, rather than a representative image. I created the images as vectors in Macromedia Fireworks so that they could be scaled for different sizes of shirt. The positions of the logos and other parts can be seen both on my planning documents and on my pictures of people wearing the t-shirt. Unfortunately the t-shirts we were supplied with were size XXL – which would swamp a 9-13 year old. Therefore the images should be seen as representative and not as the finished product.

The t-shirt received overwhelmingly positive feedback, with comments such as “I like it because it is colourful, nice slogan… it’s nice!” (Tanzela, 13) and “I think it’s funky, it looks like a designer t-shirt… I want one” (Stefan Hawkins, 13). This shows that my design is attractive to the target audience. However, Tanzela commented that she disliked the logo on the arm, and Harry (13) commented that “I dislike it because it’s too big”. This can be remedied by swapping the arm-logo for stripes or similar in future designs, and by being provided with realistic sizes.

Logo

I designed a logo to represent the Get Set! Campaign in Macromedia Fireworks. It works in monochrome and a variety of colours, and the full-colour logo uses 5 colours plus black. The spokes are representative of the London eye or a speedometer (both relevant to Get Set!) and reflect the official colours of the Olympics, and there is also the outline of a female runner that I traced from a photograph by a fellow Flickr member (with permission). It is made in bright, playful colours to appeal to a younger audience but the runner brings a maturity that appeals to an older audience.

Jonathan Wormsley wrote “the edges of the coloured section are a bit bumpy” in his feedback, but the fun design was popular with virtually every other subject asked. He also commented that the logo didn’t flow – again, this was contrary to other feedback received (particularly with younger subjects such as Harry and Stefan), but if I were to improve the logo I would first concentrate on making the logo look more natural and perhaps the spoke design a little less abstract.

Medal

I created my medal using Macromedia Fireworks. I created it as a vector, with an image on the back representing Derby that is of a high enough resolution to resize significantly without distortion. It does not exceed the 70mm limit. I also used bevel and emboss effects to make the medal appear more medal-like.

I experimented with a couple of designs before arriving at my final design. I also experimented with two different pictures of the cathedral for the back of the medal. I chose the cathedral because it dominates the Derby skyline and is the second highest cathedral of its height in the country. I chose a date in summer of 2010 for the tournament as it is nearer to the 2012 Olympics and therefore likely to have better support.

On the whole my test users liked my medal. They gave positive comments such as “It looks authentic and I like the picture on it – very well done” (Ben Harrison), “I like the size, the colour and the picture” (Stefan Hawkins) and “The Derby church image is very nicely inlayed” (Jonathan Wormsley). Negative points also appeared to be a matter of taste – for instance Stefan liked the size whereas Ben Harrison



didn’t. Jonathan Wormsley commented that I had neglected to put the date on the back of my medal, so I corrected this. He also suggested that I make the edges of the lighter sections more blurred – they were only meant as a representation of the shininess, but I gave them a Gaussian blur anyway.

If I were to do the medal again, I think I would make the logo on the front a little more prominent and perhaps try and get around the dead space on the back somehow – I feel that this space could’ve been used better. I created the logo as round as many versions of the Olympic medals are round and it is an easy shape to show as being 70mm. However, if I were to do the medal again I would experiment with different shapes.

Web graphics

I took the images for the web graphics myself and edited them in Adobe Photoshop Elements. I saved the images as JPEGs with some compression to keep down filesize and loading times. I saved the wallpapers in several popular resolutions. Details of this can be found on my annotation documents. The images are apparently effective, as I received feedback such as “promote exercise well” and “cleverly done” (Ben Harrison), and “They look professional and inspiring” (Ryan Burns).

I decided not to use secondary sources for my graphics as I didn’t feel that they would significantly add to the final products. The wallpapers follow a theme in that they are all of people performing trampolining moves; however, I wish now that I had pursued my idea of creating a set of wallpapers with related words and phrases. Having said that, I don’t think I would’ve had time to complete the images to a high standard.

The banner confused me somewhat with the wording of ‘the banner must be a full page width’. I researched banner sizes and picked the largest most common horizontal size. I created my banner as a vector in Macromedia Fireworks so that it can be easily scaled if it needs to be larger.

I don’t feel that my banner is my strongest graphic – I found it hard to create something interesting without using images, but I eventually created a little interest by creating a ‘bounce’ type effect by layering the text. Test users reported that the colour scheme was OK.

The web-page is lightweight but functional. There are reasonably sized thumbnails for all of the wallpapers, with links to different resolutions. The banner is also there, at the top where a banner would usually be found. However, there isn’t much text and I had to re-use an ePortfolio header to save time. Whilst I feel that this works well, I should perhaps have added a little more text.

If I made the web graphics again I would try and create wallpaper designs that are quicker to make, which would give me more time for creating the web page. I would also perhaps use more white in my banner to create a lighter feel. With the wallpapers I would also like to improve my workflow by sharpening as the last step.

ePortfolio

My ePortfolio was designed with the moderator in mind. There are prominent links to all of the products at the top of the page, and then contextual links in the sidebar of each page. There are also relevant links within the text of the pages.



The ePortfolio also makes use of graphics – there are background images for the body, the content and the links in the header. The header background also changes contextually for each section. Jess Payne commented that there should be “more graphics included on the ePortfolio” – I took this into consideration and created some of my annotations in sizes that are appropriate to display on the ePortfolio pages, such as on the logo page.

I have kept the file size within the limit by using vector tools where possible and limiting the number of large bit-depth photos. I have also compressed files at a reasonable quality in JPEG, which is often smaller than Macromedia Fireworks’ native format PNG. I created my images using layers, but flattened the images for the final products before putting them in my ePortfolio to further reduce file sizes. I saved all documents that were to be printed – for example the gift bag and medal – at 300dpi. I saved all web documents such as the graphics and ePortfolio headers at 72dpi as this is the maximum resolution most screens can display.

I created my links relatively, which means they will work on external systems. I used complementary colours of orange and blue for the headers, which Jess Payne and other test users reported to “work well”. I used a shade lighter than black for the text in my documents as this is easier on the eye on computer screens. I also added some extra line-spacing to aid readability. The text is sized in EMs which means it can be resized with browser controls to aid usability.

If I had time to revisit the ePortfolio, I would spend some more time on my commentaries, proof-reading and spell-checking. I might also redesign the background and try to implement some of the features I had planned such as the avatars for different types of file and the rounded corners at the top. I might also make the stripes on the background a colours other than grey.



My performance I believe that I worked to the best of my ability for this SPB. I endeavoured to follow the brief as closely as possible and do all that was required, even in situations where I didn’t understand what was being asked (such as the ‘banner must be a full page width’ instance).

This project has rounded off my DiDA learning experiences. The other SPBs have been very beneficial in helping me form good personal habits like planning, sticking to deadlines, maintaining high standards and working to specifications.

The D203 module has taught me to address issues as they emerge, rather than putting them off and letting them get on top of me. A good example of this is completing my Journals as I went along and being proactive in the construction of prototypes such as the bag and the t-shirt. This has had a positive all-round effect on both my schoolwork and my general wellbeing, as I am now less stressed and more productive.

If I were to do the project again I would try and concentrate on creating the bare minimum first, and then adding bells and whistles later once I have secured a good foundation. I feel that I spent too long on insignificant things such as the headers on my ePortfolio and looking for the xHTML 1T DTD.

dida - review for d203 (graphics)

Documents