jamesbrindleyba3bcompetitio-blog

[jamesbrindleyba3bcompetitio-blog]

Final Piece Evaluation

I feel that this project has been the best project I have ever done from startt to finish, and by far the most enjoyable - I am particularly proud because I have created a homage to my favourite book of all time, and experimented in what a book actually and how digital influences can change it experience  its been a really eye opening experience for me. in terms of technical processes learned for this project I have learned so many new programs and plugins I am now fluent in after effects and its plugin trapcode form, in app prototyping software such as invision and principle, and in editing software such a premiere pro.

I feel that I have really successfully fulfilled the brief on the project, as I have definitely brought about a new way of reading American psycho. My main focus and drive was the discovery of the literary category of ‘Ergodic Literature’ and how hypertext and cybertext can be utilized in order to create experimental literature. This subject is absolutely fascinating to me, and the only improvement I would make to the app is to have learnt how to code to make it a true cybertext. Yes, you can read this book in many different ways and it is all down to the reader, but the book cannot be reactive TO the reader and respond, as I do not have to coding skills in which to facilitate that concept.

I feel that all my project was a success in that the final piece is utterly driven by the narrative, and I spent so much time working out whatI wanted to get across from the themes of the book, and the reader reaction and interaction with it - that was always the main focus. I feel like the content is utterly driven by these things, and in that respect, I stayed very true to the subject matter and the brief, as i know the book so well

The brief also asked you to show the insightful nature of the book, and to express why it was banded. I also feel i have achieved that in that Batemans craziness is almost masked in the book, all the explicit stuff would not be found unless the reader went looking for it. 

I also feel that the actual execution of this book was to the best of my ability and that there isnt a huge amount i would change there either,I utilised text and image very well, and the overall effect of the final piece pulls you in a grabs your attention, and that is because it is not meant to be a book, it is meant to be an audiovisual experience

[jamesbrindleyba3bcompetitio-blog]

End video development

I realised that for me to create the ending of thechapter where the tension reaches a peak and fractures mirroring Batemans osychological state, the reader had to lose control of the text too. All of the explicit thoughts thats ii could out of the chapter to the be realed later hd to happen wildy and fit visually with the particele fragmentation aesthetic.

I decided that the easiest way to do this ways through motion graphics, as building tht many animations that would happen spontationslly would take so much longer to build in principle. The main concept when setting out to make this video was to stress that all of these thoughts and murderous ways were subtly hinted at in the bit that you just read, and that now that you have lost control in the same way as Bateman, you get to see him retrospectively as what he is and who he is truly, attesting to the characters duality.

the concept for this visually was to overlay the craziness on top of the norml book you’ve just read - so my aim was to make the book seem as if it finally just broke and exploded into all these erratic bits of mania.

I created many abstract motion visuals in trapcode form, and then cut them together in one long composition. to vivaldis’, ‘summer’.

All of the tests for the final video can be found in the development folder of my digital submission in the folder ‘final video development tests’

[jamesbrindleyba3bcompetitio-blog]

one of the first texts animation experiments

Chapter animation tests

To get the animation right across all of the body text, I tried many many different types of animation. Mostly text appearing at the correct time as to tell the narrative was crucial, as some of the layouts make it confusing which way to read the body text - so making things appear in the right order to read was paramount

What I was focusing on was diverse smooth transitions, some bits of text just appearing, others traveling up and down or across the screen, and others rearranging places as to diversify the dynamic elements.

Every animation is keyframed when and where things animate and where to, with most of my focus being on making the pacing right with the bits that are tense or uncertain or important. All of the hits i’ve tried to drop are highlighted through the scroll speed, as it builds up and then continues normally again, and i think I have achieved this on the final one incredibly well.

to see all of my animation tests for this final piece, go into the principle app on the ipad, triple click anywhere, select menu, and all of the tests will be listed

[jamesbrindleyba3bcompetitio-blog]

Final layouts and crit with Nigel again

After my crit with Nigel, i have fully taken everything on board that he said and that i thought and applied it - the result is beautiful. The pages resemble a book yet are still experimental and consistent because I kept to the rules of the typography and let the layouts speak for themselves

