Assistance for non-coding UX Designer RRS feed

  • 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!

    Wednesday, June 18, 2014 5:32 PM

All replies

  • 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.

    Wednesday, June 18, 2014 8:27 PM
  • 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...

    Wednesday, June 18, 2014 8:41 PM
  • 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!

    Wednesday, June 18, 2014 8:46 PM
  • 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.

    Wednesday, June 18, 2014 8:57 PM
  • 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:


    Wednesday, June 18, 2014 9:13 PM
  • User46694 posted

    thanks again!

    Wednesday, June 18, 2014 9:17 PM
  • User54662 posted

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

    Thursday, June 26, 2014 6:58 AM
  • User2948 posted

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

    Wednesday, August 13, 2014 8:49 PM
  • User54662 posted

    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.

    Thursday, August 14, 2014 2:40 AM