Final product

My story poster

And interactive page (click on image for link to site):

Screen Shot 2014-05-14 at 15.58.05


Evaluation-the very last one possibly

This will probably be my last evaluation. Let’s make it a good one. Oh gosh I just realised I spelt author wrong in the site url. Darn it. Right that’s one thing I still need to improve on in all my work: spellchecking.

Fit for purpose?

Presenting yourself to the world via an interactive product is far different from the bland CVs and physical auditions. I opted for a simple one page hover-fest with small animations and criminal amounts of gags. So in that regards I fulfilled the purpose of this product and hopefully viewers via be enticed to find out more about me after they’ve examined my site. The only thing lacking is probably a gripping narrative (aka human drama) but that’s for another time.

Technical Qualities

I remember stressing about the BRIT interviews, especially after wards. I showed almost no technical prowess and my portfolio was filled with sub par drawing and rushed flash animations (cue shuddering). These two years with all the googling, youtubing and playing around I finally found ways to make not just a pretty picture but how to make it interactive too. Illustrator and Edge animate proved to be a match made in heaven for me. Whilst there were still struggles I managed to get a functioning web page with all the featured I intended.

Allow me to reflect on the struggles. Having had previous experience with Edge I thought it would be easy to pull off a site in Animate. Except this wasn’t the same as coding html and css. An a:hover in CSS is a simple effect but with edge I had to come up with a workaround with mouseovers and mouseouts. Fixing the commentary bar was the biggest thorn on my back. Luckily digging around the Adobe forums offered a solution.

Forums are not just a place for teens to waste time but to learn and discuss too. Take note UK internet censorship lords.

Does it look nice?

I deliberately choose a bright palette with yellow being the prominent colour followed by pink and blue. The contrasting pink and blue palette is pretty up my wardrobe summed up, it doesn’t matter which gender connotations they have I love the colours equally. And yellow, well I love yellow what can I say.

In the beginning this caused some upsets with my design as the colours were proving to be too overwhelming. Later on I decided to go with a bordered look and use outlines for boxes instead which improved the aesthetics dramatically. My only woe is that the site is optimised for desktop both on a technical and aesthetics perspective (though it does look great on an Ipad). However I decided that is better to make an alternative CV for mobile so that I needn’t sacrifice depth and detail on the desktop  version.

Production skills

As I mentioned before the Illustrator to Edge Animate workflow worked like a charm to me as one software is one of my strongest and the latter a personal favourite. It’s been two years and I can safely say that I’m no longer that girl who panicked about what the heck vector graphics was.

I went for a simple wireframe and then experimenting on Illustrator with the overall look. As always I had a solid idea of what I wanted to make (and making a stylesheet helped greatly) so there weren’t many hiccups this time around. However I personally find that I should have planned in more detail the actual contents (i.e. my inventory etc). Whilst my plan was sufficient enough for myself (which was done on purpose as this is a my story unit) if I had to hand the work to someone else they’d only be able to make a template not the final product.

It’s a small project so I can make an excuse for not sketching out every last detail (and because I prefer to make vector art on a computer straight off without a sketch; I tend to only sketch when doing traditional art), but for a large-scale project I understand that a more in-depth plan would be appropriate. One for the future then.

Rightio one last quote before the end:

I got into this course believing that I can succeed even though I knew almost nothing about Adobe or what the word interactive media truly meant. My love for games led me here. Although games design wasn’t my highlight, I learnt how to brand and entertain the masses and more importantly how to utilise the web for learning to make the most amazing, industry standard works. I wanted to be a creative and I think this has been a great move in that direction.

When panicking about being selected I promised that I would go down a non-interactive media route if BRIT rejected me. That would have been foolish because I would have been ignorant to the fact that the web is an ajar treasure box. You just have to take the initiative to sniff out that treasure and learn things yourself.

