Information Design // Exercises & FLIP Topics
11.01.23 - 02.02.23 (Week 1- Week 4 )
Emelyne How Sok Hing (0352938)
Bachelor of Design (Hons) Creative Media
Information Design // Exercises & FLIP Topics
LECTURES
Week 1:
Our first lesson of the new semester was a simple summary of our module and our assignments. We are to conduct 2 projects individually and the final project would be a group project whose theme is about feeling burnout. We were also shown multiple examples of our upcoming tasks.
Our second class consisted of learning about infographics. We learned about the different types and their applications. We also learned about the different online tools that could be used to create infographics.
Motion Graphics
Our practical class was about learning about motion graphics and its meaning.
Motion Graphics means Graphics in Movement.
Motion Graphics = Composition + Animation
Composition= Graphics + Typography
Animation= Movement + Rhythm
Steps to create a motion graphic
- Write a script that tells a story.
- Storyboard While You Brainstorm the Visual Treatment.
- Take Your Storyboards into Design.
- Animate the Final Designs.
 |
| Figure 1.0 Storyboarding |
Storyboard for Motion Graphics: Sequence of sketches provide visual reference for key scenes.
 |
| Figure 1.1 Previsualisation |
Visual script→ Breakdown (scenes + running times)
 |
| Figure 1.2 Mood board |
Create Mood board. Organize inspiration & references
 |
| Figure 1.3 Animation |
Animation: Images that create illusion of movement.
4 type of Animation:
- 2D animation.
- 3D animation.
- Stop motion animation.
- Motion graphics.
Motion Graphics
Motion graphics are not driven by characters or storylines. This art focuses on the ability to move graphic elements, shapes, and text.
Text animation: Kinetic Typography.
Vector animation: Graphics elements created in AI.
Chart Visualization.
Character animation: wiggling.
Week 2:
Saul Wurman’s L.A.T.C.H
L.A.T.C.H is a method of information organization that consist of these principles:
Location
Alphabet
Time
Category
Hierarchy
Kinetic Typography
Types of Kinetic Typography
- WORD by WORD
- Animated paragraph/excerpts with
Final Composition.
Null Object
What is a null object?
A null object is an invisible layer that you can create to be a super parent.
Week 3:
Miller's Law (Chunking)
Chunking is a term referring to the process of taking individual pieces of information (chunks) and grouping them into larger units.
As for instance UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and remember it better.
Motion Graphic Chart
A chart is a graphical representation for data visualization.
Types of Chart:
1. Pie Chart
2. Bar Chart
3. Line Graph
We also got a tutorial slide and a video from Mr. Martin so that we could practice animating the charts and graphs.
Week 4:
Manuel Lima’s 9 Directives Manifesto
Information visualization is a process that transforms abstract data into visual representations of semantics that attempt to communicate complex ideas clearly, while allowing the user to query the data in real time.
The 9 Directives Manifesto:
1. Form Follows Function: “the purpose should always be centered on the explanation, which in turn leads to insight.” Start with a Question: Your work should always be driven by a query
2. Interactivity is Key: allows for investigation and learning through discovery
3. Cite Your Source: always disclose where your data originated
4. The Power of Narrative: Humans love stories
5. Do Not Glorify Aesthetics: “should always be a consequence and never a goal”
6. Look for Relevancy: why are you visualizing the information?
7. Embrace Time: Time is difficult to work with but rich
8. Aspire for Knowledge: “A core ability of Information Visualization is to translate information into knowledge. It’s also to facilitate understanding and aid cognition.”
9. Avoid Gratuitous Visualizations: “should respond as a cognitive filter, an empowered lens of insight, and should never add more noise to the flow”
Vector/ Character animation
- Create graphics in AI,
- Select layers that intend to animate,
- Place them on separate layers.
INSTRUCTIONS
EXERCISES
Week 1:
FLIP 1.0 : Different types of infographics & online tools
Our first group work was to search for information about the different types of infographic and present them on some slides. Here's the slides from Group 1.3.
Figure 1.4 Slides Presentation on FLIP Topic 1, 12th January 2023
FLIP 1.1 : Re-designing an infographic
We are to redesign a poorly made infographic poster as we are to choose one free online infographic tool. After choosing the infographic, we need to record our process and compare the before and after of the infographics. Additionally, we were asked to review the online tool and rate it for its difficulty, intuitiveness, usefulness, design templates and choices.
This is my chosen poorly designed infographics.
 |
| Figure 1.5 Chosen poorly designed infographic, 12th January 2023 Source: https://s3.amazonaws.com/thumbnails.venngage.com/template/db204ef3-4482-407d-a47a-ffdf5a13973c.png |
Reasons to why it is a poorly designed infographic:
- The alignment of the texts looks too formal and basic. It does not have an aesthetically pleasing sense when we look at it.
- The overall infographic looks tacky.
- The visual balance looks odd.
- The colour scheme could be better. It's quite plain and boring.
- The choice for the pictograms could be better.
- The background is distracting and too bold.
 |
