My no-code journey: how I wow'd my client with a shiny new Webflow page

CLIENT

Shape Studio is an architectural firm dedicated to designing spaces that meet the needs and challenges of modern life.

MY ROLE
Competitive analysis
Moodboard & visual concept
Copywriting
Hi-fi design
Webflow development
SEE LIVE

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 wasn’t doing 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. We aimed to build a site that feels both inspiring and inviting.

As the designer and Webflow developer for this project, my goal was to create a minimalistic and clean online space 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

I know from my experience in marketing that having a solid foundation by understanding the client's perspective, setting expectations, and requirements is key to success.

To kick off the project, I held an in-depth meeting with the client, where we filled out the design brief together, ensuring alignment 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. 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 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 rationale

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.

The website can be seen live at: www.shape-studio.pl

When I handed the project off to the client, they were impressed with how the website 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.

Wojciech Kruszyński

Owner of Shape Studio

My key learnings

I've gained hands-on experience with responsive design

I learned how important it is to test designs on different devices to ensure they look and work well for all users. For example, if I hadn’t checked the mobile version on an iPhone, I wouldn’t have realized that the quickstack element I used for the portfolio had problems on iOS, causing some projects not to display properly.

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.