Graphics Design 3 Part 2

Graphics Design 3 Part 2


Learning Outcome

Knowledge

1. Demonstrate critical, evaluative and making skills using a number of specialist media and process
2. Reflect critical upon one's own practice and utilize self-editing skills within the design process
3. Work with external agencies and other interested bodies to creative outcomes

Thinking Skills

1. Apply research using theorists, designers, culture historians; use and apply these references where relevant and appropriate to the assignment or module outcomes
2. Demonstrate the use of methodologies and project management skills within the design process

Subject-based practical skills

1. Design Process; demonstrate the capacity to work with a number of process especially typography and all related or associated disciplines of information layout and sequential practice/pagination
2. Work on screen and paper-based formats which have synergy and visual coherence.

Skills for life and work (general skills)

1. Communicate successfully, strategic and critical abilities to peer group and other, including clients and project leaders
2. To participate or collaborate effectiveness with other
3. Construct and implement a realistic timetable of research leading to a creative set of outcomes

Idea Generation (Graphics Design 3 Part 2)

Initial idea development based on Thesis is an application on the mobile that is similar to instagram but with a few features that differentiate between both.

(reference - instagram)

The idea runs on the focus on making the audience/users to interact with people while using their mobile devices instead of being alone or staying in one place.

Using mechanics similar to games where the player is given an objective to complete or achieve the objectives given are more focus on human interaction with each other. For example:

"Hanging out with friends"

"Spending time with mom"

"Outdoor activities with someone special"

Each of these objectives are given 23 hours to complete upon release and the 1 hour is to compile the submission by the users to select the winner, 1st runner up and 2nd runner up of the day. How the objectives is perceived is entirely up the user to interpret. The focus here is to let the users determine what they think is the appropriate answer to the objective using their creativity and knowledge of their own. There is no right and wrong just how would the user answer to the objective, this also emphasis on the creativity of the users on how do they create a great photo that completes the objectives.

For example: "Staying healthy" is the objective, the users will have to take a picture that they think fits the objective description in their own context as creatively as possible. It could be a picture of the user jogging in a park, or working out in a gym or with some friends, playing some ball games and etc.

Project Gantt Chart

Typography Research (Graphic Design 3 Part 2)

Because the final project will be using lots of typography an understanding of typography must be done.

What is Typography?

It is a visual component that is compose of written word that conveys a message to viewers which makes it a very important aspect to select/use a proper and suitable typeface (the form of the typography). Typography has changed throughout the times when it used to be on metal plates rather than a drop-down menu with funny names. While the methods of using typography has changed in a big way the process of selecting one has never improve much, it is still difficult and complicated as the old days.

There are many types of font typefaces from Old English, Blackletter to Arial and Lucida but the main point of typography is 4 basic categories:

• Serif: have the little dash or hook at the end of each alphabet, they are used for more traditional or more formal stuff.

 

• San Serif: the opposite of Serif, San Serif (No-Serif), where there are none of the hook or dash at the end of the alphabet. Because of this the typeface is often understood as modern looking and streamlined from Serif. However it can be debated that Serif in a long paragraph text is easier to navigate and easier to read but the nature of Serif's alphabet is thin and small it is harder to see when displayed on a pixel based screens therefore web-designers like to use San-Serif for web based contents especially when dealing with small texts.

• Scripts: are handwriting looking typefaces often with connecting lines. There are often fun looking and very hand drawn rather than digitally made. 

• Decorative/Display: these typefaces are of one purpose to entertain or to look fancy but they serve the same function as any other typefaces does. As the name 'decorative' implies these typefaces main objective is to get attention and should only be used in small portions as they are more unique than practical.

Source: https://designschool.canva.com/font-design/

Why Typography is important?

Fig.1: Two different typography, source from: http://practicaltypography.com/what-is-typography.html

The above image is two different typography on a signboard. While it written with the same context the delivery is very different for both typography that is because the art style. Typography is an art as much as photography is an art, typography and photography is different in their form of artwork but they both the same in form of functionality. 

Typography in Motion

Choosing a typography that works well in motion is very important when the page or artwork that you are viewing is dynamic and moving. Due to the project that currently working on, a typeface that works well in motion is a much because the audience will be looking at the typeface on a mobile phone with dynamic and interactive functionalities.

One key feature of typography in motion is the legibility, the ability for readers to understand and comprehend the message in the written form. Good typography leads the viewers in the direction that they were suppose to be, bad typography makes viewers go lost in transition. Many factors are taken in to make a good typography, typeface, font size, colours and spacing are all part of the equation to a good typography. 

An example of a good typography in motion also known as  (Kinetic Typography)

Project Name (Graphic Design 3 Part 2)

1. ShareADay
2. Take A Pic
3. PostIt
4. Whats Your Day
5. 1 Pic 1 Day (IPID)
6. CreateAPic
7. ShareAPic
8. PhotoDay
9. Sharestgram
10. PhotoPict

Project Sketch (Graphic Design 3 Part 2)

The project is an application with multiple pages of functionality Home where the users sees the objective of the day and the time remaining to completion, Gallery where users can see the pictures that other users has submitted and double tap to like the picture (like a vote) if the picture is what the user thinks is creative with the objective. Camera where the users will use to snap a picture to answer the objective. Friend a page that connects to social media like Facebook to see the friends who are playing and whether they have submitted a photo or not and what kind of photo they have submitted. Trophy a page that records the numbers of wins, 1st runner up and 2nd runner up that the user has collected from the beginning to the current time (kinda like a trophy room but digitally)

