get faster to a product your customers love!
girl

New: Tablet & web wireframes and more

We're very excited to tell you about the biggest update to pentotype since it has come out. We added support for tablet PC and browser wireframes and multiple font sizes. Furthermore, we give you better control over screen transitions. And on the desktop, you now have a rectangle selection tool. Let's look at all of that in more detail.

Tablet and website wireframes

Upon frequent request we've added a new feature to let you design tablet wireframes as well as website wireframes. When adding a new project, you'll now be prompted to select the project type.

https://lh6.googleusercontent.com/-j4lILnomVHw/U5G-Z8mtkdI/AAAAAAAABQs/kUyVUe9vMsU/w540-h163-no/device-selection.jpg

When simulating a tablet wireframe on an iPad, you'll see it in full screen, just as your app would look. To exit the simulation, just shake the iPad. We didn't put a close button anywhere because you should have the whole screen for your wireframe.

https://lh4.googleusercontent.com/-S1P83DpixTo/U5bONJH_kVI/AAAAAAAABTU/55sjd2_77to/w540-h260-no/close-simulation-2.jpg

One cool thing about simulating a browser wireframe in pentotype is that you can scroll. When viewing the simulation on the iPhone (with the pentotype scanner app) or on the iPad, you'll see a dummy toolbar at the top, similar to that of a real mobile browser.

https://lh6.googleusercontent.com/-GZ4rtzhx25E/U5bPMr20R6I/AAAAAAAABT4/vR_3C6KN_1w/w540-h360-no/website-wireframe-on-ipad-2.jpg

We added this to give you a realistic impression of how much of your site will be visible without scrolling. This is important when, for example, finding a good position for a primary action button on the website.

Multiple text sizes

We've added two more text sizes; you'll find the corresponding buttons next to the color buttons.

https://lh4.googleusercontent.com/-D8V8p9NEkao/U5HC8REEqjI/AAAAAAAABRI/wAxuZXXp2CY/w540-h175-no/text-sizes.jpg

We've chosen the smaller font size to allow you to create things like small captions. The bigger font size is good for prompts like "Game over" or big headlines on a website. The middle font size is the original one. With three font sizes, we give you more freedom when using text while maintaining the concept of early stage wireframing.

Defining transitions

pentotype supports different screen transitions like slide, fade, and zoom. By default, they are applied automatically based on the arrangement of the screens. Two screens horizontally next to each other are applied a slide transition. If they are above each other, a zoom transition is applied. In any other case, the screens just fade. The following image illustrates this behavior:

https://lh5.googleusercontent.com/-Qy6Gmt-Qj8k/U5HJ1hcATpI/AAAAAAAABRs/jwfqw4oi7oQ/w540-h380-no/auto-transitions.jpg

However, sometimes you might want to apply a different transition. You can do that now by selecting an arrow and using the new button at the upper left corner:

https://lh5.googleusercontent.com/-xnG1YkPi9BE/U5HJ1_XX6XI/AAAAAAAABR0/F0cYp29OPpo/w540-h230-no/set-transition.jpg

Rectangle selection on the desktop

For our desktop users, we added a new rectangle selection tool which makes it a lot easier to select multiple elements.

https://lh5.googleusercontent.com/-dfTi8NKvFL4/U5bJWHPjOvI/AAAAAAAABSY/eOdZdPbuo2Y/w540-h140-no/rect-selection-menu.jpg

We also added a keyboard shortcut for that. By holdgin the [r] key, you can quickly switch to rectangle selection.

https://lh6.googleusercontent.com/-HjRK6B96xew/U5bJWbhjoXI/AAAAAAAABSg/n9k6bCy5j7k/w540-h225-no/rect-selection.jpg

Duplicating projects

The last feature that we want to show you in this post has actually been available for a few weeks already. It allows you to copy a whole project. This is very useful if you want to create several variations of a wireframe, e.g. for A/B testing.

In the project overview, each project has a copy button at the upper left corner.

https://lh5.googleusercontent.com/-6C7_qNExf_4/U5bKnUA510I/AAAAAAAABS4/GQkbYAw2fQ0/w540-h200-no/duplicate-button.jpg

After having completed your first version of the wireframe, you can go to the project overview and duplicate it. Now you have two independent wireframes, and you can open the second one and start making changes. Once you're finished and both wireframes behave as you imagined, you can use the simulation feature to test both variants.

Try pentotype now: iPad | Desktop