How I wow'd my client with a shiny new Webflow page
Shape Studio is an architectural firm dedicated to designing spaces that meet the needs and challenges of modern life.
www.shape-studio.pl
"It’s time to give our website a makeover"
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 and clean website in Webflow that lets the studio’s stunning portfolio shine while making it easy for potential clients to navigate and connect.
Before
After
Stepping into the client’s shoes
From my experience in marketing, I know that the key to success is having a solid foundation based on understanding the client's perspective, setting expectations, and defining requirements.
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. The client loved the moodboard and I could move on with planning out the layout and content.
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 and... they were really happy about it, providing only minor adjustments.
Time for the final design
After discussing my proposal with the client, we removed the bold 'Specjalizacje' heading and replaced that section with the 'Oferta', which was a better decision in terms of information architecture. We also decided to replace icons in the 'Oferta' section with arrows to keep the design even more minimalistic.
Additionally, we added a 'Portfolio' carousel to showcase other projects, leaving the hero dedicated to the best works.
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.
The only graphic elements are the black-and-white arrows, which subtly guide the user's attention and add cohesion to the design by serving as a recurring theme throughout the homepage.
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.
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
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.
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.
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 troubleshoot any issues.