Forum Documentation Showcase Pricing Learn more

FREE Mobile App Design Template


#1

Hey everyone,

I recently published a free Mobile App template everyone can use and check out - https://bubble.is/template/freebie-mobile-app-design-1484598525988x253565831442333700

To use this click the link above
At the link scroll down to 'Add to My Account’
Now go to your Bubble Home Page/Dashboard
Click the orange ‘+New App’ button in the top right
In the popup choose to use free-app as the template for creating a new app
You’re all set!

Quick peak of it in action…

It is a Mobile App design that features:

  • An animated loading page
  • App landing page (if user isn’t logged in)
  • Sign in page
  • Sign up page
  • and a 5 page app design - left wide open so you can easily put in your amazing app ideas!

For new users of Bubble, the showing and hiding of many groups, custom states, and conditionals can be confusing, so please ask any questions you have here

Enjoy! :slight_smile:


Geoff | Wolfer Tech
Check out The Best Selling Bubble Template
Check out The Most Used Bubble Template (FREE)


#3

Very cool. Going to use this!


#4

I fell in love with this template!!! I can’t even design something near as well as this


#5

Thanks @bill and @astralcfw ! Always great to hear feedback.

Also if anything is confusing with this template feel free to ask so that I can help make future templates more informative for all Bubblers


#6

Just want to put it out there that Geoff has been monumental to the creation of my app. Knowledgable, patient and enthusiastic.

His templates are solid and if you need help with you own app, he’s your guy.


#7

Okay! :slight_smile:


#8

Hi - thank you for creating this great free template. This is much better than anything I’d be able to come up with on my own. I’d like to develop something using it and have run into a few snags, was wondering if you’ve found any fixes for this?

  1. I can’t see the bottom toolbar/buttons in the preview mode on my notebook browser (Chrome). https://testmobiletemplate.bubbleapps.io/version-test?debug_mode=true
    It shows up fine when in deployment, but not on preview. Any thoughts as to why this is happening?
  2. When I view the template on my phone (iPhone 7) on the login screen, do you know to make it so that the user can’t drag the page up/down? It exposes some white space at the bottom that takes away from the splash page
  3. Same problem happens on the loading screen
  4. I was able to fix this on my app, but FYI on the preview for the template on my phone the bottom toolbar gets pushed into two rows

In my experience unfortunately from a design/UI/UX point of view, developing on Bubble feels like a constant process of trying to hack elements to behave how I would have thought they would behave by default (i.e. how similar elements behave on other websites I use on my phone). It seems like the design starting point is so far away from what I actually want, vs. on some other platforms (e.g. Webflow) the starting point is much closer to a polished looking product. Perhaps this is why I just don’t see that many examples of really professional, polished looking products coming out of the Bubble design platform. On the other side though the Workflow functionality on Bubble is amazing and I haven’t seen that capability anywhere else


#9

Thanks for the feedback Geoff and glad you like the design!

1 - The toolbar doesn’t show properly when in Debug_mode, I think it has something to do with the Toolbar I used being a Floating Group relative to the Bottom of the screen. Which when in debug_mode is extended

2 & 3 - Hmm, might need to play around with height of the groups a little - I’ll try to get back on that one.
I have limited experience with creating mobile designed apps, maybe @natedogg has some ideas on how to avoid scrolling and whitespace at bottom of an app? Or knows if when an app gets ‘wrapped’ to go to the app store what happens with some of the scrolling and sizing.

4 - thanks for the heads up - I fixed this in the template by switching the Icons from fixed with to being responsive

I definitely agree with you how good design does not seem natural in Bubble, that’s why I try to focus on it with my templates as it is one of the most time consuming parts of creating an app for me. But as you mentioned - it can seem a little ‘hacked together’ and with so many different screen sizes there needs to be constant monitoring and updating


#10

Hey gf_wolfer,

I having problem using the Mobile template, how do you make a group separate from each other, I accidently group together the create account section with other and now it showing on all the pages.

The group J is above all the other groups when I hide or show, it display create account section and I don’t know how to separate them.

Is there anyway to make the hide and show much easier to navigate it getting confusing?


#11

Unfortunately designing with all the invisible groups isn’t a very intuitive or simple process, but it is necessary for any single page app.

That being said, here is a way to move groups from one to another. Specifically removing Group U from Group J

Select Group U, and Cut it , you can use CTRL+X (removes it from Group J)
Now click the Eye to make Group J hidden
Then Select the group you want Group U to be in
Now Paste, you can use CTRL+V, Group U into the group


#13

Thank you gf_wolfer it worked!.


#14

Is the app still free? I tried to add the template and did not see it on my homepage.


#15

It certainly is. Once you have gone to This Page and added it to your account, then you can use the Template from your Dashboard using the following steps:

Go to your Bubble Dashboard and click New App in the top right of the page:

Now in the popup, ‘Freebie App Design’ should show up as an option in the Template dropdown, select it and then click Create A New App (shown below). Feel free to make any modifications to it that you wish, as you can always make another New App with the original template using these steps


#16

Hi @gf_wolfer

Congratulations on making some very good looking templates !

I havea few apps which I am happy to share with the community too. I couldnot see any steps on how I could list my template. Would you be able to please suggest how I can do that ?


#17

Thanks!

Emmanuel gets into the basics here in the first post, about halfway down. Essentially from the /your_plugins page you can turn one of your current apps into a template:


#18

Definitely!! I am going to use it


#19

Hi gh_wolfer,

Firstly great template! I’ve just loaded it and am keen to get stuck in!

One question/issue I have - when I first load/preview the app, after the loading animation, it shows the Landing Page, but without any of the buttons, etc. But if I resize it at all, they all just appear, is this something I’m doing?

I’ve not altered the code in any way yet…


#20

Thanks!

The Floating Group at the bottom of the page is only set to appear when certain workflows trigger if to become visible. I was not able to reproduce it becoming visible when the page gets resized. Maybe some screenshots or a link to your app and we could try to find why it is appearing.

Screenshot of running the app with Debug Mode - using the inspect element to see when the Floating Group is Visible


#21

Hi Thanks for getting back to me…

I’ve got some screenshots to illustrate what i meant, it wasn’t the floating group that was the problem, the actual elements on the landing page group don’t display when the app first loads, but when i resize it they appear? pic 1 is first load, pic 2 is after a small resize…


#22

Odd, I can’t seem to replicate this in the Template.

Does this happen while you are on this page https://free-app.bubbleapps.io?

If not this might be a specific problem in your app and we may need access to your app to troubleshoot further