Visual Synthesis
1
Visual Systems Assignment 1: Visual Synthesis
For this project you are required to create a portrait of the AUB campus. You will be working in small groups to map, analyse and recreate the data systems of your surroundings within a set of synthesised visual systems.
Firstly we analysed existing systems in a number of digital and written sources to gather an understanding around general system theory and possible ways of visualising data.
4
General systems theory suggests that combining systems known as a ‘general’ system could explain all systems in the field of science.
An interdisciplinary study of systems in general, this suggests how system thinking is the process of understanding how things influence each other.
This is clearly seen in the design aspect as a large majority of outcomes were influenced by the data they of which they originally sourced.
Research Visual Synthesis
5
BRAINSTORM
6
Research Visual Synthesis
7
8
A number of examples stood out, especially Cabspotting: An invisible dynamic project which was created by Stamen Design. It focus on an attribute that isn’t visible to the naked eye and can only be visualised after the event has happened, we expanded on this concept where data is only temporary.Brainstorming into shadows, lux, decibel, heat and movement, we deconstructed the map into modular elements breaking it into a grid, correlating sections from the campus to the map and analyzing elements within them. Through the technique of timelapse photography I captured one of the most used areas of the campus throughtout the day, the area between the Refectory and the Library, looking specifically into the element of movement and ‘hotspots’ around university. After rendering the clip the footage showed a large mass of movement throughout the university, however realistically it would be difficult to track each person leaving and entering certain buildings to build a system. However after analysing the footage further we noticed the progression of shadows, we thought this concept was often overlooked as shadows create a two dimensional silhouette or a reverse projection of whatever is blocking it, The AUB campus is a complex and diverse collection of buildings creating some intricate and memorable shapes, our initial idea was to correlate shadows from around the university to the map, a system devised through location.
FAR LEFT These four photographs show the progression of movement throughout Arts University Bournemouth LEFT These four photographs are enlarged images of the other photographs showing a distinctive shadow line shift.
Research Visual Synthesis
9
10
We initially began to systematically record various shadows from around the AUB campus. Using these images we explored representative tile grids which we experimented both with still and moving image. After further exploration we looked at the dark and light contrast that each image had and what that addition data could offer. After discussion with our tutor we realised that our documentation ignored its critical relationship to time. Our data collection was too inconsistent, as the photographs weren’t taken with a tripod that’s fixed to the same position, height and angle, as well as being taken periodically over a specified timeframe. This was the turning point in our outcome, we had taken snapshots of shadows instead of under controlled factors therefore our system wasn’t a ‘set of rules’ that could be reproduced.
ABOVE Photographs of shadows from across the University. TOP LEFT Grid system of shadows correlated to the AUB map. BOTTOM LEFT Arts University map divided into a grid.
Design Process Visual Synthesis 11
ABOVE Distorted original images which we used as our system. RIGHT Inital animation mock-up to animate the shadows captured during data collection.
12
We devised a system that broke our original images into greyscale swatches. It was crucial that we linked an element of time to the shadows that we were documenting. After a long discussion and brainstorm session this led us onto exploring the concept of memories.The colour swatch system which we created earlier aligned itself with the idea of memories and distortion. From our inital animated mock-ups we explored the possibilities of projecting our swatch system against an object as a shadow is reverse projection of whatever is blocking it. These were then animated into a square that would cycle through our original images creating a constantly changing animation. Reflecting on our outcomes it would have been beneficial to collate more data in order to explore further into our animated possibilities.
Design Process Visual Synthesis 13
It was crucial that we linked an element of time to the shadows that we were documenting. After a long discussion and brainstorm session this led us onto exploring the concept of memories. The colour swatch system that we created earlier aligned itself with the idea of memories and distortion. We thought about what we could block the projector with to create a shadow however we came to the conclusion that a simple typographic element would explain how memories are distorted versions of the original image.
14
After a few prototypes made of cardboard we discussed the use of using negative space, allowing the projection to pass through the board untouched. We wanted to portray memory as something that is constantly changing and distorting therefore letting the animation flicker and consolidate on the layer behind the suspended board. Due to the critique time pressure we were not able to expand as far into the typographic element as we hoped. I feel further exploration to the typographic attribute would have improve our project significantly.
LEFT Rough sketch showing design for animation projection. RIGHT Lasercut MDF designs for board.
Design Process Visual Synthesis 15
ABOVE Lasercut memory MDF board.
16
RIGHT Lasercut memory MDF board.
After selecting MDF as our board of choice, we developed two shapes for the board to be cut out of,the first was a square, the second in the shape of the AUB logo. We thought this would further strengthen the connection to the university. To improve our project we needed to reshape ourboard, we found the curved edges weren’t effective when our aspect ratio for the animation was square, causing a fraction of the animation to be displayed on the wall as well as the intented projection, this overhang drew unwanted attention.
Design Process Visual Synthesis 17
Overall the critique was a success. The brief was to create a portrait of the AUB campus, we used a conceptual approach to consolidating data and idea generation, and this was beneficial because we took logical steps to create our refined idea through exploration and experiment with other outcomes. Our system was logical, we had created a ‘set of rules’ that if taken out of context could be reproduced in another environment. Each member of the group engaged in the task at hand and we collaboratively all brought different ideas to the brief, this was a strength as we could build upon these ideas together in the meetings we conducted, a slight weakness of the brief was the size of the group, it became a challenge to meet all at once and keeping informed on new ideas or development became easily overlooked.
18
Despite this I felt I learnt a lot from this project especially within the research section, during the briefing our tutors reiterated the point of conceptual thinking and trying not to jump into a idea too quickly, I felt I continued to carry this through the other projects. I’d like to experiment with projections and typographic elements, a system that could relate to the environments they are display in.
LEFT Our exhibiton space for our system.
ABOVE memory board projection.
Design Process Visual Synthesis 19
20
After the exhibition of our work I wanted to document our system further, I sequenced a short video that conveys the underlying messages we wanted to express. The portrayal of memory is something that is constantly changing and distorting. Memories are often fleeting and incoherant. The projection of the word memory constantly distorts fleeting from visibability without structure or order. The projection on the wall also appears to be changing at a much slower pace - compared to the original project on the board. This aids to the idea that memories deteriorate over time. To expand on the concept that memories are distorted versions of the original images I used specific shots, with the use of a follow focus and 50mm lens I was able to focus on details of the projection, for example the depth of field between the board and the wall to create smooth transitions between clarity and distortion.
ABOVE Still image from digital outcome. LEFT Still image from digital outcome.
Critical Evaluation Visual Synthesis 21
Print: K端ster, C. and King, E. 2001. Restart: New Systems in Graphic Design 1st ed. New York: Universe Flood, R, 1999. Rethinking the fifth discipline. 1st ed. London: Routledge. Checkland, P. and Scholes, J. 2000. Soft systems methodology. 1st ed. Chichester. Wiley. Klanten, R. (ed.) et al. (2010) Data flow 2 : visualizing information in graphic design. Berlin: Die Gestalten Verlag. M端ller-Brockmann, J. 1996. Grid Systems in Graphic Design. 1st ed. Sulgen: Verlag Niggli Electronic: Kumi Yamashita: [ONLINE] Available at: http://www.kumiyamashita.com/light-andshadow/. [Accessed 02 October 14]. Troika: [ONLINE] Available at: http://www. troika.uk.com [Accessed 04 October 14]. The Guardian: 2014. Data journalism and data visualisation from the Datablog, News, The Guardian. [ONLINE] Available at: http:// www.theguardian.com/news/datablog [Accessed 04 October 14].
Bibliography Visual Synthesis
Industry Visit
2
Visual Systems Assignment 2: Industry Visit
This project requires you to visit a design studio in order to gain knowledge and understanding, uncover the roles within any creative group and consider the possible expectation of you as new designers.
When researching and sourcing various industries we wanted to make sure that we picked creatives specifying in our interests. Initially we brainstormed some key areas of design that we wanted to engage with, it was important that all of us gained knowledge and understanding. Another consideration we took into account was the size of the company, we wanted to have a diverse selection, granting us a broader insight into the design world. Finally we looked at location, we wanted to visit a thriving environment where design is around the clock, for this reason we concentrated our search within London before extending further a field.
ABOVE Work from Empire Design and their London studio. TOP RIGHT IDEO creative offices. RIGHT Lambie-nairn studios.
26
I especially wanted to look at Empire Design. Personally, I have a broad interest in film promotion, especially short trailers and posters. The branding that Empire Design create is always engaging and of expert level, always succeeding in catching the public’s interest. Unfortunately, they were too busy at the time to be able to meet with us. As a group we contacted several companies to try and see as many as possible. We preferably wanted to look at IDEO and Lambie-nairn studios due to their extensive client list and outstanding performance reviews in the creative industry. We thought it would also be beneficial as both are international companies, and we would’ve found it informative to see how they handled with their briefs and communicated with clients. The reality was only a handful replied, of which were Studio Output and MultiAdaptor.
Industry Visit 27
ABOVE Our discussion with Dan Moore, CEO of Studio Output. RIGHT Dan Moore co-founder of Studio Output.
28
Studio Output was our first visit; they have a fairly large office, with about forty employees. Their client base is extensive, working with organisations such as BBC, Penguin and PlayStation. We were given a tour and presentation by one of the three Group Creative Directors, Dan Moore. We discussed in detail about their business start up and how they acquired clients. I found it surprising how relaxed the studio was, Dan explained how they had about fifty live briefs at the same time, giving employees a choice which they wanted to work on. The environment was very friendly and pleasant, design experimentation was broad and design guidelines were at a minimum for the majority of the briefs granting creatives room for freedom.
Studio Output Industry Visit 29
LEFT Penguin books brand identity. RIGHT BBC IWonder project identity. TOP Glug Events, a self-initiated title.
30
Dan explained how important it was to keep in contact with the client especially face-to-face meetings to ensure the best possible design as in the industry you aren’t necessarily designing for yourself. The example Dan spoke about was the BBC and Penguin, he explained how the majority of the time the larger the company the more restrictions there are, for example the use of colour or themes. One project, BBC IWonder continued for over two years because of this, however other briefs could last just a few weeks. It gave us good insight into the turnaround of briefs and what the clients expect. The design process was what I was looking forward to the most, the research and method they take when brainstorming and generating ideas is crucial to the outcomes. One of Studio Outputs processes was through the use of mood boards, concentrating on discovery and wireframing. The importance of exploration was reiterated throughout the whole presentation. Overall, I felt this was our most beneficial visit. Afterwards, I contacted Dan to enquire about work experience to which he is now helping me to get involved with Studio Outputs self-initiated project called Glug. Glug is a global events organisation, which focuses on bringing creative industries together.
Studio Output Industry Visit 31
32
MultiAdaptor was our second visit, their studio was smaller than Studio Outputs only employing about ten or fifteen people. I instantly recognised the difference in their process and the atmosphere of the room. MultiAdaptor was a fairly new agency to the industry so the standard of briefs were of the upmost importance in acquiring new clients. In comparison with Studio Output it was frantic with moodboards, brainstorms and post it notes everywhere, however the initial starting points were the same again reiterating the importance of exploration. We spoke to Ben Brookbanks, one of the founding partners and creative directors of MultiAdaptor. We discussed the environment and their process of working, to which Ben told us that they focus a lot more on the social benefits of their designs. For example, they have launched projects for charities to raise their social profile, my particular favourite being the Red Logo Associates for Comic Relief.
FAR RIGHT Red Logo Associates for Comic Relief.
This opportunity gave the company a chance to brand themselves, as many celebrities associated with Comic Relief used and still use designs created by MultiAdaptor as their personal social media icons, which allowed the agency to extend even further.
TOP RIGHT Idea exploration in MultiAadaptor Studio. BOTTOM RIGHT Working Well project outcomes.
Multiadaptor Industry Visit 33
I also visited a Product Design company called Therefore, although it’s a different industry much of the idea generation and design process is similar. They are the only product design company to win Yellow, White and Black D&AD pencils. The CEO Graham Brett gave us a presentation about how the company began, the importance of clients to the growth company. One product in particular that caught my attention was the Braun clock, Graham talked about how he redesigned the clock with a simple switch mechanism. An efficient feature especially as with product design form must follow function. The process of selecting materials is similar to the exploration graphic design agencies conduct before entering the design process, Therefore had a workshop underneath the studio that experimented with the materials to find the must suited
LEFT Therefore product design agency meeting room. RIGHT CUT Alarm Clock designed by Therefore.
Therefore Industry Visit 35
36
The last industry I visited was Imagination. In comparison to the other design agencies, the creative freedom was very limited because as a company they had a set guidelines that couldn’t be deviated from. These restrictions extended further as employees would be delegated briefs without any creative freedom and were unable to create relationships with clients, which was unlike any other agency we visited. Neither were employees given a chance to develop relationships with clients or fellow employees. Due to the sheer size of the agency there seemed to be very much a hierarchical system where newer employees had no choice in the design process. Personally I preferred the smaller businesses to Imagination, Imagination felt too disconnected internally, with creative simply ticking boxes and following rules.Considering this, I’ve gained insight into the industry and how design companies operate. I have also been able to create my own contacts which will be beneficial in the future.
LEFT Imagination central hub connecting both wings of the studios.
Imagination Industry Visit 37
Electronic: Barbican: Barbican. [ONLINE] Available at: http://www. barbican.org.uk [Accessed 06 Oct. 2014]. Studio Myerscough: [ONLINE] Available at: http://www.studiomyerscough.com [Accessed 06 Oct. 2014]. Empire Design: [ONLINE] Available at: http:// www.empiredesign.com [Accessed 15 Oct. 2014]. Studio Output: [ONLINE] Available at: http:// www.studio-output.com [Accessed 22 Oct. 2014]. Multiadapter: [ONLINE] Available at: http:// multiadaptor.com [Accessed 22 Oct. 2014]. Imagination: [ONLINE] Available at: http:// www.imagination.com [Accessed 28 Oct. 2014]. Therefore: [ONLINE] Available at: http://www. therefore.co.uk [Accessed 28 Oct. 2014]. Projection Artworks: ONLINE] Available at: http://www.projectionartworks.com [Accessed 30 Oct. 2014].
Bibliography Industry Visit
Wayfinding
3 Visual Systems Assignment 3: Wayfinding
You are required to work in groups to research and engage with a range of environments within which users will require a navigation system. In your groups you will identify a location or various and use the creative strategies within visual systems to produce a comprehensive wayfinding system.
42
Research Visual Synthesis 43
Before we could identify a problem it was important that we understood systems within wayfinding and the different types of wayfinding. This would become the basis of our problem and system. We looked at existing way finding systems in different environments, such as navigational systems in department stores and office buildings. We discovered that the majority of wayfinding is heavily linked with signage, as this is the easiest form of navigating. In relation to signage a large amount of signs depend on arrows to guide the user the correct way. However saying this I did find some example which ‘broke the fourth wall’ in terms of lines or arrows running off the walls onto the floor, another variation of this I found was the use height and level. Aside from signage we explored the existing routes of wayfinding that doesn’t require sight, although for a selective audience It was important for us to research into innovative wayfinding into other senses and the use of technology. We discovered the use of smartphones that had been adapted to cameras for the visually impaired and voice beacons for the hearing impaired.
To develop the concept of shortcuts we brainstormed what a shortcut is, is it how quickly you get from A-B or does it have multiple meanings, could it perhaps suggest a shortcut away from a crowd, to avoid somewhere or someone. After dissecting the word shortcut we developed a system that allowed the user to avoid somewhere or someone and navigated them from A-B The most effective way to develop this was through the use of smartphones and apps, we knew that a large majority of people used their smartphones for mapping and journey planning and that the traditional methods of using signs and asking people was becoming less and less efficient. The app was aimed at a younger market between the ages of 16-25, the reason for this was because between these ages its likely that you are in education or apart of a larger ‘friends circle’. This suggeststhat there are probably some people you don’t get on with as well as others. The app hypothetically would be pitched as a bit of a gimmick but still incorporating a very easy and operational navigating system.
To start with we thought about developing signs at the start of a potential shortcut that visualised the destination. However we soon realised this was unrealistic and near impossible to map effectively. RIGHT Brainstorm of potential app designs.
44
Design Process Visual Synthesis 45
46
Incorporating a sense of direction or navigation was important within the design. It was necessary that the app would be incredibly simple and hassle free for the user. It was also vital that we thought of a name that wouldn’t have connotations of the antisocial element of the app as we believed this would carry a negative and skeptical impression for possible users. After brainstorming multiple names the most appropriate and fitting was Sidetrack, the definition suggests an alteration in route as well as this the typeface enabled us to create branding details. I experimented with the existing angles and weights, and resulted in using the typeface ‘Bemio’. I chose Bemio because of it’s bold and smooth-curved typeface, and how when it is written as ‘Sidetrack’ it looks as if it is in motion, reinforcing the concept of the app.
LEFT These three images show the development process I undertook in typeface selection and brand design. RIGHT These three images show the subtle use of arrows to suggest the app is to do with navigating.
Design Process Wayfinding 47
General systems theory suggests that combining systems known as a ‘general’ system could explain all systems in the field of science.
48
Our colour selection of pastel red was chosen in relation to the universal connotations the colour red has, being one of danger and alert. When someone was nearby that the user would want to avoid, red would appear as a warning signal. On reflection I would spend more time researching into the colours and brands identity, I felt these decision were made too quickly and further research into existing apps like citymapper could of aided the design. Additionally the development of the homescreen icon reads ‘st’ standing for Sidetrack, the reasoning behind this was the natural curve the ‘S’ has into the ‘T’, extending further the reinforcement of a navigational app with the use of arrows.
RIGHT Brainstorm showing the development of the Sidetrack apps identity.
Design Process Wayfinding 49
50
Design Process Wayfinding 51
ABOVE Design sketches exploring the possible navigation systems. TOP RIGHT Development of selected navigational system. RIGHT Final navigational system.
52
One concept of the app was that it was to be easy to navigate and due to ethical issues surrounding the issue of people able to track peoples location I decided that the app should not include any maps in terms of showing live physical locations. Instead I proposed a realistic system, simply the app would map your route through street names, and direction, the concept was developed through my personal use of apps and version of written directions you can acquire from Google maps. The system would track your location being in constant communication with satellites, as soon as you completed a step the system would automatically slide off the screen and the list of steps would move accordingly. This system shows project logic as the user is able to concentrate on their surroundings instead of looking at their phone the entire time. The list of steps are shown on a colour gradient this relates to how far away from the destination the user is, the development of this system altered towards the end of the project, instead of each step visualising the direction to user I developed the arrow to change upon transition of one step to another.
Design Process Wayfinding 53
Continuing the concept of an easy to use navigational system, the setup of the app too was an important factor, the proposed app would have four introductory menus before the user could enter a desired destination.
54
The four menus explained to the user how to use the map, how the app intended to use your social networks to track your friends location and how you could ‘flag’ specific users or places. Once this was complete the user could enter a destination.
ABOVE The five step setup process.
Design Process Wayfinding 55
TOP After Effects keyframe window. RIGHT Render stills from advert.
56
ABOVE After Effects animation preview.
For the critique I wanted to display a hypothetical app, I felt we couldn’t accomplish this without an animated advert guiding the viewer through the app step by step. In order to achieve this I animated scenes that display both the setup and the navigational features. The way I achieved this was through using keyframes controlling rotation, orientation and position as well as opacity. Under better time management I believe the advert could have been even more effective, I would do this through documenting interaction with the app and live examples, extending the concept to the next stage and clearly clarifying the apps intention. Alongisde this I would produce a feature prototype on the app store, as if the app was open for download.
Design Process Wayfinding 57
58
Overall the app concept was communicated effectively, the brief was to create a comprehensive wayfinding system. We created a navigational system influenced by our research and design approach, we took logical steps to create a hypothetical app that realistically could be launched into the app market. As well as this during the design phase we considered other aspects such as health and safety and ethical design. We didn’t want to put peoples safety at risk by revealing their location therefore the navigation and avoidant feature were designed in a way so that users couldn’t determine there exact location. Each member of the group worked well together during the research section and the beginning of the design process, together we brought different approaches to wayfinding and design thinking which was beneficial, from this we were able to explore ideas further. However once the concept was created the design process became difficult to work on efficiently together. We were unable to organise discussions about the design and future decision making, I found that I ended up taking control on the app design as well as the animation, during the critique it was important that we all had the same knowledge about the design concept and app design however the presentation wasn’t as smooth as it could have been and I felt I very much led the presentation without much support. Aside from that we answered the brief with a logical and realistic solution.
LEFT Sidetrack App photographed in context.
Critical Evaluation Wayfinding 59
Print: Calori, C. 2007. Signage and wayfinding design. 1st ed. Hoboken, N.J.: John Wiley. Lorenz, M. 2010. Left, right, up, down. 1st ed. Berlin, Germany: Gestalten.
David Sweeney. 2008. Wayfinding for Visually Impaired. [ONLINE] Available at: http://www. coroflot.com/davidsweeney/wayfindingfor-visually-impaired-people. [Accessed 19 October 14].
Klanten, R. (ed.) et al. (2010) Data flow 2 : visualizing information in graphic design. Berlin: Die Gestalten Verlag.
Citymapper. 2014. Citymapper. [ONLINE] Available at: https://citymapper.com/london. [Accessed 23 October 14].
Electronic: Studio Myerscough: [ONLINE] Barbican centre london / wayfinding / collaboration with architects cartlidge levene: http:// studiomyerscough.com/index.php/barbicancentre-london-wayfinding- collaborationwith-architects-ahmm-cartlidge-levene [Accessed 17 Oct. 14]. Barbican: [ONLINE] 2014. Barbican Visual Identity. [online] Available at: http://www. http://www. barbican.org.uk/branding/ barbican.org.uk/branding/ [Accessed 18 Oct. 14]. Pentagram. 2008. New Work. [ONLINE] Available at: http://new.pentagram. com/2010/12/new-work-parking-at-3-east54t/. [Accessed 19 October 14].
Bibliography Wayfinding
Subvert
4
Visual Systems Assignment 4: Subvert
Analyse and deconstruct the visual system of an existing brand. Re-purpose the underlying visual system to produce an outcome that subverts or extends the brands key message.
64
Research Visual Synthesis 65
66
Before condensing my focus onto Qatar I listed a number of brands which appear to go unnoticed in their practice, I especially wanted to focus on the supply and demand aspect of the brand, as we as consumerists are the driving force behind the mass production of products, which rarely follow an ethical business model, typically starting with unfair, sometimes illegal, labour and pay practices in poorer countries. To start with I was interested in mining, especially for diamonds and conflict diamonds however there was no evidence strong enough linking to retail diamond markets to the dangerous practice. Another outlook was through registered charities and conservations groups such as Greenpeace and Amnesty International. I researched into environmental factors, one interesting protest was the advertisement of Shell through Lego, a detailed campaign of what Shell’s production and waste is inflicting on our planet. Furthermore I investigated into more current issues, campaigns that aren’t being addressed, especially ones that we as the Western world have a large involvement or interest in. For this reason I focused my research into the Qatar World Cup and the problems surrounding it from corruption to forced labour and death of workers.
LEFT Subvertising brainstorm concepts.
Research Subvert 67
The Qatar World Cup isn’t until 2022 therefore as a current issue more awareness should be raised to tackle a real problem. Our nation holds a large interest in football on a weekly basis with one of the largest football leagues in the world yet the news isn’t focusing on what’s happening in Qatar instead it’s focusing on how our players are going to play in the heat.
68
In my personal opinion I believe this perception should be shifted to how these workers are being forced to work. Iinitial impact is crucial to succeed in a poster campaign, therefore i wanted to develop ideas that focused largely on typography. My ideas stemmed from the current death count of working and the year the World Cup is to be held on.
However this wasn’t powerful enough by itself. The focus needed to be on the association behind the football and the world cup, therefore I chose my brand as FIFA, the governing body of the football association.
ABOVE FIFA subvert brainstorm concepts.
Research Subvert 69
I deconstructed FIFA as an organisation and analysed their brands message, FIFA are responsible for football’s major international tournaments, and arguably most importantly the World Cup. FIFA commits itself to improving the sport of football and the infrastructure associated with football.
70
Consequently I researched FIFA’s tagline, ‘For the Game. For the World’. This tagline can be questioned both to extend and to subvert the brand, It became clear that this would support the imagery and the FIFA logo wasn’t necessarily a key feature to the design.
I researched into the problems with FIFA especially within Qatar, I found some awful articles outlining what’s happening there, a documentary by ESPN has also been created to showcase the tragic incidents. I decided to depict FIFA surrounding the issues with forced labour, living conditions and the death of workers.
To begin with I believed that the imagery would be the basis of the design, as a final outcome I aimed to create and to publicise these posters through online advertisement as well as billboard designs and large format installments.
Design Process Subvert 71
Originally I sourced images relating specifically to the construction of the Qatar stadiums, at this point I didn’t realise the extent these issues had spread to. On reflection I should have explored the background to these issues further, instead I focused on the design aspect too early. I chose an image of a worker peering across, with the tagline pictured above, however the image didn’t express the issue, it wasn’t obvious enough what chosen message I wanted to convey. Because of this I sourced images and photographs that were hard hitting, I found some powerful imagery of workers digging graves, workers living in squalid conditions and workers at the point of breakdown. A typographic element was needed, I included the FIFA¬ tagline using the typeface FF Concon italic, although this was interesting and thought-provoking wordplay the use of statistics could’ve had an even bigger impact on the viewer.
LEFT A series of visual outcomes incorporating the FIFA slogan.
72
I focused on the World Cup, I thought about how much of an event it is internationally, how many people engage with it and what it means to our nation. Generally it is celebrated worldwide and winning the World Cup is seen as a great achievement. However I wanted to pursue a harder, thought-provoking angle, and therefore asked whether World Cup was worth the thousands of lives that are being lost in the creation of Qatar 2022.
Design Process Subvert 73
74
Design Process Subvert 75
examples in world
ABOVE After Effects animation screenshots. . RIGHT Screenshots from Sidetrack Advert.
76
The question I posed read ‘1 World Cup, 736 players, 1200 dead workers.’ I used statistics that portrayed the current situation in Qatar, problems linked to the construction of the stadiums and the results of this. The image behind the type shows workers queuing, this could be interpreted in various ways, for instance are they queuing up for their death. However during my critique my tutors and peers thought that the image wasn’t necessarily needed, they though the type was enough on its own to convey the message. Reflecting back I would agree with them, the image could be seen as distracting as well as this it contrasts with the type affecting its legibility.
LEFT Billboard poster example.
Design Process Subvert 77
To improve this I revised the typographic element and created a new image to contrast against the text. I posed the type as both a statement and question, incorporating the slogan into the design yet manipulating it as a question. As an awareness campaign I think that the revised design is more effective than the previous ones, there is no longer the issue of readability. The text is proposed in a way that supporting imagery of suffering workers or the conditions they had to work in bypassed an important step I want people to consider Previously I had said that the western world drives supply and demand, equivalently in football we demand the best from the World Cup, from our nations performance to the atmosphere from the event. To conclude although this issue is within FIFA’s control, do we have a participating roles and if so are we going to stand by and watch just because of our beloved game.
78
ABOVE Extension of Qatar Fifa poster.
Critical Evaluation Subvert 79
Print: Baur, R. and Thiery, S. 2013. Don’t brand my public space. 1st ed. Baden: Lars Müller. Crow, D 2010. Visible signs: an introduction to semiotics: in the visual arts. 2nd ed. Lausanne: AVA.
The Guardian. 2014. The Guardian. [ONLINE] Available at: http://www.theguardian.com/ commentisfree/2014/jul/28/qatar-migrant-workers-world-cup-exploited-unpaid. [Accessed 03 November 14].
Kelly, C. (ed.) 2004. IDN Special 03: examining the visual culture of corporate identity. Wanchai: Systems design. Klein, N. 2001. No logo. London: Flamingo Electronic: Amnesty International. 2014. Amnesty International. [ONLINE] Available at: http://www. amnestyusa.org/our-work/issues/businessand-human-rights/oil-gas-and-miningindustries/conflict-diamonds. [Accessed 02 November 14]. Greenpeace. 2014. Greenpeace. [ONLINE] Available at: http://www.greenpeace.org/ international/en/news/features/ExposedCoal-mining-at-the-source-of-Chinas-Yellow-River/. [Accessed 02 November 14]. Qatar’s World Cup. (2014). Qatar’s World Cup. [Online Video]. 10 June. Available from: https://vimeo.com/95215527. [Accessed: 03 November 2014].
Bibliography Subvert
Visual Crypsis
5 Visual Systems Assignment 5: Visual Crypsis
Working in creative teams you will select one or more of the visual systems that you have produced during this unit and develop a pair or pairs of visual implementations that reveal and disguise each other at different points in time or space.
84
Before deciding what previous system we were going to use we analysed and deconstructed the meaning of visual crypsis that essentially meant camouflage. Through this discovery we researched into certain aspects of the meaning such as transparency, ecology, nocturnality and camouflage and how they could become relatable to design. From existing research such as the Channel 4 idents we found they used modern technology and filming techniques with the concept of layers that eventually created the image for the viewer. The both of us found this concept of layers and perception very interesting, we decided to look further in depth at the possible systems we could curate. We also analysed the concept of projections, for my first project we had created some basic animations with projections to create a visual system. From this project we received positive feedback commenting on the use of layers in the sense of transparency and time. I believed that we would be able to extend this further during this project.
LEFT Inital brainstorm of visual crypsis and existing systems.
Research Visual Crypsis 85
86
Before consolidating our research into projections we further explored the concept of eco-systems and ecology, the concept of creating a weather system within a confined space seemed somewhat powerful and immersive. After discussion we believed that our outcome could become some sort of exhibition or installation, something we wanted people to interact with and engage with. This led us to an artist named Berndnaut Smilde who created the illusion of cloud floating within an open space titled ‘Nimbus’. Through photography he was able to capture this moment that for a viewer would only last a few seconds. Consequently we wanted to pursue the idea of reproducing natural occurrences that we overlook on a day-to-day basis, the concept of eco-systems such as the Eden project inspired us to brainstorm other aspects of the natural world.
LEFT ‘Nimbus’ illusional art examples of floating clouds.
Research Visual Crypsis 87
Living in Bournemouth we thought about the sea and the pattern of tides and the relation to the moon through gravitation pull. We thought a way of visualising the system of tides could extend our concept of the natural world as well as relating to layers and projections. After background research into the physics behind the tidal process we researched into Troika, Troika is graphic design agencies that is heavily influenced by installations and visual experimentation. We drew some ideas of creating an installation that interacted with the earth’s location in correlation to the sun and the moon. Despite this we didn’t want to distract ourselves from the brief, to focus on exploring how one system can merge with another. After further discussion with our tutor we retracted our thinking to our first concept of ecology and the natural world, through discussion we revealed the relation between the natural and unnatural world.
88
ABOVE Idea generation brainstorm of moon and tide systems.
Research Visual Crypsis 89
This became our visual crypsis, the relationship between the natural and unnatural and what effect they have on each other. With this strong concept we began to brainstorm potential ideas that we could explore further. The concept of a live project appealed to us, something that was happening, a way of visualising live data.
90
We soon realised without access to live data this was impossible. On reflection I believe that if we had developed this concept of ‘live’ further we could have created an alternative interactive installation that also focuses on the preservation of the planet.
We decided that we wanted to create an alternative reality, a reality that wasn’t quite right, something that was immersive, a visual system that controlled the surroundings around you. After deliberation we looked into the concept of projection mapping, we both had brief experience with projection mapping and only on a small scale but after taking considerations into technical abilities of project mapping, our workspace and the time we had to achieve this we began our concept of Outside/Inside. We wanted users to experience an alternative reality in a sense of sound and sight, through projection mapping we began to curate a environment that a viewer would become immersed in. the aim was for viewers to observe internally the planet that we live on, and to take time to appreciate the natural landscapes and environments that surround us. We wanted the viewers to reflect on how these areas of natural beauty and resources are being abused and destroyed for our own superficial needs.
Research Visual Crypsis 91
92
Firstly we sourced sequences that represent our planet; during this process we decided that users should experience multiple environments to become immersed in. To achieve this we had to create a fluent sequence that appeared to merge naturally. Once we had curated the sequence we had to tackle the obstacle of projection mapping it onto screens. Originally we mapped the video sequence onto two angled surfaces however we felt this wasn’t the atmosphere we wanted to create. From the beginning we knew we wanted an immersive environment, without this we knew our installation wouldn’t have as large an impact. To overcome this we installed another two surfaces to project onto, essentially we doubled the amount of equipment we required, this began at the footage.
The complication was we needed to project the footage from two computers onto four different surfaces, therefore we needed to split the composition in half enabling us to render a ‘left’ and ‘right’ sequence, these could then be applied to the projection mapping software. During this part of the project I learnt the most, the technical process behind video mapping and the trail and error approach with after effects uncovered techniques and features I wasn’t capable of however through this unit I learnt how to use them to create the desired outcome.
Design Process Visual Crypsis 93
The projectors image exceeded the edges of the surfaces we wanted to project onto however through the use of the mapping software we were able to anchor the corners of image to fit our desired surfaces, this also enabled us to create this immersive environment. Due to fact the surfaces curved around the user we had the complication of distortion, yet the mapping software compensated to these angles and projected the image perfectly. We were limited by budget workspace and time, ideally we would have an entire room projection mapped so the user would be totally immersed however this just wasn’t realistic, we were able to transform half of our studio into a walk in environment which met you with digitalised surfaces mapping various environments. We elevated the projectors, this allowed the viewer to get closer without obstructing the image.
TOP RIGHT Workspace projection mapping setup. RIGHT Projection mapping composition arrangement.
94
Design Process Visual Crypsis 95
96
Design Process Visual Crypsis 97
ABOVE After Effects sequence screenshots. .
98
Unfortunately the critique was during the day and we were unable to setup our installation for people to experience, to overcome this we created a video showcasing our exhibition. Although some of the tutors had seen the exhibition setup at that point in time we hadn’t added the element of sound that accompanied the footage, we curated the soundscape in a way that was slightly artificial or mechanised, we did this because we wanted people to find imperfections and more importantly to think about the natural environment. We sequenced the video through After Effects, using masks to select sequences we wanted and create the illusion the mapping was on a larger scale, this was supported by the use of close up silhouettes projecting just the faces of the users. It was crucial to show the element of interaction, the exhibition was to be an open space, a place of discussion or relaxation yet unnatural. We had fulfilled the brief in the sense of merging the natural world with unnatural and manmade materials like all filmmakers and photographers do, they have captured environments that they can play or pause with a click of a button.
Design Process Visual Crypsis 99
100
Design Process Visual Crypsis 101
However to elaborate this meaning further we had to put our exhibition in context, we wanted to extend the concept of Outside/ Inside to where the exhibition is actually placed, within public areas so people can interact with it. Our underlying message was to express how spectacular our planet is and that we should protect it. Despite this I feel we tried to form many other messages that could be connected to our exhibition and that the most important message became distorted amongst the rest. Will Clempson and I worked collaboratively on this project and we would both agree that it was successful in what we set out to achieve, considering the limiting factors we worked efficiently on both the creation and development of the natural and unnatural concept however what I am most impressed about is the technical aspect of the design, we were able to take an initial idea and adapt it to work after learning key skills such as projection mapping, after effect compositing, masking and keyframing. An improvement on this project would be to develop it on a larger scale, to create an even more immersive experience, additionally we both agree that the context the exhibition would be situated in would have to be stronger and more concise. In turn we believe this would address our message clearly to the viewer.
102
ABOVE Examples of exhibition interaction. RIGHT Examples of exhibition in context.
Critical Evaluation Visual Crypsis 103
Print: Mau, B. 2004. Massive Change: a manifesto for the future global design culture. London: Phaidon Kusters, C., and King, E. 2001. Restart: new systems in graphic design. London: Thames and Hudson. Klanten, R. (ed.) et al. (2010) Data flow 2 : visualizing information in graphic design. Berlin: Die Gestalten Verlag. Maeda, J. 2004. Creative code. 1st ed. New York, N.Y.: Thames & Hudson. Electronic: Troika: [ONLINE] Available at: http://www. troika.uk.com [Accessed 08 Nov 14].
Darek Sepiolo. 2009. Antarctica. [Online Video]. 03 November. Available from: https:// vimeo.com/3890238. [Accessed: 14 November 2014]. Darek Sepiolo. 2008. Galapagos. [Online Video]. 04 November. Available from: https:// vimeo.com/1935228. [Accessed: 14 November 2014]. Nathan Kaso. 2013. The Waters of Greenstone. [Online Video]. 12 June. Available from: https://vimeo.com/1935228. [Accessed: 14 November 2014]. WWF-UK. (2011). The Beautiful Forest. [Online Video]. 15 June. Available from: https://vimeo.com/27002921. [Accessed: 15 November 2014].
Moon Phase Calendar. 2014. Moon Connection. [ONLINE] Available at: http:// www.moonconnection.com/moon_phases_ calendar.phtml. [Accessed 08 November 14].
Bibliography Visual Crypsis
Display Books
6 Visual Systems Assignment 6: Display Book
Produce a display book that communicates the journey of your Visual Systems unit. It is important that you consider typeface selection, hierarchical structures systems, grids, legibility, readability, narrative and layout.
Before I could look into book design I firstly had to decide what I wanted my book to look like and how I was going to guide the reader through my design journey. After discussion with my tutor I decided that rather than one book how about designing six, one for each project. In turn this would create a system for the user that may be more engaging than one large format book. Furthermore I decided that because these were going to be in a series, it should look like a collection and come in a box. I decided to create a5 books. However reflecting on this I actually believe that a5 is a better choice, the reason for this is the books don’t appear daunting and as a collection it is more effective. I decided on a two-column grid, after looking at various examples and extensively researching into Joseph Muller Brockmann thus was the best choice. The reason for that is because the document is a5 any more columns would shorten the optimal line length and therefore affect readability. To accompany this I decided a baseline grid would suit the style of document I am creating. A baseline grid allows me to place images and text aligned to one another and preserve a continuous flow throughout the books. After conducting multiple type texts I also decided that 9pt was optimal for reading on an a5 document, as I was using a baseline grid a leading of 12pt was important in consideration of legibility.
LEFT Grid design research.
108
Research Display Books 109
ABOVE Sketches of individual book layouts.
110
Before I started to design each book I created a sketch of the layouts, the reason for this was firstly so I didn’t forgot any important aspects of the design, It also enabled me to create books which had a variety of grid layouts so the user didn’t become less engaged whilst looking at them. Another reason was because I am printing booklets I needed to make sure that each book had enough pages because for printing reasons each a4 page represents four within my book. After I had laid out the pages within the InDesign file I printed out overview layouts sheets, from these I was able to analyse negative space on spreads and alter accordingly. I found these especially constructive as I was able to see the flow of the book, I find when you are working on a screen your perception of size and positioning can become slightly distorted.
Research Display Books 111
overview print outs
112
After I had laid out the pages within the InDesign file I printed out overview layouts sheets,. The benefit from these was that I was able to analyse negative space on spreads and alter accordingly. I found these especially constructive as I was able to see the flow of the books, both individually and as a collection. Before doing this I found that when you are working on a screen your perception of size and positioning can become distorted. Additionally I was able to show my peers mock-up versions, they gave me constructive feedback on aspects of the design I hadn’t noticed.
LEFT Page layout sheets.
Design Process Display Books 113
As an extension from this I decided that printing out 100% mock-ups would aid the design further, by doing this I was able to analyse the page layouts, the type size and positioning in comparison to the margins. I was able to hold the booklet in my hand, examine where my fingers rested on the page. As a result of this I could determine whether or not the margins were large enough, whether they were visibly obstructing the text and therefore the readability of the document. At first I wasn’t going to do this because I thought the time it takes to prepare and print a booklet wasn’t constructive however from now on I think that I will always follow this procedure, from this I was able to rethink and change various aspects that I wouldn’t have done if I worked solely on screen.
114
ABOVE Mock-up deisgns of individual books.
Design Process Display Books 115
Light Light Italic Regular Regular Italic Bold Bold Italic Black Black Italic
116
Selecting a typeface was also a large part of the experience you want the reader to have, especially people outside of the design community who often overlook typefaces and their importance. I chose the typeface Foco and Foco Light. I did this because the typeface is highly legible; it has interesting and playful details yet serious quality in regards to spacing. I think that the typeface is very well suited to the environment of print publishing and within documents that have a lot of text. Therefore I thought that this selection suited my personal style. Additionally I chose this typeface because of the different weights it’s avaliable in, for instance I was able to use Foco Medium for the project title in the footer and use Foco Light as the body text, this prevented me from having to find typefaces that complimented each other.
LEFT Typeface selection
Design Process Display Books 117
ABOVE Box to hold books. RIGHT Examples of book page layouts.
118
Overall I think that I have produced a collection of books that take the viewer on a journey, through my initial thoughts and processes to my design thinking and execution. I have written in detail about the turning points and reasons behind my decisions both individually and part of a team. Furthermore I have reflected on my thoughts and considered future improvements. This process has also taught me how to organise a staple bound book including both InDesign document setup and binding methods. To conclude I believe this collection of books reflects what I have learnt during this term and much more, it has taught me a lot about layout and the use of type, I hope that in the future I can reproduce these skills to aid my design further.
Design Process Display Books 119
120
Critical Evaluation Visual Synthesis 121
Print: Muller-Brockmann, J. 1996. Grid Systems in Graphic Design. 1st ed. Sulgen: Verlag Niggli Elam. K 2004 Grid Systems. 1st ed. New York: Princeton Architectural Press. Lupton, E. 2010 Thinking with type. 1st ed. New York: Princeton Architectual Press Design Museum. 2013 Fifty Typefaces that changed the world 1st ed. London. An Hachette UK Samara, T. 2005 Making and breaking the grid: a graphic design layout workshop. Beverly: Rockport Boylston, S. 2010 Designing sustainable packaging. London. Laurence King Publishing
Bibliography Display Books