| Figure 1.6 Chosen poorly designed infographic 2, 12th January 2023 Source: https://craigkunce.com/bad-resumes-examples/ |
Reasons to why it is a poorly designed infographic:
- No pictogram at all.
- Boring to look at.
- Readability is questionable. Everything is center aligned which is a mistake.
- For a resume, it looks bland and not very attractive.
- There is no visual balance.
Visual References
In order to get some inspiration on how I could re-design this infographic, I surfed the web to look at some infographics that I found interesting.
 |
| Figure 1.7 Visual reference 1, 13th January 2023 Source: https://www.utilitygift.co.uk/blog/travel-tips/ |
 |
| Figure 1.8 Visual reference 2, 13th January 2023 Source: https://www.behance.net/gallery/74527925/Curriculum-Vitae |
My first thing to do after looking for some visual references, was to extract all the texts that was in the infographic so that I could plan my work.
Text:
Craig Kunce
304 Fourth Avenue South, La Crosse, Wisconsin 54602, 608 555-3480
Objective
A challenging position in the
graphic design filed that utilizes my experience, education and creativity to
help the company grow and succeed.
Summary of skills and qualifications
Experience designing advertising
and marketing materials for a variety of projects including logos, brochures,
packaging, advertising, signage and websites
Excellent ability to communicate
and work in a team setting – derived from current freelance projects
Thorough knowledge and
understanding of prepress and the offset printing process
Experienced illustrator with strong
watercolor, oil painting, and colored pencil skills
Able to work directly with clients to discuss ideas and solutions to their needs
Software Knowledge
Photoshop, Illustrator, InDesign, Dreamweaver,
Flash, Acrobat, GoLive, Word, PowerPoint, and Excel
Tech-savvy, comfortable, and up to
date with current online design and media trends and interfaces
Education
Associate of Applied Science,
Graphic Design, Western Technical College, La Crosse, Wisconsin Graduated with
highest honors. GPA 3.8.
Hardware experience: Mac and PC
computers, flat-bed color scanners, digital photography, B/W and color
printers, large format printing, working on servers and networks, prepress and
film imaging equipment (Xitron Xenith 4 PDF Workflow Solution), offset printing
pressed, bindery and finishing machinery, and electronic paper cutters.
Work Experience
Assistant Manager, Meat Department
Quillin’s, La Crosse, Wisconsin. 2007-present
Assisted Meat Department Manager
with all daily responsibilities
Inspected and signed for deliveries
in manager’s absence (5-10 times per week)
Direct customer service (dealt with
approx. 50 customers per day)
Trained and mentored all new
employees (30 to date)
Graphic Designer and Publication Artist
The Zeal, La Crosse, Wisconsin.
2006-2007
Designed and produced the monthly
school newspaper (20 issues total)
Consistently met out monthly design
and printing deadlines
Redesigned the logo and format to
update the look and follow industry trends
Retail Sales Associate
Eddie Bauer, Onalaska, Wisconsin,
2004-2005
Dealt directly with customers, assisting
with selections, purchases, and returns
Worked independently and performed
opening and closing responsibilities
Responsible for all money, returns,
and sales transactions on the weekends
2008 Sales Associate of the Year, Increase
my annual sales volume 15%
Organized loss-prevention efforts throughout
the store (saved $2, 000 annually)
Achievements
Vice President, Graphic Design
Club, Western Technical College, 2008-2009
First Place Portfolio Review
Poster, Western Technical College, 2009
Third Place Gutenberg Award, Poster Design 2009
Infographic Illustration
To re-design my infographic I used Canva as I thought this would be an easy app to use. After getting used to the app and its tool, I proceeded to start my work. These are some attempts that I tried as I wanted to experiment.
 |
| Figure 1.9 Colour Palette, 14th January 2023 |
I looked for various colour schemes on Color Adobe in an attempt to limit my options. The prior infographic, in my opinion, lacked a lot of organisation and cleanliness, which is what I set out to achieve with my first attempt. Additionally, I wanted to add some design elements since it is also the purpose of an infographic. The typeface that I used was Poppins as I think that this font matched with the concept that I wanted to go for. It looks both professional, clean and modern. One flaw that I found was that the info on my infographic might look too long and can become boring on the long term to read.
 |
| Figure 2.0 First attempt at re-designing the infographic, 14th January 2023 |
On my second attempt I tried to make the information shorter my making a compilation. Additionally, I tried to go for another colour scheme which I ended up preferring. I also tried to add some more graphical elements to fill up some empty awkward spaced. The concept was pretty much the same to my first attempt, I just changed the overall look and design. I would say that I'm more satisfied of this one as it looks more dynamic.
.jpg) |
| Figure 2.1 Second attempt at re-designing the infographic, 14th January 2023 |
Rating and review of the online tool used (Canva)
Difficulty/intuitiveness 4/5
Canva was a design tool that was actually simple to use. When it came to understanding how the tools worked, hardly anything was challenging. Even for beginners, the user interface was quite good and simple. The only odd thing was that when I zoomed in and out, sometimes I did not zoom in on the artwork but on the Google page, which was occasionally rather bothersome.
Usefulness 2.5/5
What bothered me was that in order to get a lot of graphic elements you need to pay for it. What they provided in the non-payable was not as much as I would have like to. Sometimes what I wanted was only for the Premium version hence making it hard sometimes to get what I want. Hence, I had to look at other websites and upload it into Canva.
Design templates/choices 4/5
There was a variety of templates which was way more than enough. Additionally, there was a lot of font choices. There is a wide range of options for any events and any type of mood or concept that one would want to go for.
Exercise 1 // Quantify Data
We are instructed to select any items of our choice for this new exercise. We must quantify them as we proceed and arrange the items into a visually appealing layout or chart. To better visualise the quantity and data, we must arrange the objects with the relevant indications written out in pen. After that, we are to take a picture and upload it on Google Drive as a submission.
Note: Keep it simple, present the information as clear as possible and as interesting as possible. Aesthetic is the key but so does information delivery!
We are to choose between two options:
Option 1: Jar of stuffs
Option 2: Emergency bug out bag
For this exercise, I chose to arrange different coloured pins. I wanted to arrange them based on colours and also quantity.
 |
