Built this hero section in Webflow as another interaction and animation practice exercise. This t...Built this hero section in Webflow as another interaction and animation practice exercise. This t...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Built this hero section in Webflow as another interaction and animation practice exercise.
This time, I recreated an online hero section design, customized it with my own visuals, content, and assets, and then developed it entirely in Webflow.
The main goal wasn't to create a new design, but to improve my implementation skills by recreating the layout and interactions as accurately as possible.
This was mainly an opportunity to practice:
• Page load animations
• Smooth interactions
• Responsive layouts
• Element positioning and layering
• Building premium-looking experiences in Webflow
Every practice project helps me better understand how to turn static designs into interactive experiences.
Feedback is always welcome!
#Webflow#WebflowDeveloper#InteractionDesign#WebDesign#UIDesign#NoCode#FrontendDevelopment
Really liked how these designs turned out!
Explored a concept for AI SaaS product, focusing on a clean interface and a simple, intuitive chat experience.
Tried two different layout variation for the hero section.
Which would you like?
I like the second layout more — the headline "Your ideas deserve an intelligent partner" + the chat preview below makes the AI feel real and easy to use immediately. The first one is also clean, but this one sells the product faster.
The first thing I created for LedgerFlow wasn't a screen.
It was a set of questions.
I'm kicking off a new concept project: **LedgerFlow, an accounting and financial management SaaS platform for small businesses, freelancers and independent business owners.
The goal is to design a website that helps visitors understand what the product does, how it helps their business, and why they should book a demo.
But before opening Figma, I needed to understand the business.
So I created a website discovery and brand strategy questionnaire.
It covers:
→ Brand vision and business goals.
→ Target audience.
→ Website goals and user experience.
→ Branding and visual direction.
→ Services and offers.
→ Project direction and logistics.
I want to understand things like:
Who exactly are we designing for?
What problem does the product solve?
What makes it different from traditional accounting software?
What should visitors understand within the first few seconds?
And what would make them confident enough to book a demo?
Because the answers will influence the website's messaging, content, visual hierarchy and calls to action.
You can't design a clear experience when you don't understand what the business needs to communicate.
LedgerFlow is a concept project, but I'm treating the process like a real client engagement.
I'll be sharing the journey from discovery to website structure, UI design and Webflow development.
And if you're building a SaaS product or need a website that communicates your business value clearly, I'm open to website design and Webflow projects.
Starting with a discovery questionnaire instead of a screen is how good briefs begin, and "explain what LedgerFlow does in the first seconds" is the right goal to design around. Will the answers become a one page brief?
A few days ago I posted a small motion teaser. Now the whole thing is live on my profile: 12 pages designed in Figma, a design system, and a homepage I built in HTML, CSS and JS with every interaction working.
12 pages in Figma plus a design system, then hand coding the homepage with every interaction working is a great way to show the concept holds up, Sofiia. Nice to see the teaser turn into the full project.