The image below are the navigation of the app from a page to another

Image 1

Here are the AI versions of the navigation:

This is the 5 main pages and the paths, each page is interconnecting

Navigation 1

Each of the pages can go forth and back using the layout at the bottom 

Navigation 2

In Navigation 1 all the other pages are connected with the Home page here each of the other pages can move to the other as well with the exception of the Camera page. The other pages can access the Camera page but from the Camera page the user can only go back to Home. 

Navigation 3

Continued from the previous statement 

Project Name (Revised) (Graphic Design 3 Part 2)

After a brief discussion with the module leader the name of the project 1 Pic 1 Day (IPID) has that acronym word 'IPID' which can be used as a catchphrase like Twitter 'tweet'. Therefore the module leader asked me to explore more on that:

1. 1 Pic 1 Day (I.P.I.D)
2. Snap A Pic (SN.A.P)
3. Photo of the Day (P.O.D)
4. I.SNAP
5. Be A Camera (B.CAM)
6. Picture Book (POOK)
7. My Pic (My.PIC)
8. Photo Tag (PhoTag)
9. Design Me (Deme)
10. Create a Photo (CAP)

Logo Creation (Graphics Design 3 Part 2)

In collaboration with APP (Advanced Professional Practice) the logo creation is supervised by the module leader of Graphic Design 3. Here are the process of creation of the logo from the finalized version to the experimentation.

This is the finalized design of the logo and scaling of 100% - 70% - 50%

A few experimentation on the design is done to test the visibility of the design and changing of colours to test the results.

After a few test on different coloured background it appears that dark colour background does not go well with the current colour scheme of the logo.

The module leader suggested to change the colours in the circles to find a fix and after some time of thinking I decided to change the colour to grey.

Here the design is much more clear when put on a dark background. Another suggestion where received where I was asked to change the lines from black to white to see the difference.

While making the design another lecturer try suggesting that to remove the white circles as an experiment.

This are the few steps of experimentation done throughout the logo creation process


Title Finalize Project (Graphic Design 3 Part 2)

1. Jom Lepak
2. Room Out
3. Lepakgram
4. Hang Room

Final = Jom Lepak

New Project Procedure (Graphic Design 3 Part 2)

After a long period of discussion the project was changed, remade and tweaked. Now it has finalized with the module leaders, the image below shows the procedure of the project from the beginning till the end.

New Wireframe (Graphic Design 3 Part 2)

This is a draft version of the wire frame for the project 'Jom Lepak'. 

Design Frame (Graphic Design 3 Part 2)

This is a design frame based on the the previous wireframe done only this time the draft design on the pages, page by page with explanation at the sides. Logo and typography is not finalized.

Infographic Design (Graphic Design 3 Part 2)

After some time and finalizing the design and with the production of the motion graphic in progress, infographic design and finalized and ready to print and set up.

Motion Graphic Jom Lepak (Graphic Design 3 Part 2)

After a long time editing and discussion with the module leader with the alignment, typefaces, positioning, colours and interface. Once the motion is done, voice over is inserted with music.

Motion Graphic (Graphic Design 3 Part 2)

This is the final version of the motion graphics after music and voice over are inserted.

Review (Graphic Design 3 Part 2)

Throughout the entire course I have learn much but none which compares with the knowledge I got from this module "Graphics Design 3". While many has been said in the past this time, I learn more in details on layout, typography and aspect. 

In the beginning there were hiccups where misunderstandings and miscommunication create a rift between Part 1 and Part 2 where the project seems like it's not progressing and we are starting out late. Progress did not really move forward until Week 6 or 7. However that was the time where the exhibition progress kicks off and we were even more busy than before. It was lucky that the suggestion that I proposed to the module leader to include Part 1 students into the exhibition that way Part 2 could have some breathing space although there is only 1 student who is helping along the way out of 5. 

In between week 4 - 6, I put a halt to progression on Graphic Design project as well as Animation due to the rushing of the exhibition layout, logo, t-shirt design, bunting stand and others. It took sometime but I finally did finish everything within 3 weeks and I could continue with Graphic Design 3 project. With not many weeks left I had to do thing is a more easy way as a result I created the infographic for the project by accident. The initial of that visual image is to give the module leader a better understanding of the project which didn't had a name yet which is an application that focuses on smartphone users mainly teenagers to socialize more rather than staying at home without leaving their phone. The module leader sees the image and says that this can be used as an infographic and I have saved sometime there. Moving on I did the wireframe in which then is reviewed by the module leader and got some comments on the grid system, fonts, and placements.

In the entire process I learn a lot about design layout on a flat space both in the Graphic Design project as well the exhibition designs like the invitation card and banner stand. The invitation card gave me the most learning experienced because of the limited space that the card provide and how can we cramp in information into an even smaller space where the rest is taken up by the logo. 

The logo "EXPO5E" was done by me through some sort of experiment, using an advice from the module leader that certain design doesn't need an outline to show the shape but using the content. In which I inserted the circles and lines into the fonts and remove the fonts completely creating the logo that we had. A lot of experimentation is done throughout this semester and most design comes out by accident through experimentation. 

Once every planning is said and done, I moved on to making the motion graphic which is the final project for Graphic Design a motion graphic explaining the application to the audiences. Here I get a lot of help from the module leader on the layout, and making things centered and not lopsided the words to use and also the transition in between pages, the movement of the words and graphics.

This has been a great experience to be learning this from such great lecturers and have such peers to work with and hopefully I can work with them in the future.