Having just typed that, I find my time at BRIT indispensable. It was an open place where the staff and students learnt (and joked) from each other. Reciprocal learning just like that TED girl who looked like a younger version of me said. I’ll be carrying on this philosophy with me in my future endeavors.

This has been a really long evaluation. I’m surprised I haven’t made a pun yet. Good-binary? Okay I’ll stop here.

Production log

Screen Shot 2014-04-29 at 09.53.47

I created the main layout and frames in Illustrator. Exported the frames as one huge image.

Screen Shot 2014-04-30 at 13.09.43

I made the objects and saved them as separate images (so that I get more control over single elements on the page). For the inventory objects I saved two versions of each element a pink version and a normal coloured version. 

Screen Shot 2014-04-29 at 09.50.55

All the assets are then composed in edge animate (this is where it all comes together).


Using hide and show for the label effect.


The polygon growing effect was just making the animation to play in reverse on mouse out. So that it only grew big on hover.


Changing the opacity of two images really give the element a much more smoother transition.

After that I ticked a box that made the whole composition conveniently fluid (so that it resizes for different windows).

After test driving everything I just needed to publish the files and we’re all set. Another finished piece of interactive media.

Words to describe me and a picture to describe me ad a picture of styles I love

And the award for longest title goes to…this post. First it began with a bunch of word storms about myself (yeah this isn’t going to go down well): Eccentric Curious Scatterbrained Dedicated Humanist DIYer Pun & cult mediums enthusiast (Too) Self-aware Humble (well in public anyway) Cowardly Then it continues with quotes about me:

Your social awareness is beyond your years, which contradicts with your childish demeanor. – Kerry (aka a semi-statement on my fashion sense). Too many words. – Ash. Game failer- Adrianne Your an idiot- Cheyanne Likes obscure things; happy go lucky; in-depth philosopher- Abe ‘Your intelligent and witty Danwen.’ -Liam, ‘Wait, Liam I’m collecting silly quotes so maybe say somethings that’s a bit more…’- Me ‘Go home.’- Liam ‘There we go, perfect.’- Me Weird.- Mum

And I summaries these finding in a visual collage. To go for a less is more approach I decided to keep things clean and clear:



As for styles and graphics I like, well here you go:

As crowded as collages come.

As crowded as collages come.

Storytelling questions

Where we plough through one link for answers to the following questions:
What three ways does the brain process experience and who said this?

This comes from Donald Norman’s book Emotional Design where he investigates and theorises how people experience design. He broke it up into 3 ways:

  • Visceral Design- our initial reaction to design.
  • Behaviour Design- experience with using the product.
  • Reflective design- how we try to reflect our own life experiences onto a design/product. Thus everyone perceives design differently due to individual circumstances.

The five tips of improving storytelling through design:

  • Creating levels of interaction within the design (a lot of games and websites utilise this method); capturing audience attention by making them engage.
  • Having a clear target audience. Who are you making this for? It can be your employers, your nana, your cat etc.
  • Make references and pay tribute to the medium you design for. Know the medium well and use its functionalities to your advantage or you’ll be left behind (i.e. if you are working for web it’s unadvisable to ignore its interactivity and go for static design).
  • Having a purpose to your story. Why are you telling it?
  • Map out the story and set out to inspire. Know your story inside out.

What is the number 1 online activity?

Interacting with social networking (shouldn’t be surprising seeing as how we use the web to primary communicate and sharing our stories about our cats).
What do people do online more than search using Google?

Talking of cats, people watch more kitten video then searching on Google.

Who designed the D&AD New Blood graphics?

What are they about?

The person responsible for D&AD branding is part of LBB (let’s be brief) a design company that highly values design. Their focus is unashamedly modern (“LBB is education 21st Century style.“) and contribute to educating design (via workshops) not just creating design.

What is your favourite piece of their work and why?

I have a soft-side for colour. As someone who grow up on cartoons and Nintendo games (which I still currently enjoy) I can not imagine a world without colour. In a sense the reflective side of me is currently making attached to the colourful and cheery world of vector art but this piece of architecture is colour and shapes in tangible form. Geometric, abstract shapes reminds me of the artists that I’ve studied (and loved) long ago: Kandinsky. Picasso, Kusama.

