How do you get good at design?

Hi Guys Just a quick one.

How do I make something look professional/good design on bubble I cant seem to get out of the rookie stage of design just looking for some tips or what worked for you guys.
These are some examples of my bad design:




Thanks.

1 Like

Copy component ideas from Dribbble :grin:

3 Likes

Highly agree with @georgecollier

If you keep on replicating the designs of other platforms, you start to get a feel for it.

If you want to get all technical, you could check out some design frameworks and apply it to your designs.

Check out @gregjohnkeegan’s content. He talks about designing a lot. One of the OGs :saluting_face:

3 Likes

Thanks for the help!

Would you recommend building apps on canvas for the pre setup design features?

Personally, No.

But it entirely depends on your use case and preference.

For me, I like to build from scratch since having pre built designs seems to limit my imagination. Plus, if I were to add a new component / section, I would need to customize that to fit the pre built design.

I build faster and better by starting from scratch.

Again, this is my personal preference only.

Interesting

Just to add to the noise :smirk: and to paraphrase Steve Jobs…

Please keep in mind that “good design” is about more than how something looks. It’s also about how it works.

A good graphic designer is not necessarily a good UI/UX designer. I’ve seen plenty of aesthetically appealing “components”, layouts, and apps that just don’t leverage Bubble’s capabilities in a way that maximizes utility or enhances the end-user experience (or optimizes the developer experience if you’re creating stuff for other Bubble devs).

1 Like

Which is why you will rarely see great dribble designs actually implemented…

2 Likes

What’s not there is as important as what is. Whitespace ratio is all-important. Look at the “room” the designers on dribbble/behance leave for their components to breathe, but not too much. More whitespace separates different parts of your app. Less whitespace groups things together.

Humans generally agree two things are beautiful and satisfying - symetry and patterns. Look to implements both as much as possible. With whitespace, have similar amounts to group things, more to seperate things.

Your eye tends to travel to the point of highest contrast or the point of clearest light. Use that principle to seperate important things from less important things.

:100: this ^^

I have an extensive background in marketing, specifically the paid ads & conversion sector. If I were to start my development journey over my focus would be functionality → user experience & ease of use → pretty design.

There are startups with AWFUL design that have customers & acquired funding due to the functionality.

There are essentially 0 startups with beautiful UI and no functionality that have got paying users & funding.

One thing I always remind all my clients of and have to remind myself of as well is the trivial things like “is this enough padding”, “should my button be blue or green”, “bubble doesn’t support X feature I need to find out a complex workaround to do XYZ” mean absolutely nothing if you have 0 customers and 0 marketing. Startups need to be started as MVPs with bare basic features. Then you get your users and you let them guide the product based on how they interact and what features they want/use.

Building 10 advanced features in an MVP just to have 90% of your users only using 2 of those features only creates technical debt & increases burn rate.

1 Like

This poor man asks “how do I get good at design” and the answers are “don’t” :sparkles:

4 Likes

And :100: this ^^ :slight_smile:

More years ago than I care to remember, I co-founded a startup, and when it came to developing features for our app, my co-founder and I made up a saying… make it work, make it easy, make it magic. That saying has served me well in the software industry since the day we made it up, I brought that mentality with me when I started my Bubble journey, and it simply hasn’t failed me yet.

And I don’t think folks are telling OP not to improve their design skills, @duke.severn, but in my opinion, it isn’t nearly as important (especially in the early days of development) as folks make it out to be.

1 Like

Love this, Stealing this saying :tada:

1 Like

As an example.

In 2010 uber was at 1.5M in funding with this website
https://web.archive.org/web/20100330205717/http://www.ubercab.com/

In 2011 uber was up to 12.5M in funding on this website. They used it up until 2013 when they received 363M in funding.
https://web.archive.org/web/20111215152945/https://www.uber.com/

Times have changed in terms of UI but if you’re going for customers they care more about ease of use and functions than design.

Investors care more about plans, marketing, owners, function than design. Put your time into what matters.

Another cool case study that’s a bit more recent is gohighlevel. Their initial dashboard was the ugliest when they started in 2018, but it worked. I mean REALLY ugly, not even mobile friendly in 2018. They still got over 1500 users first year. Over the last 2 yrs they’ve grown 1900% and do an estimated 91M/yr in revenue. Now serving over 15k agencies & over 300k businesses and raised $60m in 2021. Even their current landing page is pretty basic/ugly but built to convert.

The answer is don’t worry about UI lol until you have customers & funding.

3 Likes

So 1) Read material design 3 documentation by google. Layout – Material Design 3 2) Open account on figma download material design 3 theme builder, put your color schema there.3 ) Learn it apply it , check it constantly . Note : Even though you have a design kit it doesn’t mean it shows everything, if you want to create very complex cards around 12 items you will have to widen your vision.You will write ‘‘UI card designs’’ to check what people have and learn from it .

1 Like

If you are like me, NEVER. This is because as a kid, in art class, I wasn’t able to create a sketch, I always had to use a light box to trace something…basically, my brain is not the type of brain capable of imagining a good design of my own.

I don’t have the creative/artistic abilities to just come up with the right color schemes or sizes or other components necessary for creating a good design.

What I have done though to get good at design is similar to what others have recommended. I look online for good design examples and attempt to re-create them, which works for the most part to get something better than what a 5th grader could do.

I also have spent time reading through Google Material Design website to get a solid understanding of good basic design principles for app/web development, which has helped a lot.

I’ve also looked at Figma templates and re-create those designs. Plus I use some websites to find good Font Pairings or good Color Schemes.

Just some basic principles found online for free can be applied to your design in Bubble to really make an improvement. Additionally, knowing how to use the Bubble responsive design system helps make setting up those designs easier.

4 Likes

Was hoping I’m not alone in this :joy:

1 Like