WebxSid
Personal website
Personal website
Designed a personal website for my friend Siddharth.
Designed a personal website for my friend Siddharth.
Timeline
May - July 2023
May - July 2023
Tools
Figma
Figma
Notion
Notion
Disciplines
User Interface
User Interface
Wait but why?
Siddharth already possessed a private web platform, and this was shaping up to be the third major revamp for his portal. This round, he aimed to revitalize it with design components leaning towards a modular design aesthetic and desired a less convoluted version than the predecessor. Equally important was his aspiration to hone his design prowess.
Siddharth already possessed a private web platform, and this was shaping up to be the third major revamp for his portal. This round, he aimed to revitalize it with design components leaning towards a modular design aesthetic and desired a less convoluted version than the predecessor. Equally important was his aspiration to hone his design prowess.
Just at the start, I felt lost…
Mistake #1 - Tinkering with Navigation
I started this project with some experimentation with navigation interaction. I wanted to create something similar to iOS’s AssistiveTouch for the navigation, but it was becoming too complicated and limiting for us. Just at the start, I spent around 2-3 days sketching and thinking about it. I was feeling stuck and lost with how to proceed with this new design. I was feeling confused and blank about what I should do with this interaction and way of navigation when I don’t have the whole website structure clearly planned. I learned that this was something creative that should be made or experimented with after the foundation of the website is solid and complete. Building something new like this on top of that.
Mistake #1 - Tinkering with Navigation
I started this project with some experimentation with navigation interaction. I wanted to create something similar to iOS’s AssistiveTouch for the navigation, but it was becoming too complicated and limiting for us. Just at the start, I spent around 2-3 days sketching and thinking about it. I was feeling stuck and lost with how to proceed with this new design. I was feeling confused and blank about what I should do with this interaction and way of navigation when I don’t have the whole website structure clearly planned. I learned that this was something creative that should be made or experimented with after the foundation of the website is solid and complete. Building something new like this on top of that.
I realized that I needed a process and structure to complete this design project; otherwise, I’d get lost in the maze of tasks. I sought help from YouTube to learn about the process for web design and surprisingly came across this three-video playlist made by Flux. It helped me decide how to proceed with the web design. They've been immensely helpful in this journey, and I am grateful for it.
I realized that I needed a process and structure to complete this design project; otherwise, I’d get lost in the maze of tasks. I sought help from YouTube to learn about the process for web design and surprisingly came across this three-video playlist made by Flux. It helped me decide how to proceed with the web design. They've been immensely helpful in this journey, and I am grateful for it.
Compass
Compass
To create a proper direction for this project - after discussions with Sid I decided this should be the core of the website - something that we can keep coming back to when we felt lost or indecisive
To create a proper direction for this project - after discussions with Sid I decided this should be the core of the website - something that we can keep coming back to when we felt lost or indecisive
Goals
Introduce
Sid and his Work
Document
Going in depth with the experience of individual projects
Connection - Connect with like-minded folks and the community
Introduce
Sid and his Work
Document
Going in depth with the experience of individual projects
Connection - Connect with like-minded folks and the community
Audience
People on the same journey - beginners, peers, seniors
Recruiters and Collaborators
General Public
People on the same journey - beginners, peers, seniors
Recruiters and Collaborators
General Public
Principles
Simple
Immersive
Interactive
Simple
Immersive
Interactive
Map — Process
Map — Process
Content and Information Architecture
Design
Development
Testing
Iterations and Upgrades
Content and Information Architecture
Design
Development
Testing
Iterations and Upgrades
Journey
Journey
Content and Information structure
While planning the areas of the website, at the back of my mind each page felt like a recorded message, built with a specific intention, similar to Princess Leia's message to Obi-Wan Kenobi.
To learn more about the availability of websites that curate filmmaking resources and guides, I did secondary research:
Google and open all the links
Searching on Google with 'Reddit' keyword and opening all the links
Searching on Product Hunt
I found impressive solutions through well-organized Reddit posts, blog posts, Google documents, and GitHub pages. However, I couldn't find a central website that curates these resources in one place and is easier to access.
Design
Seeking Clarity through Iterations
To learn more about the availability of websites that curate filmmaking resources and guides, I did secondary research:
Google and open all the links
Searching on Google with 'Reddit' keyword and opening all the links
Searching on Product Hunt
I found impressive solutions through well-organized Reddit posts, blog posts, Google documents, and GitHub pages. However, I couldn't find a central website that curates these resources in one place and is easier to access.
Homepage and Control Center
I started the design by focusing on the most common and frequent areas of this website - the home page and control centre. Siddharth gave me a basic idea for the control centre's navigation panel, but I was clueless about what should be done for the homepage. We wanted to keep the principles of immersive and simplicity in mind, so we decided to stick with just the essential information for the start and develop it further in the next version.
The control centre was the trickiest part, especially in deciding its placement, elements and interaction. We aimed to keep it focused on functional modules and less chaotic. If we hadn't had a clear focus, we might have ended up creating unnecessary modules for the first version, hindering the development.
To learn more about the availability of websites that curate filmmaking resources and guides, I did secondary research:
Google and open all the links
Searching on Google with 'Reddit' keyword and opening all the links
Searching on Product Hunt
I found impressive solutions through well-organized Reddit posts, blog posts, Google documents, and GitHub pages. However, I couldn't find a central website that curates these resources in one place and is easier to access.
Mistake #2 - I got lost again experimenting with prototyping and interactions.
A playful start turned into a distraction I was new and got sidetracked while experimenting with the prototype feature, causing me to miss my self-imposed deadline for the homepage. I should have build the basic structure first, kept the notes of idea and then experimented those ideas later
Mistake #2 - I got lost again experimenting with prototyping and interactions.
A playful start turned into a distraction I was new and got sidetracked while experimenting with the prototype feature, causing me to miss my self-imposed deadline for the homepage. I should have build the basic structure first, kept the notes of idea and then experimented those ideas later
Mistake #2 - I got lost again experimenting with prototyping and interactions.
A playful start turned into a distraction I was new and got sidetracked while experimenting with the prototype feature, causing me to miss my self-imposed deadline for the homepage. I should have build the basic structure first, kept the notes of idea and then experimented those ideas later
Connect
I wanted to give the contact page a card feel like sharing a business card to connect.
To learn more about the availability of websites that curate filmmaking resources and guides, I did secondary research:
Google and open all the links
Searching on Google with 'Reddit' keyword and opening all the links
Searching on Product Hunt
I found impressive solutions through well-organized Reddit posts, blog posts, Google documents, and GitHub pages. However, I couldn't find a central website that curates these resources in one place and is easier to access.
Mistake #3 - Unknowingly putting the focus on looks over feasibility.
While iterating with card designs, I focused more concerned with the aesthetics of the website and overlooked its feasibility. Siddharth pointed out that using a background image for the textures would adversely affect the website's loading speed and experience.
Mistake #3 - Unknowingly putting the focus on looks over feasibility.
While iterating with card designs, I focused more concerned with the aesthetics of the website and overlooked its feasibility. Siddharth pointed out that using a background image for the textures would adversely affect the website's loading speed and experience.
Development and testing
Siddharth has a lot to share about his experience with optimizing code and making the website run smoothly. He will be able to write more about it later, after he finishes his terminal module mini-project and fixing some minor inconsistencies.
Siddharth has a lot to share about his experience with optimizing code and making the website run smoothly. He will be able to write more about it later, after he finishes his terminal module mini-project and fixing some minor inconsistencies.
Reflections
Reflections
Challenges & Failures
Challenges & Failures
Laptop Trouble
Laptop Trouble
On May 12th, my laptop (2016 mbp) suddenly stopped working due to charging and battery faults. Unfortunately, it took a whole month to get it fixed. It was challenging to spend a whole month without the main workstation and old backup pc was also giving the frequent BSOD.
On May 12th, my laptop (2016 mbp) suddenly stopped working due to charging and battery faults. Unfortunately, it took a whole month to get it fixed. It was challenging to spend a whole month without the main workstation and old backup pc was also giving the frequent BSOD.
Creating Self-Imposed Deadlines
Failure to complete the work before the deadline
Creating Self-Imposed Deadlines
Failure to complete the work before the deadline
I missed the deadline because I failed to estimate the correct amount of time required. It took me almost two months to completely deliver the project to Siddharth, which should have taken only one month at max.
I missed the deadline because I failed to estimate the correct amount of time required. It took me almost two months to completely deliver the project to Siddharth, which should have taken only one month at max.
Resources page
Resources page
We had plans to create a resources page, but the project was becoming too heavy and would have delayed the work further. It was a big project similar to Libfilm, so we decided to postpone it and work on it in future versions.
We had plans to create a resources page, but the project was becoming too heavy and would have delayed the work further. It was a big project similar to Libfilm, so we decided to postpone it and work on it in future versions.
Learnings
Learnings
Apart from learning from mistakes and failures, I learned some other lessons during this project.
Apart from learning from mistakes and failures, I learned some other lessons during this project.
Multi-tasking vs One thing at a time
Multi-tasking vs One thing at a time
This project taught me that trying to do many things at once isn't effective. I found that focusing on one page or section at a time works better than spreading myself too thin. Constantly switching between tasks took a toll and had a cost. I noticed my pace of growth slowing down, and that was challenging.
This project taught me that trying to do many things at once isn't effective. I found that focusing on one page or section at a time works better than spreading myself too thin. Constantly switching between tasks took a toll and had a cost. I noticed my pace of growth slowing down, and that was challenging.
Collaboration
Collaboration
One of the best parts of this project was the collaboration with Sid. We shared ideas and had a lot of fun. It's amazing to see how developers can turn design ideas into functional reality not just by following instructions, but also by adding their suggestions and ideas.
One of the best parts of this project was the collaboration with Sid. We shared ideas and had a lot of fun. It's amazing to see how developers can turn design ideas into functional reality not just by following instructions, but also by adding their suggestions and ideas.
Prototyping in Figma
Prototyping in Figma
Although I got lost at times while playing with it, I had fun and learned its basics to convey my ideas better to Siddharth.
Although I got lost at times while playing with it, I had fun and learned its basics to convey my ideas better to Siddharth.
Using Design Systems
Using Design Systems
I had no prior experience with Figma's components and the concept of the design system. It was all new to me and at first, I found it challenging but after tinkering with the material You documentation and community files I found it was fun and realised its usefulness in maintaining large design files.
I had no prior experience with Figma's components and the concept of the design system. It was all new to me and at first, I found it challenging but after tinkering with the material You documentation and community files I found it was fun and realised its usefulness in maintaining large design files.
I had no prior experience with Figma's components and the concept of the design system. It was all new to me and at first, I found it challenging but after tinkering with the material You documentation and community files I found it was fun and realised its usefulness in maintaining large design files.
Spacing and Layout
Spacing and Layout
While designing it, I was also learning and fixing my weak spots. The most impactful lesson I learned was about spacing and layout. I realized the importance of giving proper padding and margins, an area I had missed out on while designing my previous project, Libfilm. add the 4px meme, which was a reminder of my experience last summer.
While designing it, I was also learning and fixing my weak spots. The most impactful lesson I learned was about spacing and layout. I realized the importance of giving proper padding and margins, an area I had missed out on while designing my previous project, Libfilm. add the 4px meme, which was a reminder of my experience last summer.
Ending Note
Ending Note
This project intended to give Sid’s website a new look and to help me improve my product design skills and I certainly made progress in both goals it turned out like a training arc for us to test and upgrade our skills, both of us wanted to get better in our domains and collaboration with each other. It also made me aware of areas where I need to improve my skills and I plan to do that through practice and future projects. Felt the happiness of finding a new journey goal with so much to explore, bringing the joy of navigating through creative challenges.
What’s next?
There are still some rough parts and inconsistencies on the website that I want to make smoother along with some new changes. I want to reach that sense of satisfaction—where it feels like, "Yes, now it's excellent and beautiful, without any flaws or rough edges.”
Towards new iterations, improvements, and the grand line!
to be continued.
This project intended to give Sid’s website a new look and to help me improve my product design skills and I certainly made progress in both goals it turned out like a training arc for us to test and upgrade our skills, both of us wanted to get better in our domains and collaboration with each other. It also made me aware of areas where I need to improve my skills and I plan to do that through practice and future projects. Felt the happiness of finding a new journey goal with so much to explore, bringing the joy of navigating through creative challenges.
What’s next?
There are still some rough parts and inconsistencies on the website that I want to make smoother along with some new changes. I want to reach that sense of satisfaction—where it feels like, "Yes, now it's excellent and beautiful, without any flaws or rough edges.”
Towards new iterations, improvements, and the grand line!
to be continued.
This project intended to give Sid’s website a new look and to help me improve my product design skills and I certainly made progress in both goals it turned out like a training arc for us to test and upgrade our skills, both of us wanted to get better in our domains and collaboration with each other. It also made me aware of areas where I need to improve my skills and I plan to do that through practice and future projects. Felt the happiness of finding a new journey goal with so much to explore, bringing the joy of navigating through creative challenges.
What’s next?
There are still some rough parts and inconsistencies on the website that I want to make smoother along with some new changes. I want to reach that sense of satisfaction—where it feels like, "Yes, now it's excellent and beautiful, without any flaws or rough edges.”
Towards new iterations, improvements, and the grand line!
to be continued.