Around a year ago I decided that I wanted to make a portfolio website for myself. Over the past year, I have iterated through several versions to make it look like it does today. Overall, I am pretty happy with the final result, and am continuing to work on adding features to make it even better. I wanted to get into the details of how the site came to be and tips for people who are considering building their own personal website and personal brand.
I think the first step of any design process should be research. Within the context of designing a personal website, it’s really important to look at other people’s websites and figure out what you like and don’t like. Personally, I spent many hours looking through portfolio websites by doing random Google searches as well as looking at people’s LinkedIn bio’s. I think being able to look at a piece of work and determine what you like and don’t like about it is an important part of figuring out your own brand and what you want to make. It is also important to look at existing portfolios from people who are in the same industry as you, so that you can build your portfolio for your own personal needs. For example, I did a lot of “Top UX Portfolio” searches. Here is a good article to start off with!
Through my research, I realized that I really like websites that are on the simpler side that really feature the work. I wanted to make something clean, and that didn’t have too many fancy features. The work and the explanations should be succinct and informative. I also wanted my personality to come through on the website, so I decided to make it as happy and fun as possible.
Happy and fun translated into different design elements for me. For example, I decided to use colors like yellow and white. I love sunflowers, and I think they represent me very well, so I wanted to illustrate a sunflower and use it as a symbol on my website. To contrast with the more whimsical, fun nature of these elements, I decided to keep my typography minimal and direct. This involved using sans-serif typefaces that did not have too much detail. I actually used a cool website called Font Joy that pairs together Google Fonts for you. It uses deep learning to create combinations that cater to your needs.
After brainstorming my basic design components, I decided to work on the actual content for the site. This involved writing down which types of pages I wanted, and which projects I thought represented me the best. I eventually decided on creating a one page website, with separate landing pages for each of my portfolio projects. The one page has a short introduction, links to each of my portfolio projects, contact information, and a small footer. I think it is a good idea to sketch out a basic structure for the website in a tree diagram format. This will help you visualize what kinds of elements you might need, so that it is easier to decide which frameworks you may want to use.
My website structure was pretty simple, so I decided to use the classic HTML, CSS and JS format. I found a bootstrap template that had some existing qualities that I liked. My current website no longer uses a lot of the template material, as I have developed a lot of custom elements on my own, but I think that templates are a great place to start.
If you are not comfortable with coding your own site, there are lots of custom website creation tools like Wix and Adobe Portfolio that are pretty easy to use and effective. I would recommend reading a little bit about the different types of tools available, so that you can comfortably create something.
After all of my planning, I jumped right into developing the website. My first iteration was definitely not as clean as my current website. It had a lot of linked pdfs to my work, and no explanations for any of my pieces or processes. There was also a lot of wasted space, and unnecessary images.
My current iteration focuses on my portfolio. There are links to 8 different projects I’ve worked on in the past few years. Some are direct links to other websites I’ve created, while others link pages that discuss the process behind larger projects. I really wanted to highlight the process behind my work. I spent a lot of time writing down the steps I took to get to the final prototype. I also incorporated pictures of the different steps of the process as well as the final product. I think it’s really important to give people a visual representation of what your work is, because of the very visual nature of design.
In the next few months, I hope to clean up the code for my website as well as add any new projects I will make. I think it is also really important to get feedback for the website you have created. Show it to your friends, colleagues, see if they can use it and if it makes sense to them! Sometimes, just watching people walk through your site can be beneficial for you to understand what is working well and what isn’t.
I hope you have enjoyed this little description of my personal process for my portfolio website. Feel free to comment or message me with any questions you may have. My website is www.ruchakhanolkar.com. Please check it out and let me know what you think!
