Section V

Changes made to the project/rationale from Semester 1

Audio:The audio could have been used as metaphors while being inextricably linked into the concepts researched would in our opinion be a really good way of maintaining continuity within the project while also giving it extra gravitas. We as a group are very aware of the importance of audio as a means of communication and it is something that we find particularly fascinating. The marriage of the visual and audio elements could have added another sense to the users experience.For the audio for the project we had planned to use Audacity, FL Studio and Adobe Audition. The former is open source software whilst the latter two are industry standard audio editing programs. These would be used as conventions in which to create an environment that the user will not focus on. This should allow us to influence the users experience whilst they focus on the physical materials of the project.

Survey: Originally we had planned on a social probe. However after a group meeting discussing what we needed from our probe we found that a well placed survey could provide more beneficial statistics. In order to receive our statistics the group felt it best to create and conduct a survey. Eoin suggested the website typeform.com. The website is a fantastic platform for designing and producing an online survey. The questions we chose were relevant to five areas; data usage, data-brokering, demographics and cookies. The statistics we accumulated from the survey were frightening. Only 6% of users know how their data is used online and 70% prefer a convenient experience rather than a secure online experience.Considering that the booklet is made of A5 sheets we didn’t have much room to work with. The survey we built has more than 15 questions so we had to pick the most relevant. We chose the questions with the most chilling statistics. Such as 6% of users are aware of data-mining.The first part of the survey asks the user to contribute information about their online habits and browsing trends. After this the users will be surveyed on their awareness of the effects of data-mining. The questions will aim to impose an impression on the user. The user will have had contributed personal information and would then realize how easily they gifted it. The third part of the survey aims to provide us with a demographic on the user. Age, sex, profession and other sources of information will help the group to tailor content. The last part of the survey covered cookies and their effects on the user’s browsing habits.

 

Digital Ques: Originally we had planned on introducing digital ques into the publication. This would inform the user to jump from the booklet to the digital publication to view animations. However after a number of weeks of brainstorming how to successfully design for this in an exhibition we concluded that the digital ques would be a logistical nightmare. If the digital publication operated via digital ques, than users would jump ahead of each other or ques of people would gather as slower readers bring the tempo down. This would interrupt the flow of the exhibition and negatively influence the users experience.

Person and Desk Animation: The concept behind this animation was to show the user that their online actions have reactions. The animation storyboard began with an over the shoulder shot of the user logging in to a website called “loginvia”. The camera would pan to the side of the user and expose information spewing from the back of the display.

Your Print Is Everywhere: This was a page in the booklet introducing the user to the second section, Notions of Trust. The page contained the title and a “swipe here” bar at the bottom of the page. The slide bar at the bottom of the page would be made from graphite. This way, when the user slides across the bar, their fingers will get covered with graphite. As the user advances through the booklet their fingerprint will be imprinted via the graphite onto pages in the booklet.

Docs Data Vis: Originally the Data Visualization page was a representation of data collected during data-mining operations. The first draft we produced involved used a number of cds to represent the amount of data firms collect. We wanted to show the user exactly how much data the firms collect, and we wanted to do this at a level that our target audience would understand.

Invisible Ink:The concept for this involved invisible ink being used on a pen glove. The desk at the beginning of our exhibition would hold a registrar and a pen with a pen glove. The glove would be soaked in UV ink. As the user signs the registrar the ink would get onto their hands. At the end of the exhibition we would shine a UV light and expose how many people had left their finger prints.

Perforated Paper: Originally we had planned to use perforated paper. This would have enabled us to facilitate the user interacting with the booklet. We had planned on hiding the interior Terms and Conditions Page through perforated paper. We had hoped that this would engage the user early in the booklet and begin a critical thinking process.

Milestones Reached:

 

Eoin Murphy:

Alan Murphy:

As the lead designer on the digital publication, there was many different hurdles and obstacles that I had to face when creating and developing this project.

The first obstacle to overcome was creating the introduction page for the digital publication. Eoin Murphy created a custom typeface for the cover page of our project based on research conducted in his studies. I was then tasked to create and animate the typeface created by Eoin Murphy. The process I used to create this animation was a process that would be replicate for various other animations in the project. I would receive the finished illustrator file and then I would isolate each layer and export them out as an individual illustrator file. I would then import each individual file into After Effects and then add both a start and end position & rotation key-frame so it will begin and stop where I want the letters to be positioned.

 

