
## Falling in Love with Pixel Art

I can't count the hours I've lost in games like _RollerCoaster Tycoon_, _Cossacks_, and _Age of Empires_. What kept me glued wasn't just the addictive gameplay, but the sheer artistry of their pixel graphics. I'd zoom in, marveling at how each tiny square was perfectly placed to create vivid theme parks or sprawling empires. Even now, years later, I find myself drawn back to admire the craftsmanship.


<div className="sm:-mx-24">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <SnapImage
            src="v1728193961/johnthachil.com/Writings/pixel-art/04.jpg"
            width="2560"
            height="1440"
            caption="Roller Coster Typcoon"
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/03.jpg"
            alt="Mumbai"
            width={1280}
            height={720}
            caption="Cossacks"
        />
    </div>
</div>

<div className="sm:-mx-24">
    <div className=" grid grid-cols-1 gap-4 sm:grid-cols-2">
        <SnapImage
            src="v1728193961/johnthachil.com/Writings/pixel-art/02.jpg"
            width="2560"
            height="1440"
            caption="Age of empire"
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/01.jpg"
            alt="Mumbai"
            width={1280}
            height={720}
            caption="Commando"
        />
    </div>
</div>

The world of GBA emulation has brought back thousands of pixel art games I still cherish today, like Pokémon and Sonic. These classics are timeless, not just for their gameplay, but for their vibrant, pixel-perfect visuals. Emulation lets me relive that era where pixel art truly shined.

<div className="sm:-mx-24">
    <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/8.jpg"
            alt="Mumbai"
            width={1280}
            height={720}
            caption="Pokemon"
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/9.jpg"
            alt="Mumbai"
            width={1280}
            height={720}
            caption="Castlevania"
        />
    </div>
</div>

## The Isometric View

The isometric perspective provides players with a clearer view of the game world, allowing them to see multiple sides of objects simultaneously. This not only enhances depth perception but also facilitates strategic gameplay, as players can assess their surroundings more effectively

There's an excellent video by [Modern Vintage Gamer](https://www.youtube.com/watch?v=rs4B8-qoY1I) that delves into isometric mechanics in great detail.

## My 3D Disillusionment

I'll be honest: when 3D games started taking over, I was skeptical. Sure, it was new tech, but to me, it felt like a step backward. I missed the clarity of pixel art, where every detail was intentional. Early 3D games, with their blurry textures and awkward polygons, just couldn't capture the same magic for me. It felt like we'd traded artistry for tech that wasn't ready for prime time.

<div className="sm:-mx-24">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/05.jpg"
            alt="Mumbai"
            width={1171}
            height={1510}
            caption="Age of empire"
            
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/06.jpg"
            alt="Mumbai"
            width={1171}
            height={1510}
            caption="Roller Coaster Tycoon"
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/07.jpg"
            alt="Mumbai"
            width={1171}
            height={1510}
            caption="Zoo Tycoon"
        />
    </div>
</div>

To make matters worse, these games demanded powerful graphics cards that, as a kid, I simply couldn't afford. It was frustrating to see the gaming world move in a direction that not only looked worse to my eyes but also priced me out of playing the latest titles. The accessibility and charm of pixel art games suddenly seemed even more valuable.

## Pixel Art Revival

That's why I'm thrilled to see games like _Factorio_ and _Stardew Valley_ bringing back isometric pixel art. Playing them feels like coming home. They've got all the depth and complexity of modern games, but with that timeless pixel charm I love. It's proof to me that great game design doesn't need cutting-edge graphics – sometimes, a well-placed pixel is worth a thousand polygons.


<div className="sm:-mx-24">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <SnapImage
            src="v1728193961/johnthachil.com/Writings/pixel-art/10.jpg"
            width="2560"
            height="1440"
            caption="Factorio"
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/11.jpg"
            alt="Mumbai"
            width={1280}
            height={720}
            caption="Dead Cells "
        />
    </div>
</div>

<div className="sm:-mx-24">
    <div className=" grid grid-cols-1 gap-4 sm:grid-cols-2">
        <SnapImage
            src="v1728193961/johnthachil.com/Writings/pixel-art/12.jpg"
            width="2560"
            height="1440"
            caption="There Is No Light"
        />
        <SnapImage
            src="v1728194437/johnthachil.com/Writings/pixel-art/13.jpg"
            alt="Mumbai"
            width={1280}
            height={720}
            caption="Moonscars"
        />
    </div>
