Everything in Indigo Studio is geared towards helping you prototype UX flows. All you need to consider is what your user sees, what do they do next, and what the end result of the action will be. As you add interactions and design UI changes, Indigo Studio automatically visualizes the UX flow. And by the time you are done creating wireframes, you are also done prototyping!
With Indigo Studio, prototype experiences for:
- Responsive Web
From Idea to Experience to Application, Fast
Design interactive, animated UI prototypes
Improve Productivity With The Built-In Ui Elements
- Reusable Design Library with Screenparts - With screenparts you can reuse parts of your designs across screens and projects. You can create re-usable custom buttons, dialogs or navigation toolbars; even add the entire screen as a screenpart and use as a master. You can also create interactive widgets by adding interactions and user flows inside each screenpart! Go ahead and create your very own custom UI library of design elements, which you can just as easily share with your team or organization.
- Unlimited Remote Usability Studies - Just like theory and practice need each other, your prototypes need evaluation. Don’t leave it to chance to get the right design. Set up unlimited usability studies on indigodesigned.com with no limits on the number of study participants. You can also conduct studies remotely over the web.
- Design For Mobile & Touch - Easily choose to design for different target devices with the Viewport, and run and interact with your prototypes on any device that supports HTML, with supported Touch gestures and built-in screen-to-screen transitions. Using the iOS Platform Pack, you can even design native experiences specifically for iPad and iPhone users.
- All your shares in one place - Share all your prototypes privately on indigodesigned.com. Simply sign in inside the app before sharing your designs. You can then access anything you shared on indigodesigned.com using the web browser, on any device. This way you get to see your share history without having to open the desktop application.
- Add Comments to Prototypes - Share your prototypes on indigodesigned.com to allow reviewers to add comments to your prototype. As an owner of the prototype, you get email notifications when someone adds a new comment. Reviewers can also subscribe to receive email notifications. And no, they do not need to create an account to be notified; a simple email address will do.
- Reusable Design Library With Screenparts - With screenparts you can reuse parts of your designs across screens and projects. You can create re-usable custom buttons, dialogs or navigation toolbars; even add the entire screen as a screenpart and use as a master. You can also create interactive widgets by adding interactions and user flows inside each screenpart! Go ahead and create your very own custom UI library of design elements, which you can just as easily share with your team or organization.
Get the most commonly used controls in a neutral/minimal style that can be used to design many common Web, desktop, and tablet prototypes, as well as some mobile prototypes that don’t require platform specific controls. Start off quickly by using over 30 built-in UI elements and add further customization to your prototype concepts with shapes and images.
- Modern, Interactive Controls - Indigo Studio's common, interactive controls have a modern, minimalistic, neutral style. These controls have interactions built-in, to save you lots of time. Tabs have functional tabs, drop downs drop down, trees expand and collapse, repeaters and other lists scroll, progress bars and sliders slide.
- Common Shapes - Integrate common shapes and use a custom shape tool with support for Bezier curves. These are great for illustrating custom controls, emphases, or even custom icons.
- Resizable Stencils - Leverage vector-based, resizable stencils to use as placeholders for advanced controls.
- Over 300 Icons - Choose from over 300 categorized, searchable icons in the Icon control.
- Repeater Control - The advanced custom Repeater control can be easily set up to customize lists of repeatable items.
Review & Comment
- Animate Screen Changes To Create Smooth, Animated Transitions - You can use the Timeline to simply extend or delay changes over time, easily creating richly animated UIs.
- Record Changes - Screen changes are recorded in the Timeline located in the Transitions/Animations panel.
- Animate Over Time - Just resize and/or move the recorded screen changes to animate them over time.
- Animation Segments - You can use Animation Segments to create more sophisticated animations
- Easing - Indigo Studio's built-in easing makes animations feel smooth by default.
Reusable UI Libraries
- Add Comments to Prototypes - Share your prototypes on indigodesigned.com to add comments to the prototype. As an owner of the prototype, you get email notifications when someone adds a new comment. Reviewers can also subscribe to receive email notifications by providing an email address. You can prevent new comments at anytime, and mark comments for follow up or archive any comment.
- All your shares in one place - Share all your prototypes privately on indigodesigned.com by simply signing in inside the app before sharing your designs. You can access anything you shared on indigodesigned.com using the web browser on any device. You no longer need to open Indigo Studio to access your share history.
- Organize and manage your shares - It’s not just about viewing your shares; you can assign tags to each share to group them and use the built-in filters to view shares by device type. Use COLLECTIONS to create a curated set of shares. A collection gives you complete control over the ordering/sequence. And then, just as easily, share a link to the entire collection. This means that you can send a single link giving the reviewers access to a set of selected prototypes.
- Edit share details or download project files - Want to change the share title or description after it's been shared? Want to download the project files used for the prototype? Indigodesigned.com let’s you edit the details for your share directly from the website, and also lets you download the project files. If the files on your computer get corrupted or deleted, you can re-download them from your uploaded prototype.
- Browse and download from community - Indigodesigned.com is also powered by the community. Freely browse and download any share (prototype or reusable UI library) contributed by the community of Indigo Studio users. And it’s easy for you to contribute too by changing the visibility of your share from private to community! Anything you share with the community is released under the MIT license for software use.
- View and download trends - Track how many times a share has been viewed or downloaded using the built-in analytics. Filter views and downloads by week, month or from the date of share to see the trend.
You already know about screens and storyboards in Indigo Studio. A screenpart, like the name suggests, can be defined as a reusable part of your screens
Design for Mobile
- Your Unique UI Library - The Screenpart library exists in addition to the essentials and iOS Pack in your UI toolbox, and is shown as “Screenparts' tab. A screenpart, like the name suggests, can be defined as a reusable part of your screens. Once added, screenparts are available for re-use anywhere in the project— just drag and drop.
- Re-use & Remix as Required - When you add a screenpart to your designs, Indigo Studio adds an instance of that screenpart. You then maintain full creative control to tweak the styles to suit any design context (i.e., size, text, color, position).
- Screenparts as Screen Masters - To use as a screen master, create and save a new screenpart containing your base layout. For a typical web-page this could mean adding anything from headers, navigation, side menus, content area, and footers. Then, to start a new screen design, simply drag and drop this saved screenpart, and that’s it! If you need to make global changes to the screenpart instances, just edit the source screenpart.
- Re-Usable Interactive UI Elements - Go beyond static UI elements and create custom interactive elements and widgets using screenpart states; it’s exactly like creating states for screens. The interactions explorer in Indigo Studio precisely shows the interaction flows in a graphical manner, complete with every interaction and its corresponding result (state).
- Organizing Your Screenpart Library - It’s easy to manage your screenpart library with screenpart groups. Right-click on a screenpart in your library to add to an existing group or create a new group. You can also add a single screenpart to multiple groups.
- Browse & download UI libraries from the Community - Need more ready-to-use UI libraries to use in your Project? Download them from the indigodesigned community.
Indigo Studio makes it easy to run and interact with your prototypes on any modern device that supports HTML, and even has the ability to design prototypes on iOS devices. It's now easier than ever to design prototypes that create a more native-styled experience.
Remote Usability Studies
- Platform Picker - Easily choose to design for different target devices and use the new viewport (device/browser chrome) to situate your design more in its usage context. For devices, you can easily toggle between landscape or portrait orientation.
- Touch Gesture Support - Respond to the most common touch gestures on user devices to trigger changes in the prototype
- Built-In Screen-to-Screen Transitions - Simulate common screen-to-screen transitions: Push, Slide, Flip, and Cross Fade
- HTML5 Device Support - Run your prototypes on any device that supports HTML5. With the HTML protoviewer, now you can share, view, and evaluate Indigo Studio prototypes on any device.
Get insights on how well your prototype performs with real people based on what they do. Test design alternatives and in return get concise study summary, task success rates, completion times and a click-map view. You can do all of this remotely over the web?
Sketch and Design
- Set up usability tasks - Setting up usability tasks are where it all begins. Add usability tasks, and record how you expect users to complete the task. Recording a task flow ensures that your users don’t get blown off-track by interactions unrelated to the task. And don’t worry if they try to do something unexpected as their input is captured and you can review it as part of the click-map visualization.
- Participate in the study remotely - Study participants can take your study remotely using a web browser. Invite them by sending them a URL (link) to the study, and they can start the study without the need to install anything. Testing a prototype for mobile? No problem. Your users can take the study using either the desktop or their smartphone. And if for some reason they cannot start all the tasks, they can come back to it later and resume the study.
- Get the freshest usability study findings - Can’t wait to get the study results? As and when participants finish a task, the study results are updated. So any time you access the study report on indigodesigned.com, you get the freshest results.You can even close the study when you have enough participants, preventing additional users from taking the study.
- Review click-maps and participant feedback - Study participants have the option to leave feedback or suggestions about the task. View the prototype as a moderator to review these comments. But that’s not all; both the successful interactions and where participants tried to interact with the prototype (failed attempts) is captured, presented as a click-map visualization. This allows you to compare participant’s expectation against the recorded/designed user flow.
Rapidly put together UIs using interactive controls, text, images, shapes, etc. to try out ideas. Indigo Studio leverages Infragistics controls where applicable, with appropriate styling based on platform theme, and adds many of the more fundamental controls. Capitalizing on ease of use, you can edit properties in place—on the element itself, minimizing property panel usage. Indigo Studio's screen elements give you interactivity out of the box – something you won’t get with most other screen designers.
Design for iOS
- Design Different Levels of Visual Fidelity - You can design different levels of visual fidelity/polish.
- Import Your Balsamiq® Mockups - Simply copy and paste your designs from Balsamiq into Indigo to quickly make rich, interactive UIs based on your preexisting designs.
- Lay Out Well-Aligned UIs - Call out alignment snapping guides are an out of the box feature that make laying out well-aligned UIs super easy.
- Configuration & Property Editing - Indigo Studio offers a configuration & property editing experience that allows you to edit in place.
- Toolbox - Use the Toolbox to see and drag on Screen elements. You can also use the Alt+Drag or Alt+Click combinations to add screen elements.
- Elements & Layers Panel - You can use the Elements & Layers panel to see Screen element outlines, select, show/hide, lock/unlock, and adjust layering by drag and drop.
Quickly design prototypes for iOS platform-specific styling, with over 30 interactive iOS controls, 15 iOS icons, and 13 built-in screen to screen transitions.
Share and Present
- iPad and iPhone Support - Indigo Studio includes support for targeting iPad, iPad mini, iPhone 4, iPhone 5, iPhone 6, and iPhone 6 Plus.
Run prototypes from screen states and storyboard boxes to facilitate presenting the prototype to stakeholders. You can share and view your prototypes independently using a player for asynchronous review.
- One-Click Sharing - Use the “SHARE PROTOTYPE' option from the project home to publish on indigodesigned.com and generate a link (URL). Send this link to your reviewers, with no limits on reviewers or number of shares. You can even include a password, which adds HTTPS encryption.
- Share Offline to your Desktop - Don’t want to share on Infragistics servers? No problem. Use the “SHARE ON DESKTOP' option to publish locally on your computer and create an offline version of your prototype. You can then host it on your servers or a sharing service of your choice (e.g., Dropbox).
- HTML Prototype Viewer - With Indigo Studio you can create prototypes for desktop, web and mobile. With the HTML prototype viewer, you can run the prototypes on any desktop or mobile device that supports HTML5. No plugins required! A web browser is all you need.
- Customize Viewing Options - Take control of what your reviewers will see before you share. For instance, you can control whether you want the highlights around interactive elements on or off. These options can also be changed after sharing using the prototype viewer toolbar.
Quickly add custom interactions to screens to simulate application experiences in your prototypes. You can easily and effectively express interactive design concepts – no code needed - while still supporting a near full range of application behaviors.
- Add Interactions to Anything - Interactions are native to Indigo, so you can add them to anything. You don't have to create some special kind of dynamic panel or control - just select what you want to make interactive and click ADD INTERACTION.
- User-Focused Interaction Design - Design interactions from the user perspective. Select what the user does, and then specify what happens to the prototype as a result.
- Preview - Quickly try out interactions and tweak them by running a screen preview.
- Screen Interactions Explorer™ - Visualize the screen interactions and states using the Screen Interactions Explorer. You can use it to understand and navigate the different possible interaction flows for users.
- Mini Interactions Explorer - Navigate quickly between screen interactions using the Back and Forward toolbar buttons and the Mini Interactions Explorer.
- Highlight Interactions - Highlight interactions defined on a screen and quickly navigate through your prototype while designing it.
- Export to Storyboard - Export all or some selected screens to show a particular user path. Indigo Studio creates a storyboard based on those screens, so you can better communicate with stakeholders and developers.
- Story-based Prototyping - Story-based prototyping lets you specify a single path for users to follow, so that interactions turn on when you want the user to choose them.
- App-like Interactions - Convert your story-based interactions into more app-like interactions by rearranging them within a screen and changing when they become available to users.
- Visualize Project Level Flow - Visualize project level flow to see connections and links between screens.
Incorporate real-world context of use into your designs by leveraging Indigo Studio's integrated storyboards. You can create storyboards to capture situations from a human perspective using scenes and screens from the prototype, and integrate them directly into the storyboard boxes.
Choose from over 100 built-in real-world scenes that put people in the picture in different contexts of use. Then pull in states to illustrate each step; you can even overlay these on scenes that have placeholders for screens. Use actual prototype screens in your storyboards, to create a natural flow between the story/user-oriented design and the screen/app-oriented design.
- Built-In Scenes - Built-in scenes in the storyboards enable you to put people in the picture in different contexts of use. You can also pull in states of screens to illustrate steps and overlay these on scenes with visible screens.
- Prototype Screens and States - You can use prototype screens and screen states in storyboards.
- Illustrate Choices - Utilize branched storyboards for illustrating choices or parallel user paths in your prototypes.
- Run Your Prototype Directly from the Storyboard - When you need to present your ideas quickly, you have the ability to run the prototype directly from a screen on the storyboard.
- Pre-Populate a Storyboard Using the Screen Interaction Explorer - Export your prototypes directly from Screen Interactions Explorer to create a storyboard. You can use this feature to highlight a particular user path through a prototype.
The version you have, including the updates that we release during the year of your active license, is for yours to keep forever! And to continue receiving new features and updates, including product support for an additional year, you can also renew your license at around 50% off the list price