[COLLAB1] IDEAS + FIRST BRAINSTORM WITH SONJA

INITIAL IDEAS 

- branding: bring together young creatives 

- train windows 

During the Christmas holiday, Sonja and I were both in Hong Kong and we talked about how I wanted to collaborate with her and this has been what we have been longing for to do since we where in high school. We thought that this would be a really good opportunity to start out our plan and work on something that we both are interested in, something personal. We briefly talked about what we wanted to do on the train journey from Leeds to Manchester when we were hading back to Hong Kong. Both of us were interested in the reflections on the window and how it could actually be portrayed as the double exposure function on film cameras. 

Train windows, double exposure as starting point. 

TRAIN WINDOWS 

common characteristics of train windows pictures: 

- 2 layered images 

- usually one still, one moving 

- two different locations, usually one indoor, one outdoor 

- one dark, one bright 

ideas that always come with train windows:

- homesick 

- loneliness

- me-time 

- unstable, unsettled 

TRAIN JOURNEYS

- long and boring 

- relaxing 

- isolating 

- suffocating 

However, due to location and time constraints, we have to communicate through WhatsApp. Both of us are really busy these days, therefore, we kept on sending exchanging mindmaps and adding notes onto each others' in order to brainstorm what was in our minds.

Both of us thought that the idea of having two different locations is a really good point to be pushed further. And how train windows reflects shadows can be interpreted as "home is where the heart is". It can also be interpreted as never being able to settle, always floating around and looking for a place where we can call "home". 

Both of us can relate to the ideas really strongly as we are  studying abroad, in a place which is half the globe away from home.  

BEST KEPT SECRETS

Han and I have chosen (left out/ isolation) as the theme of the brief. 

FEELING LEFT OUT 
http://socialpsychonline.com/2015/11/psychology-ostracism-feeling-excluded/  

• ostracized
• being excluded 
• a reduced sense of general belongingness after experiencing rejection
• achieving a sense of social belonging is a fundamental psychological need
• reduce self-esteem, a sense of control, and a sense of having a meaningful existence 

KEY WORDS

• ådead 
• fragile 
• harsh 
• glass-heart 玻璃心

MONTY KAPLAN

• subjective anthropological exploration of the world
• eclectic nature
• harsh flash 

• eclectic and prolific and unfocused

1ST ATTEMPT
I suggested to use typography and shapes to convey the idea of isolation. I feel like the diversity of shapes and typography would be both abstract and the most straight forward way to communicate the idea.

Han then added images on the background to make the designs less dull. 

OUGD503 BRIEFING

• 20 credit 
• collaboration with someone not from second year graphic design 
• collaboration of research and ideas which allows us to reach final outcome, not necessarily working tgt int he final outcome 
• work together 
• well developed and effective response 
• 3 week-long collaborative projects (with someone in class)
• dun have to be a consistent collaboration 
• have to work with someone throughout the brief (anyone) 

• is it smth that you want to do? can you see yourself doing in the future? 
• how to make it interesting to you?
• what I want to do? as a leading role 

BRIEFS

Elmwood (coming in next Monday) 

• branding future technologies 

Next Monday 

• collaboration with BA Photography 
• themes and format of fact/ fiction 

D&AD (branding)

• BBC
• nikeplus 
• penguin 
• Connect4climate 
• the Case for Her 
• Hoffmitz Milken 

ISTD (typography)

YCN (rebrand) 

• HMV
• the guardian 
• Camden Town 

Insert here__

SUBMISSION 

• sketchbooks, blogs, notebooks 
• physical outcomes  
• portfolio (digital/ printed)

--> presenting your outcomes 

--> my book (how are you gonna improve it) 

--> screen based design 

--> responses to brief of the week 

--> your main responsive projects 

• written evaluation (500 words) 

LEARNING OUTCOMES 

• research into and understanding of relevant issues and designers 
• lots of research methods (talking to ppl, visiting somewhere, watching smth)
• how you're researching? what's the most appropriate methods of research 
• ambitious, appropriate and interesting responses 
• professionalism 
• understand key problems and consider the implications of the work (analysing the briefs), generate smth that is relevant to your brief 
• understand the project's context, show good time management, self-motivation
• interpersonal skills, make a network, find people to collaborate with 

TASK
BEST KEPT SECRET 

• being left out in flat/ Leeds (cultural difference) 
• sleep paralysed 
• how UK people wash dishes are weird (dip dishes into soap water and wipe soap off with a towel = cleaned) 

HOW DO WE COMMUNICATE THE IDEA?

• colours --> red, blue
• (person being left out) --> purple (flatmates) 
• typesetting 
• photography (a person standing in front of the house with all lights on) 

--> images with background noises (partying noise) 
--> make it really creepy, horrifying = the scary feeling of being left out 

