Ty Wilkins Inspiration

As I was looking through different artist's works, I came across this artist Ty Wilkins. As soon as I saw his work I fell in love with the style. Doing some background research I have found out that he owns an illustrartion studio and has worked for big names such as Cheerios, Pepsi, The North Face and many more. What I like so much about his work is how clean it looks, the two images below are in my opinion the most effective, as they use limited colour against the white background, and the simple yet eye catching patterns stay independent in their own grid sections but work perfectly hand in hand.

After seeing this style of work, I was very eager to try it out myself. As I said before I decided to use the radiohead logo to represent them. Here you can see how I have used the same grid technique, but as my design needs to stand true to the logo I have decided to keep the blocks flat and avoid pattern. 

After I designed the grid style logo I added a background that was similar to the work of Stanley Donwood, because the logo I have drawn is quite busy with all the different tones, I decided to create a simple black and white lined background that can be animated to move in a very similar way to the gifs of the XL recordings building. 

To represent the album being whatever price the customer felt it was worth, I could use a hologram or 3D sheet so that I can have prices on the poster that change as you walk past them, showing the viewer that there was no set price and it is completely in their control as to what angle they view the poster and in turn this mimics the pricing set up by the band. I want the viewer to be able to choose how they see the poster and I want them to be able to interact with it by moving around and possibly then reflecting on how much they paid for the album when it was released. This poster should be a talking point for the viewers to discuss the album and possibly even disagree with how the band sold it. The online piece could work in a similar way with prices that change as the users moves around the virtual space. The bold background and interesting design should be eye catching while the hologram prices aim to be thought provoking and a conversation starter.

Stanley Donwood

Stanley Donwood is an artist that has a lot of connections to this project. When I was doing my initial research into XL Recordings as a company, I found these images of their studio.

As you can see the outside of this building has been painted by Stanley Donwood. Looking further into the work that he has previously done for XL Recordings, I found that he painted the building three times, and between each paint he took photographs, using these images he then put together a gif. This is where his work came to life, not only had he made the static images look good, when played in sequence, the building had a moving scene on it which you can see on the XL Recordings website that I have linked below.

http://xlrecordings.com/news/hollywooddooomgifbystanleydonwoodxinsa

This made me realise that this is the kind of work they are after for this brief, they want something that looks great as a static poster, but comes to life when you see it in the online exhibition. 

Researching further into Stanley Donwood, I found that he has worked closely with radiohead before and even created the artwork for the "In Rainbows" album. For this reason I will be looking through Stanley Donwood's work further in hope to take inspiration from him.

Radio Head

Radiohead are an English band that were formed in 1985 by their lead singer Thom Yorke. In 1992 they had their first hit with "Creep", after their initial album their popularity rose in the UK. It wasn't until 2007 that they released their seventh album "In rainbows". In Rainbows was Radiohead's first release after the end of their contract with EMI and the end of the longest gap between studio albums in their career.

Radiohead released this album as a digital download directly from themselves where people had the choice to pay as much as they liked. This new way of selling an album had mixed reviews with some people worrying that it was potentially "damaging" to the music industry and "destroying the careers of thousands of smaller bands by making music seem worthless". These allegations and negativity however, did not phase everyone whcih was proved when the album shot to number one and then went on to win two Grammys for ‘Best Alternative Music Album’.

As an extension of my research into radiohead as a band, I have been looking at imagery that could help create a starting point for my idea generation. The things I found most of were the album covers, logo and photos of the band as a whole. Their logo is very interesting and has the potential to be stylised to represent the band in my illustration. Here are some of the images that I have gathered. 

Some of the key points I pickd out from these images are:

Colours- Bold, bright, multicoloured

Font- Clear, easy to read, strong, simple

Imagery- Strong use of logo, abstract, busy, bright

D&AD

For this project we have been given the chance to work on a D&AD brief, this year for the new blood awards they had a total of 16 clients that all had seperate briefs, after reading through a few of them, the two that caught my eye were the national trust as this brief allowed for a lot of freedom and creativity in the output, and the other that I thought was interesting was the XL Recording brief. This brief stood out to me as I love illustration while it still had the online exhibition which gave me some extra room for creativity which is why I have decided to move forward with the XL brief and start my research.

Reading though the brief the key point seemed to that the submission should consist of one A1 poster along side an online exhibition piece that goes beyond the standard ideas of illustration. The project is based around celebrating things that the company and its artists have achieved such as MIA preforming 9 months pregnant or XL The First Chapter rave compilation's first album release.



Brief Outlines

Target audience- Music Lovers

Challenge- Illustrate an event or series of events from XL Recordings history

Aims- Create an A1 poster and one “illustration” for an online exhibition along with a research document showing work progress

Considerations- Concept is key, think about flexible 21st century illustration that is not held down by the medium, designs must work in both print and digital.



