How We Designed and Developed a Webflow-Based Portfolio Website

Our Webflow team, just like GetDevDone on the whole, is famously known for its flexible approach to project development and commitment to providing the most cost-effective solution in each specific case. 

Our clients can come to us at any stage of their project development or with any task and get back an invariably superb quality result that exceeds their expectations. For example, some clients have designs made in tools like Figma or Photoshop and want us to implement them in Webflow. Others request the customization of a template to match their brand identity. 

There are also complex projects, which assume building web solutions end-to-end, from design to development and testing. Today, we want to discuss a project just like that: the design and development of a Webflow-based portfolio website that we did for a client from the United States. 

The Client 

Greg Gompers is a software engineer who specializes in building large-scale Machine Learning systems. Apart from being highly experienced in creating ML models, Greg is also a talented mentor and prolific blog writer. He has published internal training videos for 100+ ML engineers and data scientists on how to build on SageMaker and use SageMaker Pipelines. 

The Challenge 

Greg found GetDevDone through the official Webflow web portal and contacted us with a request to create a portfolio website for his AI coding career – a visual resume to display the companies he has worked for, the projects he has built, and the blogs he has written. 

Greg wanted us to handle the entire website development cycle, that is both the design and implementation parts. He provided us with the following materials: 

• Website mockup that he came up with 
• Figma design that he drew 
• Initial version of the website that he made in Webflow 
• Website media (photos, logo, etc.)
• Website design guidelines

Based on those ideas and assets, Greg wanted us to create a professional-looking, engaging design and then implement it in Webflow. 

The Solution 

Since it was a complex project, we got two teams involved in the process: the Design Team and the Webflow Development Team with the respective project managers as intermediaries between the client and the teams. 

First off, the PMs had a kick-off video call with Greg, where they discussed the project scope and timeline, as well Greg’s needs, requirements, preferences, and expectations. 

They offered him several design and development options: 

1. Customizing a premium template. 
2. Fixing Greg’s current template by our development team to save some of his budget. 
3. Designing the website from scratch by our experts and implementing it in Webflow. 

Greg picked the third option and gave us the green light to get the process underway. 

Design 

The design team’s main task was to create a design of the website based on the provided mockups and reference sites that Greg found interesting. While addressing that task, the designers followed these criteria: 

The client’s requirements. Understanding the client’s needs and goals was vital for the success of the entire project. Therefore, the designers meticulously studied Greg’s specifications and elicited his design preferences. 

Target audience. It was also crucial to consider the audience the website was going to target: their needs, interests, and expectations. That would contribute to the positive perception of the client in the eyes of the website visitors (hiring managers). 

Style. Taking the professional nature of the website into account, the designers selected a style that best aligned with the client’s personality and preferences. That involved the choice of color combinations, typefaces, and general visual style. 

Minimalism. The design was to be minimalistic and clean with a focus on the key information without visual distractions. That would make content consumption easy for visitors. 

Animation and interactivity. By adding animations and dynamic effects, the designers sought to improve user experience and make the website more visually attractive and engaging. However, animations were not supposed to overwhelm visitors, only bringing certain web page elements to the spotlight. 

Convenient, intuitive navigation. The designers optimized the website layout and navigation elements so that visitors could easily surf the website and get instant access to important information regardless of the device they’re using. 

Space balance. Ensuring the right amount of space between web page elements, the designers made the website look well-balanced. 

Visuals and content. The designers used the images provided by the client to illustrate his projects. The content was the focus as well. The designers made sure it was short and clear. 

As a result, the design team made a professional and engaging design that effectively presented the client’s qualities, capabilities, and accomplishments. Additionally, the designers created a convenient interface and navigation so that the visitors could find the required information and connect with the client quickly. 

We showed the outcome to Greg, and he was impressed with our work. He did request a few minor changes, such as making certain text lowercase instead of uppercase. On the whole, though, he was quite happy with what he saw and gave us a thumbs-up to proceed to the development stage. 

Implementation 

While working on their part of the project, the designers suggested a few interactive effects to make the website more engaging. Now, the ball was in the Webflow development team’s court. Their mission was to implement the design and add the suggested effects. 

Here is the result: 

The Outcome 

Greg had some update requests after we delivered the completed solution, such as the removal of the circle that followed the cursor (the original feature). In general, though, he was more than satisfied with our skills and performance. Here is what he said: 

I’ve really enjoyed working with the GetDevDone team, I wasn’t sure if paying for a professional portfolio website would pay off in my job search, so I knew I was taking a risk, but after working with the project manager and her design team I am so very pleased with these results. I have been showing everyone I know, and getting rave reviews back from interviewers about the quality of this build. I feel the difference in the way hiring managers are interacting with me, and when I give my salary expectations they are quick to assure me that my expectations are in range, given my portfolio of work and level of professionalism.

Thank you so much, the team, this has turned out to be money well spent, and a very enjoyable experience as well!

Apart from delivering the top-quality product, we also helped Greg save some of his budget in these ways:  

1. We implemented responsiveness at the development stage rather than at the design stage.
2. The development stage proved to be more time-consuming than we originally thought. However, we decided to cover the difference in cost ourselves. 

All in all, the project took us 68 business hours to complete. Here is the breakdown: 

Design	Development	QA	PM
22 hours	35 hours	5 hours	6 hours

Want to be our next happy client? Let’s get in touch!