Conversion-focused Landing Pages for COACHES and MARKETING AGENCIES | No-code development
@Framer
| 3 days delivery π
Get Your Free Audit β mubin
@huemubin
.com
You SU*K at design!π€¬
Use this hero section layout
for your next SaaS or Product landing page.
It works like a charm.
Ohh I added, π copywriting placeholder.
Fill it up and you are ready to go.
Simple yet effective.
#buildinpublic
#indiehacker
#uiux
Designers, level up your pricing ($250-$1,249)! β
Listen up,
in 2021, I was charging $250 for a landing page.
Today, I do the same work for $1,249+ π€.
So, what changed?
Why am I charging more, and why are clients happy to pay it?
STFU Mubin, gimme the TL;DR:
β€ I switched toβ¦
β‘Attention SaaS founders, marketing agency owners, and indie makers!
Finally finished my portfolio site.
Annd
I'm doing 9 landing page hero section redesigns.
*You must have an existing landing page.
To enter,
Like & comment "CONCEPT", so I can DM.
#buildinpublic
Designers β I need your expert help.
Revamping my portfolio site after ages.
Seeking your expert touch.
Do I go for authoritative with a serif typeface
or opt for a clean, modern look w/ sans serif?
β¬οΈβ¬οΈβ¬οΈ
What will you be choosing?
Serif vs Sans Serif
#UIUX
#buildinpublic
π₯ IDIDTHIS π₯
Before β After
Landing page hero section redesign (27/100)
β For
@Partydoos
*This is a concept based on my personal preference.
#buildinpublic
If you are in doubt that yours product is not original,
Watch this video by
@eliasstravik
Now a story,
I was about to shut down my design templates, because there are already tons more.
I have worked for months, sharing progress on X. But traction was very low.
I was about toβ¦
Someone built my idea! π
#buildinpublic
I often see founders and indie hackers getting bummed out when they do a quick Google search for their idea sooner or later.
Why shouldn't you let it stop you?
Let's look at
@loops
and
@resend
β both backed by
@ycombinator
.
@DannPetty
I also agree with you, Dann.
I market myself as a landing page designer and Framer developer.
Buttt, I have clients for whom I build using Squarespace, Webflow, ClickFunnels, HighLevel, and Framer (of course).
I also do email design, automation, product design, logo design,β¦
π΅βπ« Took me 7+ hours (approx.) to finish batch content for the next 11 days for
@typefully
's challenge.
I never spend that amount of time on batch content.
Buttt(1) here are few things π
When I saw the post about the challenge,
I thought, let's make this a valuable thing andβ¦
π‘ Day 3/30: Less is more, but clarity is key!
Simplify your landing page design to avoid overwhelming visitors,
Keep message clear and direct.
β¦ Use 1 CTA.
β¦ Mute the headers CTA colors.
β¦ 5th grade English level
β¦β¦β¦ Show don't tell
#UIUX
#buildinpublic
#typefully
I miss those days as a SaaS product designer. π
Creating complex pages, endless meetings, months of work, and countless revisions. π»π
I guess I am going to start again beside landing page. Maybe. π
#UIUX
#buildinpublic
#saas
π₯ IDIDTHIS π₯
Before β After
App landing page hero section redesign (19/100)
β For
@meditoHQ
*This is a concept design based on my personal opinion.
#buildinpublic
#daretoshare24
π Day 5/30: Out with random images, in with personalized visuals!
Craft your landing page design with photos, videos, and illustrations that speak directly to your company/brand.
- Mission
- Target audience
#UIUX
#buildinpublic
#typefully
So the 30 days
@typefully
challenge finished π₯³.
It was a great experience.
When I entered,
I knew I would be posting valuable stuff,
not just for the sake of the challenge.
Posted 30 tips for landing page design.
Time to bundle them.
Ebook or Blog?
You decide.
#typefully
Make your button POP with RAYDIAL.
Here's how:
- Fill with radial gradient.
- Use linear stroke.
β³ White for both ends:
- Top: 20%
- Bottom: 5%
- Inner Shadow (use as a second stroke).
- Drop shadow for text (use white, not black).
Enjoy!
#uiux
#buildinpublic
π Template
#Giveaway
Alert! π
Get the "SMMAgency"
@framer
template for free!
π€ Usually $39, but now 100% off! π€
π₯ Free for 23 hours (+1 extra hour)!
To enter:
-Like β€οΈ
-Retweet π
-Reply with "BOOST"
Must follow for DM!
π Demo in the comment section
#buildinpublic
I redesigned (concept) the landing page hero section of
@dubbapp
- to make it more modern and simple to navigate.
What have I done?
- Dark Mode
- New typography
- Clear Hero Contents
- Proper hierarchy between "Sign Up" options
- Maximizing the hero section height.
#SaaS
π«Άπ«£ Sneak peek of my latest project
- loving the airy, fluffy vibe!
- Dev. on
@framer
Excited to go live and share more peaks soon!
#WIP
#UIUX
#buildinpublic
My apologies for the delay of the landing page redesign challenge.
I was on a vacation (Bangladesh) and was not able to work.
Later,
When I came back to Malaysia again - got some bad news and was not able to start working.
Hopefully within this or next week all the designsβ¦
NGL,
Loved the new branding and BIO.
It looks organized, instead of all over the place.
BTW PRO DESIGNERS!
Is the cover image too much?
#buildinpublic
#designer
#uiux
β‘Attention SaaS founders, marketing agency owners, and indie makers!
Finally finished my portfolio site.
Annnd
I'm doing 9 landing page hero section redesigns.
*You must have an existing landing page.
To enter,
Like & comment "CONCEPT", so I can DM.
#buildinpublic
#saas
Sir yes sir. I am a lover of typefaces. Buttt
Every single list of posts has the
same list again and again.
β¬οΈ
Typefaces from Google fonts.
Buttt(2) thanks to algorithm. I found
@bram_naus
Handpicked typefaces. Loving the profile.
Highly recommended.
Just had a fantastic chat with
@thisisalimirza
at 3 am (my time zone)!
π Such a great, humble and friendly guy.
Thanks for having me, man.
Ali discovered me through my design posts, and now here we are.
I Love X and
#buildinpublic
!
Dear
@googledocs
, as soon as you are introducing Folder and basic organization within the Docs interface (not
@googledrive
),
I am making you my primary note taking tool.
And yeah,
having the ability
to add a different typeface as default will be great.
Not by selecting eachβ¦
π± Day 11/30: Mobile matters!
Optimize your landing page design for mobile users.
β Switching from Flex Row β Flex Column won't cut it.
β€· Make intentional changes.
β€· Cut the clutter.
β€· Keep animations simple for faster loading.
#UIUX
#buildinpublic
#typefully
π₯ IDIDTHIS π₯
Before β After
Marketing landing page hero section redesign (25/100)
β For
@imgyf
*This is a concept design based on my personal preference.
#buildinpublic
#daretoshare24
Got this from messenger archive.
Wow. Started web design back in 2020.
That's
3 years, 7 months, 1,314 days, 31,536 hours, 1,892,160 minutes,
and countless cups of coffee. βοΈ
#buildinpublic
#uiux
#throwback
Wow,
@shortmarketer
, the site is well-designed and the UX is top-notch.
To be honest, I didn't find anything groundbreaking to critique. You've already nailed the design aspects.
But hey Emma, I can't leave you without offering some tips:
1. Adding a logo with an icon willβ¦
πDark mode enthusiasts, SKIP THIS!
For those in light mode,
if you're using a grey background,
Enhance it with a subtle embossed look
using a drop shadow.
β No Blur
- X/Y value: 2-6 px only
- White opacity: 70-100%
Got a better idea? Share it! π«Ά
#buildinpublic
#uiux
**SORRY FOR BLOCKING YOUR FEED**
If the quality doesn't decrease,
Let'ssssss go.
I've got the format
to share my landing page design
project here in X.
#uiux
#landingpage
Ohh, my BENTO. I thought I would hate you. But the more I use you, the more I fall in love with you.
π Just found this work I did earlier this year for a Charity site.
#UIUX
#landingpage
#nonprofit
π Day 9: Power Up Engagement with Hover Effects & Animations! π₯
Hover effects & animations = Engagement boost.
π± No one likes a plain, simple website without life in it.
Unless it's a minimal website.
Keep it smooth and avoid the disco ball effect! πΊ
Here are 5 reasonsβ¦
π₯ IDIDTHIS π₯
Before β After
Newsletter landing page hero section redesign (24/100)
β For
@fabcaravita
*It was really hard to redesign as the current one was great.
**This is a concept design based on my personal preference.
#buildinpublic
#daretoshare24
Skip this if you are NOT a LAZY DESIGNER.
Use these patterns:
- GRID
- LINES
- CURVED LINES
- DOTTED
- EMOJI
To get a more enhanced hero section on your landing page.
#buildinpublic
#uiux
Finallyyyyy giving some love + π to my neglected side project.
Stay tuned for sneak peeks tomorrow!
Now,
Sehri and then sleep.
Good Night all!
#design
#contentcreators
#buildinpublic
@aliszu
Shooot.
I was doing product design a while ago.
But now focused on web design.
Still left few of my web design works π
Best of luck on your hunt πͺ
@EmyLascan
It might be just me, but whenever I look at bento grids, it takes me more time to analyze the entire scene. My eyes jump from one card to another without fully finishing each card.
π Day 15/30: Be intentional with typography!
Pick fonts that scream your brand, audience, or mood.
For example:
VIBE β One Typeface example
Let's go π
βοΈ Modern β Circular Std
βοΈ Serious β Inter
π Friendly β SN Pro
π Luxury β Bluu Next
π°οΈ Old/Vintage β Instrumentβ¦
β‘Day 1/30: Headline (h1)!
Your landing page headline should be,
- attention-grabbing
- unforgettable
- simple sentence (3-5th grade lvl)
- In doubt? USE THIS FORMULE
β³ Problem + Solution + Timeframe
#UIUX
#buildinpublic
#typefully
Designers use BEM method when designing UI components π«Ά
π€¬ (&AVOID 'GROUP 69420' layer naming)
Why?
It makes components easier to develop and maintain.
Have 100+ components? you can call the specific CSS classes.
Here's a breakdown of a card component π
#buildinpublic
#uiux
π Day 24/30: Protect with SSL!
See that safe lock next to the web address?
It keeps your info,
like usernames and passwords, secure - when you browse.
It's your info's secret message box!
And guess what π?
@Cloudflare
offers this lock for FREE!
#buildinpublic
#typefully
π₯ IDIDTHIS π₯
Before β After
SaaS landing page hero section redesign (23/100)
β For Peasy AI
*This is a concept design based on my personal preference.
#buildinpublic
#daretoshare24
π¬ Day 10/30: Write in simple language!
"Mubin, gimme a good-to-go hero section copy formula?"
Craft compelling copy that resonates with your audience and motivates them to take action on your landing page.
π Here's one bad and good example (a thread) π
#UIUX
#typefully
@KumailNanji
Always follow this structure:
- Section (add left-right padding) + (Full width)
--- Container (add your container width to this)
------ Then put all the good stuff here (inside container).
Few tips:
1. Work with 1200px desktop size. Don't make it bigger or smaller. Itβ¦
Footer design from one of my latest projects.
Loved how clean it came out,
how it's separating
the button and form sections,
while adding the team faces.
π₯ IDIDTHIS π₯
Before β After
SaaS Landing page hero section redesign (26/100)
β For Cattabu by
@nicoschriever
*This is a concept design based on my personal preference.
#buildinpublic
π«Ά Day 23/30: Keep Your Words Simple!
Ensure everyone can easily grasp your message.
β Use easy words for clear understanding.
π¬ Make it feel like a chat with the landing page.
π« Avoid messages that require re-reading.
Tip: Aim for a 3rd or 5th grade level tone.
#typefully
π Day 25/30: Keep optimizing with these videos!
Constantly fine-tune your landing page design
to outperform the competition
and boost your success.
π Dive into 3 must-watch videos on this! π
#UIUX
#buildinpublic
#typefully
I love minimalism π¨πΊ BUTTT
sometimes adding a few shapes
can make the hero section or any section spicy.
π€ Agree or am I just dumb?
#buildinpublic
#landingpage
π Day 22/30: Short forms = more completions!!!
This,
Minimizes friction and increase form completions.
Buttt Mubin,
I have too many questions?
β Use multi step form.
Adding too many ques. in a single page
will make the user overwhelm.
#buildinpublic
#typefully
#UIUX
@ilyamiskov
@figma
I hope they don't bring this feature,
Only because it will be harder to replicate in the dev stage. Multiple strokes are not supported in CSS π’
Starting today,
finally will start working on "Brew for Creators."
Three hours went by
to get the mood board set up
and basic foundations.
#buildinpublic
Wooowww! Homepage design is done and turned out well.
Avoided traditional corporate look, went for minimalism with clear messaging.
Need to fix copywriting, spelling errors.
Feedback highly appreciated.
#WIP
#buildinpublic
#daretoshare24
π₯ IDIDTHIS π₯
Before β After
SaaS landing page hero section redesign (27/100)
β For
@FocuSeeHQ
by
@MorganKung7
*This is a concept design based on my personal preference.
#buildinpublic
Hey Mubin! Stop with the PURPLE and BLUE π«β
Try these colors for your next billion-dollar project:
π FFB700
π 00FF66
π FF006B
π« D3FF21
What's your new favorite color? (No Blue or Purple)
#buildinpublic
#UIUX
#design
π‘ Day 29/30: Use Mood boards!
Create mood boards to inspire your landing page design
align visuals with brand identity.
Seems time-consuming?
Guess what,
This will help you get the
- visuals
- colors
- layout
π
faster than a blank canvas.
#UIUX
#buildinpublic
#typefully
CTA + Footer π
Tried to work with different CTA look.
Instead of only a button,
added a footer note kind of thing.
π«Ά Client loved it.
Although I thought it looks like too much,
but all the important stuff
has been added with hierarchy.
Anything you will be changing?
#WIP
πͺ Before β After π₯
Marketing landing page redesign (18/100)
β For
@gillianzperkins
*This is a concept design based on my personal opinion. The previous design was well done!
#buildinpublic
#daretoshare24
The new site is coming up pretty good.
Thought I should give a sneak peek.
(2:38 am thoughts)
Any feedback from the pros?
Say goodbye to the dark theme,
Hello, light theme!
#buildinpublic
You guys are terrific.
04/09 Slots filled for
the Concept Redesign challenge.
β° Just 05 spots left! β°
P.S. If you received a DM, make sure to reply to secure your entry.
#buildinpublic
#uiux
#landingpage