</div>

Thanks to the new wave of indie game developers for reviving the lost art of pixel-based games. Their passion is breathing new life into a timeless craft, bringing back the charm of pixel art for a new generation to enjoy.

Pixel tells a story, blending nostalgia with timeless craftsmanship.

The Timeless Beauty of Pixel Art


I put a significant effort into ensuring a seamless transfer of assets, such as fonts, images, and design tokens, between myself and the developers. Although it may seem like mundane tasks, the result of these meticulous efforts can be seen in the flawless execution of pixel-perfect websites. In other words, behind every successful website is a lot of hard work and collaboration between designers and developers.

When I started building the design system at Zoomcar, one key metric we were tracking was the design system's adoption rate. To ease the load on designers and developers, I decided to automate a couple of boring stuff we had to do multiple times.

<SingleImage
    src="v1635933296/johnthachil.com/Writings/boring/automate-boring-design.jpg"
    width="1392"
    height="740"
/>

Here are the few things we created at Zoom that made our lives a little better as designers and why we built these tools.

# 🔤 Icon Font System

We used font icons for all three platforms, iOS, Android & web, to render all icons as it allowed us to style icons pretty quickly on all the platforms.

## Grunt Work

Since we didn't get a premium Icomoon account, we could not use their feature to save font mapping to cloud storage, and the free version allowed font mappings to persist in the local storage of the users. It means

-   Only one person can upload Icons to the Iconmoon
-   The person in charge can never wipe out the local storage since it will delete all the font mapping in Icomoon.

<SingleImage
    src="v1635933296/johnthachil.com/Writings/boring/automate-icomoon.jpg"
    width="1392"
    height="740"
/>

These problems started to daunt as we scaled to 5 member design teams and did this same process again, and again every time we added new icons, I found it nothing more than stupid.

## Solution

When we started to design the tool, we started with few principles.

1.  There should be less or no learning curve for adopting the new tooling we introduce to our design process.
2.  The tools should be abstracted enough such that anyone can use them without understanding their underlying system.

With these principles in mind, we put together a system that was something like this. When anyone merges a branch to master Abstract triggered an event that I used to run a Netlify build system. The build system did four things.

-   It uses abstract API to scan all the Artboards in sketch files and export all icons from sketch to a folder in SVG Format. Since we follow a specific naming pattern for the Icon Artboard, I could export just the icon Artboards from sketch files.
-   The system also performed a few string functions to get the naming of icons to match Zeplin. The way Zeplin always remain a single point for truth for the developers.
-   With the help library system converted all icons to font files, CSS, and JSON.
-   It generated a micro-site display of all the heroes and created a few platform-specific syntaxes, which developers can easily copy and paste.

<SingleImage
    src="v1635933296/johnthachil.com/Writings/boring/automate-abstract-api.jpg"
    width="1392"
    height="740"
/>

## Outcomes

To share any new icons with developers, designers create a design in sketch and merge it with the master branch. That's it. Everything else is automated by code.

