INFORMATION DESIGN: EXERCISES, FLIP AND TUTORIALS
05/02/2024 - 22/03/2024
Week 01 - Week 7
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media
Information Design
CONTENTS:
1. Instructions
2. Exercises
3. Flip Tutorials
4. Practicals
5. Reflection
Instructions
EXERCISES:
WEEK 1: Draw an infographic with materials
During the first week of the course, we were given an overview of the information design module, including expectations and upcoming assignments. Given our tight schedule of only seven weeks, we were advised to stay focused on the tasks ahead.
Instructions
Quantify (count) your chosen items and arrange the objects into a presentable layout or chart. Take a picture and submit it!
Requirements
Exercise 1
Class Activity:
Materials: A3 Paper, Colored Pens and any materials
Figure 1.1 First Attempt
Figure 1.2 Second Attempt
Figure 1.3 Final Execution
Final Assemblance
Exercise 2
Process
Figure 2.1 Sketches
Figure 2.2 Prototypes for Layout
Figure 2.3 Testing game-theme colors
Figure 2.4 Pokemon characters from Water and Fire typeNotes:
I went on the Pokédex site and started my research, going through the site and understanding how these Pokémon work as I did not have the knowledge for it before. Then I picked out two categories:
Figure 2.5 Design detailsNotes:
I went through Pinterest and Behance to search for suitable color scheme for the theme.
Figure 2.6 Begin structuring the placementsNotes:
I chose type 6 for my chosen layout. I wanted to go for the game-theme. Therefore, an arcade visual would be suitable for the Pokémon.
Figure 2.7 Inserting the pokemon characters and arrangement
Figure 2.8 Visual products and alignments
Figure 2.9 Alphabet order menu panel
Figure 3.1 Effects and refinement
Figure 3.2 Refining the control panel placementNotes:
The pink gradient borders gave a lot of the arcade feel compared to the dark blue. However, I had a tough time forming it. Because the dark blue helps to navigate the eyes on the contrasted colors better which is where all the information is. (Information should be prioritise more than the visual)
Figure 3.3 Refining the control panel placement
Figure 3.4 Gradient effect on the arcade borders to give more depth
Refine #1
Final Outcome
Fire versus Water in PDF
Fire versus Water in JPG
FLIP Activity (Lecture)
Requirements
- Information must be presented as is. You are required to arrange the objects with relevant indicators written out with pens to help you visualize the quantity and data.
- Take a picture of the final assembly and upload into your e-portfolio and Google Classroom
Exercise 1
Class Activity:
Materials: A3 Paper, Colored Pens and any materials
Figure 1.1 First Attempt
Notes:
I brought rubber band bracelets with me on this day as I did not have any buttons or legos. It took me awhile to assemble them and I asked for an advise from my lecturer as well from my initial design which was inspired by the bilateral system from typography. although my lecturer advised me that there were no consistency and caused confusion especially my materials were not suitable with that sort of style. Therefore, I redesigned to this circular design although I was not satisfied with the outcome.
Figure 1.2 Second Attempt
Notes:
I got home and started assembling with other colors because I noticed the rubberbands I used before had many defects (they were not circular) some of them were curled and it crooked, which made me unhappy. I decided to look into my box of rubberbands and choose the stable circle shapes of bands.
Then, I started drawing lines as seen above, I had the idea of the fire canon and wanted to try applying that to this exercise.
Notes:
I erased the pencil lines and used markers and brushes to give colour and titled it "The Rubber Canon Shop". The colors placed are orange, blue, green, pink and red with a total of 54 rubberbands.
Exercise 2
Class Activity: LATCH Exercise
Location / Alphabet / Time / Category / Hierarchy
Organize a group of information into a visual poster that combines and utilizes the LATCH principles (min. 4). The topic options given by my lecturer were Pokedex, FFXIV Bestiary and Dinosaurs.
Organize a group of information into a visual poster that combines and utilizes the LATCH principles (min. 4). The topic options given by my lecturer were Pokedex, FFXIV Bestiary and Dinosaurs.
Requirements:
Size resolution: 1240 × 1750 pixels or 2048 × 2048 pixels
Size resolution: 1240 × 1750 pixels or 2048 × 2048 pixels
Use the digital photo editing/illustration software available to assemble the Pokemon into a LATCH infographic poster. You can re-use back the images of the monsters but do create the rest of your own visuals to complete the poster.
Keep it simple, and present the information as clear as possible and as interesting as possible. Aesthetic and narrative is the key but so does information delivery!
The LATCH method is a framework for organizing information that Richard Saul Wurman developed as part of his work in information architecture.
LATCH is an acronym that stands for:
- Location
- Alphabet
- Time
- Category
- Hierarchy
Location: Information is arranged according to its physical or spatial location.
Alphabet: Information is arranged alphabetically, which is especially useful for reference materials.
Time: Information is organised chronologically, which is useful for events or processes that occur in a specific order.
Category: Information is classified into categories or groups based on common characteristics or attributes.
Hierarchy: Information is organised in a hierarchical structure based on its importance or specificity.
Process
Figure 2.1 Sketches
Notes:
The mapping idea was my first idea but after consulting with my lecturer and showing him my second idea (comparison infographic) he suggested that it was best to go with the second one as many other students were doing the mapping style. Therefore I started sketching new layouts:
Figure 2.2 Prototypes for Layout
Notes: I started to go on Adobe Illustrator as it was best to play around there with my ideas because I can rearrange the layout.
Figure 2.3 Testing game-theme colors
Figure 2.4 Pokemon characters from Water and Fire type
Figure 2.5 Design details
Figure 2.6 Begin structuring the placements
Figure 2.7 Inserting the pokemon characters and arrangement
Figure 2.8 Visual products and alignments
Figure 2.9 Alphabet order menu panel
Figure 3.1 Effects and refinement
Figure 3.2 Refining the control panel placement
Figure 3.3 Refining the control panel placement
Figure 3.4 Gradient effect on the arcade borders to give more depth
and form
Refinement:
Refine #1
Refine #2
Final Outcome
Fire versus Water in PDF
Fire versus Water in JPG
Notes:
Following the Latch method, I decided to include 4 out of 5 from the method. Which are alphabet, category, hierarchy and time:
The Pokémon are arranged alphabetically and horizontally on the menu panel for the “user” to see the overall Pokémon. Next, on the big screen will present two teams or (category) of the types of Pokemon. Then, the time is shown by the development of the Pokemons from level 16 - 36. Lastly, the HP is arranged in a hierarchical manner.
FLIP Activity (Lecture)
FLIP 1: Types of Infographic & Online Tools
Group Task: In your group, find out what the different types of infographics are, what kind of information they are applicable for, and an example for each identified type.
FLIP 2: The LATCH Method
Group Task:
Flip 2 - LATCH by Adriena Tan
FLIP 3: The Miller's Law
Group Task
Flip Topic 3 by Adriena Tan
FLIP Week 4: Manuel Lima's Method
Group Task:
Figure 3.5 Bad Infographic Poster
Extracted the information from this infographic:
W1 Individual Task: Pick one free online infographic tool and re-design one poorly constructed infographic poster through your own experimentation with the selected tool
After browsing through and understanding the types of infographics. I found one that I would like to redesign and it's an informational infographic poster.
Figure 3.5 Bad Infographic PosterComments: In my opinion, this poster does not help to navigate the audience to which information should they lay their eyes upon first. There are too many colors and the various sizes of visuals and texts. Other than that, the yoga pose in black is very out of place and random which does not sit right to me.
Extracted the information from this infographic:
Headline: Yoga in America Study
Highlights from a national survey more than 3,700 people
2016 Yoga in America Study conducted by Yoga Journal and Yoga Alliance
36.7 million (the number of yoga practitioners in 2016) (Up from 20.4 million in 2012!)
Gender Division
Male: 28% (10.3 million)
Female: 72% (26.4 million)
74% of yoga practitioners have been practicing for 5 years or less
The number of Americans likely to try yoga in 2016 (80 million)
1 person equals 10 million American
Americans believe that yoga…
Is good for you
Increases flexibility and strength
Enhances athletic performance
Relieve stress
79 percent of yogis
Engage in other forms of exercise such as running,cycling and weight lifting
Top 4 places yogis practice
ICONS:
Home
Gym
Yoga studio
Park
16.8 $ billion
Process
Figure 3.6 Design details
Notes:Application used: Canva
Since the main highlight of the infographic is about Yoga, I had to look into colour schemes that would match that sort of sport/workout. I found that the two primary color above would help to enhance the message or information to the audience.
Figure 3.7 Design details
Notes:Canva has various elements that could be used and it was very easy to find the suitable
pose for this infographic. I placed around the Yoga Pose visual around the frame to see which is best and I wanted to highlight that as much as possible therefore the sizing plays a crucial role in that sense.
Figure 3.4 Design details
Notes:After rearranging the contents, I decided to play around with the colors and started observing if there are any odd areas. I added new icons such as the Male and Female Icons to represent the percentage instead of using text. Other than that, I decided to give a range for: Heading could go from 50-40 pt, Sub-heading 40-30 pt and for Paragraphs 20-14 pt. Although most of the paragraphs are in the size of 20 pt and the footer is 14 pt.
Figure 3.8 Design details
Notes:After finalising the placements and content (balance between visual and texts) to ensure it is not too cluttered, I began searching for suitable typefaces for this topic. Thus, there are 3 typefaces used in this infographic poster. In addition, I mislooked the information, I had thought it was 80% and not 80 Million. Therefore, I had to amend that but there were space in between the box and the number, I decided to include the America map. I used opacity for the map to reduce the obviousness of the overlapping elements and highlight the "80 Million".
Figure 3.9 Design details
Notes:
Before and after: The layout is symmetrical (both, right and left are the same width), the difference between the colors used, the typeface and its characteristics (Bold, Italic) does play a huge role.
Final Outcome
Redesign Infographic Poster
Comments
Post a Comment