XL Recordings is a small British company that started in 1989, they release around 6 albums a year and work with some world famous acts. Their only studio in London has been painted by Stanley Donwood, who has very cleverly transformed the building in stages so that he could create a gif of the artwork moving around the walls. This great artwork shows that the company are very create and care for the small details. Stanley Donwood has also worked with clients of XL Recordings, Radiohead. One of the briefs this year for the D&AD involves Radiohead and their choice to sell their album “In Rainbows” directly from them for as much as the customer was willing to pay, this meant that some customers downloaded the music for free while those who truly loved the music, ended up paying over the normal album price. This experiment they did grabbed news papers and caused a stir as to whether they were devaluing music, however this shot their album to number one and then went on to win two Grammys for ‘Best Alternative Music Album’.


This is the event that I have decided to chose, and as both this album and XL Recordings have such a strong tie to Stanley Donwood, I will be taking a look at more of his work for inspiration towards this project.

Final Piece

Having made all of the changes I needed from the crit feedback, I have now finished my final visualisation with added scenes.

Crit feedback

After receiving feedback from my peers and tutors, I have decided to make the following changes:

• Change the speed of my animations to better pace the visualisation
•  Add more scenes to lengthen the video
• Make the theme of each scene more coherent
• Add music and a background to enhance the attraction to the video  

Dynamic Visualisation

As part of this project we have been asked to create a dynamic visualisation, here is the first draft of mine ready to show my peers for final feedback before hand in.

Dynamic Visualisation research

To get a good idea of what is effective in a dynamic visualisation and what is less effective, I have been watching similar types of apps that target a child audience. There two stood out for different reasons.

The above app is a puzzle game which is available on both android and IOS, this video shows some highlights from the game and shows you brief navigation skills to work it on difficulty levels, I think it is essential to show the user then app is easy to navigate around. The other thing that this video used which I feel could be effective in my work is the cartoon hand. This means the user can see all of the screen without the distraction of a large hand, this could also be drawn in the style of my app to make it look more in keeping with the design.

https://www.youtube.com/watch?v=uHmoCjxl6R8#t=176

This app is a collection of short stories for children, the first thing that strikes me about this video is how much less effective it is with no sound while the puzzle app's video was very engaging with up beat music, this is something to strongly consider when creating my video. This video like the first does a good job of showing the user how to use the navigation and demonstrates how easily you can move through the app which is appealing and I will make sure I carry forward to my own work.

Storyboard

I have created a detailed storyboard of my app which could be sent off to the developers for them to code. Within this storyboard I have added all the details such as how the navigation works and the sound effects that will be included throughout.

Graphic Style

As part of the project, we have been asked to create our own style for the app which differs from the original story. Here is what the cover of the original book by William Bee looks like.

The style is very simple and flat, with minimal colour and no texture. I have decided to flip this on its head and make my style very heavily based around colour and texture. After looking at some different children's books, the style that stood out most to me was from the Lola and Charlie series. In these books, the illustrations are a very good mix of photography, drawing and other textures.

These books however are very well known for their style, so while taking inspiration from these, I do not wish to simply recreate it. My theme will be based around drawings and digital textures to add depth and interest while also being a great stimulator for children with learning difficulties.

To go with the theme of childish, bold and supportive of those with difficulties, I have found a font that has been specifically designed to help people with dyslexia and is extremely easy to read while not looking out of place with my plans. This font is called "Open-Dyslexic" and I feel it will suit my app very well while being beneficial to the users.

Wireframes

Here are the basic wireframe layouts for my proposed story app.

Flow Diagram

Here is the simple linear flow diagram that represents the navigational structure in my story app, from the title page you can move forward to the first page, from there you can move forward and backward throughout the app, when you reach the last page, you are taken back to the title page to start again.

Script

Script

Text on page, Description of page, Interactivity, Navigation

Whatever - William Bee

This is Billy

Page with drawing of Billy

When you click Billy he shrugs

Slide to change page 

And this is Billy’s Dad

Drawing of Billy and his Dad

When you click Billy he shrugs, when Billy’s dad is clicked he waves

Slide to change page backwards or forwards

Billy can be very difficult to please

Drawing of Billy and his Dad surrounded by presents

When Billy is clicked he continues to shrug, when Billy’s dad is clicked he sighs

Slide to change page backwards or forwards

Show him something very tall

Drawing of Billy and his Dad looking at a giraffe

Slide up to reveal more of giraffe, this automatically slides back down when fingers are taken off screen

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad next to giraffe

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Show him something very small 

Drawing of Billy and his Dad, Billy’s dad is holding a mouse

Click on the magnifying glass to zoom in on any part of the image, use this to see the mouse closer

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad, Billy’s dad holding a mouse in hands

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Play him a tune on the world’s funkiest trumpet

Drawing of a trumpet

