Portfolio & Website – On Display Developments

As part of the final submission we are asked to submit 3 research and development (R&D) PDF’S, which have been developed based on the formative feedback we have received. I had a few developments to do on the branding project we did this year.

Marque Development

One piece of feedback I had was about the development of the marque for the project. In my R&D file I hadn’t shown my full process of getting to the stage of the final marque, which meant that they thought that I had quickly settled on the first idea which is something we had discussed during tutorials. In order to ensure that they could see my development I decided to include more of the rough workings and sketching in order to show that the marque had developed much more than they first might have thought.

Marque Ideation 2

Promotional Installation

I also had feedback on the development of all the outcomes, they could have been developed further. One outcome in particular that I wanted to showcase better was the promotional installation. Originally I had used Adobe Dimensions to showcase how the idea would look, but it didn’t convey the idea as well as I hoped. As I had previously made cardboard models as part of my A Levels I thought that this would be a good way to showcase what I imagined. I created the exhibition space out of the cardboard and then photographed it to highlight how it would look. I thought that overall this was a better way of showcasing the idea. Through the model I was also able to showcase how the mirrored lines on the floor would act as way finding paths to help those visiting the exhibition navigate around the space.

However, upon reflection, I did some more ideation around the promotional installation. I had the idea that instead of having the screen on the floor why not have smaller billboards which people look into which puts them into the uniform. It would be like having free standing mirrors at the entrances to the exhibition. I did some research into the virtual artists that Sephora use within their stores. They have these screens in stores which allow you to see what you’d look like wearing different products of theirs. This similar to what I am proposing the promotional installation would be. Another campaign I came across was the Share a Smile Campaign by Grand Visual. They used facial recognition technology to get people to smile at the screen if they smiled it would dispense a can of coke. I hadn’t heard about this type of campaign before and it’s something different a good way to get people to interact with the product. Furthermore there have been other campaigns out there which have used AR technology to get people to interact with the brand. O2 goslings campaign used AR technology to place ducklings on the screen when people were near then and asked them to take the a selfie and share with the world. This shows how effective this type of technology is in getting interaction. I could see this type of technology working really well within the the context of my exhibition space.

I wanted to show how this could work in more detail, by creating a prototype of what the AR technology might look like. In order to showcase this idea I used Lens Studio which is a piece of software which allows you to create snapchat lenses. This is just a very basic idea behind it, it would be better put together if the exhibition were to be live. I used a cap which I already had at home to photograph it before taking into photoshop and creating a PNG file to import into the software. Using a face sprite I was able to position the cap as a 2D object onto the face. I haven’t used Lens Studio before which meant that I only had the basic understanding of the software, with more time I could create more complex outcomes. I think it’s a useful piece of software to know about because you never know when you might need to come up with something that involves mockup up AR technology.

Screenshot 2020-05-27 at 13.49.26

Once I had created the lens I was able to record somebody walking up to the camera like they would to the screen on the street. Due to the current climate I wasn’t able to attend the haze to film this clip, however, I was able to film it to show the basic principle of how it would work. Using a Digital mockup I was able to show how it would look in-situ.

Screenshot 2020-05-27 at 15.21.00

Animated Marque

Another piece of feedback that I had on the project was about the animated marque. Aesthetically the url that I had used as a touchpoint was too longer and seemed out of place when everything else was contained within this square shape. This was a smaller development to the project as I was able to go into the original file and edit this easily.

Screenshot 2020-05-06 at 15.52.08

References 

Rayome, A. (2018) How Sephora is leveraging Ar and AI to transform retail and help customers to buy cosmetics. Available at: https://www.techrepublic.com/article/how-sephora-is-leveraging-ar-and-ai-to-transform-retail-and-help-customers-buy-cosmetics/ (Accessed: 21 May 2020)

Grand Visual (2020) Share a Smile. Available at: https://grandvisual.com/work/coke-share-a-smile/(Accessed: 21 May 2020)

Grand Visual (2020). Advancements in Augmented Reality Technology: What to Expect for 2020. Available at: https://grandvisual.com/ar-technology-2020/ (Accessed: 21 May 2020)

On Display – Portfolio Pages

As part of the submission for the project I had to create 4 portfolio pages to show the logo, digital presence, wayfinding and the promotional installation. For this I took into account the design of the brand and used this as inspiration for the portfolio pages.

I didn’t want there to be too much text on the pages as I wanted the images of the work to speak for themselves. I used heading mainly to tell the viewer what’s on each page. With the promotional installation I had added a small description of what the installation does as the image requires one.

On all of the pages I have placed the type on the left hand side with the imagery of the work on the right hand side. I feel that this layout throughout the portfolio pages keeps them consistent, and the viewer of these pages isn’t always guessing where the type is going to be. 

