My Prototyping Toolkit (6 of 7)

6. Functional Prototypes

Functional prototypes actually work. They also blur the lines between prototyping and engineering. But sometimes they are necessary to either fully demonstrate a vision. And sometimes its almost faster to build something real then something fake.

Tools

  1. Ruby on Rails
  2. Xcode
  3. Atom

Ruby on Rails
For the Web

RoR is a venerable web development framework. I still use it to rapidly prototype fully functional, db-driven, web-based application designs. Its fast. Its DRY. Within an hour I can have a very basic commerce site built and deployed.

The learning curve is steep. You need to know Ruby and understand the model-view-controller paradigm. You will have to use the CLI a lot. You should understand relational databases. And hand crafting HTML and CSS will often be helpful.

There may be better frameworks for prototyping. And working with JS will be more transferable. But, I use RoR because we have a history together, and it does what I need.

Benefits

  • Your prototype is real and truly interactive
  • You can use real data
  • You can focus on behaviour and workflow and let the framework worry about layout

Drawbacks

  • Steep learning curve
  • Code (benefit for some, drawback for others)
  • Relies on a web of integrated technologies that you will have to learn
  • Ruby is not a common language so it it not very transferable
  • It is getting old now, there are newer and more popular frameworks

Price

  • Free

Alternatives I have Used

  • ColdFusion. Eons ago.

Xcode screen

XCode
Integrated Development Environment

Apple’s industrial strength development environment. I use it to produce highly realistic iOS prototypes, without relying on hacks or fakes. In many cases I can do it faster and with less frustration than with Axure. Learning Swift is a prerequisite. Checkout Stanford’s free software engineering classes on Swift.

To be honest my Swift-fu is weak. I am limited to using standard iOS controls rather than playing with novel navigation methods or clever animated transitions. Still, sometimes testing with a real app, that really works, on a real phone is worth it.

If you don’t mind working in Code and thinking like an software engineer, XCode can be an exceptional prototyping tool.

Benefits

  • Very powerful
  • Truly interactive prototypes
  • Make real app using Apple’s controls

Drawbacks

  • Steep learning curve, for the tool, for the language and the APIs
  • Code (benefit for some, drawback for others)
  • From a design perspective, InterfaceBuilder behaves in weird and unexpected ways
  • I haven’t found a CSS-like anything for formatting, which makes it a lot of error-prone manual work to keep all the font styles consistent for example.
  • Hard to demo to non-Apple users

Price

  • Free

Alternatives I have Used

  • None

Atom
Code Editor

When I need to dig directly into code I use Atom. I used to use TextMate. As a designer the finer points of editor preference that erupts into developer holy wars is lost on me. Atom looks a little nicer to me.

Benefit

  • Give my usage I notice little difference with other text editors

Drawbacks

  • None

Price

  • Free

Alternatives I have Used

  • Textmate, Brackets

 

Leave a Reply

Your email address will not be published. Required fields are marked *