Assistance for non-coding UX Designer

Question

User46694 posted

I'm a UX Designer and am working on a cross-platform mobile application. The UI is relatively tame (not a game or anything terribly complex) and the wireframes are complete for each OS, so we're now at the stage where they need to be implemented. The current versions of these applications were created by developers recreating my UI designs in code and then adding all of the business logic. This was dreadfully time-consuming and inefficient, so we're exploring the use of Xamarin (and Xamarin.Forms) instead for our next major release of the same apps.

I'm comfortable using MS Blend to design actual XAML-based UIs for Windows-based applications and also in creating prototypes or wireframes in various tools with varying levels of interactivity. The only coding that I am even passable with, though, is Visual Basic to add interactivity to the Blend prototypes. I was hoping that Xamarin.Forms would help in that I could create the UI once (again, it's a relatively straightforward UI) and have it deploy to each OS, however; in the absence of a visual designer for X.F, I'm not sure where to begin.

Does anyone out there have any pointers for a good workflow to visually create cross-platform UIs without coding? I essentially need to transform my wireframes into the actual UI so that the developers can "wire" them up to the business logic, but without any real coding capability, I'm not sure where to start.

Thanks in advance!

Answer 1

User12817 posted

Probably not the answer you want, but it depends:

If using a siloed UI approach:

Follow each platform's UI design guidelines and implement the UI how you see the application fits

If using a X-Plat UI approach:

Figure out what's all needed on a screen, and how the framework controls navigation for each platform so you can see how they work. You can probably follow this cheatsheet.

Answer 2

User46694 posted

Thanks! Presuming I want/need to use a visual designer to craft the UIs, I'll need to build them separately in either Visual Studio or Xamarin Studio, right? No way to use a visual designer to create the equivalent of a X.F project...

Answer 3

User12817 posted

You can build them separately in any IDE you prefer: Visual Studio/Xamarin Studio/XCode/Android Studio/Eclipse/etc.

As for the Xamarin.Forms UI, to my knowledge there is no visual designer(Even if you use XAML vs. Code)

I'm sure it's in the works!

Answer 4

User46694 posted

Thanks again. Like you said at first- not what I wanted to hear, but at least I now know what to expect. We have the "design" and "develop" functions separated in our team whereby I design the UI/UX and others build the app in code. I've been having a difficult time finding any suitable documentation for creating the visual aspects of the UI without the need for code.

Answer 5

User12817 posted

No worries! There's definitely much more to come with Xamarin.Forms. Stay tuned!

The best thing you can do is follow the Cheat Sheet above or follow the documentation here:

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/ - You can click on a control(Pages/Layouts/View/etc) and go to it's API documentation to see an example that you can possibly convert to XAML if you'd like as well.

You can see all the controls in action by running one of the platform samples:

http://developer.xamarin.com/samples/FormsGallery/

Answer 6

User46694 posted

thanks again!

Answer 7

User54662 posted

@twiki? . In Xamarin.Forms you can add Forms xaml file and also can visual design .

Answer 8

User2948 posted

@gengxiaoliang? --- how are you visually designing Xamarin Forms?

Answer 9

User54662 posted

@Bonnie?
I will add a xaml file and write it like common xaml. I like write xaml . 1.Add-> Forms Xaml Page ,Named it MainView 2.Modify-> Delete the return part in App.cs and add return new MainView();

I just learn a little.I hope I can help you. You can look at it in attach file.