Screen Shot 2019-11-06 at 18.31.36

Screen Shot 2019-11-06 at 18.31.38Screen Shot 2019-11-06 at 18.31.44Screen Shot 2019-11-06 at 18.31.45

In the portfolio pages I have shown everything that is required but also I have shown the RBG and CMYK colours & the typeface. I thought that these were important elements of the brand guidelines.

I have tried to keep the portfolio simple and matching the brand’s visual identity. Through should the work in context means that it’s easier to understand and doesn’t really require and explanation.

On Display – Further Developments

Following the group tutorial on Tuesday I have started to make some of the developments to the deliverables;

Posters

For the posters I decided that they both should have the type set in two columns rather than having the type set in one block across two columns of the grid system. By having this system on both posters means that there is a clear system when in comes to designing future poster. Furthermore, as suggested to me have also added the partners and sponsors that would be part of the exhibition.

Booklet

As for the exhibition booklet I have developed the back cover to show the social media handles where people can post pictures about the exhibition and find more information. They are placed at the bottom of the page to draw the viewers attention to them using the negative space to do so. I have also turned the page numbers back to the normal way rather than having them flipped. I decided to do this as I thought that some people might not understand why they are backwards if they don’t understand the concept of the mirror being used as part of the exhibition.

This slideshow requires JavaScript.

Wayfinding

I have developed the wayfinding system further by suggesting using mirrored lines around the exhibition space. This could also be used from main transport areas such as Cardiff central station or close by bus stops. The concept of mirrors has played a key part throughout the process of developing the brand. I think that the mirrored lines on the floor would gain peoples attention as they aren’t used to seeing them. It’s something intriguing with appeals to human nature.

As for the signs I have mocked these up in context to show that they can work. They could also be printed on the floor, maybe using vinyl stickers. These could work in conjunction with the mirror lines to show people the way to go in they aren’t sure on the lines.

This slideshow requires JavaScript.


References
Howling Pixel (2019) Cardiff Central railway station. Available at: https://howlingpixel.com/i-en/Cardiff_Central_railway_station.
Segrott, J. (2019) Cardiff Central. Available at: https://ro.wikipedia.org/wiki/Gara_Cardiff_Central
Freepik (2019) Billboard Bus Stop. Available at:<a href=”https://www.freepik.com/free-photos-vectors/mockup”>Mockup psd created by freepik – http://www.freepik.com</a&gt;
Rawpixel (2019) Signboard mockup at airport. Available at:<a href=”https://www.freepik.com/free-photos-vectors/poster”>Poster psd created by rawpixel.com – http://www.freepik.com</a&gt;

Website

As for the website I have developed it further slightly by adding a picture of the wayfinding system now it’s developed. I also have added more information to tell people how they can get to the exhibition. I looked at the legibility of the white type on the green background and found that it could be read easily so I decided that this was going to remain the same.


Reference
Freepik (2019) Laptop Mock up. Available at: <a href=”https://www.freepik.com/free-photos-vectors/mockup”>Mockup psd created by zlatko_plamenov – http://www.freepik.com</a&gt;

Promotional Installation

In order to show how the promotional installation works I decided to create and outline of a uniform then using silhouette show how this would work. I thought that this would be the best way to show how the installation would work. I also placed this in context to show how this installation could work in the exhibition space.

 

Animated Logo

I’ve developed the animated logo further by adding a new port of call for people to go to after they have seen the animation. For this I just added the web address that would be used for the website, this would allow people to gain more information about the exhibition. The animated logo could appear on social media ads to gain peoples interest.

Screen Shot 2019-11-06 at 14.17.33

On Display – Digital Presence

For another sense of digital presence I decided that creating a social media advert would be another great way for people to interact with exhibition. This would allow the exhibition to reach the wide range of people it’s aiming to attract. This advert could work  on various forms of social media from Twitter to Facebook to Instagram. I have mocked up the advert on an instagram platform at the moment.

Again I thought that the advert needed to use the same imagery that have been used across the entire exhibition to keep them consistent. On the social media ad I also thought that it was important to have a quotation so that people have a idea about what the exhibition is about. The designs are simple however, I think that they work really well and are in keeping with the branding.

I feel that the colour works really well it’s eye catching and would make people stop and look at it. Whereas the black and white image used the striking pattern in the corner which has been prominent throughout the entire exhibition branding.

Screen Shot 2019-11-04 at 12.25.15

Another thing that I could develop is this idea of using movement within the social media ad. People are more likely to stop scrolling through their social media and look at something that is moving. I could potentially add the animated logo marque to the instagram ad to try draw more people to the post.


 <a href=”https://www.freepik.com/free-photos-vectors/frame”>Frame vector created by freepik – http://www.freepik.com</a&gt;

