Forum Academy Marketplace Showcase Pricing Features

Introducing Dashboard: A responsive template for Bubble apps

I hope I’m not shocking anyone here, but most of the apps I see built with Bubble have major design issues. Drag + drop is amazing for functionality, but not so great for UI design that inspires confidence. It’s not easy. I live in Silicon Valley and UX/UI designers get paid A LOT to build interfaces that get used by the most successful startups.

To help solve this problem, I built Dashboard, a Bubble template.

Details and get it: http://go.codefree.co/dashboardtemplate

Live Demo: https://codefreestartup-dashboard.bubbleapps.io

This template is free for subscribers of http://codefree.co but I decided to make it available as a standalone purchase for only $39 for non-students.

Here’s what you get:

  • A fully-responsive dashboard template for Bubble apps.
  • A high-converting homepage with Javascript animations and auto-scrolling dropdown.
  • Three Element Packs with retina-display SVG icons, navigation tabs and pricing table.
  • Responsive sidebar menu with a slide-out menu for mobile navigation.
  • Lifetime updates to all future versions and element packs.

I’ll include some screenshots below. Also, if you sign up before Friday, 8/26, you will also get an invite to a members-only webinar where I will walk through my new process for integrating OAuth2 APIs into Bubble. You can really extend the functionality of apps with this. I’ve used it to directly connect to users Facebook + Twitter accounts, scheduling posts, tweets and pulling information like follower count, profile data + more.

I believe that templates will be a big step in Bubble’s evolution. Wordpress suffered a similar problem when it first came out. Users could do a lot but the design of finished products didn’t inspire confidence. With the rise of Themeforest, Wordpress sites started looking incredible, they were embraced by major companies and now Wordpress powers roughly 24% of the internet.

(As you can see, I spent hours converting/cropping the icons in this template into SVG format so that they look amazing on any display, including Retina macbook pros).

2018 update: Code-Free Startup has been acquired by Zeroqode :tada:- any questions can now be directed to @zeroqode or [email protected]





10 Likes

Looks great! Thanks for sharing with the community.

1 Like

@potentialthings Thanks! I’d love to see a thread of Bubble design inspiration. What are some examples of the cleanest design you’ve seen in a Bubble app?

Honestly, I’ve seen more examples of really bad design than I have good design. I work for a company who employs an army of extremely talented UI and UX designers, so I’m hard to please, but the general design quality has been lackluster.

Agreed. The biggest repeat offenders I’ve seen are: 1) too many styles/colors and 2) overuse of serif font

As far as great design, I really like the Airdev homepage: https://airdev.co/index

3 Likes

I’m open to feedback. What do you hate about FeatureSeed or what could I make better? Not to hijack @brentsum post, maybe you could post any feedback here?

Brent, I like the template idea, might be worth adding it to @levon Bubble Template store.

To paraphrase several people (Ash Maurya, Eric Ries etc) …

“Hell is building something beautiful that nobody ever uses”.

Most of the stuff people are building here is startup based and as such should they not be trying to prove there is value in their idea, rather than making something wonderful to look at ?

Now, if you can make it look great “out of the box” then that is perfect, and these templates will make that a whole lot easier for people, they look really good…making stuff look that good in bubble has always been hard.

Being picky about design is a luxury gifted to people who already have a proven market.

5 Likes

I agree 100% with what you’re saying, which makes me feel like I need to clarify my comments. I’m referencing UX more than I am the visual styling of sites. UX is a really hard thing to nail, and is pretty critical to getting your minimum lovable product built. You can absolutely have a successful product that is “ugly,” but it needs to work well.

To prove value in the idea, the idea needs to be executed in a usable way. If your app ignores many of the established UX concepts but is “pretty,” you aren’t in a better spot than you would be if your app had a bad idea in the first place. See Pied Piper from HBO’s Silicon Valley!