(SB2) UPLOADING TO GITHUB

After looking at the brief on estudio, I saw GitHub is on the reference page and it is actually a website for structuring my website that is suggested by the tutors. It is really useful for me as this is the first time I code and I did not know where I can actually make my website into a real one that is interactive. 

I uploaded the coding sheet onto GitHub. It did not work at the first place and I tried it again, uploading it page by page and at last it worked. 

It has become a real website. Users' can now insert the website address into their domain and that they can now interact with my design. 

https://kcmmman.github.io/standwithhk/ 

(SB1) FINAL OUTCOME MAKING

I printed two copies of the concertina.

For the first copy, I tried using the creaser in the digital print room, it did not work properly as the creases were too thick and the creaser in the print room is slightly offset. Therefore, I decided to try put it aside and try folding the pages on another copy.

For the second copy, I tried scoring the pages with a cutter. it kind of worked, turned out really clean, but still not perfect.

I then stuck the pages together with the tabs overlapping the third pages, I tried to align the words and it was quite successful.
On the other hand, the final product did not turn out looking like a concertina at all. All of the pages were shifted to the left.

I was so disappointed. I spent so much time worrying about the printing outcome and tried my best to fix the document and get prepared for printing. But then it still did not turn out perfectly. The 'concertina' did not even fit into the box and everything failed.

CONCLUSION
- when alignments of the text are accurate, the pages are shifted.
- when pages are aligned well, the alignments are shifted.

FINAL EXECUTION
As this brief emphasises on the production method, I decided to give up the content accuracy.

I therefore decided to in order make the book at least looks like a concertina, I gave up the alignments of text. I used the first copy (which is being creased not properly) and tried making it again, despite all the wrongly creased marks. It then turned out to finally looking like concertina, however, the users will not be able to read the text properly. It can then finally be placed inside the box properly.

END OF MODULE EVALUATION

In terms of my practical work, I think that making a book is really time consuming. Everything has to be set up accurately for the printing part and I know that I am not familiar enough with the preparation process. I will have to practise more and try making more designs for print in the future to get prepared for my future career. 

Compared to last year, I am actually really disappointed with my time management skills. Last year, managing time well and planning out everything was my way of distressing. I used to write down my schedule everything and a to-do-list every week to keep my work on track. However, I tend to be less strict to myself. Maybe due to the fact that I was stuck with my ideas, I tend to procrastinate and deal with everything at the last minute. 

Hopefully, I would be able to improve my time management skills and do what did I last year, planning everything out. For the next brief, I aim to be hard working as last year and finish off everything at least tow days before the deadline. 

Also, I feel like I have been to shy. I am just too scared to ask people for help. However, I realised that actually if I try to tell people my issue that I am dealing with, people will actually help me and give me useful advice. There is no need for me to be afraid of asking as tutors, technicians, professors are here in uni to help us and give us advice for us to improve. Therefore, I really hope that I can be more daring to talk to people and ask people for help. 

(SB2) BOX TEMPLATE (PRINT)

As I do not want the book to look like a sandwich, I decided to make a box template for tomorrows printing session. The box to going to hold the publication. 

1ST ATTEMPT

2ND ATTEMPT

(SB1) FINAL PREP FOR PRINTING

The printing process is definitely not the best choice. I knew that the digital printing service from our uni does not support printing a 13 A5 pages concertina. I was going to buy a long piece of paper myself fro printing my publication out in the right size so that I wouldn’t have to cut it into half and sticking them together. However, I realised that even if I got the long paper, they also don’t support printing the concertina because the maximum length that they could print is 1.3m which is shorter than my whole book. I also tried to look at printing companies if they could print a long concertina, most of them only do mass production and the prices are out of my budget. I even tried asking my Leeds Uni design friends if they could give a hand, it ended up not successful as they also do not support printing a long concertina. 

On the printing day, as James was not in, I told Steve about the problem I am having and he offered help. He asked me to go meet him the dayafter at the comuputer resource room and we can get it sorted together. He also helped me to book digital print again so that I can print the final outcome before the dealine. I am actually so thankful that he was being so nicely and helpful. Steve showed me the best possible way to make the concertina and it was so complicated. 

I then came in to find Steve today to get the printing document sorted. We figured it out at the Mac suites and it was so mind blowing for me. Steve suggested the best possible way to recreate the document. He created a SRA3 and tried putting a few pages of my concertina on to see how many pages can it actually fit in. It turned out, after adding the bleed, it can only fit in two pages on each SRA3 paper.

He then created two A-masters. One for the fronts and one for the backs. For the front pages, he added a tab on the right spread and for the back pages, he attached it on the left spread. The tabs are going to be used to stick it to the next page so that the glue or the glue or the tape will not be visible. However, as the tab is going to be overlapping the front pages, we have to actually use a tiny part of the next page as the tab so that it will not be covering up the words on the next page. This part is actually so complicated to make as we have to measure the bleed as well. 

