I’m a pretty long term Appgyver user but lately I’ve been struggling to try to find a way to use the components to create a more unique design. Often when I see Appgyver apps marketed I can pick out the components used. I myself do not have much of a design sense, so i wanted to see if you all fould share the more unique styling attenpts you ahave made (screenshots and details are appreciated).
For context, recently I tried to develop a ticket management app and while trying to work on the reporting side I realized that the only way to make an app that works across all platforms with current components I’m limited to the bar graph component as the chart option isn’t available on all platforms. Additionally. Due to some of the bugs I’ve read about online with the row component in the last week or two resulting in it being difficult to get items to line up properly side-by-side. In essence there is a somewhat limited number of components, and I wanted to see how other users have made visually appealing apps.
This one is in fact a good question. I mean there is no straight “golden-formula” to how to create an attractive UI or even take if further and consider the UX. But for the UI I could suggest going on a longer search on one of the following websites:
or just in general search for “UI kits” or “dashboard” templates for your case especially.
Then in terms of the already available components in AG they are pretty good for some basic use case, but in order to customise you either have to tweak the original components, or create a custom one. For this, my best suggestion is that if you will use that component on maximum up to 3 locations, then don’t even convert it into a “component” just build it from scratch.
Let’s say you want an easy, quick bar chart to show how much of tickets are in different categories. I would not even consider using the chart component or whatsoever.
My idea would be:
container (horizontal layout, space between items)
– container
------width set to formula (100/(count of categories)-2)+"%"
------height set to formula: COUNT(SELECT(list of tickets, item.category=="current category name"))
Repeat the inside container with a list of object where a property is the category label, and the other is let’s say the color of that bar.
Then it is just the matter of the style tab edits. Set the color of the repeated column to a formula (which can be a simple IF, or a selection from an array etc… With this kind of approach you can also avoid some limitations when it comes to web-app or native app.
In fact many complex components are possible, but most of them require careful planning.
For example I had to implement a “tree-view” to represent levels. That one took me a full day of work or so, to make sure it is performant and would look okay on both web and mobile view.
Final thoughts. Figma and Lunacy are two software that can help you quickly test your design and then move over to AG.
Figma and Lunacy are my right hand in my app and web designs. I’m glad to hear it in your comment and discover the website https://ui8.net/, which I was not aware of until now.
Dribbble is great, as mentioned by @Mihaly_Toth. I’ve also found a lot of great designs on Envato Elements. For a what I think is a low annual payment, you get access to a bunch of other assets, including mobile and web templates.
Some struggles I have for example are customizations for current components. Appgyver offers an input field but I can’t find anything that enables us to expand this size to show nore than one line. You can set up the component for multiline input but you still can only see one line.
As for the input field, I always use the primitive input encapsulated into a container and adding there a text as a label. I can then set the height of the input field to a formula if runtime=“web”, then set it 124px, else null and it would auto-expand on mobiles and be multiple lines on the web.
Example like this:
*material like focused input field…
The rest is always up to the client request or the thing I want to pass on. Here is a dashboard like header and hero section for a webapp, that is nowhere near completion:
And so on, and so on. It really comes down to what you want to achieve, how do you want to guide your user through their journey on your app etc.
If you don’t think you are creative enough, just use a design framework, or a UI kit, Google Material, Tailwind, Bootstrap, or the native IOS or Android guides. Look these up and find your inspiration there.