It’s not just plain nostalgia that makes this piece attractive. The movement and pastel palette evokes a sense of excitement and energy often lacking in most interior design (i.e. my house). Plus look how creative and bonkers that wall-art is:

Who wrote ‘The Shortest Story Ever Told’?

Whilst inconclusive, Ernest Hemingway is often credited for this gem due to his style and a rather boastful anecdote.

For sale. Baby shoes. Never worn.

What is the lesson of ‘The Joy of Six’?

This post encourages reader to use concise storytelling method to provoke empathy and allowing users to fill in the gaps themselves (hence why the brevity is repeated numerous times throughout). Audiences can therefore be more invested in the story. Sometimes less is more can apply to storytelling as well.

What is so clever about ‘HBO Voyeur’?

I would not be very surprised if this campaign was inspired by Rear Window or cinema’s voyeurism theories. Looking at other’s life may seem noisy but our inner desires to find out others’ stories pushes us to be noisy anyway. Using that innate curiosity this campaign quite literally projected stories on a wall. Not only is it aesthetically intriguing (and creative) the added element of allowing people to absorb multi-stories (totally intended pun) of well stories. 

If I said we live in a world of perpetual beta, what do I mean?

Beta a word common to those born in a technology powered world. Nothing is ever finished, there’s always a new Iphone, a Windows update or rebranding (until someone goes broke). Everything’s in infinite beta which is not exactly never evolving that’s why the technology, design and even stories is constantly updating to fit the current trend. In these moment adaptivity is king.

progress does not necessarily mean forgetting about the past but rather learning from it. – me (I miss doing these weird little/slightly pretentious/probably reworded quotes)

Looking at more interactive products

I love games so the below interactive products all reflect my bias towards that field. Despite their similar relevance with gaming the two serve different purposes (beyond mere entertainment) and exist on separate platforms- thus providing a wider influence. Here we go!

Atomix digital magazine for Ipad

The interactive magazine industry is still in early days but atomix is an example of how to merge layout, interactivity and engaging text together to fully utilises the platform’s strength. Unfortunately it is no long being updated but there’s still much I can take inspiration from.

Like a lot of other gaming magazines it informs the reader of the latest fiasco circling in the industry, share opinions with the gaming community and making purchase recommendations. What differs this magazine from most is how all that content is displayed. Rather then just tiling blocks of text on blocks of images, readers are required to interact with visual cues in order to reveal the text (reflecting the discovery nature of games). Whilst in some cases this would seem obtrusive; atomix lays everything out beautifully and coherently to ensure your attention.

Arrows, icons and subtle flashing are the few UI design methods Atomix designers use to guide readers.

Unique typography is used for every article to give users an artistic impression for the content and games in question. This gives every individual article personalities and importance (so readers are less likely to skip pages).

Immediately you can get a sense of the game’s…

…atmosphere and feel just via the meticulous article titles.

There are a large variety of digital assets in this magazine: video for the opening, pngs (I’m assuming all the images are png), text, audio clips. All of these are most likely compiled in InDesign- I have experience with the software so some of the feature is recognisably InDesign: the scroll, picture slideshows, buttons etc. Some of the graphics are raster based (possibly made in Photoshop or free alternative, GIMP) whereas others are clearly vector (made in Illustrator or its free counterpart, Inkscape).

Lovely vector art on display here.

Whenever your making a magazine the textual content is always king. The design and pretty graphics should always complement the text and not obstruct it. However due to tight deadlines designers most likely work with dummy text initially when drafting the layout. Creating original assets (i.e. the titles and UI elements) and gathering existing assets (i.e. screenshots and official artwork) are usually the first procedures. Lay-outing in InDesign (or any other digital magazine software) comes next before the interactivity is finally added in.