[Demo](https://pedantic-euler-3b0c5b.netlify.com/)

![Eleva Demo](v1635933296/johnthachil.com/Writings/boring/automate-icon-system.png)

## Future Changes

When the Icon system started to evolve, it started creating problems on the web since font bundle size increased, affecting performance. To solve this, I will be adding a feature that export icons to react components this way developers can import icon on need base.

# 😌 Eleva

For Zoom, Zeplin is a great platform that acted as a single point of truth for all the developers. When Zeplin introduced style guide features, we added tokens like color, font, spacing to Zeplin. Although at the time, Zeplin didn't have tokens for shadows values

## Problem

We had shadow tokens naming dp1,dp2, dp4, etc., in the system we used in our design. Communicating these token values to developers became very painful. We had 8 - 10 front-end developers who wanted to know which shadow token we should use in that particular design they are working on.

## Solution

Zeplin had extension APIs, allowing me to show certain things based on a developer's selection.

The logic part was straightforward Zeplin extension API returned with a javascript object with selected layers properties like color, shadow values, fonts… Etc. All I had to do here was to maintain our shadow values and map to design tokens that we had in the system. If the shadow values matched the value in our extension, it displayed the sketch's design token. It looked something liked this.

## Outcomes

We deployed the extension Zeplin Extension Library so that all developers can add it to their Zeplin. Once the adoption was 100%, we never had to communicate shadow tokens to designers. It looked something liked this in Zeplin.

![Eleva Demo](v1635933296/johnthachil.com/Writings/boring/automate-eleva.png)

I will open-source this project for anyone who wanted to add their shadow tokens to Zeplin.

# Future Projects

-   **Artboard Name Lint**: We are using a standard naming for artboard names. Based on the rules we set, we wanted to check with all designers are sticking to the rule help of [Sketch Assistant](https://www.sketch.com/extensions/assistants/) API
-   **Contrast Checker**: Using Sketch Assistant API, we want to warn designers to use colors according to Accessibility Guidelines.

# Final Thought

Dedicate some time to zoom out and reflect upon how designers are working. Keep track of the problems. Put forward these problems in the team discussion. Not all issues require coded solutions. Sometimes even an excel sheet will also work. In the end, consider the design team as a product that keeps on evolving.

# Resources

-   [Zeplin Extensions API](https://github.com/Zeplin/Zeplin-extension-documentation)
-   [Abstract API](https://sdk.goabstract.com/docs/installation/)
-   [SVG to Font Convertor](https://www.npmjs.com/package/iconfont-webpack-plugin)

Feel free to reach out to me, @jothachil, on Twitter.


A couple of projects we build to delegate the boring tasks

Delegate boring design task


As Product Designers, we spent a lot of time orchestrating these abstractions. If used correctly, it can do wonders to help users understand and use these intricate apps we create efficiently.

An abstraction is a way to manage complexity. It's taking something inherently complex and making it simple to use. Defining these abstractions at the right level will determine how efficiently we can communicate to our users.

![alt](/overthoughts/designing-for-abstractions/abstractions.png)

Search icon in youtube is an abstraction that communicate the following thing to the user

-   Magnifying Glass graphical is a representation for searching.
-   On Clicking the graphics, the system will let you input your search query.
-   The system will use the query to search in the database to show you relevant information.

Engineering is a much more mature discipline than digital product design, and it's been using abstraction to reduce complexity for quite some time. Most programming languages are designed at higher abstractions, such that programmers don't need to understand the working of the computer for coding.

# Seeking Right Abstractions

When Product Designers started designing for mobile screens, it forced us to understand what the user wants and then put that information first and hide other information behind a click or scroll. Thus figuring out what users wanted became a big part of our job.

Whenever anyone says an app looks minimal, it just means they have used a higher level of abstraction in terms of design—this type of abstraction is not always best for the users. Recently when I asked my mom to search on youtube, she couldn't do it. She didn't knew a magnification glass icon means search. For my mom, that level of abstraction to communicate search is not useful.

## Learning Cost

Most of the abstraction introduced to the interfaced are from real-world metal models to reduce users cost of learning to adopt the abstraction. Home icon is used in apps to navigate the initial state of apps. Here initial state is in reference with home to represent real world behaviour of people to go home after detours.

There are times that specific abstractions are associated with higher learning costs, but once users can get past the learning curve, they can use the system very efficiently. Gesture navigation on the iPhone which replaced the home button, is one example. Spotlight Search in Mac OSX, Keyboard shotcuts all are good examples of this level of abstractions.

In my observations, peoples willing to learn higher abstraction are function how frequently they use app.

# Final Thoughts

Seeking right abstraction is understanding the users limits. Don't assume people are stupid set a higher abstraction obeserve the users behvaiour pattern over a period of time then come to a conclusion.

Starting with lower level abstraction even though design maybe working for users but you never get push the limit of abstraction. This is mainly due to lack support from other functions in the company.


If I ever write a story about my life, don’t be surprised if your name appears billion times.

Designing for abstractions


Recently It's been harder to find good content about design. This made me think, was it always been this hard to find good content? Or is it because now I am looking for answers that are very different from when I was starting as a designer. Is it because there is just too much content out there that I cannot find the right one?

Demand for designer have increased a lot. Companies do want to hire a designer. This has catalyzed the amount of design content on the internet. As a result, it has tipped of signal to noise ratio for design contents.

# Disproportionate Designer Audience

People do write any social platform like medium there by default assumption, you wanted people to read it, motivating you to write more. Rather than just as a creative source to reflect upon design.

In India, at least there is huge demand for people who wanted get into to design. No people at lower funnel is signficant more compare to people are in other level.

If you wanted more people to read, I guess you will have write for this audience. Which is why I seem a lot of '10 things to learn become a designer' type articles.

Very few people are talking about anything in detail or things related to building teams, org structure, and how articulate designers impact in organization.

# Rise of Design Tools

Even though I am all for the innovations happening at the tool's side of design, I am not a big fan of its SEO-focused content strategy to bring more people into their funnel. Type any design-related queries in google. The first ten results will be the content from these companies. I rarely see good content from the independent designers to surface in the top 10 listing in google.

# Twitter is New Medium

I used to relish medium since it's first platform curated quality design content in one place. It's getting harder for me to find good content in the medium, especially with the restriction of three free articles. I am not interested in reading another "2020 Design Trends" article or ten things that make me a better designer.

When medium stoped feeding by hunger, I turned to Twitter. Instead of randomly following people who have designers as their bios, find few people who have a track record of working in design-led companies. These people will plug in other people or tweets or share articles that give the next set of people to follow. It will keep on compounding to a much more extensive network of designers.

**Signal to Noise Ratio:** Very Good, do depends upon the people you follow, but it's pretty easy to find the right people.

# Podcasts New Youtube

Podcast is still is a relatively new medium for me. My experience has been on the positive side till now. Not sure how the future looks since more and more investments are coming to the podcast space.

I have enjoyed the show notes section of the Design Details podcast. A few of the best articles I read recently came from those notes. Also, it's interesting to get different perspectives about design from people like Jon Gold. New Layer podcast hosted by Tanner and Jasmine also talks on topics that not many designers talk about, like the designer's IC or Manager career paths, team cluture, etc.

Although I am still searching for that perfect podcast app with a note-taking, Spotify has been tricky for music and podcasts.

**Signal to Noise Ratio:** Balanced,

# Youtube

High-Resolution podcast on youtube had a lot of influence on me regarding how I design. But lately, I feel this space getting crowded with more and more clickbaity content. Even though this is the reality of the market, most audiences will dictate the type of content on YouTube like any other media company.

I would happily pay for a steaming platform service that offers good design content, talking about designers' challenging problems.


My thoughts on rise overwhelming design content

Finding signal in noise


I have pitched multiple projects to stakeholders that will take months or even years to complete their first reaction is mostly to say no.

I guess their skepticism toward these projects is understandable. As a stakeholders

-   It's hard to visualize the value it will bring for future
-   Adoption cost, need to change the way working.
-   Concerd about the impact it will cause on existing projects timeline.

# Background

Retrospecting the state the Zoomcar designs were at that time. We were clear we needed to put structure to the chaos. Unstructured files, Brand inconsistency with different pages of the app itself, 10-12 definition of same style Button in codebase, the list was pretty long.

Design system was one of the solutions we were sure would bring structure to this chaos. But we knew if we pitched a Design System revamp of our entire designs, it would have been throw out immediately. Since we didn't want that to be the state of design, we decide to find a workaround the no.
![Icomoon Flow](/overthoughts/workaround-no/workaround-no.jpg)

We started to fake design system. "Fake til you make it right." We knew the only way we can get approval from stakeholders is to help them visualize how it can help business. Here are a few things that helped us.

# 🏎 Find people with the least friction.

Find those people who have the least amount of friction for adopting your idea. In my experience, the two best categories of people have low friction in the company are:

-   People who recently joined who are still figuring out things at the company
-   People who taste aligns with your idea. In our case, a couple of people were very frustrated with the number of components definition existed in the codebase.

# 🕶 Show & Tell

Take projects which are not in the limelight of business. It may be new experimental projects, operations dashboards, etc. Implement MVP of the idea in these projects.

Lucky for us, we were launching our experimental eScooter business line at that time. We implemented our fake design system on a smaller scale for this project. It enabled people to visualize what we are building. We used their testimonials as a catalyst for the broader adoption of the design system throughout all the projects.

# 👀 Create Visibility

Be the advocate of the idea. Create posters, conduct workshops, and involve people in the building process. We let people in the company to pick our fake design system name. The point is to create a lot of noise about it. The more people are aware of the design system, the more real it became.

Document it. People have a sense of trust when things are in writings. We made whole Gitbook documentation for few things we were building at that time.

# 🚩 Ending Note

There are times when take decision-based on intuitions. Sometimes these intuitions hard to justify to get buy-in from all the people. Irrespective that if we believe it's necessary to act upon these intuitions, find the workarounds.

For us design system paid off very well. Currently, we have a team level OKR for its adoption. Now, 70% of the entire design is on design system language.


If it doesn’t challenge you, it doesn’t change you.

Workaround the No


Remember the days of Flash websites? That's where my obsession began. For eight years, my personal website has been a chameleon—morphing from a creative playground to a portfolio showcase, and finally, a writer's haven. But this journey wasn't without its pitfalls.

## The Redesign Rabbit Hole

Ever felt the dread of updating your portfolio? Multiply that by a thousand. That was me, caught in an endless loop of redesigns. Each iteration left me more exhausted than the last, sapping my will to even look at my own creation. It was a digital Sisyphus moment—pushing the boulder of perfectionism up the hill, only to watch it roll back down.

## Embracing Imperfection: The Iterative Approach

Then came the revelation: iterative change. It's like giving your website permission to grow up, one small step at a time. The faster we iterate, the quicker we learn. Suddenly, the pressure to be perfect vanished. My website wasn't just a static showcase anymore—it became a living, breathing entity, evolving with me.

## Tech Stack: The Foundation of Flexibility

Choosing the right tools was crucial. Gone are the days of manual updates and clunky deployments. Enter the age of Continuous Integration:

-   **Next.js**: The backbone of my new site
-   **GitHub**: Where the magic happens
-   **Vercel**: My trusty deployment sidekick
-   **Server-Side Rendering**: Because who likes waiting for data to load?

It's like having a team of invisible elves working tirelessly behind the scenes. Push a change, and voilà—it's live!

## Content Creation Unleashed

Remember when adding content felt like solving a Rubik's cube blindfolded? Not anymore. MDX (Markdown + Components) became my new best friend. Now, I can whip up content in any Markdown editor and sprinkle in React components for that extra pizzazz. It's like having the best of both worlds—simplicity meets flexibility.

## Design Constraints: The Unlikely Hero

To keep my inner perfectionist in check, I set some ground rules:

1. Limited container width
2. Design tokens for spacing
3. Only two heading styles in articles

These constraints became my creative springboard, forcing me to focus on what really matters—the content.

## From Portfolio to Personal Narrative

The final piece of the puzzle? A shift in perspective. This isn't just a portfolio; it's my digital autobiography. While portfolios often gather dust post-job hunt, my website continues to tell my story, evolving with every new chapter in my design journey.

So here's to personal websites—may they always be a work in progress, just like us.


Overcoming the Challenges of Personal Website Maintenance and Growth

The Evolution of a Personal Website - A Designer's Journey


The hardest part of learning was letting go of the mental models of view models in the web. The good news is that with SwiftUI, it works like a React component. Based on inputs to a certain function, you get a rendered output.

I am not person who go over all theory and then start doing, I get insipired to do something and see what I need to reach that goal. So did

<div style={{backgroundColor:"#f4f4f5"}} className="skew-shadow rounded-2xl overflow-hidden py-8 mt-8 sm:-mx-24 ">
    <video

        src="https://res.cloudinary.com/drch6exvq/video/upload/v1723813299/johnthachil.com/Writings/swiftui/01_Number_Animation.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />

</div>
<div style={{backgroundColor:"#f4f4f5"}} className="skew-shadow rounded-2xl overflow-hidden py-8 mt-8 sm:-mx-24 ">
    <video

        src="https://res.cloudinary.com/drch6exvq/video/upload/v1723813299/johnthachil.com/Writings/swiftui/01_Number_Animation.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />

</div>
<div style={{backgroundColor:"#f4f4f5"}} className="skew-shadow rounded-2xl overflow-hidden py-8 mt-8 sm:-mx-24 ">
    <video

        src="https://res.cloudinary.com/drch6exvq/video/upload/v1723813299/johnthachil.com/Writings/swiftui/01_Number_Animation.mp4"
        autoPlay
        muted
        loop
        style={{ margin: 0 }}
    />

</div>


Trying out SwiftUI


A metaphor is like a fancy way of saying "comparison" - it's when we take two seemingly unrelated things and compare them to help people understand a concept. In product design, we use metaphors to give users a familiar frame of reference for interacting with our products. For example, the trash bin icon on your computer desktop is a metaphor for throwing away something you no longer need. It's a simple visual representation that everyone understands, even if they've never seen a physical trash bin before. (I mean, who hasn't tossed their ex's love letters into the digital trash bin before? Am I right or am I right?)

Metaphors can also be used to create continuity between a physical product and its digital counterpart. For example, the iPod was designed to look like a traditional music player, with a click wheel and buttons for navigating through songs. This allowed users to easily transition from listening to music on a CD player to listening on a digital device, because the metaphor provided a familiar interface. (I know, I know, CDs are ancient history now, but bear with me here.)

Not only do metaphors enhance the user experience, but they can also help communicate the purpose or function of a product in a more engaging and memorable way. Take the Nike FuelBand for example - it was designed to look like a bracelet, with a display screen that shows the user's progress towards their fitness goals. The bracelet metaphor not only makes the product feel more personal and wearable, but it also helps users understand that it is a tool for tracking and improving their physical activity. (Because let's be real, who doesn't want to feel like they're part of the fancy bracelet club?)

Now, it's important to be mindful of the metaphors you choose in product design. Metaphors that are too obscure or complex can be confusing or misleading, and they may not effectively communicate the intended message. It's always a good idea to test your metaphors with a diverse group of users to ensure that they are understood and resonant. (Translation: don't be that guy who tries to use a metaphor about quantum physics to explain how to use


Metaphor


I've always been drawn to the clean lines and minimalistic aesthetic of Scandinavian architecture, so when it came time to furnish my home, I knew I wanted to incorporate that style into my design. That's why I chose to furnish my home primarily with IKEA pieces.

<SingleImage
    src="v1635928771/johnthachil.com/Writings/workspace/main.jpg"
    width="1392"
    height="2088"
    priority="true"
/>

<SingleImage
    src="v1635928771/johnthachil.com/Writings/workspace/main2.jpg"
    width="1392"
    height="928"
    priority="true"
/>

## The Physical Desk

My office space is, as you might expect, pretty sparse. The desk is my favourite thing about this workspace. It’s called the IKEA Linnmon Table 150x75cm combined alex drawer unit.

-   2019 16' Macbook Pro
-   BenQ 32 EW3270U
-   Logitech K380 Keyboard
-   Logitech MX Master 2S Anywhere
-   Logitech MX Sound 2.0
-   Sony WH-1000XM3
-   Lenovo Smart Clock
-   iPhone 12
-   Water Bottle

I am trying out AmazonBasics Wood Monitor Stand maybe will replace with monitor arm later

<SingleImage
    src="v1635928771/johnthachil.com/Writings/workspace/cute.jpg"
    width="1392"
    height="928"
/>

Tiny ones mostly travel souvenirs from Spiti. A couple of them are travel gifts from friends.

<SingleImage
    src="v1635928771/johnthachil.com/Writings/workspace/cute2.jpg"
    width="1392"
    height="928"
/>

<SingleImage
    src="v1635928771/johnthachil.com/Writings/workspace/couch.jpg"
    width="1392"
    height="2088"
/>
In my living room, my couch is my absolute favorite piece of furniture. It has become my companion for
countless hours of binge-watching and reading. I have a few tiny travel souvenirs from Spiti and gifts
from friends on display as well.

<SingleImage
    src="v1635928771/johnthachil.com/Writings/workspace/guitar.jpg"
    width="1392"
    height="2088"
/>
Finally, my guitar, although not frequently used, has become a pretty wall decoration in my home. Overall,
my home reflects my love for clean lines and minimalism, creating a serene and comfortable environment.

---

Other stuff that makes this workspace can be found at [Uses][1]

[1]: /uses


Been playing around with things at home to feel like home. Finally reached a point I am happy with the setup I got.

2021 workspace setup


I've been working on developing a character to help tell a story for a presentation I'm preparing for work. Here are a few things I've tried and learned along the journey

Image generator model used Dall-E with [Microsoft Designer](https://designer.microsoft.com/image-creator)

## Foundational prompt

I wanted a 3D character that could convey a wide range of emotions while also allowing me to exaggerate those emotions.

```markdown
3D cartoon of a guy with an angry face black hair and a white oversize
t-shirt on a pastel light colour background in the style of Disney
Pixar high resolution,front view, ultra-realistic'
```

Breakdown of prompt

    - Emotion
    - Outfit
    - Background colour
    - Camera perspective
    - Character art style

## Playing with emotions

Through my experiments, I noticed that directly correlated emotional prompts yielded consistently accurate results. The AI effectively captured the specific emotions, making this method reliable for creating characters with clear emotional expression

<div className="sm:-mx-8">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1722958184/johnthachil.com/Writings/character%20design/happ_01.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958184/johnthachil.com/Writings/character%20design/happ_02.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958184/johnthachil.com/Writings/character%20design/happ_03.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
    </div>
</div>

<div className="sm:-mx-8">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1722958184/johnthachil.com/Writings/character%20design/sad_01.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958184/johnthachil.com/Writings/character%20design/sad_02.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958184/johnthachil.com/Writings/character%20design/sad_03.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
    </div>
</div>

Trying to create metaphorical emotions has been mostly hit or miss. I'm not sure if this limitation exists because of the training data available on these emotions, which are more prevalent in animated series.

<div className="sm:-mx-8">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/emo_meta_01.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/emo_meta_02.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/emo_meta_03.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
    </div>
</div>

## Playing with Outfit

The prompt-to-expectation ratio was higher for simple outfits like t-shirts. However, as the prompts became more complex with detailed outfits, achieving the desired results became more challenging. Adding more nuance in the outfit descriptions while prompting can help in obtaining the desired outcome.

<div className="sm:-mx-8">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/dress_01.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/dress_02.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/dress_03.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
    </div>
</div>

## Playing with Perspecitive

Apart front front angle all other angles again hit and miss

<div className="sm:-mx-8">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/views_01.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/views_02.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/views_03.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
    </div>
</div>

## Adding objects

Adding objects to the character has generally worked well, as long as the objects were simple. I believe this limitation is due to the higher abstraction of the English language and its interpretation.

<div className="sm:-mx-8">
    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/objects_01.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/objects_02.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
        <SnapImage
            src="v1722958185/johnthachil.com/Writings/character%20design/objects_03.jpg"
            alt="Mumbai"
            width={1024}
            height={1024}
        />
    </div>
</div>

---

## Closing Thoughts

    - **Higher Abstraction** : Since English is used for communication, the specificity of your descriptions is based on the rules and interpretations of the language.
    - **Speed** : The ability of AI to generate "spark joy" character images in mere moments continues to amaze. This rapid creation process opens up new possibilities for efficient character design.
    - **Use Cases:** Creating a consistent character design is something I still haven't been able to achieve, which is essential in the digital product design world. I've primarily been using these characters in presentations to add warmth and emotion, as well as for marketing and a few personal projects.


Trying out characters with Dall-E


Picture this: a room full of passionate designers, arguing fervently about whether they should learn to code. It's a scene that's played out countless times in agencies, startups, and design schools across the globe. But here's the kicker – there's no one-size-fits-all answer.

## The Wisdom of Jon Gold

In the 43rd episode of the "Design Detail" podcast, Jon Gold drops a truth bomb that cuts through the noise:

> "Do what brings you happiness."

It's beautifully simple, isn't it? If the thought of diving into JavaScript makes your heart sing, go for it! But if code looks more like hieroglyphics to you, don't sweat it. There's a whole world of design skills waiting to be mastered.

## The Design Buffet

Think of design as an all-you-can-eat buffet. On the menu, you'll find:

-   Visual aesthetics (the eye candy)
-   People management (herding cats, but make it design)
-   Systems thinking (connecting the dots)
-   Interaction design (making things click, literally and figuratively)
-   Storytelling (once upon a time, in a user interface far, far away...)
-   Communication (speaking fluent stakeholder)
-   Writing (words that wow)
-   Research (donning your detective hat)

No one's expecting you to pile your plate high with everything. The beauty lies in picking what tantalizes your taste buds and collaborating with others who've chosen different dishes.

## A Personal Take: Coding as Creative Expression

For me, coding is like having a magic wand. It's the power to turn "what if" into "wow, look at that!" As @rsms so eloquently puts it:

> "Software is the medium through which I express myself."

In the professional world, speaking a bit of code can be like knowing the secret handshake. It helps you vibe with developers and see the bigger picture. But let's be real – I'm not gunning to be the next tech prodigy. My true superpower? Design, baby!

## The Bottom Line

Here's the tea: as designers, we should chase what lights our fire. Maybe that's code, maybe it's crafting pixel-perfect interfaces, or maybe it's conducting user interviews that uncover game-changing insights.

So, next time you find yourself in that heated debate about designers and coding, take a deep breath and remember – there's no "right" answer. The only question that matters is: What makes you tick as a designer?

Now go forth and create, whether that's with code, Figma, or good old-fashioned pen and paper. Your design journey is yours alone – make it an adventure worth having!


My take on when people ask me why I code as a designer