Keeping a white background with only spot colours is far more consistent and also alludes to the American flag in a much more subtle way

I showed Nigel these screens, and he agreed that these were finished now, and that i needed to start animating them

[jamesbrindleyba3bcompetitio-blog]

Crit with Nigel about linear pages

Nigel agreed with everything I thought about the last layouts, he felt that colour should be limited and that it was far too busy, to keep to the same 3 type style. He said to also limit the amount of colour as it is still too much like a magazine - just go for black and white and spot colours on some pages - 

As a positive, he did applaud the layouts, they just need to be tweaked slightly to look more like a body text

He also suggested that I stop underlining certain words and phrases as they look a lot like hyperlinks, and you don’t want to be distracted from the actual button links at the side of the page

Overall I agree that I need to keep the same consistency throughout the layout - the layouts themselves are the interesting bit that is experimental, so the type styles and colours need to obey the rules so that that consistency doesn’t become chaos

[jamesbrindleyba3bcompetitio-blog]

Linear pages done

These are the linear pages I have created in response to Nigel and Darrens’ crit, they are a lot more linear and still have very experimental layout design

I feel like the evolving colours and changing pages add everything to the narrative, the the hyperlinks will cut away to separate pieces of the narrative. The only thing which I’m thinking is that it still doesn’t resemble a book, it still looks too much like a magazine, with so much busyness on some pages - I think I have to tone them down a little bit, but I will wait for Nigel’s feedback tomorrow.

Also I think that there may be too much of a diversity in type sizes and colours and styles, I’m still using the same typefaces but changing tracking values and things to create diversity - I think it all needs to be simplified

[jamesbrindleyba3bcompetitio-blog]

First draft all pages and crit

These are more final pages which I have built from the wireframes after much experimentation

I really want to include an actual cut video from one of Reagan’s soeeches like the one they discuss in the chapter - and make it obvious how much hes lying that its almost a parody

Crit with Nigel, Darren and Marius on these screens

I showed the developed screens from the previous post and these current ones to Nigel, Darren and Marius and they all said the same thing - it doesnt’ feel like a book. It needs a linear scrolling page with normal body text which you can then jump into these magazine pages with hyperlinks. I definitely agree with this, as then instead of it becoming one whole linear scroll screen, you can navigate the text back and forth to the magazine pages whenever you want, giving the read freedom in roaming the text. I also agree that it is becoming far too much like a magazine now, and that it still needs feel like an ebook.

[jamesbrindleyba3bcompetitio-blog]

Pages development

I have begun building on top of the wireframes i created before, and added some imagery in the style I developed and things are really starting to come together, however the layouts for the lookbooks had to be changed as they simply weren’t working, the didnt look like a lookbook

Lookbook initial

even with the added imagery and overlays, this layout just seemed too sporadic and didn’t look like a high class fashion book - I need to change them completely

This one is a lot better, with a larger hero image and the text over to the side, however it is still missing something - and I feel like the images need to be more like model photoshoots to really get across that branding fashion concept, this looks more like a cheap online shop because of the photography

improved

these are looking far better now, designed as an actual lookbook with a cover makes it far more convincing and plays to the concept more - also im overlaying images and letting them speak for themselves a lot more

Where to Eat pages

The where to eat pages looked a little bare, so I wanted to add reviews and quotes and descriptions of the images, as you would in a real magazine - also I feel like the location map which changes makes brings it a lot more detail

All of the quotes are from original 1980s reviews of these places, the ones Bateman would have read in his magazines and zagats’ guides - putting you more into his analytic, obsessive mindset

[jamesbrindleyba3bcompetitio-blog]

Image Generations and Styles

Now i am experimenting with the images within the app and editing them to achieve the desired design aesthetic. My main focus to begin was to get the correct palate of greys, reds and blues. I wanted an almost washed out look mirroring Batemans numbness and his banal descriptions of day to day life, but also to look as if they had come straight out of the pages of a beautiful magazine. 

I wanted to the images to feature an overlay monotone quality, which captures the concept that everyone looks and is the same, and that even though the images are different, that they look identicle

this blue is really not quite right, it has far too much purple in it

