Studio Practice: OUGD504 (SB2)

Showing posts with label OUGD504 (SB2). Show all posts

Thursday, 28 November 2019

(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/

Wednesday, 27 November 2019

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.

Monday, 25 November 2019

(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

Html

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

Css (style sheet)

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

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

Sunday, 24 November 2019

(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•

(SB2) CONCEPTUAL RESEARCH

HONG KONG'S ANTI-EXTRADITION PROTEST

The situation right now in Hong Kong is worse than you can ever imagined. I have been looking at news and keeping in track of what is happening in Hong Kong. Seeing my hometown being destroyed by its own people is just so depressing and wrathful.

BACKGROUND

The Extradition Bill

The bill will path a way for unjust and dubious treatment of people in Hong Kong. Anyone can be arrested and brought to trial by the Chinese government. Unlike the Basic Law and the still-standing judiciary in Hong Kong, the Chinese judicial system lacks independence and recognition of human rights. The arrested are under no protection and could be subject to unfair trial and mistreatment under China’s judicial system.

Article from BBC

The extradition bill which triggered the first protest was introduced in April. It would have allowed for criminal suspects to be extradited to mainland China under certain circumstances.

Opponents said this risked exposing Hong Kongers to unfair trials and violent treatment. They also argued the bill would give China greater influence over Hong Kong and could be used to target activists and journalists.

Hundreds of thousands of people took to the streets. After weeks of protests, leader Carrie Lam eventually said the bill would be suspended indefinitely.

How did the protests escalate?

Protesters feared the bill could be revived, so demonstrations continued, calling for it to be withdrawn completely.

By then clashes between police and protesters had become more frequent and violent.

In July, protesters stormed parliament, defacing parts of it. In August, one protester was injured in the eye, leading to demonstrators wearing red-coloured eye patches to show their solidarity.

Protest action at Hong Kong international airport in August also saw renewed clashes and led to hundreds of flights being cancelled.

In September, the bill was finally withdrawn, but protesters said this was "too little, too late".

Demonstrations continued, marked by an increasing level of violence.

On 1 October, while China was celebrating 70 years of Communist Party rule, Hong Kong experienced one of its most "violent and chaotic days".

An 18-year-old was shot in the chest with a live bullet as protesters fought officers with poles, petrol bombs and other projectiles.

The government in response banned protesters wearing face masks - a ban that many activists continue to defy.

In early November, a pro-Beijing lawmaker was stabbed in the street by a man pretending to be a supporter.

One week later, a policeman shot one protester at close range when activists were trying to set up a road block and later that day another man was set on fire by anti-government protesters. Both had to be treated in hospital.

What do the protesters want?

Some protesters have adopted the motto: "Five demands, not one less!" These are:

For the protests not to be characterised as a "riot"
Amnesty for arrested protesters
An independent inquiry into alleged police brutality
Implementation of complete universal suffrage

The fifth demand, the withdrawal of the bill, has already been met.

Some also want the resignation of Carrie Lam, whom they view as Beijing's puppet.

Protests supporting the Hong Kong movement have spread across the globe, with rallies taking place in the UK, France, US, Canada and Australia.

In many cases, people supporting the demonstrators were confronted by pro-Beijing rallies.

Chinese president Xi Jinping has warned against separatism, saying any attempt to divide China would end in "bodies smashed and bones ground to powder".

What is Hong Kong's status?

Hong Kong is a former British colony handed back to China in 1997.

It has its own judiciary and a separate legal system from mainland China. Those rights include freedom of assembly and freedom of speech.

But those freedoms - the Basic Law - expire in 2047 and it is not clear what Hong's status will then be.

BEFORE AND AFTER
BEFORE AND AFTER DEMONSTRATIONS AND STRIKES

VIOLENCE USED THROUGHOUT THE MOVEMENT HAVE DESTROYED PUBLIC INFRASTRUCTURE AND PLACES IN HONG KONG

Friday, 22 November 2019

PRE SUBMISSION BREIFING

A3 FOLDER:
- publication
- submission label

BLOG
- end of module evaluation
- final outcome (website)

Submission requirements

• Studio Brief 01: Design for Print Submission requirements:

Blog – PDF uploaded to estudio via dropbox.
Design Boards – PDF uploaded to estudio via dropbox.
Final Outcome: Printed Publication physical hand in, A3 folder.

• Studio Brief 02: Design for Screen. Submission requirements:

Blog – PDF uploaded to studio via dropbox.
Design Boards – PDF uploaded to studio via dropbox.
Final Outcome: Digital outcome evidenced on blog.

Submission label, found on estudio. Printed and submitted in A3 folder.
End of module evaluation for module as a whole. Evidenced on your blog

Wednesday, 20 November 2019

(SB2) AFTER EFFECT (GIF MAKING)

CONCEPT

After all of the previous attempts, I came up with the idea of using GIFS as the main communication element. The idea behind making these GIFS is that the nature of GIFS is a looping cycle. This ties with the typesetting concept of my publication - looping.

GIF OF DIFFERENT ONLINE NEWS SCREENSHOTS

TEAR GAS GIF

SMILEY FACES REPLACING POLICE FACES
concept: robots, all being manipulated

IMAGES OF FIGHTS BETWEEN PROTESTERS AND COPS

FIRST PAGE LOADING GIF

I feel like this would be the strongest concept of the brief, using GIFS as a communication method of the whole looping concept behind.

Monday, 18 November 2019

(SB2) ATTEMPT 3, 4 (CODING)

After the second attempt, I decided to create a similar version with more interactions with the users. I added a table in the middle for people to interact with. They are linked to different websites related to the protest.





I also tried linking the html to google font and changed the background into a full image. Linking google font allows the text on the website using more varieties of different fonts. This is a completely different layout from the first one. Compared to the first version, I think that this version has less interaction and less justification.

<!DOCTYPE html>

<html>
<head>
<title>Stand with Hong Kong</title>
    
     <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:700|Noto+Sans+TC&display=swap" rel="stylesheet">
    
    <style>
        head {color: white}
        
        body {background-image: url("picture/002.jpg");
            background-size: cover;
              font-family: 'Noto Sans TC', sans-serif;
              color: white}
        img {width: 512px;
             height: 341px;
            margin-left: 600px}

        table, th, td {
                        margin-top: 200px;
                        border: 1px solid yellow;
                        border-collapse: collapse;
                        }
                th, td {
                        padding: 10px;
                        text-align: center;
                        color: yellow;
                       
                        }
        h1{
            color: yellow;
            text-align: center;
            #text-decoration: underline;
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 150px;
            margin: -5px;
        }
        
         marquee{
            font-family: 'IBM Plex Mono', monospace;
            font-size: 40pt;
            color: #ffffff;
            height: 70px;
            padding-top: 40px;
            #scrollamount = "15";
            direction = "right";
        }
        
    </style>
    

</head>


<body>
    

<marquee>On a sweltering afternoon in August, antigovernment protesters in gas masks and hard hats flooded a six-lane road, prompting riot police officers to fire tear gas. But life on that Hong Kong street continued after the clashes faded, even as the neighborhood became the focus of further unrest.</marquee>

<a href="001.html">
    <h1>香港加油</h1>
</a>

    <table style="width:100%">
  <tr>
    <th>+852 Before-and-After</th>
    <th>Stand with Hong Kong</th>
    <th>Fight for freedom</th>
  </tr>

</table>
    
<marquee>On a sweltering afternoon in August, antigovernment protesters in gas masks and hard hats flooded a six-lane road, prompting riot police officers to fire tear gas. But life on that Hong Kong street continued after the clashes faded, even as the neighborhood became the focus of further unrest.</marquee>

</body>
</html>

ATTEMPT 4

This is the second one I did today. I changed the background into another image which is before the protest. This communicates the idea of before protest, and when people click onto the three options on the table, it will bring them to different websites thats about the after images and incidents of the protest.

DESIGN BOARDS BRIEFING

RATIONALE

Froms
Why this brief
Critical engagement

RESEARCH

Conducted
Methods

INITIAL IDEAS

Sketches
Tests
Mind maps
in response to your brief, not initial ideas for the brief

DEVELOPMENT

Experimentation —> explore a range of your initial ideas
Iterations of the same ideas
Aim of development —> what were you trying to achieve
If ideas changes significantly, evidence this on development pages
Evaluate process

FINAL OUTCOME

Evaluating development
Refinement
Photographed well and clearly communicates ideas
SB2: mock-ups, prototypes

EVALUATION

Reflect on brief (what worked, what didn’t) (1 n 2 separately)
Potential and limitations of production methods
Evaluate against learning outcomes

TOP TIPS

Use images with captions - evidence your process
Evaluating points: Why? The results of this?
Say it how it is - what happened / don't brush past mistakes - evaluate what happened and how you solved it
Story - linear narrative
Edit: to clearly communicate process. If there is a paragraph of text, make key points clear (bold?). Make process as concise as possible.
Framework: evidencing how you have met each learning outcome.

Studio Practice