Grace’s Diary- a flash based visual novel for browsers

As games continue to evolve it’s just as important for them to show their ability to educate as it is for them to enlighten, entertain and touch an audience. – Brian Crecente on an article about Grace’s Diary.

Grace’s diary was the creation of Hima and artist Piti (the same creators behind this piece of genius) as part of Life.Love’s competition. The brief was to create a game that will raise awareness of teen dating violence and what users can do to prevent it. This was the winner and it’s clear to see why.

Pastel colour scheme combined with subtle penciled artstyle create a beautifully mellow atmosphere (the audio fits perfectly too). Whilst the subject and theme is heavy, Grace’s diary takes a sincere and gentle approach rather than a dark and dreary one. It perfectly reflects the story’s gentle way of handling the issue, having characters calmly approach the situation helped output a message that things can be resolved calmly.

As a game jam entry, this is clearly aimed at visual novel and mystery fans (even the artstyle and point and click gameply is reminiscent of hotel dusk, a well known game in this genre). Uncovering the puzzle of a friend’s relationship is compelling for any gamer. The subject matter and entertainment (hey look it’s a game!) aspects makes it appeal to the target audience (teenagers obviously) too. A (interactive) story is always more affective at informing than plain old leaflets.

One huge flaw though is the game cover (there’s good reasons why sites highlighting the tend to show off in game screenshots) design which is not consistent with the actual in-game art. There’s also the title font’s gradient and placement; the former is overused and the latter is off balance.

Some players also commented that the game didn’t work well as a visual novel. I personally can see the limitation of a visual novel in spreading the message. As the number of choices players can make either results in a good ending or bad ending, yet reality has many more variables and grey lines. However visual novels as a story medium is powerful in increasing understanding as players are encouraged to stand in character’s skin and discover more dialouge. Here it used brilliantly to enrich the characters involved (even the abusive boyfriends, who thankfully is not portrayed some psycho with green goo dripping from his fangs, but rather as a troubled youth).

Looking at a portfolio Interestingly the quote changes when you . Note the organic colour scheme that’s consistent throughout the site.

I chose to look at Peter Lacey’s site as he unconventionally uses text to solely commute his persona and style.

As this is his person site, it serves as a gateway to his portfolio and person. Rather than choosing to bombard viewers with mood-boards of work Lacey decided to strip everything back to a logo, a plain background, candid quotes, two paragraphs and some links to his dribbble/social networks.

The quirky quotes made by his friends and colleagues (most of which he linked to their own portfolios) paint Peter as a generally human guy. There’s no sense of corporate paint to be found, this is a guy who’s honest, humorous, good at design and friendly. After reading further, you’d find out about his design philosophy (combining function and design) and humbleness. Even if the viewer has yet to see him or his works, we already know a bit about Peter Lacey, all through a couple of words.

By this point the viewers will be eager to find out more about his work and personality:

Ticking the symmetrical balance and use of white space boxes.By this point the viewers will be eager to find out more about his work and personality:

Hence why this last section is all the more effective.

Hence why this last section is all the more effective.

For the picture savvy this may all be a bit plain but never once does the page feel crowded. Definitely one for the ‘less-is-more’ fans. Due to his casual approach the audience would be naturally broadened; potential employers, designers and intrigued fans (i.e. Interactive Media students) are all on the same grounds here.



The lack of intensive interactivity may cause this site to seem pale in comparison to a lot of other rather impressive dynamic portfolios. In a way it demonstrates that Lacey is more accustom to design then technicalities. However that might be what he intended anyway.

Possible workflow:

Usually the images for the site would be created first. There are few images on this site so it wouldn't be wrong to guess that he designed the logos first.

Usually the images for the site would be created first. There are few images on this site so it wouldn’t be wrong to guess that he designed the logos first.

Then the rest is code. As overall site is minimalistic the lines of code also reflect that.

Then the rest is code. As overall site is minimalistic the lines of code (less than 200) also reflect that.