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
Back to feedPost
Project Preview: Hero Section Variants for Northstar Grid ⚡
I’ve been working on a set of hero section variants for Northstar Grid, a platform focused on modernizing critical infrastructure. When dealing with complex B2B tech, the challenge is always the same: how do you balance data-dense authority with a clean, high-converting aesthetic?
Here is a look at the design exploration, focusing on clean grid layouts, technical typography, and vibrant action-oriented accents.
What went into these concepts:
Visual Hierarchy: Giving the core value proposition room to breathe while grounding it with clear, scannable platform metrics.
Layout Exploration: Testing light, dark, and split-screen structural hierarchies to see how different user personas interact with the primary "Book a Demo" CTA.
Brand Synergy: Utilizing technical grid lines and sharp contrast to visually echo the concept of energy grid monitoring.
Tools & Stack:
Figma (Design & Prototyping)
Framer (Ready for interactive, responsive deployment)
Looking to scale your startup's web presence or need a high-impact landing page design? I am currently part of a Design Agency that partners with Seed-to-Series-B Startups and is open to new select projects. Check out my services below or drop a message to collaborate!
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
Related posts
After a long time, I explored a new hero concept inspired by Indian craftsmanship and editorial luxury. ✨
Still early, but I loved blending ornate details with a modern web experience.
Should i turn this into a full landing page? ✨
framerdevelopercontralabsFramer Website DesignFramer Website DevelopmentEditorial DesignFigmaFLORAFramer
Love this!
Family Yoga Studio — Hero Section Design
A landing page concept designed for a family-focused yoga studio. The goal was to create a calm, welcoming first impression while maintaining a clear visual hierarchy and intuitive user experience.
Goal
Design a hero section that communicates the studio's atmosphere, establishes trust, and encourages visitors to take action without overwhelming them with information.
Design Approach
• Clean and minimal layout focused on readability and clarity
• Strong visual hierarchy that guides attention from the headline to the primary call-to-action
• Custom image masking and typography to create a distinctive brand presence
• Carefully balanced supporting visuals that reinforce the message without competing for attention
Outcome
The result is a modern, aesthetically balanced hero section that highlights the studio's identity while making it easy for potential clients to explore classes and get in touch.
Tools
Figma
Keywords
#WebDesign #UIUXDesign #LandingPage #HeroSection #WellnessDesign #YogaStudio #MinimalDesign #Figma #ProductDesign
What I find interesting about hero sections is that users decide within seconds whether a product feels right for them.
Creating a sense of trust, clarity, and calm while still encouraging action is much harder than it looks. Nicely thought through 👏
👀 What do you do when you get a hyperfixation, and suddenly all you do is refresh Contra, check notifications, and obsess over engagement on your Makeathon submission? Anyone else like this? 😅😅😅
Honestly, you might have noticed I’ve been a bit quiet with my growth updates lately — and that’s because for the past 2 weeks I was fully locked in on the #ConfigMakeathon 🥵
(I’ll also attach a screen recording in this post showing how to use the Skill Matrix for anyone who’s interested)
But today I’m back with a quick update to distract myself a little
𝐃𝐚𝐲 𝟓𝟐 🎉 𝐨𝐟 𝐦𝐲 𝐜𝐡𝐚𝐥𝐥𝐞𝐧𝐠𝐞 𝐭𝐨 𝐫𝐞𝐚𝐜𝐡 𝟏,𝟎𝟎𝟎 𝐟𝐨𝐥𝐥𝐨𝐰𝐞𝐫𝐬
𝗨𝗣𝗗𝗔𝗧𝗘𝗦 𝗦𝗜𝗡𝗖𝗘 𝗠𝗬 𝗟𝗔𝗦𝗧 𝗣𝗢𝗦𝗧:
💎 +60 followers
💎 I made it into the Top 5 creators on Contra
💎 Discovery score grew by 4 points — now it’s 127
💎 Ben Huffman followed me — which honestly feels like a huge milestone for me, especially since I’ve been on Contra for less than 2 months
𝗪𝗛𝗔𝗧 𝗜 𝗧𝗘𝗦𝗧𝗘𝗗 𝗦𝗜𝗡𝗖𝗘 𝗠𝗬 𝗟𝗔𝗦𝗧 𝗣𝗢𝗦𝗧:
I’ll share everything at the end of the week 👀
𝗖𝘂𝗿𝗿𝗲𝗻𝘁 𝗽𝗿𝗼𝗴𝗿𝗲𝘀𝘀: 337 / 1,000
𝗦𝘁𝗶𝗹𝗹 𝗹𝗲𝗳𝘁: 663 followers
Follow along if you’re curious to see whether it’s possible to grow on Contra from zero.
If you like my work please support my submission: https://on.contra.com/LgPnq8
🐐 + 💬 = ❤️
As someone who's capable of opening the same analytics page 37 times a day, I refuse to judge 😄
What I find interesting is how quickly you've grown in less than two months. Was there a moment when you noticed a clear shift in traction, or did it feel more like a slow accumulation of small wins?
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?