This blog is part of a series that I am writing to document my journey of creating a portfolio website from scratch. If you haven’t read the previous blog I highly recommend you to go and check it out. It walks you through the whole process of How I managed to convince myself to create a portfolio website.
📷 Looking at the bigger picture
Now coming back to the task at hand. In my opinion choosing a design for my website was the most difficult part of the process. I say that because finalising a design meant that I had a clear idea about what I wanted to showcase in that website. Now, to first understand what the content of my website was going to look like I had to lay out a high-level structure of the website to know what design decisions I should make. In my head this unfolded as follows:
- The site should have all my socials and a solid channel for communication (I went with Email), in case a potential collaborator comes along. (wow so optimistic 😛)
- It should also contain links to projects that I have done in the past (for bragging rights ofc)
- And, I should be able to share my un-censored thoughts on this platform. (you might see more blogs regarding this since this is an ongoing process)
With these things in mind, I now had a vague idea of what kind of content I’ll be dealing with. I had certain keywords in my mind like socials, project showcase, a thought archive etc. and they each sort of branched out into ideas of their own.
💡Choosing a design ideology
Now that I had a bit of an idea about the type of content I'll be dealing with, I thought that going on a creative showcase website like Dribbble, Pinterest etc. would solve my problem. But guess what, hell naww. I was greeted with such insane spectrum of designs that choosing just one as an inspiration seemed damn near impossible. So, I went on ahead on my web surfing journey to look for recent design trends, and ALAS! I went where all men have to seek inspiration, the Apple website. At that time, when I visited their site, they used a design ideology called the Bento Grid. I can write about it for days but TLDR; it looks like neat little boxes stacked on top of each other which creates a grid. The design ideology resonated with me since it looked minimalist, tidy and the overall look was really boxy and organised, which was right up my alley.
🗺️ Creating a blueprint
With all the tools needed to create a blueprint for my website I opened up Figma and started creating a basic layout which I could then use as reference when I am developing the website. Once again let’s dive into what went inside my head when I was creating the mockup.
- “Hmmm…I need to have a nav bar for sure, we can go with a pretty standard navbar with a logo on the left and page navigation on the right.”
- “I would need an intro section which shoud have some text describing what I do and what I stand for professionally, and maybeee, we can have some social links in that section as well” (Its always better to have a CTA right in front of the users face. BAM! CTA)
- “Ughh…I need to show my face” (I really didn’t want to because I am an extremely camera averse person, so I worked around it, you might've already seen it 🤭)
- “I think each box in the bento grid could make up a tile for a project, I could have a screenshot for preview that would fill the tile up and make each tile unique. When the users click on it, that would take them to the deployed application.” (In hindsight this might not be the best decision but well…I can iterate on that so I went ahead with it)
- “Also, I should have a footer which explicitly tells people who are on this site to collaborate with me on how to reach out to me.”
After jotting these things down and basing my design decisions on them, I finally ended up with this. Not too shabby right? RIGHT?. But I still wanted to integrate a blog in my portfolio because that was one of the core features that drove me to pursue this project. But I told myself, “let’s not get ahead of ourselves and work as an iterator rather than a perfectionist.” (Yes, I actually said that to myself, I’m weird)
Spoiler Alert! I did integrate a blog. 🤓
🏁 Finishing up the design and next steps
With a basic mockup in my hand I now had a clear idea on how the website should look like. As I mentioned before, I really wanted to add a blog section to my portfolio, and I am working on it, so stay tuned for an update on that. Meanwhile, coming back to the present timeline, I chose to move forward with the design at hand. In the next blog, we’ll go over the details of my thought process while developing the actual site. Until then stay motivated, stay curious and keep building! ❤️