My point regarding Bubble is that it’s really easy to make stuff kinda work, but requires much more effort to make things work really well. Looking at my earlier post, I can see how I come across flame-ish, which is absolutely not my intention. Apologies!

1 Like

It absolutely wasn’t flame bait :slight_smile:

And whilst I agree it is easy to make bubble “look ok” and kinda work… It is similarly hard to make it look good as make it work well and in a scalable way.

If you make a product people love (because it solves a problem they have) you can get away with shonky ux for a bit (with your first users).

I just think many people would be better off proving a concept or showing there is a market before creating anything too beautiful.

@NigelG @potentialthings this discussion is great! We need to find that balance of “executed in a usable way” without spending 10 years building something perfect that doesn’t get traction.

The balance is tough to describe, but here’s an example in the real world. Posting to Product Hunt, BetaList and ShowHN on HackerNews is a great way to get instant traction. I’ve tried this launch strategy about three separate times with varying results. I’ve gained thousands of users, and I’ve gained less than 100. The general trend I’ve seen is that the “bar for credibility” keeps rising. And depending on your goal, credibility = viable in an MVP. This is part of the reason it’s harder and harder to share a landing page and get traction (and why Bubble is the solution).

I’m not a professional designer, and I’ve had sites not reach the front page of Product Hunt because the design/UI was off. The community manager didn’t explicitly say “the design is bad” but he inferred it. It’s tough to get good design feedback because it’s something we feel. Ex. when you land on a page like https://buffer.com you just feel like you’re in good hands.

This has probably been shared before, but http://www.goodui.org/ is a great resource for UI advice when building.

2 Likes

Yes if you read the early “Lean Startup” books (by early I mean … a couple of years ago :slight_smile: ) they talk about bashing together a simple landing page for your MVP. But the bar isn’t there any more.

And Buffer is a great example, it started with a landing page asking people to sign up without a product.Try that now, and I think you would need to be someone with a track record to get any interest.

So right about finding the balance, and I do think it is impossible, either the UX will be a bit off, or you didn’t realise how people would end up using it and something will break. But how you respond to that is what makes the MVP, not people.

Now, I love product hunt, but it does end up being a bit of geek2geek market. I think the number of kittenslackbots is reaching peak :slight_smile:

But look at the way Google (and Microsoft with Spritely, who knew they did little apps so well) do stuff now, the most basic basic function with a totally minimal UI. I have been using Keep since it was launched, and it has slowly got more functions as they worked out what people used it for … shopping lists mostly, so it now automates food names for you.

Very un-Product Hunt usage was uncovered. And I remember the story about Google Inbox, even people inside Google were “WTF is this thing we can’t use it” … and the Product Team basically said “we didn’t build it for YOU, that’s why”.

Inbox is amazing! I jumped on the beta and haven’t used gmail since.

1 Like

+1 on Inbox :slight_smile:

And I agree @NigelG that minimal UI making a comeback and it’s great to see some of the big tech firms releasing simple products.

I think it’s a bit of a paradox that you often need to put more thought and time into a simple UI. A clunky app is the result of just building function and often results from starting out in the data tab rather than the design tab :slight_smile:

Does anyone else check out web app designs at https://www.behance.net? It’s a great spot for inspiration

I haven’t looked at behance much, I spend most of my time at www.dribbble.com. Nice to have another one!

Agreed. Taking a cue from Design Sprints, I like to build up one or more of the key “moments” in the users journey in rough, and then then work out how that is best realised in the data.

Setting up your data in some sort of normalised form first isn’t the best way. But similarly designing a loads of amazing pages without thinking about how some of the crucial parts will work… isn’t either.

1 Like

@NigelG is right. Well planned design (code and UI) starts with empathy for the user. If you have that, design will be the product personified.

Focus on the product. Test it to make sure the business model works. Then brand it together.

That’s awesome. It’s like the henry ford quote regarding the Model T:

Any customer can have a car painted any color that he wants so long as it is black.

1 Like