diff --git a/_posts/2023-12-30-year-2023-in-review.md b/_posts/2023-12-30-year-2023-in-review.md
index 3c22342..6ca6c77 100644
--- a/_posts/2023-12-30-year-2023-in-review.md
+++ b/_posts/2023-12-30-year-2023-in-review.md
@@ -4,12 +4,10 @@ title: Year 2023 in Review
description: The yearly review of notable learnings from the year
category: Personal
comments: true
-featured: /public/images/2023/12/30/xmas_vibes.png
-featured_alt_text: House that is lighted up for Christmas in Bowmanville
+featured: /public/images/2023/12/30/otf-50-workouts.jpg
+featured_alt_text: Posing for a photo at the OTF studio in Whitby with coach Liam
featured_hero: true
-hero_content_align: right
-hero_link: https://www.youtube.com/watch?v=IJkz39oqTwE
-hero_link_text: Christmas Lights Drive About
+hero_height: is-large
summary: It's that time of the year for the year in review.
tags: [year-in-review]
---
@@ -24,3 +22,4 @@ Here is my year 2023 in review, as is tradition come December.
* Polished and published a [css library](https://github.com/ae-app-labs/spork-css) project onto npm in an Alpha stage
* Signed up for some [fitness](https://www.orangetheory.com/en-ca) to stay in shape, not getting any younger
* Watched [152+](https://letterboxd.com/midhunhk/films/diary/for/2023/) movies or documentaries, up from last year (128)
+
diff --git a/_posts/2024-01-01-ux-in-movies-part-1.md b/_posts/2024-01-01-ux-in-movies-part-1.md
new file mode 100644
index 0000000..85d05af
--- /dev/null
+++ b/_posts/2024-01-01-ux-in-movies-part-1.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: UX in Movies Part 1
+category: Learning
+comments: true
+featured: /public/images/2024/01/01/interface-hero.jpg
+featured_alt_text: A photo of a computer screen showing the dashboard of an application.
+featured_hero: true
+hero_darken: true
+summary: Part 1 of a series exploring the effective use of UX interfaces in Movies, mainly Dashboards.
+tags: [movies, ux, dashboard]
+---
+## UX Inspiration
+Last year I watched a Malayalam film named [Keedam](https://www.imdb.com/title/tt15943910/) (transl. Pest). Directed by `Rahul Riji Nair`, the film follows a cybersecurity expert taking on some criminals using technology and her skills.
+
+More than anything what captivated me was the clean and simple user interface of an application that is depicted, and is shown in many of the scenes in the film.
+
+Given that this application is a central part of the plot, we can see that a lot of attention as given to it, so that a common person who has maybe used a mobile phone would be able to understand this in the context of the film. It even looks like a complete application, with most of the features being used by the characters.
+
+I was able to recrate the interface in Figma (shown below), albeit with some modifications (e.g; darker background for the top bar to separate from the content, some improved spacing etc)
+
+
+*A recreated UX interface from the film 'Keedam (2022)'*
+
+What we see most of the time is a Dashboard, although the same items are always available as a side menu. It appears that once a user / phone number is selected, the relevant details are displayed in distinct colorful boxes at the top. And certain actions that can be taken displayed like cards below it. By looking at the way the application is interacted with, it actually looks more like an Angular or React web app.
+
+## Dashboards in UX
+
+After the first post on this topic, I got a chance to discuss these ideas with a fellow professional UX Designer and he was of the opinion that in most of the cases we see some sort of Dashboard interfaces shown in movies. Be it some tool that the protagonists use or a team using a dashboard for easy information lookup or monitoring.
+
+
+*Source: Behance.net*
+
+## Dashboards in Sci-Fi Films
+
+Another example is from the film [The Cloverfield Paradox](https://www.imdb.com/title/tt2548396/), which is a Sci-Fi movie happening on a space ship. Although the interface is more complicated than the earlier example, I think they highlight the key elements where the audience needs to concetrate. For example, the title and the status of some ventiation systems in the screenshot below.
+
+
+*This screenshot is used under the doctrine of 'fair use' for commentary. The use of this material is intended for example in an analysis article and does not infringe upon the copyright of 'Bad Robot Productions'. All trademarks and copyrights are the property of their respective owners.*
+
+Dashboards can be used to visualize data in a way that is easily digestible for the audience. It could be tracking the progress of a task, monitoring vital signs, or showcasing real-time events, dashboards provide a visual representation that enhances the audience's understanding.
+
+In the below screenshot, there is a simple progress bar overlay which shows a visual progress of copying some data.
+
+
+*This screenshot is used under the doctrine of 'fair use' for commentary. The use of this material is intended for example in an analysis article and does not infringe upon the copyright of 'Bad Robot Productions'. All trademarks and copyrights are the property of their respective owners.*
+
+Although the entire UI is complicated, the text `Copying Data` and a moving progress bar are prominent and conveys the action to the auidence. Conventionally such a dialog box would have a `Cancel` button atleast, but they have even ommitted anything considered extra for the context.
+
+## Conclusion
+Including dashboards in movies can be a powerful narrative tool to convey information, build suspense, and engage the audience. In some cases, they can be story telling devices that communicate critical plot elements.
+
+In Addition, a well-designed dashboard not only serves its functional purpose but also adds an aesthetic layer to the film, making it visually appealing and memorable.
+
+## References
+References are linked inline within the article.
\ No newline at end of file
diff --git a/assets/css/custom.css b/assets/css/custom.css
index a280a6e..aa8754f 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -10,7 +10,7 @@
.post-tag{ margin-bottom: 1em; }
.post-title{ color: #1371DD; font-size: 1.9rem !important; font-weight:bold; line-height: 1.2;}
.post-date{ display: inline;}
-.post-content img{ margin: 1.5em auto; }
+.post-content img{ margin: 1em auto; }
.post-content div div.is-8 p:first-child img{ margin-top: 0px !important;}
.is-serif-font{font-family: 'Merriweather'}
/* Some Colorful backgrounds for the header*/
@@ -82,6 +82,14 @@
margin: 25px 0;
}
+p em {
+ display: block-inline;
+ font-size: .8em;
+ background-color: #eaeaea;
+ padding: .5em;
+ border-radius: .5em;
+}
+
iframe{
width: 93vw;
height: calc(93vw/1.77);
diff --git a/public/images/2023/12/30/otf-50-workouts.jpg b/public/images/2023/12/30/otf-50-workouts.jpg
new file mode 100644
index 0000000..a31ec74
Binary files /dev/null and b/public/images/2023/12/30/otf-50-workouts.jpg differ
diff --git a/public/images/2024/01/01/interface-hero.jpg b/public/images/2024/01/01/interface-hero.jpg
new file mode 100644
index 0000000..f836867
Binary files /dev/null and b/public/images/2024/01/01/interface-hero.jpg differ
diff --git a/public/images/2024/01/01/the-cloverfield-paradox-01.png b/public/images/2024/01/01/the-cloverfield-paradox-01.png
new file mode 100644
index 0000000..3ca41f5
Binary files /dev/null and b/public/images/2024/01/01/the-cloverfield-paradox-01.png differ
diff --git a/public/images/2024/01/01/the-cloverfield-paradox-02.png b/public/images/2024/01/01/the-cloverfield-paradox-02.png
new file mode 100644
index 0000000..8f20bdf
Binary files /dev/null and b/public/images/2024/01/01/the-cloverfield-paradox-02.png differ
diff --git a/public/images/2024/01/01/ux-dashboards.jpg b/public/images/2024/01/01/ux-dashboards.jpg
new file mode 100644
index 0000000..31fcdba
Binary files /dev/null and b/public/images/2024/01/01/ux-dashboards.jpg differ
diff --git a/public/images/2024/01/01/ux-interface.png b/public/images/2024/01/01/ux-interface.png
new file mode 100644
index 0000000..351074e
Binary files /dev/null and b/public/images/2024/01/01/ux-interface.png differ