On Display – Wayfinding/ Signage

For my wayfinding I have thought about different ideas about how this could be done. Following on for the lecture we had at the start of the year with David I learnt that a way finding systems should be based on human behaviour it shouldn’t make them think. During in some research I came across the way finding system at Underhub language school which was designed by Emil Dervish. This system used bright colours lines on the walls and floor for people to follow. This is something that I think could work well for the identically different exhibition because I could have mirror lines on the floor showing people where to go. Throughout my research signage used a lot of arrows to show people where to go and I thought that this is something that I could also develop.

I started sketching out initial ideas for wayfinding I thought about using a simple map, however, to create a map in the style of the exhibition would be difficult as I have mainly used photography rather than illustration. I moved forward and started to develop some variations in illustrator. I thought that using the letter I from the logo would be interesting by laying it on the side. This seems similar to the arrow however it is in keeping with the visual language of the exhibition.

As my ideas developed I thought about using an arrow inside the dot of the I might make it easier to read and understand however, on reflection I feel that this then meant that there was too much going on and people might get confused. I had a small chat with David who suggested I play around with adding the curve of the D to the create a present shape simply guiding people to the exhibition. I experimented with this and found that this was simple but worked really well. It also was in keeping with the visual identity of the brand. I also experimented with having a reflective material in the curve of the D to match the lines that might be on the floor throughout the exhibition. This is something that I need to have a further think about.


References
MidWest sign and screen printing (2019). The best examples of wayfinidng signage. Available at: https://www.midwestsign.com/blog/2019/06/12/the-best-examples-of-wayfinding-signage/ (Accessed: 28 October 2019)

On Display – Group tutorial 29/10/19

During the group tutorial I received some very useful feedback to help me push the designs and project further. I received the following feedback;

  • Think about legibility on screen, green screen on website with white text might be difficult to read.
  • Think maybe further about who would be sponsoring the exhibition or partners in it. Maybe think about would you need to add their logo to any posters.
  • Maybe consider making the posters similar to the website and booklet – might make them work together better.
  • Back page of booklet needs something maybe adding the social media handles or something maybe some stitching from one of the images. Looks like so much negative space right now.
  • On the end of the animated logo might be worth adding a trail to let the view know where they need to go next.
  • Wayfinding and Signage need to start to come together, like the initial ideas but need to start putting them into motion now. Likes the idea of way finding for translation and bus station.
  • Installation works well but need to create some sort of visual to show potentially how this would work.

From this feedback I can now start to develop the work further in time for the hand in date next week. I also need to start developing a second Digital presence as the web banner I created I felt doesn’t hold the brand values as well as I have hoped. I can now move forward and develop this further.

On Display – Exhibition space & promotional installation

As stated before for the promotional installation will be a large screen on the floor that reflects the sky above (like a mirror) and when people look into the screen, using augmented reality face tracking technology it places them in a uniform. So everyone who looks into the screen is identical but when they look up at the people around them they realise they are all different people.

This technology is really only in the basic stages at the moment however, its continuously developing. It is starting to be used more within different context now including social media and corporate products. The technology used feature points which are placed onto a face detected then track them to monitor movement. Imagine it like a snapchat filter over the face of the individual, however, it will be more realistic, like the work of image metrics who have developed AR technology that allows you to virtually try on glasses and makeup.

Through doing this bit of research has allowed me to have a better understanding about the technology needed for this installation. I’m not able to actually develop this technology myself therefore I will need to use other means of showing it.

Exhibition Space

In order show installation I decided that it would be interesting to show the exhibition space to so that people have a better understanding about it. Using Adobe Dimensions I was able to create this initial mock up for the space. Using an image on the Hayes from the Internet (referenced below) This allowed me to get an initial sense of what the space would look like. Ideally the installation would be placed either outside the library or St Davids Hall, where there would be more space to interact with it. The block would be made from a reflective material with the photography displayed on them for people to look around.

Exhibtion Design 2

I will now need to develop what the installation will look like and develop how the Identically different branding will work in the space. This is something I will do after the tutorial as I would like some thoughts about the initial mock of the space first.


References
Morozova, A. (2019) Commercial use cases of AR face recognition and face tracking. Available at: https://jasoren.com/commercial-use-cases-of-ar-face-recognition-and-facial-tracking-apps/ (Accessed: 28 October 2019)
Image Metrics (2019) Available at: http://image-metrics.com(Accessed: 28 October 2019)
Candy, J. (2012) Christmas Lights on The Hayes – Cardiff. [Online]. Available at: https://www.flickr.com/photos/joncandy/8203018113 (Accessed 28 October 2019)

