I found Hugh Frost’s lecture at the start of the new term to be very interesting. His talk focused on some key elements of my practice. Specifically experimental ideas based on contemporary graphic design.
I contacted Hugh to talk with him about both of our practices and share my exhibition space project from BA3a. The feedback was very positive and it’s great to see more designers use some of the potential with games as a narrative platform.
This is the Terraformers exhibition put together by a variety of designers at the Bonington Gallery, Nottingham.
I found this piece specifically interesting to me because the real space which the user would inhabit has been tailored and designed to be part of the overall experience. In particular the physical human interface device which is the controller that the user bridges the interaction.
This is the installation presented in a video format.
The experience itself has goals and challenges that are very experimental towards how the game is designed.
There are overlaps used between game design as a consumer product and the graphical layout presented to the player as a user interface.
This is a video screen play of Kitty Clark's virtual environment titled, Seeking.
The experience is based in a first person perspective. The lighting changes from day to night with the figure seen in the video changing positions.
As a narrative platform this lets the user question who they are in this experience and what relation they have to the actions happening around them.
The use of narration in virtual environments is interesting because in this case the viewer is in a real time environment and given a limited use of movement and perspective within the scene but with limited movement.
Everyone is Gone feels like an exploration within a journey.
There are technical processes used with the environments to make them feel mysterious and slightly overwhelming in the space. The use of several bright colour palletes alongside each other makes the user feel uneasy because they cannot clearly identify what is in front of them.
Transistor by the independent studio Super Giant Games is an illustrated isometric action and strategy game that is fully narrated.
The drawings are created by Jen Zee and put into motion inside of the game environment while the story of the world is narrated thematically to the user while the world is literally being constructed around the user from a limited moving perspective.
I love the use of a hand illustrated aesthetic inside of a game environment. There is an interesting relationship between the code and drawings to create the narrative experience.
The Stanley Parable is a first person experience. I find it interesting because the narrative of the story is told to the user by the narrator.
The major difference in design is the power the user has over the narrator giving them the choice to follow what is being told, or reject the narrative path given to construct an alternative.
This is a brief look back at the Interactive design exhibition where it ended at BA3a.
I will be expanding this space through the time I have in BA3b through multiple projects.
I’m excited to think about how the content I have made up to this point will be expanded into the design. I have a lot of ideas I want to include with my developments on VR in the unit.
I found the use of sound and it’s relationship to the moving objects in this animation to be interesting because the overall narrative is projected as soothing and relaxing to the viewer.
It’s interesting because in comparison to the work I have been making this is all in real space with the constraints of gravity and physics.
Within the past year Virtual Reality has gained a lot of experimental and productive software programs.
Tilt Brush from Google is an interesting application that lets the designer create illustrations and designs while inside of the 3D space.
This completely changes the muscle memory used in traditional drawing onto a 2D composition. This is because you are actually in the space with a one to one input device. These designs can be exported to 3D software platforms including the Unity engine.
This is an image from Sougwen Chung’s live drawing performance from 2013.
Her practice explores the understanding of interactions between the human image making techniques and the methods machines use to generate creative content.
Many of the themes in her work are based around immersion in the content and the potential interactions that can take place.
This is an illustration from Sougwen using the tilt brush software. As a technical image it’s fascinating because the process is effective as a platform for still image design.
Of course they exist as 3D objects to be used in virtual spaces and 3D printed as well but the interchangeability is incredibly interesting.
Image created in collaboration with Nancy Peart
Image created in collaboration with Nancy Peart
I was thinking about the different professional audiences that my work is targeting. My graphical illustration work takes on very different roles to my experimental 3D experiences. Both have audiences that have some cross over.
These are some of my designs from Issue V of Nocturnal mentioned in BA3a.
The graphical 2D designs seem to fit in well with social media including Facebook and Twitter as promotional content which functions as an online poster for an event.
Instagram is an image only platform so it makes sense to focus attention towards creating a more linear narrative for that audience. With the potential of short discussion about the illustration or context in the comments.
I think it’s important for me to define my audiences more specifically in this unit because my working process in a collaborative environment can be very different to working as a free lance designer.
This is a screen shot of an early stage of my online portfolio. Over the project I have learned a decent amount about web layout and function.
The current version will be found here
My initial plan in BA3a was to create the interactive exhibition space and learn from the feedback at the end of term exhibition for BA3b.
I have made advancements using VR and experimenting further in 3D software from the last unit. I think I need to define a coherent system for laying out and displaying content in a space that is consistently being driven to the targeted audience. The 2D illustrations looking back did not communicate as well as they could have. The QR codes were maybe too much for an exhibition of its scale. The development of video and animation inside of these worlds is always something I wanted to add without the time constraint of coding.
I went to the Norwich Forum Interactive exhibition recently.
This is Michele Panegrossi and Aye Aye’s Invisible Cities. It uses augmented reality to change the lighting effects and sounds on the table when a user waves their hands over certain parts of the instillation. I noticed the audience was mostly younger people and children. It was the most socially engaging piece because of its ease of use and instant outcomes.
David Urwin’s The Nature of Imagination was a virtual reality installation. The event used a kinect Xbox One camera to record peoples movements in front of the user wearing the headset. These visuals from the camera would then visible to the wearer of the VR Oculus Rift headset as different entities that exist in an alternate Utopian environment.
The use of worlds and context was interesting and the technical coding involved was very impressive. The aesthetic inside the experience however was quite bare. There was a lot of potential with the idea though.
A Canadian tech company called SAGA is experimenting with the idea of interactive gyms targeted towards schools. The technology is using augmented reality to create interactive environments with the real physical space. The process uses image projection mapping, lighting and sound effects. It takes some ideas used in tradition game design and establishes them in real world environments.
I think this shows some of the potential I was previously talking about with Pokemon Go and augmented reality being discovered in BA3a.
Starting from the summer of 2017 I will be working with Dreamsphere game studios. The collective is built from a variety of programmers and designers.
I had a meeting with Jake and Henry from the team and we discussed our practices and had a good conversation talking about the cross over between game design and illustration/graphic design.
In this situation I will be focusing on the narrative design aspects of the games they are constructing. This features concept designs and outcomes targeted to the audiences of my 3D environments.
The poster style image on the right is an upcoming project from Dreamsphere. The poster is not designed by me but I just thought it was interesting to talk about with this audience for my work.
Their website is located here
During the planning stage happening between NUA, UEA for the Rainbird AI project I wanted to experiment with some processes that could be used for that audience but would also help me think about where I want to take my core project.
I was thinking about languages and code from the perspective of visualisation. This is the core component for the use of creative design at Rainbird which gives some context for the audience that the images are being made for.
There is an interesting relationship between the design functions in algorithm code and the visual outcomes provided because of them.
When altered this creates inconsistencies in the original image. Once understanding how these inconsistencies relate to the code I can produce outcomes that are influenced from the code which have some element of procedural generation.
When zooming into the corrupted surfaces of the image, the visual conflict between the code produces a great variety of designs that reference systems and digital architecture.
This repeating animation is put together using the corrupted elements of the previous single image.
I was interested in thinking about how these architectural environments could expand into a 3D environment using colour consistency, movement and physics.
This image shows the process of me creating a “skybox”. This uses several images combined together to produce the environment which the user would inhabit.
This is me visually constructing a scene with objects referenced to in the 2D image.
I built up the animation in a similar process to capturing a live film by setting up cameras in the space to record the visual outcomes.
This is the 2D version of the animation which has a slow pacing because of it’s intended use in VR. The audio was recorded from a functioning 3D printer to give some consistency of movement between scenes which questions the viewer.
When I was putting together the animation in Premier Pro I found the colour representation options really interesting when relating to the pixelated glitch formations.
This is the VR version of the animation which gives the user the opportunity to look around the environments in 3D space.
You can access this version by playing the video on Google Chrome or the Youtube app on mobile.
These are some physical 2D structure drawings I have created. I’ve designed these to reflect on the architectural process of constructing spaces with the use of colour.
Two of these are featured illustrations with Nancy Peart.
The diamond shaped symbol here with a thick coloured stroke is a lozenge and in the context of an algorithm it represents the diamond principle which is part of a technical sequence.
The image on the left shows the usage of the lozenge being published in American sign posts for bike and vehicle lanes.
This article from the Federal Highway Administration provides some interesting information about the uses of these signs.
The upside down question mark symbol is used at the start of a question in Spanish. This translates to the an encoding process used programming.
The pilcrow symbol refers to a paragraph in the English language but it is also used with encoding images. I find the separate audiences for these symbols really interesting.
I have been experimenting using 3D pixel mapping tools in photoshop to represent the depth of this 2D image in a 3D space.
This is the 3D version of the 2D image. I have experimented with using depth of field and texturing. I really like how the pixels feel like they are standing outside of the image.
This is more of a resolved outcome from the previous experiments. The environment is given greater meaning because of the Pilcrow symbol.
It stands out more like a 3D paragraph but also references the process of encoding images.
At the start of year 3 one of my main goals was to create a physical take away from being inside of an experience so the objects that the user would achieve in the game environment are real items that they can keep and be tailored personally from their experience and achievements.
This may be something I work towards beyond my experimental stage however I can start to visualise how I could do this now using digital production methods.
I think the relationship between these constructions and the previous drawn 2D ones have an interesting relationship to how my work translates into 3D.
They are starting to feel like functional buttons or door ways into a space.
The history of VR before the technology became viable shows some very interesting tests using design and narrative.
VIEWlab from NASA in 1987 used green wireframe visuals with the objective of being able to control a system from a remote location. The hardware was tested on the original Apple Macintosh.
Placeholder from 1993 was a narrative experiment using VR. Interactive 3D graphics in computers were very limited at this time. People only started to experience them as an affordable option after the release of the original Playstation in 1995 on 2D CRT displays.
The aesthetic of the headset being very grey and complicated is a reference to the design of user interface at the time with minimal colour palettes seen at 7:20 of the video.
Brenda Laurel, one of the designers from Placeholder recently talked at the Interaction 17 conference in New York about contemporary VR technologies. An interesting discussion starts at 19:50 from the presentation as Laurel says: “The story in virtual reality is the collaboration between the designer and the participant” (Laurel, 2017)
This made me think about the process of designing the content for Ampersand. It was based around direct interaction with the participants at the event. A large part of the narrative is generated from the social elements of the interactions made because each experience would be different depending on the choices the user has made.
Recently jeff Kaplin the director of the very popular game Overwatch asked his audience of players openly to question his role on the development of the title. An interesting question was asked by a player wanting Kaplin to describe his role as a designer:
“I try to build a vision that’s based on what the team wants to create and then help spread that vision, communicate it and keep everyone to it” (Kaplin, 2017)
This is a very similar way I would describe my role as a designer working in collaborative environments based on previous events, in particular Ampersand and Reconfigured VR. I usually try and focus on how something works alongside a narrative path.
David Gibson is an animator working at Blizzard for Overwatch. The process of creating a character and animating it is done through Auto Desk Maya. The files are then brought into their in-house engine to use and render in real time environments.
The process of creating these short animations to the quality of Gibson’s presentation took 4 whole days to produce the 5 second long animation because of how intricate the process of moving 3D objects is. (Gibson, 2017)
Horizon Zero Dawn is a title I have recently experienced. It made me think about the pacing of the experience and the diversity of environments presented in the world.
The design is based around contemporary knowledge of machine learning and artificial intelligence but the interesting point of discussion is about what we as the user consider natural.
John Gonzalez the writer of Horizon explains the narrative saying:
"If you look up the definition of nature, it is essentially whatever humans don't do or make. Which falls apart on the face of it, because we are obviously part of the natural order" (Gonzalez, 2017).
ABZU is the spiritual successor to Journey which was one of the first games backed by a relativity large budget to focus exclusively on the linear narrative experience in the title.
In an interview, Matt Nava the art director on the game was asked how the emotional experience between the on screen character was constructed saying:
“The goal is to create an experience that’s lasting and meaningful for players. We want to give them a world they can explore and keep coming back to and enjoy.” (Nava, 2015)
Replay value is large distinction to make between other forms of media because of the objective outcomes and player choice.
At this stage of production I have implemented in a simple user interface which takes the user from a main menu into the game. They can also pause, change volume and quit the title while in-game. The idea is to create a consistent experience moving in and out of the environment.
I have started to experiment with the 3D objects I have made inside of the environment. The previous Pilcrow design at a large scale feels like a monument type structure when seen from a first person perspective.
You can see a link to the full proposal here
This is my first test using the assets I have currently created. In terms of the world design I was thinking about the area being a space that was based after a large scale event but not necessarily post apocalyptic.
The user may see the pilcrow monument and then question who they are and why they ended up in this situation. The environment around the player is used to express this story possibly through journal entries or landmarks that reveal new context.
The challenge is creating a convincing composition and layout of the environment and objects to produce these narratives.
When thinking about the experience from a narrative perspective the relationship and context between the 3D and 2D objects needs to be meaningful.
In the real world when we see a 2D image on a wall like a poster it is meant to explain what an object, place or space can do for the you with a focus on excitement. The actual event will be much more expansive requiring a stronger relationship between the world and the user.
In this version I experimented with technical lighting methods, introducing ambient occlusion which creates realistic reflections and colours from the light source.
I’ve made this scene to experiment with a day and night cycle in the world.
On the actual day of the exhibition the state of the world would be very different depending on when the user experienced it.
For example if someone sees the environment at 10am and then comes back to see it at 4pm there would be a significant change. This may introduce some replay value and start discussion amongst viewers/users.
These are the results of the day and night cycle added to the scene with particle effects present.
There is also an added layer of fog in the depth of field.
This is an experiment using a code script to create an asset that functions as a traditional book.
The user can pick up and experience the narrative from journal entries for objects in the space. Currently I’m thinking about how they could be used to function effectively.
The UI at the moment is placeholder and messy but a way finding system would help the user navigate through colour and shape.
These are notes and brainstorms thinking about the user interface and experience when moving in the space. I would not describe what I am making as a game because there is no direct challenge or outcome that is needed.
User experience design is an extension of graphic design, focused on an interactive platform. It’s a term that is becoming more defined with the way designers and users understand contemporary interactive communication.
Facebook (2017) has recently introduced a function that allows users to create their own limited typographical layouts and designs within the platform to share.
I find this fascinating because the roles of user and designer are being played with under strict limitations. The San Serif typeface contrasting with two or three flat colours is very popular at the moment with web design graphics. This extends from trends used in mobile user interface since Apple introduced iOS 7 that drastically changed the aesthetic of most user interfaces to follow today with modern operating systems including Windows 10 and MAC OS.
I created some designs which reference to contemporary user interface seen in consumer operating systems.
I find the visual language of the layouts very interesting because of the consistency in user experience, switching from one device to another. The icons and aesthetic design are either the same or similar.
I started crafting some scenes to build up an idea for a potential aesthetic to use in my overall design. The emphasis is on colour theory, how the relationship between image, type and user sit within a 3D space.
At this stage I introduced many colours to experiment but the outcome was confusing because of the lack of context.
These are refined versions of designs which I have specifically focused on a two toned colour system as a way for the viewer to navigate around the image.
I think the aesthetic feels much more professional because it is thinking about ideas of contemporary UX design in a 3D space which people are already familiar with.
The colours completely change the feeling of the environment. The blue on blue hue gives a relaxing vibe to the scene while the red and yellow feels very energetic and a bit intense.
As a starting area the red could work quite well to introduce and encourage the users to explore.
This is a layout I have created to form as a map for the virtual space. The way finding system is based around colour and contemporary visual interface design.
The user starts facing the welcome dialogue. They then have the choice to explore various parts of the structure highlighted by the coloured doors which function as links to the next event.
The colour materials used in the space react to lighting conditions. The corridors are used to pace the user between rooms so that the transition feels exciting but not jarring.
The goal is to keep the user interested and question who they are and what they are doing in the space.
The Pilcrow object in the centre is placed to act as a large monument. The user can find out more about the object by exploring the surrounding area.
I really enjoy finding aspects of the work which function as stand alone graphics or illustrations.
This screen capture feels like it is communicating speed and connectivity because of the transition from light to dark from a direct perspective.
This is a gameplay simulation from Qube (2011) which is a first person puzzle game.
In Qube the colours of objects act as a function for the player to interact with the world around them and progress through the linear scenes.
I find the process of teaching these rules to an active audience interesting because there is a relationship established between colour and function to achieve a goal.
I previously interviewed Henry Hoffman, the creator of HUE (2017), included in my research report.
We had an interesting conversation about narrative in games and the user choices that make it so interesting. Hue uses colour and narration to express the linear story while the user grows attachment to the character they play as.
This is a screenshot of a game title called Mirrors Edge (2007) created by Dice, EA. The title is very interesting in terms of having a 3D user interface. The way finding system uses colour for the user to find their way around the minimalistic white cityscape.
The colours are used to support the players environment with red colours symbolising intense situations while blue is used in the starting areas which are an easier challenge. Although the game now is almost 10 years old the production value really holds up still today because it has less of an emphasis on realism in the design.
This is a short video from MaxonTreik (2011) explaining the emotional responses to colour theory in Mirrors Edge.
This version of the build features a near completion of the 3D environment, it also introduces sound.
The sound is used to pace the experience and create an audible narrative which compliments the imagery. The sounds are based from ocean waves combined with the sounds of a working 3D printer.
Both processes feel somewhat relaxing and timeless which I think has an interesting crossover considering a natural environment when navigating the space.
In my previous interview with Daedalic studio’s director Marco Hüllen we talked about the process of projective mapping. This technique allows the designers to use 2D assets like drawings to work as large backdrops and environments without the CGI aesthetic.
At the current stage in my practice the drawings have not yet evolved to be a “natural” function in my user experience design. This is one method I want to experiment with in moving into my projects on the unit.
MPathic VR by Medical CyberWorlds (2016) is a mixed reality software which uses voice and body recognition to practice verbal speaking communication skills with virtual patients. The system understands names in relation to it’s artificial character.
There is an interesting cross over here between languages. The data is being used to form the algorithm which generates responses that are meant to feel human. The visual design is all CGI and the main point of interest is from the body language presented by the entity. However does that feel like a natural experience?
This is a screenshot of the initial install message on Windows 10 (2014).
The colour of the background layout and the positioning of the type in the centre of the design feels like you are about to enter an experience in somewhat of a subliminal message.
This is a technical process of adding colliders to the objects in the space so the user cannot walk through the objects.
There is a balance between user interface and real time muscle memory when in the space.
The 3D typography in the scenes are presented in an Avenir san serif.
It is a typeface that is commonly used in contemporary digital design and is a nice alternative to Helvetica neue which references more towards recent versions of Apple operating systems.
These are rendered symbols that are used in the code for creating the 3D objects.
I think there is a lot of potential with how typography can be presented in virtual space through lighting and scale.
These are the symbols active inside of the starting room. They function as “posters” to give limited information to the user about what the experience will be in the following room. These are linked with the colour for each space.
The challenge is to create a cohesive experience that makes sense for people using it in an exhibition context.
This build has several major improvements including the 3D typography, a functioning user interface and refined colours.
There are some interesting sections in the space which have some cross over with other environments. These can keep the user interested in the experience and explore further.
There are some interesting sections in the space which have some cross over with other environments. These can keep the user interested in the experience and explore further.
This is a real physical print of the Pilcrow object. I 3D printed it with the help of Maylott and his 3D printer. I mentioned at the start of year 3 that having a physical take away from the virtual experience was one focus that I find really interesting.
Moving forward i’ll be working with Maylott on the Rainbird project.
This is the over side of the object. The pattern has a CPU kind of aesthetic with all of the indents.
This is just a quick photo comparison made between the image in pre production on the Unity engine and in print.
These are some 2D graphics created from the space. I think they work very well as promotional material for the project on my online website/portfolio because they work to grab initial interest.
I think they fit in quite well with industry related advertising including mobile networks.
The lighting effects make the typography much more interesting here nearing the end of production.
I think these flat designs work well when communicating in a 2D space because they function like a poster. In terms of industry the project context is of user interaction and moving data.
From my feedback with users these images communicate cityscape, speed and connectivity.
I decided to add some type into some of the rooms to explain the relationship between the objects in a clear way for the user to interact with. The relationship between the objects was one of my main problems which I was trying to solve from my feedback.
2D does not really stand out for the user to see although 3D is much more pronounced and works as part of the layout when introducing colour texturing.
Depending on the perspective of the viewer there can be some interesting overlaps between the type and environment.
In this example the Pilcrow is visible underneath the “D” in “2D”. This reinforces the idea of scale and depth in more of a graphical representation driven by the user.
I went to the Design Disruptors (2017) Screening and symposium at the NUA lecture theatre. The film was a documentary discussing user experience and interactive design in the context of contemporary culture.
The film touched on some interesting points. Mainly covering the “Disruptions” in the industry post 2007 after the launch of the iPhone, which has allowed designers to focus more on the human experience by making everyday tasks easier or more enjoyable by using illustration and coherent layout in the design for applications.
The discussion panel featured Jane from FoolProof who I initially met at the Big Book Crit in March when I was talking to her about my current projects and portfolio.
There was an interesting discussion about the differences between graphic design and user experience design by Steve Kirkendall. He mentioned the main difference is feedback on the design process.
Once a poster is printed and presented in a location there is no feedback from that design, however in user experience the feedback is part of the design which is a component part of what makes it interactive.
There are lots of interesting cross overs between games design where the user experience and testing are very important. It’s about making something that people want to use based around layouts and compositions presented to the end user.