Then next milestone that I completed was to animate the Terms & Condition page that is located in Section 1 of the project. In the print version of the project, the terms have a double entendre or a double meaning. Since the very nature of having a digital publication is to expand on the print edition what I did what to place a video created in After Effects that would show the double entendre that is in the print edition. Creating this effect created another obstacle. The way I overcame this obstacle this was by creating two different layers of text and using the “Displacement Map” effect that I used for the Dark Web Animation effect. For the digital publication there must be a certain leveI of interactivity otherwise it would just be a digital movie with all the animations present so I wanted to see if I could add another a layer of interactivity in the Terms & Conditions section. After trying a lot of HTML5 code I found in my research, I came upon a piece of code designed by Jack Wong called SignSend3 which allows the user to user their finger to draw their signature. After the code was modified to find within the publication I then implemented the code into the terms and conditions page.

 

For the elevator animation, I had to create an effect that would envisage the elevator doors animating when the user presses the elevator door. The problem that I faced with this animation is that there has to be a static state that would trigger the elevator door animation. The process in which I managed to overcome this problem was by using the design of the print version of the elevator and then placing the animated version on top of the design in InDesign. By creating a multistate object with the two files I converted a text frame into a button that would change the state from the static image to animated version by the user pressing on the button.

 

The most challenging aspect of creating this digital publication and a significant milestone is animating the timeline section of the project. This is mainly due to finding a compatible solution how to display the animation within the digital publication. The first and initial solution required creating three different After Effects video files based on the three different pages that are within the timeline. After the video files were animated and exported, I would then create an InDesign file that is three times the length of the iPad resolution (3072 x 768 pixels). I would then slot in each of the videos into the InDesign video and the user would scroll down to the next video after the present one is ended. The main problem with using this method is that the first video would play but the second video and third video would not load.

The second method that I figured would work is similar to the first method in the sense that it would be based on three pages and the user would scroll down to view the next page on the timeline. How it differs from the first method is that it would only consists of one After Effects file that again was three times the length of the iPad resolution(3072×768 pixels). My reasoning behind this is that there would no problems between each video as it would be one self-contained animation. The main reason why this method did not work as there was a problem on the DPS software side as it could not handle an animation that was the size of the exported After Effects video(the exported video was 3072×768 pixels).

The final method which eventually worked was to create one single After Effects file that was the same resolution as the iPad(1024×768 pixels). Within After Effects using various positioning key-frames I would create the illusion that the pages are being moved from within the animation. I figured that this solution would work as the DPS software is only dealing with 1 video file and does not need the user interaction to swipe up or down which was the main stumbling block with the first solution.

The other main obstacle I faced was when creating the Dark Web map in the digital publication. The main problem here was when trying to map the animations and icons into the dark web map was that the map layout which I chose out of the various prototypes previously was in a landscape layout. The digital publication in itself is a vertically orientated. The framework we are using to create the digital publication, Adobe DPS, does not allow for custom page orientations. What this means for the project is that each page contained in the digital publication must have a landscape and portrait version for this to work. This solution would not be viable due to the design of most of the pages as they were designed for a portrait layout. Also some of the pages contained in the digital publication are interactive movies which were also made with the portrait layout and would not work in a landscape layout. To combat this problem it required rotating the map, icons and animations 90 degrees counter clockwise so it would look like they are in the portrait orientation.

When creating the intro animation for the Dark Web, the glitching effect required the use of using Adobe After Effects to create the animation and then importing the exported video into the DPS software. To achieve this effect, I had to place the image containing the credits over a video containing flashing boxes which simulates a glitching effect. The effect to create the glitching then is by using the “Displacement Map” effect within After Effects which is located in the Distort panel of the effects preset.

By changing and altering the sliders within the “Displacement Map” pre-set, you can determine how heavy the glitching effect will look like.

Inside of the credits instead of just “glitching” into a black screen, I then added one of the animations I created for the dark web in between the Displacement Map effect. By adding this into this video, it creates a better effect as it appears like it is breaking into the project.

The only difficulty when creating this effect was that I couldn’t create the RGB split on the Dark Web animation. This was due to the credits page not having a black background and the Royal Navy Blue background would interfere with the RGB split.