these levels of grey are really perfect, and I have to edit them so that all the curves are in the correct range on each image so that they aopear unifor across the app

bvlue is looking a lot better, but Im not sure about the black in the shadows - maybe a blue gradient overlay? this is just a hue and saturation colouration

As with the blue, the red isnt working with a hue and saturation colourization, so otherwise because of the greys still in the image, the reds appear brown

I began adding gaussian noise to the image to give them that printed almost halftone texture, and they appear even more classy, and infer the numbness  even more, they look so washed out - This is the style of imagery i want

i tweaked the saturation on the reds and turned them up a lot more to get that washed out - but still, blood red style to them. The added Gaussian noise also sets off this image too

The blue wasnt working with hue and saturation, so i decided to apply a monotone gradient overlay  to it, then again add the noise, and the images are working much better, however the images need to be a lot darker, so i will add a 20% opacity black layer on top of them to tone them down so that they sit well with the red

[jamesbrindleyba3bcompetitio-blog]

Art Styles and Layout Development

Now that I have pretty much decided on typefaces and visual aesthetic, I wanted to star adding in some placeholders and begin thinking about colour in relation to the text. Black and white is obviously the main focus, but I really like the idea of incorporating a washed out red and blue, even if it is just used as a spot colour - to bring in that link to the American flag

I love the minimal imagery, and I have spent many hours beginning to find very large, glossy source images which will fit into my app, all of them being of clothes, food and new york itself - and Batemans products

I want to work on the photo editing and style to achieve the right aesthetic though. As I want this to look like a beautiful glossy high end magazine, the photo editing needs to be perfect

[jamesbrindleyba3bcompetitio-blog]

Preliminary tests into typefaces, sizes and layouts

These screens are a sample of the screens in which I was attempting to workout how certain layouts could work along with typefaces and adding in graphic elements. The layout grid is 12 columns with a 12pt baseline grid, a 36px gutter width and a 138 column width. This gives great balance across the whole layout, with the 12 column grid meaning I can have a range of columns

- after trying many different combinations of typefaces, I finally decided on;

Bodoni 72 bold size 168pt for headers

Beurnard regular 32pt for body text

Caslon medium size 112pt for quotes

Athelas Bold italic size 28 for footers and notes

The typefaces reflect the high end branding of a lot of expensive companies, the serif typefaces oozing class and dignity, with enough differences in ligature style to differentiate them beautifully.

I toyed with the idea as you can see of incorporating a sans serif typeface, but it took away from that timeless elegance of the serifs, and made it feel too angular.

i wanted the type to be modern versions of the type that would have been around in the 1980s, originally thinking something like Garamond, but I really like that these typefaces still bring it into the modern day, with Buenard being more angular and severe than its older font family.

I really love the small subtle graphic elements, as there are so elegant, and set the typefaces off so much better, the small pluses and strange shapes add to the idea of fragments in Bateman’s mind. The lines obviously representing the links and the nodes of all the fragments in the narrative

[jamesbrindleyba3bcompetitio-blog]

Planning final layouts and wireframes

This is my annotated plan of the chapter ‘Harrys’ and all of the plans which I have for it - All of it is broken up into fragments of conversation which I will do my best to represent in layout. The bits on the right are the ‘crazy’ pieces removed from the original text. The way i now plan to format it is that you read through all of the linear chronological text on the left, with small hints hidden to the true nature of what Bateman is thinking, you get all the way to the end and the app collapses into madness when you press the word ‘exit’, and you can retrospectively read what Bateman was thinking at throughout the whole thing in a completely random way with broken layouts and wild imagery- not knowing which bits of the conversation he was referring to. The reader is then taken back to the beginning of the chapter to begin the whole process and read it again, but now knowing what Bateman was actually thinking, understanding the small hints. 

This will successfully communicate the duality concept and the non linear story, witht the audience left in this cyclical never ending spiral of the book, not being able to escape. I feel that this format will be a really good way of representing everything I set out to about the book at the beginning.

[jamesbrindleyba3bcompetitio-blog]

Paper Wireframes and Layouts

