flip
.webp)
0344034.
BDCM
.Information Design
::flip
lectures:
week[2]: FLIP[1]: Different types of infographics & online tools
week[2]: FLIP[2]: L.A.T.C.H
week[3]: FLIP[3]: Miller's Law (Chunking)
Figure 1.1.1, FLIP[3] presentation by Group 4, 25/1/2022
Chunking occurs when information is grouped into distinct "chunks". It allows the brain to process & chew through said information in a more efficient manner. This is especially helpful when wanting to teach a topic, as it reduces cognitive load, enabling higher information absorption rates & lower information overload rates.
week[4]: FLIP[4]: Manuel Lima's 9 Directives Manifesto
Figure 1.2.1, FLIP[4] presentation by Group 1, 3/2/2022
The 9 directives are:
- Form follows function
- Form should follow a purpose.
- Interactivity is key
- Interactions help learners learn.
- Cite your source
- Authenticity, integrity, credibility.
- The power of narrative
- People are easily captivated with stories.
- Do not glorify aesthetics
- It should simply be a consequence of function.
- Look for relevancy
- Find points that can link together.
- Embrace time
- Important as the 4th axis whenever present.
- Aspire for knowledge
- The main point of info visualization is translation of information into "knowledge".
- Avoid gratuitous visualisations
- Visuals should not distract & detract from the information.
FLIP[1]: Different types of infographics & online tools
todo:
- Find a poorly constructed infographic
- Find a free online infographic tool
- Use said tool to recreate said infographic
- Write a rating + review of the online tool for:
- Difficulty/intuitiveness
- Usefulness
- Design templates/choices
research:
The bad
I went around scouring for bad infographics. You'd be surprised how good they've become these days, as I did struggle to find something actually terrible. However eventually, I did come across this, from a listing of someone selling it:
 |
Figure 1.2.2, Infographic about commas, n.d |
Here are a few aspects of it that are poorly designed:
- Low contrast between text & background.
- Highlighted commas are hard to see.
- Some commas aren't even highlighted.
- Distinction between sentence without comma & with is minor.
- Inconsistent margins.
- Unaligned clumps of info.
The good (references)
Before jumping right in, I needed some juice to work off of. Pinterest!
Figure 1.2.7, Infographics I referred to, n.d
sketches:
The main idea here is a mindmap, but not just any mindmap... It's utilizing a technique taught to me in primary school, exploiting the (alleged) superior retention ability of the brain when it came to imagery. One would take every piece of info they would like to cram, using as creative as possible of analogy to represent them, & form a singular graphic. Here's what I envisioned the infographic to be when represented in rojak mode:
 |
Figure 1.3.1, 1st sketch of redesigned infographic, 8/1/2022 |
process:
So we needed to use an online tool for this. I, for one, am a self proclaimed hater of Canva, for many reasons — horrible zoom granularity, useless smart margins, restrictive feature set blocked by paywall, etc. Unfortunately though, it is the best option, which is why I hate it so much.
Just to spite it, I wanted to make sure it didn't act as a restriction point for me. Well, I guess it kinda defeats the whole point of wanting us to use the online tools, but I planned to just create my own assets as I needed them. One thing led to another... I started 3D modelling.
Well, I thought since I was already creating my own assets, why not go all out, & so I did.
Figure 1.4.5, 3D models I spent way too long on, 8/1/2022
After that, I mingled them together & composited them in After Effects.
 |
Figure 1.4.6, Minglings, 8/1/2022 |
After the main graphic is done, it was time to add text. Canva, being the miracle platform that it is however, doesn't let you use your own fonts without paying up.
 |
Figure 1.4.7, The forsaken crown, signifying it's a premium feature, 9/1/2022 |
Not wanting to cave to their such demands however, & not willing to settle for inferior fonts, I decided to simply type them out in Illustrator, & copy it onto Canva.
 |
Figure 1.4.8, Elements pasted into Canva, 9/1/2022 |
Still unsatisfied... It was a little bit bland. So I took the entire thing again & dumped it into After Effects, & added the final splash of pizzazz.
final:
|
Figure 1.5.1, FInal commas infographic redesign, 9/1/2022 |
Canva Rating
Difficulty/Intuitiveness
*····
The UI & its controls are the bridges that enable human-tool communication; Canva's suck balls. The zoom increments & decrements extremely weird, hotkeys get captured by the browser instead of the tool often enough to be infuriating, & its actual functions, which aren't very numerous, are scattered enough in the menus to make a man go "what? why??" even after looking at their support articles.
Usefulness
**···
I guess it's great as a pinch at an offsite office or something, but I don't see it replacing anything in my life, ever. You'll need a computer to use it anyways, as its design puts it away from other form factors. If you're already using a large form device, other free options exist — Inkscape, GIMP, Blender.
Design templates
***··
They'll impress your parents & co-workers; they won't blow any designer's pants off. The variety is quite massive, & any designer would either modify the template themselves, or just use a big boy app from the start. Overall, hits the mark on the head for their purpose, misses being actually good.
FLIP[2]: L.A.T.C.H
todo:
- Create a lecture for L.A.T.C.H.
process:
This was a group task. Already swarmed, we decided to keep it short & sweet, with each member owning one section out of the lecture. These sections included:
- Intro/summary
- Location
- Alphabet
- Time
- Category
- Hierarchy
For me, I was in charge of intro/summary, as well as slides & voiceover.
For the summary, I simply distilled down all the important info of L.A.T.C.H & mashed it into a slide.
| Question (...?) | Answer |
|---|---|
| Who (...coined L.A.T.C.H?) | Mr. Saul Wurman |
| When (...was L.A.T.C.H coined?) | 1989 |
| Why (...is L.A.T.C.H used?) | Ways to organize data |
| What (...does L.A.T.C.H stand for?) | Location, Alphabet, Time, Category, Hierarchy |
final:
Figure 1.5.2, Final FLIP slides, 12/1/2022
Comments