Let's talk about DESIGN

Hello, folks. Considering a scale of design flexibility from 1 to 10, and where AppGeyzer would be “2” and Bubble would be “9.5”, where would be Appgyver?

Besides that, if someone has good examples of beautiful designs made on Appgyver, please share with me. I’m really worried about the idea of no be able to create nice and professional design on Appgyver.

I’d like to believe that Appgyver is fairly flexible in terms of design. The only draw back is that it has outdated Icons and you can’t customize the default navBars and appBars unless you create your own… I would give it 6,5/10 for design flexibilty.

I have attached some designs of my latest app which I made with Appgyver

2 Likes

You can create your own custom Navigation bars easily enough using row containers and images ( or icons )… It just takes a little patiene and creativity.

How can you change the ugly app status bar color on android ?

1 Like

so far there is no option to change it

If you were to use the default assets, yes, things can be a bit flat and uninspired. In a similar vein, the methods to build modern interfaces from the jump can be rather limiting and dated. At the end of the day, though, it’s how you implement your UI and logic which determines the final quality. If you incorporate your own visual assets and, perhaps, draw some inspiration from what’s been done by others, there’s no reason you cannot create something beautiful.

The somewhat frustrating, yet also rewarding aspect of Appgyver is wanting to achieve a certain effect, there being no immediate native solution, and thus, “Appgyvering” one with some experimentation. Given my own particular needs, I’ve refined many of these techniques to about as perfect as you can get them on the platform.

Some examples:

1: Don’t like the default navigation bar? You can disable it and build your own with scrollviews, containers, and custom assets. We did that to build floating headers for our pages. One of the first advanced things I’ve personally learned here.

2: Want 3D depth to your buttons? Native gradient colors are not supported yet with Appgyver. But you can create a gradient image in another program (vectr.com, for example – also used for our custom icons) and set that as the background image for a container with dimensions similar to a default button component. Place some text into the container to describe the function of the button, and then attach logic to trigger whatever effect. Works exactly the same as a normal button then and can be more visually appealing.

3: You can build custom popups with logic and assets. Examples would include popup alerts, edit profile interfaces, viewing expanded images, and context fields.

4: This was a big one. We wanted a character counter and limit for our input fields which would restrict a user to, say, 350 characters total for a question they’d asked another user – it’s a social Q&A app. When we joined Appgyver about a year ago, the first method was simply tracking the number of characters in the input via a formula and, if they exceeded 350, setting the input Submit button to false and/or replacing it with a “Too Long”-type message. Crude but effective.

Earlier this year, we took a couple of suggestions by @JOHN_WORSHAM and someone else here, combined them, and created Appgyver’s equivalent of a perfect max-length-type function to outright limit the number of characters in an input to our desired amount – say, 350. One of my best little experiments here that worked.

Took that even further. Just last week, I figured out the formula solution for a true character countdown. You’ll see in the pictures attached below that, near the input fields, are some text labeled “0/350”. That is the original counter we’d built. With each character added to the input, the 0 counts up by one. Once it reaches 350, it prevents any additional characters from being typed in unless some are removed.

The recent development was a formula for directly counting down the characters from 350 to 0 – though, not yet implemented in the images. Combined with the max-length function, it looks less cluttered and reduces the horizontal space required vs. the 0/350 count-up method.

The following images are two iterations of user profile pages we’ve created, as well as demonstrations of the various visual effects we’ve achieved for our web app. Currently, data is streamed in on page load from our Backendless setup (background images, avatar, text data), allowing for actual profile editing and content generation. There are some rough areas on each page as we haven’t yet connected every data point, but you’ll get the gist.

The first profile iteration for desktop:

Implementing Boolean logic, if the Edit Profile button is clicked, it loads in an interface for basic detail editing with a link to more complex editing in the Account Settings page.

The current profile iteration:

The Edit Profile button now creates a custom popup with a similar general interface as before:

The same popup method is used to allow a user to see expanded images:

So, yes, a lot things need to be hacked together. AG also doesn’t support React plugins and the advanced functions that would allow us to implement ads to our web app – one of the major things holding us back. They’ve been talking about these advanced functions “coming soon” since April 2020 at least. We seem no closer to it with as little information as we get.

The reason we stay here vs. Bubble.io is the advanced UI control (margins, padding, layout, etc.) over the latter which is more Wix-like, and the long-term potential. AG is also completely free to use for us small teams and startups. But given the aforementioned current limitations, we have also been experimenting with Webflow and Wappler. Ultimately, we do require monetization in our final product or else it’s just going to be a money pit and won’t survive long as it grows.

I hope that provides some insights.

2 Likes

Can you please show how did you design these awesome screens, dude? Im very excited to know

Would you like to know how I designed the screenshots which I attached on the comment above or you want to know about the actual designs from appgyver?

I would like to know how did you design the screenshots. They look very professional and I have no clue of how did you put the navigation buttons at the bootom of the screen, for example.

Unfortunately there are not good tutorials regarding design on Appgyver, so I’m very lost about it

Do you have a quick example of using pop-ups? I´m using a few alerts and they really drag down the UX. I would love to convey the same info in a nicely formatting blocking pop-up.

My app has many quiz type pages and I´m using alerts when an answer is wrong and also to give hints.

In the end I went with a container with a higher z index that pops over the top of the rest of the inputs.

I don’t know if it serves as an incentive, but I’m sharing below some screenshots of the application I’m making.

I am a Psychotherapist and I work with Quantum Physics in my appointments. I’m making an app to advertise my services.

These are some screenshots of the application I’m making.

First, I chose not to use the standard platform buttons and created my own buttons using images that are clickable. I’m not good at programming and I’m learning the tricks here from the Forum guys. On the other hand, I know “a little” about image, and I think that helps.

For internal images of the app I decided to apply an effect to make it look like the image is jumping off the screen.







2 Likes