Appery.io 1.2.1 release: mobile prototypes and controls based on jQuery Mobile

Posted: November 29th, 2010 | Author: | Filed under: Features | Tags: , | 1 Comment »

We just released Appery.io version 1.2.1 and the biggest new feature is mobile palette which lets you build mobile prototypes and of course preview them. Mobile controls are based on jQuery Mobile. Other new features are reorder screens with drag and drop, preserve ratio for uploaded images, round corners for components and component duplicate option.

To see the entire list of features, just go to http://appery.io. For any questions, suggestions and feedback, go to Appery.io forum. Let’s review all the new features in this release.

Mobile palette and prototypes

With mobile palette based on jQuery Mobile controls, you can now create prototypes for iPhone, Android, BlackBerry or any other mobile device and preview them in any browser (of course we recommend a mobile browser). To activate the mobile palette, switch Screen Type to Mobile in screen properties and get jQuery Mobile based controls:

Use the grid control to help you with layout and don’t forget that you can always preview the mobile prototype by selecting Web Preview/Open:

Read the rest of this entry »


Sharing your project

Posted: November 29th, 2010 | Author: | Filed under: Features, Prototyping, sharing and collaboration, Tiggr | Comments Off

Max already mentioned in his posts how you can collaborate using Appery.io, in this post I want to elaborate little bit more on this.

What collaboration tools Appery.io provides?

  1. Project sharing
  2. Whiteboard synchronization
  3. Built-in chat
  4. Prototype sharing
  5. Export as HTML bundle

Now let’s take a look at each of them.

Read the rest of this entry »


Preview prototypes anywere, even on iPad, iPhone

Posted: November 23rd, 2010 | Author: | Filed under: Features | Tags: , , | Comments Off

Appery.io whiteboard was created using Flash. Why did we use Flash and not HTML? Well, today Flash is still the more powerful and flexible solution for this particular job. We knew that today we would have to do a lot more work to create the same functionality in HTML5. But, it’s something we are considering for the future. So, if you try to access Appery.io from iPad, well, you know what’s going to happen (Thanks, Steve). But, not everything is lost! One of the unique and rather powerful features in Appery.io is Web Preview. Web Preview generates standard HTML/JS/CSS and allows you to preview the prototype in any browser, any mobile device and yes, even on iPad and iPhone. This makes it possible to send prototype Web Preview to anyone and ask for their feedback. Isn’t’ this cool? Your boss or customer sitting in a coffee shop, airport, or anywhere else with their laptop, mobile phone or iPad can now review the prototype with just one click! Appery.io Web Preview is interactive, you can click on various controls to open them up such as calendars and navigate between pages.

And one more thing, we are coming with a specialised mobile palette based on jQuery Mobile components. You will soon be able to build prototypes for mobile devices!

  1. First, select Web Preview/Share and choose who can view the prototype:
  2. Then, select Web Preview/Open
  3. A new page will open (click the link below to see it in action). Go ahead and open this link on Android, iPad or iPhone. Try it!

Managing your assets

Posted: November 15th, 2010 | Author: | Filed under: Features, Tiggr | Comments Off

Appery.io provides a very handy way of managing your assets.

Let’s see how you can add an image to your mockup.
1. Drag and drop an image component from the palette.
adding image to Tiggr

adding image to Appery.io

Read the rest of this entry »


Give me layout

Posted: November 10th, 2010 | Author: | Filed under: Features, Tiggr | Tags: , | 1 Comment »

Layout is crucial in any design. Luckily, Appery.io provides 6 different and customisable layout containers to help you that. All the available layout controls are available via Containers palette:

The first one is Panel:

Panel is more or less a general-purpose container where the layout is set to vertical by default. You can change the layout flow in properties:

Next is Vertical Box in which the layout is set to vertical by default:

Horizontal Box sets layout flow to horizontal:

Flow Box sets layout flow to flow:

Grid Panel divides a panel into equal size squares inside which you can place other controls:

One more is the Tab Panel:

It’s possible to create (and edit) any number of tabs and place any controls inside them:

Enjoy layouts!


Navigating between pages

Posted: November 8th, 2010 | Author: | Filed under: Features, Tiggr | Tags: , | 1 Comment »

Appery.io prototypes are interactive. For example, when you place a tab panel and then view the prototype in a web browser, you can switch between the tabs. We recently made the Appery.io prototypes even more interactive. It’s now possible to navigate between pages (screens). When you use a button, link, or an image you get an option to specify to which page to transition. When running in Web Preview, you will simply navigate to a different page, just like in real application. Well, making it as real as possible is the whole idea behind Appery.io.

Let’s see an example of a multi-screen wizard. First, there are four pages:

This is the first page:

View other pages in prototype in web browser.

If we select the button and look at its properties, we get this:

Once a button is selected, you will see Navigate to option in properties. There it’s possible to select any of the available screens. When viewing the prototype in a web browser, clicking this button will navigate to page 2.

Other controls which support navigation are link and image.

You probably want to see how this works? Just click here to view the prototype in web browser. In addition to links, you can also switch between pages by using the drop down menu at the top of the page.

Our goal is to make the prototype as real as possible.


Sharing Appery.io prototypes

Posted: November 5th, 2010 | Author: | Filed under: Features, Tiggr | Tags: , , | Comments Off

There are multiple ways to share a Appery.io prototype project. One of the first features in Appery.io was collaboration. During prototype design you can invite anyone to collaborate with you on the prototype in real time. You can invite a colleague working from home or a remote team in another country. There is a even a chat feature. Another way to share is to send a link to the Web Preview of the prototype. This is great if you want to show how the prototype looks in a web browser to a customer. We recently launched another way to share the prototype (the old school way). You can export the entire project into a zipped HTML bundle file and then share the file. Web Preview version (HTML/JS/CSS) will be generated for each screen in prototype and zipped together.

From Projects page, select Options/Export to HTML bundle:


Appery.io prototypes dynamic widgets

Posted: November 2nd, 2010 | Author: | Filed under: Features, Tiggr | Tags: | Comments Off

Originally posted on http://mkblog.exadel.com and slightly modified.

One of the neat features in Appery.io prototypes is dynamic widgets. Let me explain. Let’s say you have a tab panel with three tabs. Different content goes into the three tabs. When you design mockups or wireframes, there is probably no simple way to show what content/widgets go inside the tabs which are now shown. With Appery.io, it’s very simple because the tab widget is dynamic. In other words, you can click on the tab and switch between them. This way you can place different content into the tabs during design as in real application. When you do Web Preview and generate prototpy HTML/JS/CSS, you can switch between the tabs as well.

First tab:

Second tab:

Third tab:

To edit tab label, just double-click on the text. And, to add/remove tabs, click on the tab and invoke the context-menu as shown:


Appery.io prototypes: new address, new blog

Posted: November 1st, 2010 | Author: | Filed under: Tiggr | Tags: | Comments Off

A few weeks ago we launched a new address for Appery.io: http://appery.io. Today we are also launching a new blog http://blog.appery.io. This blog will cover Appery.io, web and mobile application prototyping, design and everything related. It will also cover new features, tips and articles. Come back often.

Some latest features in Appery.io: