Sunday, 16 March 2008

AF106 Interactive Design

I am in the process of writing the Museum Guide Proposal, which seems to have come rather suddenly in the project timetable; however, this has forced me to develop ideas quickly. I've thought about different kinds of interactive media and looked into the design processes and considerations which need to be taken into account with this kind of project.
I was initially worried about the amount of obligatory design specifications in the brief (text size and background, for example), but I realise it is possible to adhere to these standards and also create something individual and attention-grabbing. I have selected the theme of "Bathing" as I think this is an important and idiosyncratic part of Brighton's history, and the photographs relating to this topic will clearly show a progression of My favourite layout concept so far is of a beachfront-themed homepage, with buttons shaped like Brighton's celebrated beach huts. Each beach hut is labelled with a particular 20-year period, and when selected, is enlarged and opens its doors to reveal corresponding photographs. I have made some sketches but I am currently creating some look and feels on Photoshop to assess these desin decisions.

11 comments:

Emilia said...

I handed in my Proposal on Tuesday, having decided on the Beach Huts theme and an initial layout/site map.
Today I went down to Hove seafront to photograph the beach huts, and I've been developing sketches of them. The weather has been really cold so I haven't seen any of the huts with their doors open; therefore I've had to rely on internet images or my imagination to create opened huts.
During the week at college we were asked to hypothetically scrap the limitations of the brief and create a look and feel for the kind of guide we would want to create normally. I drew an open beach hut with furniture and objects, which would be animated links to various kinds of photographs and information (e.g. from a notebook, or a pair of swimming trunks, etc.). Naturally this kind of guide is incompatible with the accessibility and usability guidelines, but I realised I could use the most detailed, realistic illustration of the hut as part of my "attractor" screen.
I have also been researching and reading about accessibility. In the book "Writing for Interactive Media" (Samsel&Wemberley, New York, Allworth: 1998), the author quotes the W3C's accessibility guidelines, making the important point that "Accessibility does not mean minimal page design, it means thoughtful page design... In general, authors should not be discouraged from using multimedia, but rather should use it in a manner which ensures that the material they publish is accessible to the widest possible audience". In relation to my design, I recognise that I can use plenty of images and some animation, as long as it doesn't replace or distract from the textual content.

Emix said...

I am now at the stage where I have finalised my design decisions and I am just beginning to attempt to make the whole thing come together in Flash.
I have made several revisions to the hand-drawn elements of my layout, adding more detail and possibly stylisation. I have retained an overall playful, colourful feel in my guide's format and navigation. This is also reflected in the attractor screen; I have decided to design a looping side-scroll of the large, detailed beach huts, giving the impression of movement along a beach. Now and again the doors of a hut will open revealing explanatory text about the exhibit.

Emix said...

Today I attempted to transfer my ideas and images for the attractor screen into Flash. I used a scrolling and looping technique to create the illusion of walking past the beach huts. I added a slower moving cloud in the background and I was fairly pleased with the result. However when previewing my movie I realised I need to go back and re-touch up the images and possibly add more detail. There is also a slight "glitch" when the animation comes to the end of the loop. I am hoping to have the animation stop at this point to allow the opening of one hut's door, so this shouldn't be too much of an issue. I also need to decide on and create some other details (flying birds, waves?).

Anonymous said...

Hello. This post is likeable, and your blog is very interesting, congratulations :-). I will add in my blogroll =). If possible gives a last there on my blog, it is about the Toner, I hope you enjoy. The address is http://toner-brasil.blogspot.com. A hug.

Emilia said...

Thanks Toner!

I have had a very productive day imputing my layout ideas into Flash. I was struggling quite a lot with the software over the weekend, trying to assign actions to buttons, and overusing the "movie clip" feature before I had grasped the basics. However, today I learned a bit about action script and the difference between assigning actions to the timeline and to individual buttons.
I have now produced a simple version of my home screen, with functioning buttons (each with different down states). Now that I have cracked the fundamentals of Flash, I realise how much work I have before me, but I feel much less frustrated and overwhelmed.

Emix said...

Yesterday I made progress in sorting out the fundamental navigation of my guide. I separated each sub-gallery of photographs into individual scenes (Red Hut, Green Hut, etc.); this way I would be able to script them one by one, as neatly as possible. I then inserted blank Movie Clips into the large open hut frames, and created an image loader to fetch the photographs from an external file. I designed backwards and forwards arrow buttons to navigate through the photographs.

Emilia said...

Today I finished inserting imageloaders to all the scenes in my guide. I had a problem loading some of the JPGs, and had to convert them into interlaced PNG format, which worked much better.
Next, I worked for many hours inserting the text. I put each bit of explanatory text on a separate frame so that it would appear in sync with the relevant image. The cloud I had designed to appear behind the text was no longer applicable (it was the wrong shape), so I am now working on a new cloud.
Now I have completed the bulk of my guide and I can begin to work properly on the attractor screen and other sections.

Emix said...

Yesterday I got to work on my attractor screen and created a scrolling, looping animation of my new improved beach hut drawings. Every few seconds, the animation pauses on an open beach huts and some basic information about the nature of the guide is displayed.
Today I worked on finishing my home screen. I improved the formatting of the text, adding italicisation and emboldening to make it more readable. I added a starfish-shaped button to link to a "Further Reading" page, and created this page simply by displaying clouds which contained a list of the books mentioned in the brief. I also added a sun-shaped button in the top left corner, labelled "touch here to exit", which will link straight back to the attractor screen. I think I could improve the overall look of the starfish button, however.
Over the weekend I will work on improving the attractor screen, adding more animated elements, and tweaking the home screen. During next week I plan to incorporate the timeout screen and test the entire thing.

Emilia said...

Yesterday I went into college thinking I'd have a fairly straightforward day working on my attractor screen, having tweaked the final details on my home page over the weekend. I was wrong! I was planning to jazz up the attractor screen by changing the main beach hut to create the effect that its doors open and reveal the text. In trying to insert a new .ai file into the tween it all got very complicated and I spent a lot of time getting the beach and the huts to align, and fixing the glitch between loops. Then the layering of my animation went very wrong, and I had no control over which part was visible over the others. Eventually I realised the problem lay in the new .ai file I'd imported from my newer version of Illustrator, and when I used a .psd file instead the problem was solved. It was a pretty stressful day.
Today I hope to get the whole thing working more smoothly, despite the fact that it wouldn't run at all on the slower computers yesterday.

Emilia said...

I have finally finished my guide. Today I fixed the last problems with inserting my attractor screen into the main application, as well as creating an invisible button for the attractor screen to make the entire area active. I then added the necessary movie clip and code to each scene to make the guide automatically full screen, and published two versions: one with a cursor visible, and one without.
This has definitely been a busy last few days but I think I managed my time pretty well during this module, and although the faults in my guide are obvious to me now, I am generally quite happy with my final product.

Julie Samuels said...

Hi Emilia,

I have enjoyed reading your blog over the past few weeks. I particularly like your accounts of the highs and lows of your assignment development. You state in your final entry "I am generally quite happy with my final product" - you should be very proud of what you have achieved. Well done.