Introducing Navbar Gallery 🥳
→ Discover beautiful navbars
→ Filter by navigation styles
→ Submit your favorite for a feature
Your website's navbar sets the tone.
Perfect yours today 👇
Portfolio website updated.
✓ Added analytics
✓ Re-designed the benefits section
✓ Improved the testimonial section
✓ Created a featured blog post section
✓ Added small design details
Next on the agenda:
Adding case studies & improving the about page.
Want to create beautiful designs that feature Webflow's interface?
Check out this
@figma
community file:
→ Built in Auto layout
→ Featuring Webflow's Updated UI (2023)
→ 100% Vector
→ Absolutely FREE
✨ Grab the file now:
I think we found the optimal solution:
The grid for all navbars will be dynamic. When you select a specific navbar category (dropdown, sidebar, mega menu, etc), you will see a tailored grid that complements each navigation type.
The quickest way to add texture to your Figma design:
1. Duplicate your shape.
2. Copy the desired texture image
3. Paste it into the duplicated file.
4. Adjust opacity and blend mode.
✨ That's it! You now have a beautiful texture in your Figma design.
Thank you for 3000 🫶
A year ago, I was at 0, not even considering starting this journey.
A lot can change once you take that first step.
This is your sign to go for it ⚡️
Tired of manually detaching multiple components in Figma?
1. Access the toolbar (⌘/).
2. Locate and click on "Detach all nested instances."
✨ That's it. Now, all of your nested Figma components are detached.
Weekends are made for personal projects.
Here's the progress I made:
✓ Integrated CMS with Airtable
✓ Uploaded 50+ navbars into the database
✓ Configured Submit page logic
Up next:
- Optimize for mobile
- Set up Newsletter/Twitter
- Launch
@navbargallery
🚀
Twitter has changed freelancing for me.
Before Twitter:
- lots of cold outreach
- unable to land clients
- nowhere to share work
After Twitter:
- 0 cold outreach
- booked for months in advance
- part of an amazing community
Doubting it? Start and see for yourself!
Spent the day improving
@navbargallery
• Enhanced hover states on buttons and links
• Improved subtle animations
• Further boosted SEO settings
Huge thanks to
@devinsfountain
for the amazing support and detailed feedback 🫶
Design resources that are worth the $
• Relume → sitemaps, wireframes
• Untitled UI → design system
• Mobbin → apps, website inspo
• Flowbase → components
• Landbook → website inspo
What other ones belong on this list?
Spent the Saturday resting and making some much-needed updates to
Before:
- Difficult to manage grid
- 3 second first-load time
- Too many external links
Now:
- Easily maintainable flexbox
- 0.7 second first-load time
- Improved link ratio
Even in my busiest months, I try to update my portfolio site.
This month, I'm focused on the About page.
Here's my progress:
• Wrote the copy
• Designed in Figma
• Created illustrations
What's next:
• Building in Webflow
• Adding animations
• Launching
Starting a new project!
Website redesign for a magazine 📰
Very excited to work with bold typography, vibrant colors and experiment with navigations.
Drop your favorite magazine websites👇
2023 Recap:
• Worked with 17 clients
• Built 14 websites on
@webflow
• Started Twitter & grew to 1.9k
• Started building
@navbargallery
• Launched first Figma community file
What an amazing year!
Skiff's software design is an absolute masterpiece.
From stunning typography and color choices to delightful icons, every detail and animation is a work of art.
Get inspired ↓
✉️
1 year ago today I moved to Barcelona.
What a year it has been...
- Found my long term city
- Met cool people from
@Webflow
community
- Leveled up as a freelancer
- Grew Twitter following
Was it scary moving? Yes.
Worth it? Absolutely.
I’m 22 today 🥳
Feeling immense gratitude for this incredible life and all the blessings, including the amazing Twitter community.
It's been wonderful sharing my journey with you and I'm really excited for the future 🎉
It's been a busy Monday for me:
✓ Closed a web design + dev project.
✓ Presented the first version of a logo design.
✓ Finished desktop development of a large Webflow site.
How is your Monday going?
Started my Twitter journey exactly 6 months ago.
The goal was to get to 1k followers by Dec 31st.
🎉 Thanks to all of you beautiful people, I crossed 1k today — 1.5 months ahead of schedule.
Domain purchased.
Next steps:
1. Logo Design
2. Design wireframes
3. Design full website
4. Development
5. Launch
Excited for what’s ahead and very grateful to share this journey with you. 🤍
🚧 Week 2 → Building
@navbargallery
Done:
✓ Wireframe
✓ Logo Design
✓ Icons Design
Up Next:
- Finish HiFi Design
- Create the Navbar Collection
- Set up Grid Structure in Webflow
#buildinpublic
Created a subtle hover animation using
@webflow
, with the assistance of
@jittervideo
🪄
When you hover over the card, the radar animation starts, and it stops as soon as you hover out.
Good design for pricing section is crucial:
- Helps bring clarity
- Builds trust and credibility
- Guides user decision
Save these unique pricing page designs ↓
🌎 How to create a 3D Globe in Illustrator:
1. Add your SVG Map to Symbols
2. Create an ellipse
3. Slice ellipse in half
4. Open 3D → Revolve (legacy)
5. Add Map Art
6. Adjust shade, rotation and angle
7. Export as SVG.
Now you have a vector globe for your designs.
Have overflow issues on your site?
Here is a quick way to check which element is causing overflow.
Add this line to your global CSS:
* {
border: red 1px solid;
}