App Development Made Easy

With Indigo Studio, you get rapid prototyping to experience your app before you code it. And our HTML5 Page Designer is an intuitive tool that will have you dragging-and-dropping your way to app success in no time. We sat down with our Product Team to discuss what each of these tools brings to the table – and how they can be used together to simplify your development process even more!

Indigo Studio is a rapid prototyping tool that helps developers envision their apps before they code them. Why is that important?

George Abraham, Interaction Design Manager: Here at Infragistics, we say that “Great apps happen by design”. To deliver applications that your users will love, we believe the design process needs to be inclusive and customer-centric. This doesn’t just mean keeping the customers' interests in mind while designing. It’s really about bringing the customer into the design process by letting them inform decisions throughout the lifecycle with design iteration.

Most of us understand that design iterations are key to a good design practice. However, while cost of iteration is difficult to measure, one thing is certain: iteration in code is much more expensive than iteration using a code-free solution, in terms of effort and monetary costs. If customers and stakeholders don’t experience the application until the very end of the development process, we have concentrated all that risk at the very end. Even with the best intentions and experienced practitioners, waiting until deployment to get customer feedback is a bad idea.

So that’s why Indigo Studio exists: to allow you to create interactive app experiences that can be evaluated by users even before you write a single line of code. 

And the HTML5 Designer simplifies the development process too?

Ambrose Little, Director of Product Management: Definitely. The Page Designer is all about making Modern Web line-of-business app development easier to grapple with. It’s really great for getting started quickly with advanced components like our data grid and data chart in Ignite UI. Using the designer, you can drag and drop your components on a WYSIWYG design surface and configure them faster with our easy-to-use component editor.

These sound like two great tools on their own – but how do they work together?

Ambrose: Well basically, Indigo Studio prototypes can give you Web code to get you started, and you can copy and paste that into the Page Designer to take that prototype to the next level without having to recreate everything manually.

George: Exactly. With the latest version of Indigo Studio, we included support for responsive web-page layout using Bootstrap, a popular responsive framework. However, instead of using obscure column span definitions, Indigo Studio allows you to configure the layout visually. You can easily extract the HTML mark-up - complete with bootstrap layout grid - from a running prototype and use it to jump start your app development inside the Page Designer.

And since you already completed design iterations using the code-free prototype, you can now focus on building-it-right by leveraging the enterprise-grade UI controls (e.g., Charts, Grids) provided in Ignite UI. So think of Indigo Studio prototypes as a means to validate ideas with users as cheaply as possible, and the IgniteUI Page Designer as the place where UI components are further refined and configured (events and data-binding) to live inside a real line-of-business application.

What inspired the creation of these tools? They work so well together, was it a “chicken or the egg” type thing?

Ambrose: They really solve two different problems. Indigo is all about helping you discover the best designs through prototyping, by staying focused on your users and their stories. But of course, even though Indigo is super-fast, that doesn’t mean you want to manually recreate everything when you actually start coding your app. That’s why we developed the code exporting feature of Indigo—to jump start your development.

That aspect—jumpstarting your development—is also what the Page Designer is all about, so there’s a natural intersection between the two: you don’t have to restart from scratch. Build out your idea, grab that code, and start enhancing it with real data and advanced Web controls without having to manually hand code it all.

What kind of experience will someone need to work with these tools?

George: To use Indigo Studio’s prototyping capabilities effectively, all you need is a narrative about what and why the user would do something in the application. With that in hand, Indigo Studio can help you prototype this user flow, complete with UI, interactions, and animated transitions. We have designed the application such that you don’t need to have any knowledge of code to design an experience for the story-of-use. Everything in Indigo Studio is WYSIWG. And it’s just as easy to “share” the prototype to review it on devices using the web browser. 

Ambrose: That’s right - anyone who works with software regularly can more or less figure it [Indigo Studio] out. It was designed specifically with UX folks and business analysts in mind, so you certainly don’t need to be a developer.

The Page Designer assumes that you have some development experience and a basic familiarity with HTML, CSS, and JavaScript—the core technologies for the modern Web. Of course, you can drag and drop and configure things to an extent without that knowledge, but at some point you’re gonna need to grab the code and integrate it into a real development project. That’s the focus there.

And no matter who you are, you can save a ton of time and quickly try ideas out and get everyone on the same page before you start writing your production code, which saves a ton of time later in the development process with fewer surprises and changes.

It’s really amazing how quickly you can try different interactive ideas, even with complex animations, and build them out into apps using these tools.

To experience Indigo Studio and the Page Designer for yourself, get them both free for 30 days when you try Infragistics Ultimate!