How I wow'd my client with a new website made in Webflow
Project background
Shape Studio’s team realized that their old website felt outdated and didn’t do justice to the incredible work they do. It also didn’t reflect the modern approach to architecture they embrace, so it was high time for a fresh start.
I designed and developed a minimalistic, clean website in Webflow that highlights the studio’s stunning portfolio and attracts new clients.
www.shape-studio.pl
"It’s time to give our website a makeover"
To kick off the project, I met with the client to fill out the design brief together, ensuring we were aligned on the website's goals and the message they wanted to convey through the new design.
Aligning on the visual direction
The inspiration websites and competitors list provided by the client gave me a solid foundation to explore the visual direction I wanted to take with this project.
Iterating on ideas and feedback
I explored various approaches until I settled on the layout that I liked the most. I followed a content-first approach, but since I'm also a copywriter, I could make tweaks to the copy depending on whether I needed a shorter or longer piece. I presented my design to the client who provided only minor adjustments in terms of information architecture and certain details.
My design choices
To let the client's work shine, I decided to stick to a black-and-white color palette and a simple, sans-serif font - Manrope. I chose a 1/2 golden ratio typescale, which I slightly modified by adding an 18px size (16px base size multiplied by 1.125 – Minor Third). I opted for the 1/2 golden ratio because it provides perfectly balanced proportions, similar to the full golden ratio, but is less dramatic and therefore easier to use in responsive design.
From design to production
I already had some experience with Webflow, but this project challenged me to go deeper into custom coding, really elevating my skills.
I brought the design to life by adding a GSAP-powered, smooth, and elegant on-scroll reveal animation for the text and photos. I also used Flickity and Swiper.js to create responsive, touch-enabled sliders that showcase the client’s best projects.
I also implemented a variety of hover animations for links to enhance interactivity and create a more engaging experience.
When I launched the website, the client was impressed with how it turned out:
Małgorzata transformed our vision for a new website into reality with her exceptional design and Webflow development skills. From the initial consultation to the final launch, she demonstrated a perfect understanding of our needs, creating a visually appealing and functional website for our studio. We’ve received countless positive comments from clients about the site’s design.
Owner of Shape Studio
My key learnings
1. I've gained hands-on experience with responsive design
I've learned the importance of flexible units over fixed pixels. This experience is crucial for creating designs that smoothly adapt to different screen sizes.
2. I've learned the basics of CSS and Javascript
To overcome Webflow’s limitations with elements like carousels, sliders, on-scroll animations, and hover effects, I had to dive into custom code. I used GSAP to create more advanced, smooth, and perfectly timed animations.
3. I've found out that ChatGPT can be a coding buddy
ChatGPT saves the day by making it super easy to generate code snippets and solve any issues for people who have little to no coding skills (for now).