Portfolio of Suvo Ray
Design, Art, Type and everything in between
Recently I published my portfolio and a few people reached out to me regarding the designing, technicality, and time lining of my portfolio. Designing a portfolio might be a daunting task since a design portfolio is not just about the work or case study, but is rather like one’s autobiography. So, taking time to design and document a portfolio that reflects one’s personality, learning and design journey might require a prolonged time.
Making a website has several other investments apart from time. Any no-code tool can cost up to 15K INR per year. Also, there are few other investments like getting your portrait done by a professional photographer, hiring a content writer for proofreading etc.
I didn’t rush myself while creating the website. I would work mostly 2-3 days a week. It took me an overall of 3 months to complete the entire project; 2 and half a month was required for designing and it took me around 3-4 days for the entire development. There was no coding involved.
On this note, I would now talk about how I developed my portfolio and the checklist that I created for myself while doing the same. These steps, I believe will help you understand how I approached the project. Irrespective of how one chooses to build their portfolio, these steps and checklists should be applicable to all. One has to keep in mind however, that are just the methodological steps, which in no way can give shape or polish one’s creativity.
Behance and dribble are marvellous tools that can be used to create and showcase our work. Behance has in fact, served me better than any other tool and I cannot thank it enough. In this sense it’s truly the most brilliant and resourceful platform for a portfolio creation. One would question then, why create a personal website? Answering this ‘why’ then becomes the first step for me.
I have been working in the Design industry for 5+ years, and all this while I have maintained my portfolio in Behance, dribble, and Instagram. I realize that I’ve worked for more than 10,000 hours in this industry, practicing the same craft. Hence, during this lockdown, I decided on creating my own portfolio website. This however, was not the only reason why I created my portfolio website:
1. I wanted to create a self governing platform where I could be completely free of the platform constraints. While Behance, Dribble, and Instagram are otherwise great, they come with several rules and regulations that one has to abide by while publishing their work. For instance, Behance always requires one to create a case study and Dribble only accepts the shot forms of contents.
2. I also wanted to have a place where I could put forth myself as a designer and an artist, and share my entire journey. Storytelling being one of my main intentions, I wanted the people visiting my portfolio to know me a little better and judge my work accordingly.Receiving freelance clients or recruitment calls is never the intention.
I have about 15+ projects, but wanted to trim a few from that list. To be completely honest, my only criteria was the project that got shipped and are not in NDA. I finally however, decided to go with the 7 projects which show both visual and analytical skills.
My first step was deciding on the information I wanted in my portfolio. That includes information such as Home, About me, Professional work, Personal work, blog, and contact page etc. Followed by that is the second step which is designing the navigation and IA.
As previously mentioned in my article on the design process, I started researching books, movie posters, etc. I have a good collection of graphic design and typography books, and that is where I started. Once I did so, I made some rough mocks on Figma and went on improving them. You would think I’m talking false but I’ll share the secrets behind a few of my inspirations: Have you seen the barcode in the preloader? The reference was taken from the film Hitman. The dog that you find on my 404 pages was taken from the episode, ‘The One Where Chandler Doesn't Like Dogs’ in the show F.R.I.E.N.D.S. The telephone animation on the contact page replicates a physical telephone. The fingerprint on the work page represents authenticity. Now you know a few secrets behind my work :D
.png)
For me, Typography is almost 90% of the design, and so choosing a typeface is therefore the first most important aspect. I was looking for a Grotesk typeface that can render well and have good readability and language support. For the case study and blog page, I wanted to go with a serif font. Now the trick of choosing a serif and a sans serif, and make them work together is line-height; if both of them have similar line-heights, it works the best. I did choose Inter and Libre Caslon Text.
These are the basics, although there are a few other factors that go into choosing the typeface. You can read my more about choosing a typeface here.
Have you ever visited an art gallery? If you have, you’d notice that the gallery walls are mostly white, against which the work of the artist is placed. This is done to enhance the focus on the work of art. When the background is neutral then the focus automatically shifts to the work, thus allowing an unconstrained conveyance of the artist’s story. This is something that I aimed at too, which is why I went ahead with the black and white theme.
Next, once I decided on the typeface and colour, I started working on the final UI. It took me almost 3-4 versions of the final UI before I decided on the current one, I have. The trick of choosing a design is to finalize it the day after, so as to avoid any wrong decisions.
I prefer using iconography for the information and actions on my website. My aim was to create an iconography style which would merge seamlessly with the typography I have done on my website. All the icons for this were designed in Illustrator. You can also choose to do these in Figma. But please remember to design them either on Figma or Illustrator because they have to be exported in SVG while developing.
The website I have made is typography-focused. I never wanted to design something trendy for my website but something rather classic, that I can also use for a very long time in my career. Let me know what your thoughts are about my website :)
A crucial part here is the content strategizing, on which one should definitely invest time and money. Writing an original and authentic piece is also pivotal to the entire development. However, since most of us designers tend to fall short of a creative writing fecundity, it’s always preferable to seek help from a professional. After I wrote most of my content, I did send it to a copywriter for proofreading. The proof reader I’m talking about here, is my friend Saloni, who runs a marketing agency called Chammach.
Also, remember that content strategy can be different for different portfolios. It’s all about what you want to showcase in your portfolio.
Consider going to a professional photographer for photographs. This is one of the investments you will not regret. For my photograph, I took help from my friend Rakesh, who is an amazing cinematographer.
The maximum amount of time I had to invest was on the case studies. Hence, I’ll suggest you start preparing your case studies first if you are planning to publish your portfolio. I will discuss how I have designed my case studies in some other notes. Here is the link to the Case study page.
At this stage, I forwarded my designs to my design mentor and a few friends, who I felt should take a first look and share their thoughts on it. Consider doing this according to your convenience.
After the design was done, I started creating the animation, for which I used after effects. My plan was to use Lottie files for implementing the animations. While creating the animation I was constantly keeping a check on those by uploading it to Lottie Files. This is an important step since a few of the after effects properties are not supported in Lottie.
Once the design was done I started looking for no-code platforms where I could publish my work. Wix, Squarespace, Cargo and Readymag are all wonderful and resourceful platforms but amongst them all, I found Webflow to be the most powerful one. Squarespace and Wix are template-based, which is great for designers who don’t want to design something from scratch and quickly put together their portfolio. In case of Cargo and Readymag one can design from scratch. They are honestly few of those really good no-code development platforms, but are unfortunately not powerful enough for animations. Also, these platforms do not have CMS. Thus, weighing all the pros and cons, I decided to go with Webflow and one would be beyond amazed as a designer with what can be done on Webflow.
Webflow however has some amount of a learning curve. It took me a few hours and some research work to get the basics. They also have an amazing community, Youtube channel and Webflow university where they have answers to most of the queries.
While starting the development on Webflow, I did export most of the assets and added some dummy content to CMS for me to work with. For animations, I have done most of the animation on my website with Webflow native animation tool. For the banner animation, I did those in after effects and added to my website using Lottie files. Yes, Webflow supports Lottie files and also C4D animations. Apart from the animation feature I loved their CMS. I think after Behance it’s one of the easiest I have used.
After the completion of most of the development work, uploading the content was the one final task. I exported allt he images in PNG format, because it provides lossless compression. I had initially wanted to go with Webp format but unfortunately, Webflow doesn’t support Webp format. After exporting I used Tiny PNG to compress all the images; the maximum amount of space I save, the better the performance.
Once I uploaded all the content I gave some final touches to the animations and published on my website in the staged view of Webflow. At this point, the website is published in the staged view and I forwarded the link to a few people for getting feedbacks on how it’s performing.
With my portfolio being almost complete, I added all the alt text to my website images. This is done for accessibility.
After all the pages were complete I set up my SEO title, meta description and uploaded all the Open graph images. Open graph images are those which show up once you share your portfolio link.
These seem to be a lot of steps but are just the finer details which need to be taken care of while shipping the work. I did set up my Fav icons and redirects. A favicon helps us in identifying our website in the browser tab. Redirects are necessary if you have a lot of CMS content. If the link of the CMS content changes, it redirects to 404.
After I implemented all the feedback and found the final website satisfactorily set up, it was time for me to take it live. I therefore connected my custom domain and after a few steps, my website was live. Once your website is live the feeling that is procured, is unparalleled :P
Why design a portfolio website? Is a website required at all?
Research for inspirations: Please use your own suitable methods.
There are 3 ways from this stage
If you want to go ahead with Wix or Squarespace then you do not need to design your website from scratch. You just need to choose a beautiful template and add your case studies. In this scenario just design your case study and add those to your website. The following are the steps that are to be followed in such a situation:
1. Choose a beautiful template
2. Design all your case study
3. Upload all your case study
4. Link your custom domain
5. Take it live
Using someone else’s design as a template for my portfolio is never an option for me, especially when my intention is to exhibit my original work. This is the reason why I choose to go with Webflow, where I can design everything from scratch.
The following steps are involved in this process:
Design
1. Navigation and Information architecture
2. Choosing a typeface
3. Choosing colours
4. Iconography
5. Final UI - make multiple versions before you choose one
6. Content strategy
7. Photograph
8. Case studies
9. Export all the assets, SVG for icons
10. Animation
Development
1. Upload all your assets
2. Configure your CMS
3. Develop your website pages
4. Add animations.
5. Add case study content
6. Set up redirects for your website
7. Add alt text to all the images
8. Add Favicon and web pack icon
9. Add SEO and Metadata
10. Add Open graph images
11. Link your custom domain
12. Ship it!
3. The last method is to code your own website. I am however not the right person to suggest anything in this matter.
There are varied methods of developing a portfolio, and mine is just one of them. Let me know if you use any other steps for building your portfolio. Also, if you found this article helpful please consider sharing it on your social networks. Also, this is not sponsored by Webflow or Lottie files, and the steps that have been mentioned here are authentic and unfeigned. Excited to see what you guys develop next :)
If you found this helpful consider subscribing to my newsletter.
Happy creating!
by Suvo Ray
Published: 5th Oct 2021