When you press the buttons on the trumpet, it will play the notes

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad on stage, Billy’s dad holding the trumpet

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Bounce him off the bounciest castle 

Drawing of Billy and his Dad on bouncy castle

When you click Billy or his Dad they jump up and down on the castle

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad, Billy’s dad is on bouncy castle in background

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Take him for a ride on the world’s smokiest train

Drawing of Billy and his Dad on a steam train

When you click the train horn sounds and smoke comes out and floats across screen

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad on the steam train

When you click Billy he says “whatever”

Slide to change page backwards or forwards

Fly him to the moon and back

Drawing of Billy and his Dad in a rocket flying to the moon

The rocket can be dragged around in space 

Slide to change page backwards or forwards

And he’ll say Whatever

Drawing of Billy and his Dad in a rocket

When you click Billy he says “whatever”

Slide to change page backwards or forwards

And when you try and scare him with the world’s hungriest tiger

Drawing of Billy and his Dad in a pen with a tiger

When you click the tiger it roars

Slide to change page backwards or forwards

he’ll say Whatever

Drawing of Billy and his Dad in pen with tiger- Billy is closer to tiger

When you click Billy he says “whatever”

Slide to change page backwards or forwards

(Tiger eats Billy)

Drawing of Billy getting eaten by the tiger

You can move Billy in and out of the tigers mouth

Slide to change page backwards or forwards

“Dad! I’m still in here you know...”

Drawing of Billy’s Dad walking tiger, speech bubble coming out of tigers belly

When you click tiger, he burps

Slide to change page backwards or forwards

(Billy’s Dad) “Whatever”

Drawing of Billy’s dad walking the tiger, speech bubble from Dad saying “WHATEVER”

When you click Billy’s Dad he says “whatever” like Billy

Slide to change page backwards, slide forward to go back to cover of app

Three Little Pigs App

After establishing the target audience for my narrative app, I decided to take a further look at some current apps that are on the Ipad market. The most effective by far was this three little pigs app.

When you first open the app you find this title page which introduces the three main characters and gives you three options, the first is auto play which has come up in a few other examples, where you simply press it and the content will play through like an animation rather than an interactive book. The next two options of read it myself or read it to me are extremely common in these types of books, these give the viewer a chance to read the book themselves or have a voice over read it to them, getting rid of any restrictions on reading ability, I will definitely be carry this idea into my book so that the user can have the option to read it without the help of their parents. 

The navigation throughout the app is very simple, you have the left and right arrows at the bottom of the page which more the user through the story. The button in the top right hand corner opens out when clicked to reveal options for the user to play mini games that are separate from the main storyline.

What is really good about this app is that most of the content is interactive, so the user can freely click around the screen to find hidden animations and sounds. Each text box is in the top left hand corner which is where apple specified is the most viewed part of the screen, this is an idea I will also carry through to my design, with each text box come a series of options, one of these options is to press play and have the text spoken to you even if you have chosen to have the read alone mode on, this is a nice idea but the icons are distracting and sometimes cover part of the image you want to see, I want to have this feature on my app but I will need to look at ways around where to put it. 

WHATEVER!

The story that I have chosen to do for my interactive narrative app is called "Whatever" by William Bee.
This story was published in 2006 and is a short story about a boy named Billy. In the book Billy is stubborn and hard to please, his dad tries to impress him with tall, small, funky and bouncy things and even flies him into outer space but Billy simply replies with "Whatever" each time. Billy's dad tries hard throughout the book to get some interest from his son but nothing works. In the end Billy's dad shows him the worlds hungriest tiger who has also had enough of Billy's attitude so when Billy says whatever, the tiger eats him whole. A speech bubble from the tigers belly reads "Im still in here you know" and Billy's dad simply relies "whatever". The target audience for this book is young children aged between 4 and 8 as it has a potentially upsetting ending with Billy being eaten.

This funny kids story is perfect for making interactive as the user will be able to connect more with how much of an effort Billy's dad is making to impress him. In the book the items Billy is shown look nice, but the user can not get involved with them to understand how truly impressive they are, my app will give the user a chance to play with the objets in the story which will make the whole thing come alive and will be much more engaging for the younger audience, along with this, the app will give the user the option of read along, this feature will read the story and highlight the words so even young children who struggle reading alone can enjoy the story and the interactive features.

Narrative Apps

To get a clear idea of what does and does not work well in an interactive story app, I downloaded some onto my Ipad and tried them out. Here are a few of them that I have analysed further.

Goodnight Safari

This is an interactive narrative app about animals that could be found on safari, the reader is first met by a title page which gives them options of "pick a page" "read to me" and "read alone" along with "new games" and the option to turn the sound on or off. As the structure to the book is linear Im unsure about the need for the pick a page button as this is only useful if the story is very long or if the user does not have the ability to move onto the next page without the whole animation being played which can be frustrating and make the user feel the app is slow. The other options on this page about reading alone or being read to are very effective as having the choice of a voice over is essential especially for this age range.