Today, I began designing the wireframes for my final ebook, and I’m getting through them pretty quickly, as I learned a lot about designing using wireframes and pixel grids for web and device in my FMP app project. The most difficult thing for me is designing the animations for the dynamic grids and how I will animate them in Principle. The layouts need to work and look incredible at whatever point to you stop scrolling, so the grids cant be broken too much, but they also need to flow seamlessly around the page.

I have been watching a lot of videos and reading my design books to brush up on print design grids, as the same principle apply for web, but its just that you design over a 12 column grid in web, as it is a number divisible by 2, 3, 4 and 6 so the amount of columns can change. 

I’ve never designed to digital dynamic grids before so Ive been watching some helpful pointer videos such as 

http://www.creativebloq.com/web-design/grid-theory-41411345

and

https://www.youtube.com/watch?v=-Kp66bBZoy8 this one from invision

I also find the youtube design channel ‘Futur’ incredibly helpful and I’ve watched through most of their videos on there in regard to tightning up and critiquing your layouts

https://www.youtube.com/watch?v=DLeSPCTA9Wg&t=62s

I amdesigning the normal linear reading screens first, and then I will design the ‘Exit screens over the top of them, breaking the rules and the grids which i put in place in the linear section of the chapter

The main thing i am thinking about when designing these grids is the animation of them and the user experience in relation to interface - however I cant critique anything much yet as wireframes are so abstract

see sketchbook pages 124-132 and inserts to see paper wireframe development

[jamesbrindleyba3bcompetitio-blog]

Crit with Darren

I am about to begin designing my final piece and all of the actual layouts, and I went to spoke to Darren this morning about final conceptual ideas before I begin building aesthetic. I explained to him the concepts behind all of the visuals, the idea of the exit button and the duality, and he said that I have to crack on and get designing now as I’m beginning to run low on time. 

Again, the ost important point that he said to stress, is think about the readers’ reaction and interaction to the text - a concept which I have been overthinking for far too long, and now i need to apply everything together that i have been thinking about, as the only way I will progress is creating visuals

[jamesbrindleyba3bcompetitio-blog]

Skull interactive animation test

This is an experiment into further mimicking the processing interactions which I was discussing earlier in the blog. Instead of the code reacting to your touch, i have tried to prototype it, by driving an animation of stopmotion pngs exported from a rotating skull animation i made in after effects as you scroll, so there opacity goes to zero and the next frame goes to 100 in one scroll pixel - the effect makes it appear as if the 3d skull is spinning because you are scrolling. The effect worked far better than I anticipated and is very close to the real thing

However, the only issue with this method is that it must be done in a stopmotion way, so to spin this skull has 24 frames for the one second animation I exported, all of which must be keyframe at every scrolling pixel to change opacity and overlap so that the next one is visible - It is a very time consuming grueling process. I love the effect it gives but I dont think time constraints would allow me to do this for a longer animation

[jamesbrindleyba3bcompetitio-blog]

Technical Advice from Marius

I had a sign up session today with one of our visiting lectures, Marius Simkis who is a motion designer. I spoke to him at great length about techniques in after effects and how to use cinema 4d within trapcode form, all of which was very useful advice for me and will very much help me to develop my visuals even further.

My next plan is to really nail down the visuals, Marius suggested adding depth of field cameras to make the VFX far more interesting and abstract - it will really step them up a gear and they will become even stranger. I plan on following his advice and implementing everything he has taught me into creating my final pieces.

see pages 100- 103 in my sketchbook for my notes on this chat

[jamesbrindleyba3bcompetitio-blog]

I have been researching brain scan images and images of the nervous system in order to better visualize the motion graphics I am trying to create with trapcode form. I really want the brain nodes and interconnected memories concept to shine through, that every event in the book is just a non linear fracture of someones life. I feel that the audio reaction will also mimic the stimulation of different areas of his brain to music, and may even resemble things like migraines and anxiety from the book

I was reminded that creators Ash Thorpe and Rauol marks are famous for their particle generative work, and there incredibly detailed UI and UX imagery which they create for films. I have been studying both of there work for inspiration for years, and I feel like this quality of visuals is definitely something to aim for. I did discover, however that they use the program Houdini in order to create their incredible random particle graphics - which is a very costly program so I cannot experiment with that, but I feel trapcode form gives similar aesthetic results