Aidan Prendeville:

Group Dynamics:

Throughout college I have been a member of groups and I found them to be of varied success. I was concerned before the project started that due to the longevity and gravitas of the project that relationships would become strained leading to a poorer standard of work. I felt that I prefer to work alone in most scenarios before this project however my opinion has since changed. I enjoyed critiquing each others work it was a good excercise in learning professional practice and manners. I did find it difficult to accept certain situations where I felt more could have been done for the benefit of the project I understand that this is the nature with all group projects but I do feel more could have been done.

That being said the benefit of being able to critique each others work far outweighs the negatives in terms of workflow. It enables a higher standard of work and allows one to feel confident about the work being produced because it has been critiqued rigorously by your peers.

I would feel very confident working with this group or any other group in the future.

Illustration :

Before this project I had limited experience with digital art and the creation of it. I had been very one dimensional in terms of my knowledge of what was possible. I was still in the habit of working with pencil and paper most of the time. Even simple illustrations I would sketch first because that was the way I learned how to graphically express myself. When I started working on illustrating the concepts I created I found myself reverting to a style I maintained when I was doing my leaving cert. It had obviously developed since then but I was still graphically thinking in an analogue manner which led to a sketchy very personal style which was unsuitable for this project. When I became more and more comfortable with the software I became much more concerned with layout, shape and forms because I could never be so mathematical with my illustrations before. It opened new opportunities to develop a style more catered towards this project and it also thought me to be adaptable to situations that arise in terms of maintaining continuity within a group project.

The Stairs and Elevator:

This Illustration began as one single illustration that I had spent three weeks on by the time I finished it. By the time it was 90% complete we deemed that it was unsuitable because it wouldn’t fit in with the style of the other concepts being developed. This was a set back but I didn’t want to weaken the effectiveness of our work. I was happy that someone pointed it out to me because if I came to the realisation later on it may have been too late to change it. When I had to re-design it I realised that I wouldn’t be able to spend as much time on it so I learned to become more effective in my illustrating and also more relevant. I think I rushed into the concept initially because I was excited to get working on it but when I re-designed It I really thought about what I wanted and how I would get my idea across by using form, function and colour theory.

The Opening Animation:

This Illustration was of the character sitting at the chair for the opening animation and the “Your Print is Everywhere” animation. I completed the Illustration but it was decided that we shouldn’t do either of the animations. It was an introduction to the project that would highlight in a very graphical way how something is always going on “behind the screen”. I was disappointed we never did the animations because I thought it would have been very impressive to incorporate into a digital publication for a final year piece.

Terms & Conditions

This was a constant area for debate throughout the project. I had come up with an initial concept which was reworked and refined by all of us until the end of April. After Aidan Kelly came up with wording up with the terms and conditions we designed the page and placed the “Behind the Lines” text behind the content. I was happy to come up with a solution to this page because it had been a constant issue that we weren’t maintaining relevance on that page. After that however we realised that when we got the first test print back that the terms and conditions was two A5 pages joined vertically so we needed to rethink the design again. thankfully Eoin came up with an idea so that we could place the small print on that page and it would relate to the stairs & elevator concept. I thought this was the best example of our group dynamics during this project we all redesigned the terms and conditions and we kept parts from each design and ended up with a really effective piece.

Notions of Trust

The second section was designed by Aidan Kelly and myself. We decided to do this because he was working on the research and is good with content management. We went through a few designs for the three page pullout. At first we designed it to the wrong dimensions we had it placed on a page that was four A5 pages wide when it should have been three. After Aidan had placed the statistics in I could do the illustrations and  refine the design.

I was happy with how the section turned out except for three issues. The back cover has an issue with the shadow of the desk counter which wasn’t in the exported file I have and also on the underside of the three page spread with the Trust O’ Bot his eyes are grey and they should be white however that was human error as I never changed their colour upon inspection.

The three page spread also has a white line running from top to bottom going from page two to page three which was never in the design I created.

The Dark Web

I enjoyed working on the assets for the dark web pullout and I thought they turned out well. I didn’t think I did well with the NSA badge as it’s not up to the standard I would have liked. I was relatively happy with the rest of them though considering everything that needed to get done in the time frame. I was happy with the final design of the Dark Web and I felt the group collaborated well to get it finished.

 

 

Aidan Kelly:

Collaborative Technology: Throughout the project I, and the group, used Google Drive, Google Docs and Assanna to organise ourselves. The seamless integration and application of Google Drive and Google Docs really impressed me. I used the software to make copies of media and content available to the other groups in moments. It was fantastic during the second week in Easter when the college closed as the group were able to stay on schedule through the use of Google Drive. I feel as though the application of collaborative technologies in the industry is an important sector of the industry and especially for smaller businesses or design firms. When I graduate and join a team of designers, I am confidant that I can keep up with the work flow in the office through my competence in collaborative technologies.

Research Skills: Before the project I would have considered my academic research skills to be of a decent standard. However my creative research skills were severely lacking. throughout the project I researched numerous different aspects of design. Some were used both most were jotted into the sketchbook and applied to some other design. I learned that researching  into something does not mean that it has to be used. The best example of this is the use of origami at the start of the project as interactions. While I enjoyed learning about this and used some of those skills later in the project. However we felt that the interactive booklet could be conceived without traditional pull out tabs or other cliche origami conventions.

Print Design: While completing my degree I never saw myself working in print design. I had hoped to stay digital and to put the outdated media format behind me. However working on the booklet has been a fantastic learning experience for me. I learned about margins, bleed, gutters and grids. I learned about the difference between vertical and horizontal layouts and single, double or triple column designs. During the design for print I found using the Rule of 3rds to design effectively for print and how to place content on pages, both digital and print.

Colour Theory: During the project I began researching colour theory. Previously, I had only learned about colour theory from a second year module. I hoped that while learning the theory behind applying colours to design projects that I could add colour theory to my skill set and be more confidant in the color selection for my own future designs. I learned about the difference between printing and designing for RBG and CMYK. I learned about the tint and hue of colour and how to create colour palettes. For this I learned to use the 12 spoke colour wheel. The palettes which I learned about and applied to my research drafts were Monochromatic, Analogous and Complementary.

Group Dynamics: Up to this point, I had never worked in a group on a design project. throughout both semesters I learned and experienced valuable social lessons.Admittedly before the project I was easily offended by others critiquing my work. During the project I learned how to criticise peers in a positive manner, and how to accept the criticism of my peers.  I also learned the value of punctuality and some fantastic organisational skills. However, I think my experience of group dynamics will stand to me the most. Learning to accept people as they are, and being patient really paid off during the project. Some people work well with no pressure, others require pressure to work well. Some individuals will not start the college day until 12pm while others will have started at 9am. It was a challenge to keep a positive moral in the group with such varied working methodologies.I most definitely enjoyed working with this particular group because of the wide variety of design interests and influences each person brought to the group.

Iconography: Originally I had never previously worked with iconography. I really enjoyed branching into the subject. I used the design principles from other subjects to see how I could refresh the iconography we would be using for the project.

User Experience: Learning about user experience was probably the most enjoyable topic for me. UI is my favourite aspect of design and as the project shifted towards designing an experience I was very excited. I learned a lot from the expert pools and mentors about designing for an experience. It was a concept I had never applied to previous projects. I learned about how users consume information, where their eyes look when on a page and why content mapping is so essential. I would consider learning how to apply headings, sub headings and paragraphs to be the most beneficial exercises I undertook during the UI design.

Typography: Originally I had planned on avoiding the typographic aspects of the project. This was because I had little interest in typography and struggled to use it in creative ways.However, with the help of the peers in my group, my typographic skill sets enhanced considerably. I learned about sans serifs, serifs and script fonts. While working on the Data Vis page I learned so much about using typography to display information. While not my favourite aspect of design, I look forward to learning more about the subject and I feel confident in my ability to use typography.

InDesign and Illustrator: Up until the final semester I was heavily reliant on Adobe Photoshop for the production of all my media content. At the beginning of the project I wanted to become less reliant on one program and become just as competent on InDesign and Illustrator. While designing for print and learning about layouts I learned a lot about InDesign. Preparing prototypes and experimenting with draft layouts for the content was much easier in InDesign than on Photoshop. The biggest surprise of the year is Illustrator. Before the project I was unable to use the software. However now I am as confident on Illustrator as I am on Photoshop. I am delighted to have learned how to use InDesign and Illustrator. I was worried how difficult it would be for me to find work after college if I was competent in only one creative software application.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s