In the end, we nailed it. The document is print-ready for tomorrow. 

(SB2) FURTHER DEVELOPMENT

umbrella --> signature of protesters 

protesting = processing= loading --> ongoing event, movement  

13 frames of letters 

umbrella stopped rotating as it won't lies at the same place as the beginning if there is 13 frames for the umbrella 

blue background 
different news about the Hong Kong protests 
international news 
text --> a short summary of the ongoing protest
upper right corner has the umbrella logo rotating to maintain consistency 
red to yellow after clicking into the link 
yellow represents the protesters' side 

meant to be blue, changed it into green to represent green object 
meant to be using angry faces, however I realised that it is not true 
sarcasm smiley faces to represent police when they were firing bullets at the protesters 
smiley faces popping out one by one = robots, all the same, manipulated police 
FUCK THE POPO = speaking out fro majority of Hong Kong citizens 
= way of venting the rage among Hong Kong citizens 

tear gas looping, repeating 

Hong Kong police force had fired more than 9000 rounds of tear gas since June. 

exploded tear gas 

summarising the whole protest with tear gas pictures and protesters fighting back 

the last page is linked to the "Condemn HK Police for Excessive Force against Citizens & Call for Independent Inquiry" poll which encourages people to vote for Hong Kong protesters 

(SB2) PRACTICAL RESEARCH

CODING 

Three different coding methods 

1. Html

• Structure content (text and images display) 
• base of the website (building block) 

2. Css (style sheet) 

• adding colour cascading style sheet
• Text styles, table sizes, colours, padding around images  
• Basically controlling the style

3. Java script 

• make it interactive to the audience 

PROCESS

<!DOCTYPE html> —> to signal your document 

<html> —> start 

</html> —> end 

<head> 

<body> 

<h1> —> heading 

<p> —> paragraph 

<div> —> divide 

<pre> —> make your own typesetting 

<a> —> link 

AFTER EFFECTS (GIF MAKING) 

Basics learnt from After Effects workshop 

• Keyframes 
• Change speed and directions 
• Rotate 

(SB2) CONTEXTUAL RESEARCH

 EXISTING NAVIGATION APP  

• The app is designed for a broad audience. 

GOALS:

• Exploration tool that helps users learn about things happening nearby 
• Allow users to create their own events
• Provide convenient and friendly application behaviour
• Allow users to create and configure areas on the map to prioritise events that are interesting to them specifically 

MT THOUGHTS 

• This is actually my first time looking at UX/UI designs. I realised that most of them are very user friendly which they tried to put themselves into users’ shoes in order to create a design which provides the best users’ experience. In order to achieve this, they tend to focus on the usability of the app and make the app easy to use, with simple and obvious buttons. 
• Many of the apps also applied some elements to make the app applicable to each different users. This way of personalising each download from different users is really smart. They can also create a community of their users and update their app based on the data collected form the users’ behaviour. 

NET ART ANTHOLOGY

AESTHETIC 

• aims to address the shortage of historical perspectives on a field in which even the most prominent artworks are often inaccessible
• The website showcases a lot of different net art sites created by different artists, they put up random stuff on the sites using the net art aesthetic 

ELEMENTS 

• GIFs
• The background changes colour when I hover my mouse around 
• Underlined titles 

MY THOUGHTS 

• I would really want to try out this style for brief2. I realised that they use a lot of GIFs when creating net art. GIF would be a really good element for my website as it represents the idea of looping. 
• In the past, net art did not even exist. They are normal websites that people used to provide information online. However, nowadays, it became a particular design style which is old-school and strongly aesthetic based. People are trying to imitate the style and trying to convert different contemporary designs into the from of net art. I think that this would be a really good way to link to the theme of nostalgia, using an old school way to communicate a contemporary idea or an ongoing event. This way of communication through the aesthetic make audiences reminisce about the past, which I thought would be applicable to my project. 

HISTORY OF NET ART

• Net art is an elusive and sometimes anarchic art form which uses the Internet as its primary material. Net art works often draw on data from other Internet materials and websites, which helps give them their distinctive dynamics and transience.
• historical term for early net art, which can be dated to having run roughly from 1993/94 to the early 00s.
• We can recognise a clear code aesthetic, where the use of faults, or so-called ‘glitches’, act as a methodical conceit in net art.
• That net art can be linked to physical space, some create works that activated both physical and digital online space in a process where one supported the other.
• e.g. Antonio Muntada’s The File Room (1994) 
  
• temporary physical installation and an open-ended online database that contain records of past cases of censorship around the world.

SEE PALA

Aldous Massie•

Follow