Your website is you.
A short case study on how I designed my own UI/UX design portfolio website.
“But your website doesn’t reflect who you are or what you exactly do or the design process you follow.. I think you should change it. ASAP.” — Varun
I was contemplating the thoughts of designing and coding my own website from a very long time. I just couldn’t find enough time to design my own website because I was busy designing for others( ¯\_(ツ)_/¯ ). The website which I already had on my domain was old and wasn’t clearly telling my visitors who I really am and what all I can do.
It was time! Treating yourself like a client who always wanted it yesterday, was the only option left.
I wanted my website to communicate the way I would communicate when I am talking to a prospect client. The design had to have a personality to it.
So here is how it went.
I wanted to have a one page website where I could capture all the essential things about who I am, what I do, etc along with maintaining an overall feel of interacting with me face to face.
The language had to be friendly and design had to be intuitive.
With this thought, I started sketching the idea on paper. Yeah! The good ol’ way!
After days of back and forth on what should go on my website and what should not, one fine morning, at 3 am, I hit the jackpot!
Wireframing
Here’s how the initial wireframe of my website looked like:
As you can see, I decided to have 5 different sections in my website:
Section 1) A short introduction.
Who I am and what I do, should be captured in 2–3 lines of text. This section was also going to have a Call To Action button. I wasn’t sure at this point of time about where should this CTA take my visitor. I was confused between a different page telling my visitors about the design process which I follow or should I take them to my portfolio section directly? I eventually ended up sending all the visitors to a short case study of one of the project where I had taken care of UX and UI design. The case study captured, briefly, my design process.
Section 2) About my experience with UI/UX design.
I felt it was important to talk a little about what I have accomplished so far. This section was mainly going to briefly cover my experience with designing for digital medium. I also thought of having a full-screen slider of few of the things I’ve designed, but keeping the performance and loading time of the website in mind, I decided to go with an image with a few landing page designs, presented well.
Section 3) My design portfolio.
It was difficult deciding which projects should I put on my website for display? There were over 200 designs, web, mobile and wearable combined, which I could put! “But that will be an overkill” — I thought to myself. I carefully selected 6 of my best work and also created a short case study of each one of them. Basically to help my visitors understand the kind of hard work which goes behind those beautiful pixels on the screen. :)
Section 4) About Me.
I wanted to give my visitors a sense of my personality. “What about putting a chunk of text? Naah! that’ll be boring. Also, I don’t want to waste my visitors time. What about doing something different? Oh! Swipeable cards with each card holding a small fact about me? Yeah! that sounds cool” — I thought to myself again (yeah.. I talk to myself!)
Section 5) Contact me section.
Because hey! I love talking to people! :D
Color Templates
Time was to start my research on what colors would be the best? what font should I chose? And which coffee should I drink? Well, It wasn’t that difficult to solve the coffee problem though.
I wanted to keep my website Minimal. Clean. Sweet!
I am a big fan of Serif fonts. So I wanted to use some nice serif font family on my website and guess which named popped first in my mind?
Libre Baskerville. FTW.
Here’s how the final website looked:
So far so good. What’s next?
After I launched my website, I tried gathering few feedbacks on how my website looked and worked, what I could improve, what I could keep and more importantly, what I could get rid of.
Based on my experience, a thing which I’ve noticed, which takes too much of time for someone looking to get the user experience or user interface design or re-design for his/her next web/mobile app, is getting to know how much time would it take and how much would it cost?
So I thought of including a module of estimation. Basically, through my website, people should be able to submit their requirements and come to know about how much time and budget they should be eyeing for the services they are looking for.
Here is something I have come up with. I might end up changing it completely, but I think it’s a good start for now:
I received a lot of amazing reviews and a few very important inputs on how I could improve my website, usability-wise. Almost all of them are incorporated already.
In the end, I did it! :)
Please visit my new website: http://chandan.me/
Looking forward to receive more feedbacks and suggestions.
