how to make UI design Better in Webmethods Mobile designer?

Hi,
I am Using Webmethods Mobile designer free trial and i have created on android application but i am not able to make its UI Better so please help me

Hi,

Could you let us know what version of the free trial you’re using? Is it 9.12 or already 10.1? If you’re already using 10.1, you can import our sample projects and have a look how to do that or even just modify the project according to your needs. To import the sample, select File → New → Example → Find the SAG mobile category and select one.

It’s hard to answer this question without any information about your project. Please attach more information. Either take screenshots or the whole project as zip archive. Also please briefly describe your general goal.

Do you have some wireframes/mockups/screenshots of the target design you’d like to share?

Best Regards
Jörg

yes i am currently using mobile designer free trial 9.12 version even i have imported example project which is ArisPicToModel, but in this project also i did not find any better UI styles for components but as you said i will download version 10.2 and i will check example projects of that and also i am attaching some screenshots of my app.
DemoProjectApp_320x480_001.png
DemoProjectApp_320x480_007.png
DemoProjectApp_320x480_005.png

1 Like

Hi,

What do mean with better UI styles? Are you referring to something like CSS? Thats in general not existing when talking about mobile. The UI for each element is given by the target platform. Also to be fair, Phoney does not give the best UI preview. It’s more designed to test your business logic. Please try a multi-build for Android and run your app in the Android emulator.

From what I see so far is that your colors do not give the best contrast. You can try this tool (Material Design) to play a bit with colors and how they should appear. If you found the best match for you, copy the color value and create a new Color in the application model (User Interface → Values → Color). Give a name to the Color and you’re able to reference it any where in the model, e.g. as a text color or as a background color. This will also help you a lot in terms of maintainability.

10.1 also introduces a graphical preview for you application model. You directly see how your application should look like without any code generating or multi-building (in a not platform specific way of course).

We also introduced the “Floating Textfield” pattern in 10.1. This will renovate your login screen a lot including some nice animations. Select an Entry in the model → Right Click → Migrate To Floating Entry.

In addition to ARIS Pic2Model. 10.1 also comes with a second sample project. It’s UI is more up2date.

Last but not least, can you also please describe what do you mean with better UI? Any app you’re referring to? Thats always hard to answer :slight_smile:

Best Regards
Jörg

thank you for reply,

better UI means like how we create native application using css property’s like that can we have any external material to design our application more better …like i am unable to give radius to entry component its coming in square look i have attached the screenshot just look into it

Hi,

so, do you like to create a web-based application? We do support this as well. Just create a local HTML file including all CSS resources and load it to a WebView.

However, Mobile Suite is designed to model/design native applications. All the things you create in the Application Model end up as native elements - we’ll not generate any HTML. Given that, there is no capability to include CSS properties. As I wrote in my previous post, you’re bound to the properties, which are supported by both Android and iOS for a certain native UI element. For Entry fields, there is nothing like a radius as the operation system decides how to render it - this also varries from OS to OS and from OS version to version.

Please open the Application Model in the Outline Editor. You’ll see all properties for the selected element within the “Properties” section of the Outline Editor.

Best Regards
Jörg