As you can see from the pictures above the text is in a hand drawn style which stands out well against the background, however if any of the backgrounds were to be lighter than this one, the text may become hard to read. I feel it would have been safer to have a background on the text or place it in a box to make sure it is clearly visible all of the time. This app does not let the user move onto another page without completing the entire task, this makes the pace of the app feel very slow, and almost boring. I think the app would have benefitted from letting its users choose which parts to do rather than put in a restriction. However, the button that does come up to show the user that section is finished is good as it makes the viewer aware they have more missed anything important on the page. This app overall looks very appealing but the restrictions put in by the inability to move through the app freely are a real down point, making the app frustrating and boring to play with. 

Timmy Tickle

Timmy Tickle is an app for parents to share with their toddlers, when you first open the app you are greeted by Timmy, the orange octopus who is brightly coloured and does not sit still for very long which is great for holding a young ones attention.

When you click on the "play" button on the first screen you are then taken to this one, this menu page gives the options for the parents to choose from, here they can select autoplay which will simply play all of the animations through with sound to let the child enjoy effortlessly. The next option is sound, this option will play the animations when it hears noise encouraging the child to interact with the app even if they can not yet speak. The final option on this page is voice, this option allows the parents to record their own voice so the child recognises it and interacts more with the app. All of these options are very useful and have opened the app up to cater for a wider audience than if it was  a simple book and this is what is important when making an interactive narrative app, it needs to be more beneficial that buying a book, otherwise it is pointless to own.

Above you can see the last bit of navigation in this app, in the top right hand corner, there is a home icon. When the icon is clicked you are faced with the sentence "hold for menu" as you hold the button down, you are then taken back to the home page. This is a very cleaver feature for the app to have as the chances of a small child or toddler bashing and tapping all over the screen are high and if the app simply let touch take you back to the menu the parents would be forever having to reselect options to get back to this point. Overall this app is very simple and clean but it is very well thought out and through decluttering the navigation, the result is a very parent and child friendly app which is more effective than its book counterpart. 

Ipad Story App

This years first brief is to design an interactive story/narrative for the iPad. We have been tasked with taking an existing story be it fiction or non-fiction, and make it interactive.

On the list of requirements we have:

• Wireframes
• Flow diagrams
• Storyboards with useful details for the developer
• Create a dynamic visualisation to show how the app would work- demonstrate this with animated content

The brief has also stated that research into Apple's rules on app design and content as well as looking into usability and user testing is essential and should take place early in the design process.  

Deadlines:

• 24th October - Deadline for Storyboards
• 27th November - Crit 
• 2nd Dec - Final Deadline

Designing for IOS

As this project has specified that the app is for Ipad, I have taken a look at Apple's support page on designing for IOS 7. There are some key points which I will take into consideration when moving forward with this project. 

Position- Apple have shown this image in their support page suggesting that the top left hand side of the screen is the most important, because of this, I will try and work my design around having my text in the top left hand corner as the narrative is the key to this project and I want to make sure it is not missed by the user. 

In the above image you can see that Apple have also noted that having a start or a splash page is not recommended unless necessary. They have said that a customer will spend no more than a minute or two evaluating a new app, a start up screen can put a user off as they will feel the app is slow, it is much better to let them just straight in and use the content. Although I agree with this idea, I feel that with a story, it is key to start with a cover page or a title page, I feel that to get a good balance of the two ideas, it would be best to have some usable content on the title page, such as settings and help, so that the page is not wasted with the user having to feel like they are waiting. 

The font section of the Apple's support page has suggested that apps should have a consistent font throughout like the image on the above left, rather than a mix of different font faces and weights as shown on the right. It has also said that the font should not be bold or light weight and should be a minimum for 22 points. These are all things that I will take forward into my design, making sure that I stick to regular weight font that will be suitable to be used throughout the entire app. 

Another key point that Apple have made in this document is about button size, as the Ipad is touch controlled, the buttons will need to be large enough to stop the user clicking another by accident causing frustration and possible loss of interest in the app. Apple have suggested that buttons should be a minimum of 44x44 points in size. This part of the design is key, any navigation on my app will need to be clear and easy to use, I will make sure than any buttons or objects that need to be clicked are a good size and also distance away from any other buttons to prevent the user discarding the app. 

Ipad considerations

Below you can see a chart that shows the name of the devise, the size, dimensions and the common problems each one has. These are very important things to think about before heading into designing an app. Making sure that all of my graphics and elements are the right shape and size for the Ipad is key along with making sure I do not ask the user to do something the Ipad has problems doing. Having confirmed the resolutions and seeing that there are no common faults that should hinder an interactive narrative app, I can now move forward to think about what sort of story I would like to use for this project.