On Display – Animated Logo

For the animated logo I wanted it to be simple something that wasn’t super complicated that could cause confusion. Animating the iD marque I felt had to include this idea of mirroring as that is something that we see throughout the exhibition even the initial  inspiration for the work by Devin Mitchell.

I started off by sketching some frames for the animation to help me start thinking of how I could effectively show the idea of mirrors. I thought about reflecting the logo but in the end I decided that maybe using drawn lines that mirror each other would be better.

IMG_6161

To do this I used a trim paths on the outlines of each of the letters. This allowed me to create the sense of the marque being drawn onto the screen. As both of the letters contained straight edges I thought that if these were drawn at the same time it would create the impression that its being mirrors identical to start until the ‘D’ start to curve then they are different.

Initially this didn’t look quite right as the ‘I’ is smaller than the D it didn’t look as though it was mirroring each other. So I decided to play around with the scale of the ‘I’ where I came up with the idea of scaling the ‘I’ down gradually. So that it starts the same size as the D (mirroring effect) then changes so that the marque is recognisable. Once the marque is drawn the words ‘identically different’ appear underneath the marque as they have been presented before.

 

On Display – Website Design

To start off on the website design I looked at some websites and evaluated what worked well about each other them, this would help me when developing my own website for the exhibition.

Firstly I looked at Tate website to try get a sense of how a place that gets a lot of exhibitions promotes them online. When you first go to the website you get to the landing page, the branding is clear at the top of the page with a menu across the top of different elements that the Tate has to offer. Have a clear menu of whats on the website I think is key and was something that all the websites I looked at had in common. This is something that I will definitely need on the website.

I also looked at Visit Cardiff Website as my exhibition would be initial based in Cardiff I thought that it could potentially be advertised further here. This website feels very corporate which I will do as it’s council run. Again, I thought that use of the menu at the top of the landing page was very important to the use of the website. I particularly liked the use of imagery as which you can click on to access certain events in the city. This is element that I’m not sure would work well on my own website but is an element to consider.

Furthermore, I decided to look at visit Wales for reason similar to why I looked at Visit Cardiff. This website again used the key feature seen on all the other pages however, one element that caught my eye was the option to select a language for example English to Welsh. This is something that I could incorporate into my own website as it will be held in Wales to start of with.

From my research then I started to to sketch out some ideas for the website, I felt that the website needed to be a similar style to the booklet so I used the same colour scheme and imagery as the booklet. I created the website in Adobe XD as I wanted to be able to show and see what the website would look like when working. I included a main menu that ran across the top of the page in the three accent colours of the brand.

IMG_6164

I decided to go with three sections in the menu which were; about, get in touch & find us. This would allow me to also display wayfinding and other place of digital presence on the website. At the moment I think that the website is starting to come together slowly but I also think there might be other elements that could be improved. I want to show this to my peers at the next group tutorial to gain some feedback and some ideas to push it further.

Screen Shot 2019-10-30 at 10.53.51

 


References
Tate. (2019) Available at: https://www.tate.org.uk (Accessed: 26 October 2019)
Visit Cardiff. (2019) Available at: https://www.visitcardiff.com (Accessed: 26 October 2019)
Visit Wales. (2019) Cardiff. Available at: https://www.visitwales.com/destinations/south-wales/cardiff (Accessed: 26 October 2019)

On Display – Booklet Development

For the booklet I decided I wanted it to be small easy for the people visiting to hold while going around the exhibition. I decided that A5 was a reasonable size to make the booklet small enough to carry about big enough for people to read. I felt that making it to small would mean that some members of the target audience wouldn’t be able to read it, because the exhibition is going to be public it will attract a different array of people.

I wanted to the exhibition booklet to also match the poster designs that I had created so I thought about using the small imagery so that the brand was consistant across all printed emphera. Instead of just using the images as they were I felt that using the three accent colours are duotones over the images would be different but still be easily recognisable as a the brand.

I decided that the cover of the booklet would be black and white to show that we initial think we know everything bout somebody because of their uniform, we think it’s all black and white. The when you open up booklet you are faced with bright colours which shows that we never know the personality in the uniform. I think that this is a simple but effective way of getting the meaning across to the audience.

This slideshow requires JavaScript.

Using InDesign I created these spreads for the booklets, using the visual language I created for the brand. The booklet uses a a 3 column grid system with guttering of 6mm, this allows all the text to be displayed correctly while still allowing the images to breathe. The page numbers are reversed to mimic the brand’s marque and to reiterate the use of mirrors.

Create your website with WordPress.com
Get started