Fell sick for the most part but still had a pretty fruitful week.
[Learnings] Type Scales
In the past week, one of the things I worked on was redesigning the landing page for TinkerLabs. As a stickler for systems, I decided to delve a little deeper into type scales to develop a design system for the new website.
Type scales derive numbers from a base number, i.e a size at which your body text typeface looks best. Then, proportionally related higher & lower font sizes are generated. This ensures that font sizes follow a system of sorts.
In my case, the base size (16) was multiplied by a 1.333 ratio (the perfect fourth).
[Self Realisations] I tend to overcomplicate things.
I’ve also been working on a data visualisation project for HP. The goal was to show instructional complexity, i.e how instructions are passed down in the organisation and communication is lost because of the number of people managed by a single person.
As it was a big dataset, with numbers going up to 3000, I decided to program a custom tool on p5.js.
The above image is a basic prototype to test the math. The first major problem was that the dots would obtain a random position on the screen but there is the possibility of two positions being the same and, therefore, one dot would be hidden by the other.
Now, if you look at the nature and goal of the visualisation, which is to show the delegation chaos, you will realise that no one will actually count 3000 dots. However, I got stuck in trying to resolve this.
After quite a lot of nervous brainstorming (nervous because I thought I wouldn’t be able to solve it), I put in a smart collision detection algorithm where every dot checks its position against every other; only to realise that it was an unnecessary step.
In the end, I actually removed the algorithm from the final prototype. However, I was stuck on why I couldn’t think critically in the first place.
I think I’ve boiled it down to two reasons: either I’m stuck-up on trying to be a perfectionist or solving complexity is a narcissistic tendency of mine to self-gratify. Either way, it’s something that I wish to consciously resolve for myself.
[Project] How Posters Work - Cooper Hewitt
How Posters Work is a wonderful exhibition at Cooper Hewitt with a fantastic online archive.
It essentially talks about the different tools that graphic designers use to attract / focus viewer attention. Additionally, there are some wonderful posters by famous graphic designers that are used as examples.
[Tools] Making variants on Figma
Like I mentioned before, I’d been working on creating a design system for the new TinkerLabs homepage. In the process, I came across a Figma functionality that allows you to prototype hover states and add variants to components.
You make variants of the component, thereby combining them to make a component set. While prototyping, you can shuffle between them based on hover/click/press actions.
[Learnings] Markov Chains and Stochastic Systems
Had the pleasure of attending CC Sante, a monthly creative coding meetup by Paper Crane Lab. Someone, while sharing their project, spoke about Markov Chains and I was thoroughly intrigued.
Markov Chains belong to a group of systems called stochastic systems: systems where a pattern may be analysed but never predicted as outputs may vary even with the same input. Markov Chains, in particular, are concerned with calculating the probability of a next state based only on the current state; thereby considering the present to be independent of the past.
An example of a Markov Chain in real life is beautifully explained by Analytics India Magazine in this elaborate article.
To paraphrase, consider the next word prediction algorithm on your phone. The next word is completely dependent on what combinations are possible with that current word, irrespective of its past usage (although, now, some phones use your typing data to predict more accurately).
An understanding of this type of stochastic system could be helpful when looking at traffic patterns or other real world unpredictable behaviour where the past cannot determine the future.