Designing my Portfolio on Webflow

My journey from Figma to Webflow

Designing my Portfolio on Webflow

First, I would like to say, Webflow is an awesome tool, it feels like the kind of tool that understands your requests and makes it easy for you to solve your requests, with every instance waiting to be dragged and dropped however you want it.

Webflow allows you to be the designer and developer at the same time without writing a single line of code. Very insane stuff.

Like most designers, I have been procrastinating the use of Webflow for my portfolio, I assumed it would take me time and brain power to understand the interface.

Decided to get better at Product design and web design, until i was ready to build my portfolio, luckily for me, it took me three years of designing for the web before deciding, it was time to have my own portfolio website.

pawel-czerwinski-3DT_d9ttbv0-unsplash.jpg

Anybody can learn to use Webflow in a shorter period, it all depends on you.

I will be sharing my journey to designing my first project on Webflow, so grab a seat.

logan-weaver-LHDQawgNS_I-unsplash.jpg

Well it was a boring day and I got reached out to by a friend who wanted to learn Webflow and needed an accountability partner, I like the idea of a new task or project, as it gives me a sense of purpose especially when it involves learning a new software.

We then proceed to fix dates for checking on each other's progress, it was going to be a weekly check-in.

emma-matthews-digital-content-production-8K62atzbulQ-unsplash.jpg

After we both agreed on a date, It was time for me to plan my work process and schedule which always begins with me taking a long nap, visualizing the possible outcome of my project while at it. I do this as it helps clear my mind and prepare my body for the task ahead. I call it the Lazy mans yoga. Woke up and drew a to-do list and assigned tasks and schedule to follow.

Next day i started by researching concepts and keywords used by top designers in their portfolio websites to get a clear concept of what makes up a portfolio. I was able to come up with a concept which was done on paper first, while it took me 4 days of researching contents and going through various portfolio websites, before finally settling for the most suitable visual representation and content for what i had in mind and it was time to move to Figma .

mario-gogh-UF5Kdm764RE-unsplash.jpg

It didn’t take much time, to get my frames up and creating a design system to aid with consistency in my project. My design system for this project consist of a color palette, Text style and Components.

I had plugins for other assets like Iconify for icons and Unsplash for high quality pictures. It took me 2 days of focused design to get a prototype of my portfolio on Figma , after which I sent prototype links to friends on slack to get their feedback before I meet up with my accountability partner.

balazs-ketyi-9VzoRKfBsMM-unsplash.jpg

On the day of our first check-in, I was really hyped to share my progress with my accountability partner, unfortunately they couldn't go through on our plans, but managed to get their website up by coding it from scratch, which was quite impressive, we ended up discussing how to get better in our various fields of work and avoiding work stress while at it.

At this point I still haven’t learnt Webflow , I was thinking of ending at just Figma , and showcasing the design on Dribbble . but I already drew out a plan for the rest of the project and was really pumped to see how far i could go, my expectations were too high for me to quit, so I continued.

drew-beamer-Vc1pJfvoQvY-unsplash.jpg

I got tutorials from YouTube, where I learnt how to export assets from Figma to Webflow, before moving to the next step, which was understanding how to design a hero page and the procedures involved in making it a responsive page on Webflow.

I learnt the basics of Webflow and interactions in a day, while it took me 4 days to design for all device sizes, at this point, I had finished designing all frames for my website and added interactions and page triggers.

Like all projects I've worked on, I prioritize feedback the most, so I reached out to my friends I shared my Figma designs with on slack, they were all eager to know my progress and what i had done.

I got overwhelming feedback, and fresh ideas i could use to get a better Portfolio. To keep the story short, I had to redesign my website from scratch, i needed inspiration for this and luckily for me, I had the perfect playlist of sad songs to keep me active. Word on the street is the human mind works better when listening to sad songs (Haha). I had gotten a better insight into what I wanted my portfolio to look like and I had all the emotional support to carry on.

dollar-gill-x1_gmkEbsM4-unsplash.jpg

It was easy creating contents on Figma and exporting to Webflow, as I had gotten familiar with the process. I exported most of my assets in SVG as they came out sharper than other formats.

What I had planned to design changed after getting my last feedback, I didn't have to Spend the whole day on Figma as I could easily get it done and export seamlessly to Webflow.

It's been 20 days of using Webflow, and I am satisfied with my progress using this beautifully crafted no code tool. I finally have a website , and I published it for free, with options to pay if I wish to host on another platform.

I enjoy taken on challenges like this as it rewards me by keeping me busy enough to take my mind away from my immediate reality and also gain skills needed to solve real world problems, for this particular challenge, I proved to myself that i could do whatever I put my mind to when i plan myself accordingly, you can call it being intentional.

ian-stauffer-bH7kZ0yazB0-unsplash.jpg

So if you are having a hard time deciding when to learn to use Webflow, the right time is right now. You do not need any special inspiration for it, just your stubbornness to carry on and push yourself out of your comfort zone.

My experience is different from others, as I am not a yardstick to learning, do it at your own pace and you will be glad you did.

Warm regards Sodiq