Information Design Project 1 - Instructable Poster

-
13/01/2023 - 27/02/2023 (Week 1 - 2)
WONG JUN ZHE / 0353613
Information Design / B' Creative Media / Taylor's University
Project 1 - Instructable Poster

INSTRUCTIONS

Project 1 (Part 1): Static Instructable Poster

To start off, I chose a Pasta Granny video that I find interesting, as instructed.


Then, I looked for some references that I could use as guides when designing the poster. I decided that I prefer a creative, balanced design, with some sense of symmetry. 

Infographics that I used as reference:

References from provided slides

At this point, I have quite a good idea on how the poster should look like. So, I began sketching. 

Sketch

I sketched out the placement of each asset to ease my illustration process. 

Then, I inserted the sketch into Illustrator, and began to work on individual assets. I mainly used both the pen tool and the brush tool. I decided to use brush tool to add some texture to the assets, so they do not look so flat. 

A group of illustrated assets (flour, fresh yeast, olive oil, sugar, salt)

Use of gradient on smoke

Next, for the titles and subtitles, I used a typeface called Buckwheat TC. This typeface features a san serif design that suits the look that I am going for. It also has a textured variant that I can use. 

Textured text for title

Regular text for subtitles

For smaller texts / descriptions, I used a typeface called Playzone. This typeface has a handwritten look and feel to it and I really like the style of this typeface. 

Added other texts to show actions

Added descriptions

Then, I added arrows to show the flow of steps, as seen below. 

2: Toppings Preparation

I coloured the actual Sfincione de Bagheria using the brush tool while watching the video to get the kind of shape it has. I also picked the colours from one specific frame of the video to have a more accurate colour palette. 

Reference 1

Reference 2

Illustration of the end product

To finish off, I added a 'brick wall' texture to the background and a slither of smoke that comes from the food itself. The smoke is designed to connect all 4 sub-titles by passing through them, which gives a sense of unity and flow. 

Transparency panel

BG texture

Added smoke

Initial Final

Initial Final - Instructable Poster

Upon receiving feedback from Mr Hafiz, there are a few things that needs to be modifed to make the design better. 

Feedback by Mr Hafiz

Thus, I lowered the saturation and brightness of the background texture by choosing a darker, more contrasting and basically a lower-key hue: dark blue. I also decreased the saturation of the background texture so the important assets for the instructions are more clear and visible. 

New BG

Also, I added some doodles of wheat grains at the bottom of the poster to fill out some unwanted negative space. 

Added doodles

I made a few minor adjustments to the size and placement of the assets from the previous version; and finally, I am happy with the poster design. 

FINAL OUTCOME

(FINAL) Project 1 - Instructable Poster

Project 1 (Part 2): Animated Instructable Motion Graphic

Step 1: Create assets for motion graphic.

Creating assets in Illustrator

Step 2: Separate every scene and name each layer accordingly for the ease of animating in After Effects. I also created individual files for each scene/step. 

Layers

Organised into individual files

Step 3: Move into After Effects.

Step 4: Import all .ai files into after effects. 

Imported files into AE

Step 5: Adjust the composition settings. I decided to use 1920*1080 60fps as I think the additional frames will make the motion graphic look smoother. 

Composition Settings

Step 6: Animate.

Part of Animation I

Part of Animation II

Part of Animation III

Step 7: Add some special effects (moving lines, bubbles, transitions)

"Bubble" animation

"Moving lines" animation

Step 8: Add texts; fonts used are Buckwheat and Playzone.


FINAL OUTCOME

- - - - - - - - - - - - https://www.youtube.com/watch?v=cdGu8XeDbcU - - - - - - - - - - - -






Comments

Post a Comment

Popular posts from this blog

Typography Task 3A - Type Design & Communication (Typeface Design)

-
Image
18/05/2022 - 01/06/2022 (Week 8 - Week 10) WONG JUN ZHE / 0353613 Typography / B' Creative Media / Taylor's University Task 3A - Type Design and Communication LECTURES / TUTORIAL 1. Sketches and deconstruction Fig. 1.1.1 Sketches Fig. 1.1.2 Deconstruction of letter 'r' 2. Digitization in Illustrator Fig. 1.2.1 Create several artboards Fig. 1.2.2 Create guidelines that determine your letterform (e.g. baseline, caps line, x height, etc.) Fig. 1.2.3 Start digitization in AI Fig. 1.2.4 Refining shapes Fig. 1.2.5 Comparison between letter 'a', before vs after refinement 3. Illustrator to FontLab Fig. 1.3.1 Measure distance of guidelines from the baseline in pt Fig. 1.3.2 Outlines before unite Fig. 1.3.3 Outlines after unite Fig. 1.3.4 Create new font Fig. 1.3.5 Place x y coordinates near letter Fig. 1.3.6 Ctrl c > Ctrl v into FontLab Fig. 1.3.7 Kerning process Fig. 1.3.8 Export typeface INSTRUCTIONS MIB:
Read more

Design Research Methodology Assignments 1 - 4

-
Image
29/08/2022 - 11/12/2022 (Week 1 - Week 15) WONG JUN ZHE / 0353613 Design Research Methodology / B' Creative Media / Taylor's University Compilation of Assignments INSTRUCTIONS Assignment 1 - Research Proposal Week 1 - 4 For my research proposal, I am required to do the following things: Identify a Research Problem within a topic of research Write a Research Rational Write a Problem Statement pertaining to the research problem Identify relevant Research Objective(s) - ROs Formulate a Research Question(s) – RQs pertaining to the Research Objective(s) – ROs Place a Title of the Research At first, I had a very va
Read more

Illustration & Visual Narrative Task 1 - Exercises

-
Image
30/04/2022 - 06/05/2022 (Week 1 - Week 5) WONG JUN ZHE / 0353613 Illustration & Visual Narrative / B' Creative Media / Taylor's University Task 1 - Task1 (Exercises 1 & 2) LECTURES Week 1 (31/03/2022) - Lecture 1: Introduction to module I was introduced to the module and tasks that I would have to complete throughout this module, including projects and assignments. For the first and second week, I will be working on 'The Vormator Challenge', which challenges my ability to create a character using several given shapes.  Week 2 (08/04/2022) - Lecture 2: Character design basics Lecture report 1 - Visual study of a character Fig. L.2 Dr. Heinz Doofenshmirtz Character chosen: Dr. Heinz Doofenshmirtz Dr. Heinz Doofenshmirtz is the main antagonist in
Read more