| Figure 2.2 First draft for my exercise 1, 18th January 2023 |
Final Exercise 1: Quantify Data
After deciding on the positions of the pins and also the text, this is my outcome of my exercise 1.
 |
| Figure 2.3 Final Exercise 1: Quantify Data |
FLIP 2.0 : L.A.T.C.H
Our task consisted of gathering information about the principles of L.A.T.C.H and then as group we are to present the information in a slide.
Here's the slides from Group 1.3
Figure 2.4 Slides Presentation on FLIP Topic 2, 19th January 2023
After that our individual task consisted of organizing a group of information into a visual poster that combines and utilises the L.A.T.C.H principles (minimum 4). We were asked to use Adobe Illustrator if possible.
Exercise 2 // L.A.T.C.H
Requirements:
- Size resolution: 1240 × 1750 pixels or 2048 × 2048 pixels
- We can use images of the characters but we need to create the other visuals ourself.
Visual References
I thought of doing this exercise based on the series 'Avatar: The Last Air Bender' since it had the principles that we need to use for the L.A.T.C.H exercise. I also surfed the web to get some inspirations and references for me to be use so as to be accurate.
To get information about the hierarchy used in Avatar, I looked up some info on the internet and found information on this website;
The map below is the one that I used as a reference for my work.
 |
| Figure 2.5 Visual Reference, 20th January 2023 Source: https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1ed74741191273.579be115b5a45.jpg |
L.A.T.C.H Illustration
After that, I went to illustrate my ideas directly onto Adobe Illustrator and came out with this idea. The difference between each image below is the colour of the font for the Title only.
Here is how I planned my L.A.T.C.H:
Location - Based on where the characters were from as for example Fire Nation or Earth Kingdom
Alphabet - The name of the countries were arranged in an alphabetical order going from up to down
Category - Based on their elements
Hierarchy - Based on the hierarchy of each country
 |
| Figure 2.6 L.A.T.C.H Version 1.0, 24th January 2023 |
 |
| Figure 2.7 L.A.T.C.H Version 2.0, 24th January 2023 |
 |
| Figure 2.8 L.A.T.C.H. Version 3.0, 24th January 2023 |
Final Exercise 2 // L.A.T.C.H (Before feedback)
In contrast to the original map from the Avatar series, I wanted to produce something for my L.A.T.C.H. exercise that was more refined and modern. Because I wanted something delicate and pleasant to look at, I chose pastel colours. The figures and the title, which for me was what was most crucial to highlight in my drawing, were the parts that I wanted to make more contrasting. Additionally, I wanted to keep the essence of Avatar and tried to implement some Chinese designs into my map so that it could reflect the origin of the Avatar.
 |
| Figure 2.9 Final Exercise 2 // L.A.T.C.H, 24th January 2023 |
Final Exercise 2 // L.A.T.C.H (After feedback)
After increasing the size of the characters, this is the final outcome of my L.A.T.C.H exercise.
 |
| Figure 3.0 Final L.A.T.C.H (After feedback), 4th February 2023 |
Week 3:
FLIP 3.0 : Miller's Law
Another task of the week was for us to do another group presentation based on Miller's Law. Here is the slides from Group 1.3
Figure 3.1 FLIP 3.0 : Miller's Law, 26th January 2023
Week 4:
FLIP 4.0 : Manuel Lima’s 9 Directives Manifesto
The last topic of our FLIP classroom which is based on The 9 Directives Manifesto.
Figure 3.2 Flip 4.0 : The 9 Directives Manifesto, 2nd February 2023
FEEDBACKS
Week 4:
Special feedback:
After asking for some feedback from my lecturer for my L.A.T.C.H, he told me that the idea was good but I need to try and find a way to make the characters appear a bit more bigger.
REFLECTIONS
Week 1 - 4 :
It was fascinating to learn about the various rules and guidelines that may be used to create an infographic. Learning how to create various infographics was both challenging and enjoyable. The hardest part was trying to figure out how to properly position the various pieces of information that were presented to us. In contrast to our typography classes, this one required us to work on both typography and illustration. I gained a lot of knowledge about how to arrange the various components so that there is visual hierarchy as well as visual balance.
Comments
Post a Comment