How To … Use Comments In Your Prototypes

Getting feedback is the raison d’être of prototypes. That’s why Pidoco offers you an easy way of soliciting comments on your designs. But there are also other reasons why you might want to add commentary or notes to a prototype. In Pidoco there are several different options to do so, and today I will show you how and when to best use them. So here is how it goes …

 

1. Soliciting feedback

Probably the most common purpose of prototypes is to receive feedback from different stakeholders. Pidoco gives you an easy way to do so: You can share your prototypes for reviewing and thereby allow others to comment on them. This is easily done by placing a little marker on any part of a page in the Simulation View and posting a message into the provided text field. Other reviewers can respond to any comment, thereby creating a discussion. Discussions are a great way to keep track of change requests and to document decision-making processes. Every discussion can have a custom title, which you can change by double-clicking on it.

Comment on elements in the Simulation View

Soliciting feedback via the comment function in the Simulation View

To keep track of new feedback, each discussion also has a status that can be changed when feedback has been incorporated into the next iterations of the prototype. To do so, simply click on the status field in the toolbar of the discussion and select the desired option.

Use the discussion to display to current  implementation state

Keeping track of feedback via the status function

Note: Only people with “Review” or “Collaborate” rights can create and participate in a discussion.

Collaborators with full access to a prototype can also use the “Reviews” tab in My Prototypes to quickly check for new feedback and reply to a discussion thread. A click on the respective discussion will open the dialog and let you post a comment. Additionally, a click on the link in the “Page” column lets you jump right into the page to which the discussion refers.

Reply to a discussion in the Review Tab

Replying to a discussion via the Reviews tab

Hint: Discussions can be exported for use in other tools or turned directly into issue tickets via our integration with Planio, a web-based project management tool, or JIRA (Enterprise Edition only). An RSS feed will keep you up-to-date on new incoming comments.

 

2. Adding explanations

The Comment stencil can be used to add notes or explanations to your prototype that by default are visible to any viewer, for example to add information where the prototype lacks detail. Another reason to use the comment stencil could be to quickly jot down an idea or add a reminder for an open issue to be solved later on. Yet another use case might be to leave a note to fellow collaborators, e.g. “This page is not finished yet”.

The Comment stencil works just like all the other stencils. To use it, simply drag it from the Stencil Palette to the desired position and enter your text. The Comment stencil also offers you a choice of colors so you color code notes for different audiences. If desired, you can hide individual comments in simulation mode via a checkbox in the Context Menu.

Use the Comment stencil to add remarks to prototypes

Use the Comment stencil to add remarks to prototypes

 

3. Providing inputs for implementation

Prototypes can serve as blueprints for development. Usually, the developers need more information than just what the UI will look like. That is why Pidoco allows you to add annotations to any element of your prototype. Annotations are invisible in simulation mode, so you can use them to provide detailed information, functional requirements, or instructions to your programmers without letting everyone else see them or distracting from the prototype itself. If you want to use the specification document export to brief your development team, you can choose to include the annotations when generating it.

To add annotations to any element, open the Context Menu of the respective element and enter your text in the “Notes” field.

Adding notes to an element to provide functional detail or to enrich the specification document

Adding notes to an element to provide functional detail or to enrich the specification document

 

 

That’s it! You have successfully added comments and notes to your prototype!

Do you need help working with comments? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to … Manage Account Members

Prototyping is a fundamentally collaborative activity. That’s why Pidoco allows you to add multiple users to your account. These account members can have different roles in order to facilitate project organization. For instance, a project manager may purchase a plan and appoint the UX lead as admin, who in turn can manage account membership for her/his entire team. In this post, you’ll learn how to manage account membership.

Before we go on, here’s a brief overview on the different roles:

  • Members can create and share prototypes.
  • Admins can also add members to the account and remove them.
  • The Owner has full power: In addition to everything an admin can do, she can purchase plans, change the account’s name and appoint new admins (or demote them).

Now, let’s have a look at how the member administration works. Here is how it goes…

 

1. Finding out your own role

To find out which role you currently have, log in to your account, click on your email address in the top right corner and select My Accounts. The entry “You are:” will tell you your role in any given account. Note that you may belong to several accounts.

 

2. Adding users to an account

If you are the owner or an admin, you can add other users to the account. To do so, just click on “Member Administration“.

Starting with the Member Administration

Accessing the account’s Member Administration

Now you can add new users in the Add members section. Simply enter the user’s name and email address and confirm by clicking the “Add members” button. New users always start out as normal “Members” of the account. You can assign them a different role later. Hint: You can add multiple users at once.

Adding a new member

Adding a new user to the account

Adding a user to your account does not mean that the user will automatically have access to all prototypes in the account. Instead, all prototypes are private to the user who creates them until s/he chooses to share a prototype.

To remove a user from the account, select the user in the Current account members section and click the “Remove selected members” button.

Note: All prototypes created by any account member count toward the account’s prototype limit.

 

3. Assigning a role to an account member

You can make a normal account member an admin or demote admins to normal account members. To assign a role to a user, click on the use the buttons “Make admin” or “Make member” in the Current account members section.

Granting roles to account members

Changing roles of account members

 

That’s it! You have successfully added new users to your account!

Do you need help managing your account members? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How To … Work With Versions

In Pidoco, every change you make to a prototype is automatically saved. In addition, prototypes as a whole are automatically saved at regular intervals. This auto versioning creates a copy of your prototype in a certain state and allows you to switch back to each copy and continue work from there. But you don’t have to rely on auto versions: You can manually save a version of your prototype, for example to capture a certain milestone. And here is how it goes …

 

1. Create a milestone 

To save a version of the current state of your prototype, go to the toolbar and click on the “Save as” button. A pop-up will ask you to enter a name for the new prototype version. Enter a name such as “Version 1″ and confirm. Et voilà, you have created your first milestone!

Save and name the latest version of your prototype

Saving a copy of your current prototype for versioning purposes

 

2. Open the milestone

At any point in time, you can switch back to previously saved versions of your prototype (almost like in a time machine). To do so, go to My Prototypes and open the Versions tab of your prototype. The “Base version” dropdown shows a list of all available versions of your prototype including your milestones and autosaved versions. The version date and author are listed after each version.

Create a version of your prototype

Accessing an older version of a prototype

To access an old version, select it from the dropdown and click the “Create a copy of the selected version” button. This adds the selected version as a new entry to your prototype list in “My Prototypes”. It will carry the same name as the original with the word “Copy” added at the end. You can choose whether existing collaborators or discussion entries should be included in the copy.

Versioning creates a new prototype

Accessing an old version creates a copy of the prototype entry

 

That’s it! You have successfully created your first milestone! Do you need help? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

How To … Insert Links Into Text Elements

A while ago, we added a new text stencil to Pidoco that makes editing text much easier than before. With the new text stencil, you can insert links to other pages or external URLs directly into your text. Today, I want to show you how…

 

Step 1: Insert a text element

Let’s start off by dragging a text stencil from the palette to the canvas. Once you have placed the stencil, a toolbar will appear directly above the text, allowing you to format the text. You can immediately start typing or pasting copied text. When you are done, click outside the text stencil

Insert the new Text Stencil

Inserting a text element into a prototype

Hint: The width of the text stencil will adapt while you type. If necessary, you can resize it manually.

 

Step 2: Link (a part of) the text

Linking to another page: Once you have entered your text, select the text or text elements, that should become the link, with your mouse. In the toolbar, click on the arrow next to the field “Insert link”. A dropdown menu will open and let you select the page of your prototype you wish to link to. The linked text will be underlined.

Create a link to a prototype page

Creating a link to another prototype page

 

Linking to external content: To link text to an external website, select the text to be linked and type the URL of the website into the field “Insert link” in the toolbar.

Create a link to external content

Creating a link to an external website

Hint: To remove a link, select the linked text and click on the “Remove link” icon right next to the “Insert link” field.

 

What do you think about the new text stencil? Drop us a comment here or via FacebookTwitter or Google+ or contact us via support@pidoco.com. We are looking forward to hearing from you!

Happy Prototyping!

Merging Web and Mobile Prototypes

At Pidoco we constantly work on improving your prototyping experience by listening to your feedback. One frequent question has been “Why is it not possible to design web and mobile prototypes in one project?”. Well, your wish is our command, we have merged mobile and web prototypes, and here it is: the all-in-one prototype!

 

What’s new?

As of today there is no functional differentiation between web and mobile prototypes anymore. This means you can create pages for all kinds of devices and screen sizes in just one prototype. The change reflects recent design trends, namely it will allow you to prototype responsive designs much more easily.

The new all-in-one prototype makes things a lot easier: Now when going to My Prototypes, there will only be one button to create a new prototype. While you can still pick a default page size when creating a prototype, you don’t need to worry about whether you want your project to be a mobile or a web/desktop project anymore. A click on the button will immediately open the new prototype in the Prototype View. Hovering over the button will let you pick a default page size by selecting your standard device (web/desktop pc, smartphone, 7″ tablet or 10″ tablet). Naturally, you can still adjust each page’s demensions in the prototype, but the default page size will reduce manual work.

Select your prototype to get a pre-defined page size

Merging of web and mobile prototypes: The new all-in-one prototype

 

Another great thing about the new all-in-one prototype is that the elements in the mobile and web/desktop stencil palettes have been combined to give you a much wider range of building blocks for your prototypes. This also includes options like rounded corners in you prototypes.

Additionally, the simulation in the Pidoco app, which is available for Android and iOS devices, has been enabled for all your prototypes, even for the previously created web prototypes. This also means that the mobile sharing option is now available for all prototypes, no matter when they were created.

 

What stays?

Well, and what about all the good old web and mobile prototypes you have created? Don’t worry, all the prototypes you have created before the arrival of the all-in-one prototype are not affected by these changes. They are still labeled with the tags “Web” or “Mobile” in My Prototypes to make them easy to identify. You will, however, see more stencils in the palette when you open them.

 

How do you like our recent update? Drop us a comment here or via FacebookTwitter or Google+ or contact us via support@pidoco.com. We are looking forward to hearing from you!

By the way, did you know that you can submit your ideas in the Pidoco Forum? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status of your suggestions.

 

Happy Prototyping!

 

PS: You are not a Pidoco user, yet? Why not register for a free 31-day trial today?

Inline Editing And In-Text Linking With The New Text Stencil

For a while now, one of our most frequently requested features has been a text stencil that’s easier to handle. Today we’re proud to say: Voilà, here it is! As off today, creating prototypes in Pidoco will be even easier than before, with a text stencil, which is more powerful, easier to use and, most importantly, includes new functions like inline editing and linking.

 

What’s new?

Inline Editing: Up until now, editing text in Pidoco required you to open a tiny text editor window in which you could edit the text, but you would only see the final result after closing it. With the new text stencil, you can now enjoy direct in-place editing of your text elements, which lets you see formatting and other changes as you type.

With the introduction of the new text stencil, we are also getting rid of the distinction between “Plain text” and “Styled text”, a choice you had to make before. From now on there will only be one type of text that can do it all. Now, when adding a text stencil to your canvas or editing text, a toolbar will appear directly above the text, giving you easy access to all available formatting options.

Inline editing with the new text stencil

Inline editing with the new text stencil – all options at your finger tips

 

In-Text Linking: The new text stencil makes it easier to place links into your prototypes by allowing you to directly insert a link into any part of the text. You can either link to other pages of the prototype by picking a target page from a dropdown or link to an external URL.

New Formatting Options: The new text stencil also comes with a range of new formatting options, including:

  • using underlined text in addition to bold or italic text
  • adding text highlighting in addition to changing font color
  • aligning of multi-line text.

Improved Auto-Sizing: Another novelty is the auto-resizing of text elements. The new text stencil automatically adapts its width while you type and has been optimized to require less manual resizing. Of course, you can still resize texts manually, if you need to.

Format your text and directly see the results

Improved text formatting with font color, highlighting, in-text linking and alignment options

 

Optimized Output: Finally, we have also reworked both the simulation of the prototype and the specification export to make your work shine.

The reworked specification export

Our optimized specification export makes your work shine.

The above improvements also apply to text-base stencils like headlines, text blocks, or links, which are now based on the new text stencil and can be edited with only a few clicks.

 

What stays?

All your previously created prototypes, using the old text stencil and the text types “plain text” and “styled text”, will still function like before and remain unaffected by the recent improvements, save the optimized simulation and exports. Existing text elements can still be edited like before. All new text elements, however, will be created using the new text stencil.

What do you think about the new text stencil? Drop us a comment here or via FacebookTwitter or Google+ or contact us via support@pidoco.com. We are looking forward to hearing from you!

 

Happy Prototyping!

Top 5 Things Prototyping and Playing With Toy Bricks Have in Common

Think of the hours you’ve spent sprawled on the floor constructing your own toy brick masterpiece. Now think of the last time you transformed one of your ideas into a prototype. Notice any similarities? Well, while interlocking various bricks and adding elements to prototypes recently, I noticed that both have much in common. Here are my Top 5!

 

1. No limits

Let’s face the obvious: toy bricks are accessible to everyone. There is no such thing as a limit. There’s no restriction to age or skills, even though there are different sets and special editions available, including rather complex or technical lines. Basically all you need to have is the fascination for toy bricks. The rest is easy and comes from learning by doing.

Prototyping is quite the same. While there may be differences between prototyping at different levels of detail (low vs. high fidelity), prototypes can generally be created quickly and intuitively with the right prototyping tool. So you don’t need any specific skills, especially no programming skills. When creating a prototype maybe the only limit is your imagination…

See how to use the Pidoco prototyping tool

 

2. Creativity

With toy bricks it is virtually impossible to exhaust your creative potential. Toy bricks bubble over with versatility. Every set consists of specific toy bricks. Although they usually come with instructions you can follow step by step, nobody keeps you from doing it your own way. So you can go ahead and invent your own construction, mix bricks from various sets or even build an entire house. Just create your very own masterpiece!

A entire house made of toy bricks

Prototyping represents the same kind of creative process. Working with a prototyping tool gives you a ton of creative freedom. Although most prototyping tools come with a predefined set of elements, such as buttons, menus, combo boxes, video bars or plenty of icons, they hardly limit you in what you can build. By combining elements in new ways or by adding interactions, device motions or touch gestures, new possibilities open up. It doesn’t matter whether you are prototyping a website, mobile apps or a piece of traditional software.

 

3. Iteration

Playing with toy bricks, no doubt, is great fun, but probably one of the main reasons you spend hours searching for the right brick while letting them prick your knees or feet, is that you simply like creating things. Thanks to this passion, you can build objects that are not just a quick construction, but may include highly-specialized technical details. As with almost all things, your best constructions probably involved a lot of trial and error: constructing, de- and reconstructing your object until you were happy with the result.

Mocking up a future product is quite the same iterative process. You may be a creative whiz, but most prototypes will take a number of iterations before they pass the usability test. With the right prototyping tool, this will be no problem at all, since it will let you go through various versions of the prototype, allowing you to modify and redo certain parts without having to do it all over again. In the end your prototyping masterpiece will likely meet UX requirements and exceed customer expectations.

Keyboard built with toy bricks

 

4. Speed

One of the most amazing things about toy bricks is the interlocking! Not only that you can virtually use them forever, as they will still interlock with the newest pieces, even if bought many years ago, you can also put the bricks together really fast. It only takes a few minutes to pile up your bricks and to plastically present your latest idea.

Prototyping is quite similar! The predefined building blocks found in good prototyping tools allow you to mock up an idea with only a few clicks. Even adding interactivity or animations to breathe life into your prototype can be done in a few minutes. Often, this is much faster than coding it. But the real time-saver is when you need to adapt a prototype due to changing requirements or feedback from usability testing: Instead of having to rewrite your code, you can simply move elements around, add or remove a page, relink and voilà – there’s your new version.

Prototype of the Brick Store

Prototype of the Brick Store

 

5. Teamwork

Playing with toy bricks is a great way to spend a day – no matter if you are a child or a grown-up. Most of all, toy bricks are a multiplayer activity bringing together friends and family. That’s basically the same with prototypes. By sharing them with your colleagues or other stakeholders, the whole product family gets united on the virtual play carpet. Not only can people easily get directly involved in the prototyping process, enabling them to put thoughts into images rather than just words), but everyone can also easily understand the prototypes, which empowers them and fosters vivid dialogue and discussions on the work in progress – usually leading to better results.

Unlimited collaboration
Unlimited collaboration with unlimited options
(Photo by designmilk, 2013. under the terms of the Attribution-ShareAlike 2.0 Generic)

 

You’ve created a interesting prototype or brick toy construction? Let us know on Twitter, Facebook or Google+.

How To … Work With Screenflows

Screenflows are a great way to visualize the structure of your prototype. Screenflows allow you to create maps of multiple pages in order to demonstrate navigation paths, site maps or workflows. They can also facilitate the creation and organization of your prototype as they allow you to focus on specific use cases and quickly see how pages relate to each other. So here is how it goes …

 

Step 1: Create a screenflow

Simply put, a screenflow is a selection of pages of your prototype, i.e. a subset of all available pages. You can manage and create screenflows from the Prototype View. To create a new screenflow, click on the “New” button.

Create a screenflow within the Prototype View

Creating a new screenflow from the Prototype View

 

Step 2: Edit the screenflow

In order to edit the screenflow, double-click on it. This will direct you to the Screenflow View where you can add, arrange and link pages. To add a page, simply drag it from the My Pages panel on the left and drop it into the editing panel in the middle. You can arrange pages by simply moving them with your mouse. To remove a page from the screenflow, use the “Hide page” button in the Context Menu.

Add all previously not used paged to your screenflow

Add all previously not used paged to your screenflow

Hint: If you want to use all the pages of your prototype, click on “Add all unused pages”. Each page can only be used once per screenflow. Pages you have already included are greyed out.

 

Step 3: Link pages and create maps

Screenflows are a convenient way to link the pages of your prototype. To do so, select a page and all linkable elements will be highlighted (Note: elements that may contain multiple link targets must be linked directly in the Page View). Now drag any highlighted element onto the desired target page to create a new link. Use the “Remove link target” button to break unwanted links. Yes, it’s that simple.

In order to create a map that shows connections between pages, you can choose to display relevant links in the screenflow. To do so, select a page and you will see all existing links as little grey arrows going to and from the page. Use the “Show arrow” and “Hide arrow” buttons to pick which links should be visible in the map.

Show linked pages within the Screenflow View

Screenflow showing a map of linked pages

Hint: Double-click any page in the screenflow to edit it.

That’s it! You have successfully created and edited a screenflow!

 

Do you need help creating screenflows? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

Happy Prototyping!

Top 5 Things Prototypers Can Learn From Football!

It’s this time of the year again! It’s the BIG BOWL GAME DAY! Tonight the New England Patriots will fight against Seattle Seahawks. While we at Pidoco are still placing our bets and discussing which company will place the most awesome ad, we also noticed some similarities between creating a prototype and playing the perfect match. Wait, you think football and prototyping don’t have anything in common? Think again because as a “prototyper” you can learn a lot from it. Here are our Top 5!

 

1. Tactical creativity
Whether it’s matching day or the day you start creating a prototype, you need to have an idea of what you are going to do and what the final result should look like. So you start scribbling down your ideas for a prototype. This will help you to get a clearer structure of your prototype and its content. Whether a greenhorn or an expert, you, your product manager or whoever is in charge have to find out if there are already competitors out there and what their products’ core features are like. From that, you can chart out your strengths and figure out how to improve potential weaknesses.

Create you creative tactic

Develop a creative tactic

The coaches Bill Belichick of the New England Patriots and Pete Carroll of the Seattle Seahawks can, of course, draw back on a very long NFL career; nevertheless they have to do their homework as well and do what every coach has to do: find the strengths and weaknesses of their teams, train players to improve their skills, build up strong offensive and defensive lines, encourage the players and of course, finally create the perfect tactic for the final matching day by monitoring every little step of the opponent.
Whether you start from scratch or are already an experienced superstar, all the creativity and tactics are important, but you need to be able to adapt to suddenly arising chances and maybe even rebounds. It’s an ongoing iterative process.

 

2. Collaborative sportsmanship
Best results can only be achieved when working together. That’s nothing new, but something really important. Of course, you need a coach, a quarterback or a designer, product manager etc. to strive forward, but creating a competitive product is like building a strong backfield – it only becomes a bastion if you really work together.

Collaborate with your team members

Collaborate with your team members

When prototyping you can try sharing your prototype with others to get feedback or work on solutions collaboratively in real-time. So, you see … whether you are part of the Patriots or the Seahawks or of an app development team, it’s all about exchanging ideas and talking about strategy, tactics and all the many details.

 

3. Impressive interactions
Rather than coming along with fancy details, especially early prototypes can fully rely on simplicity, simple colors, simple structures and even placeholders instead of detailed content. Nevertheless this doesn’t mean that you have to leave out important, unique core elements. In prototypes you might create a simple black and white wireframe, but since especially mobile applications are about interactions, touch gestures or screen transitions, exactly those interactions shouldn’t be ignored. So with only a few clicks, add interactions to an element (e.g. a swipe gesture), define corresponding system reactions (e.g. a pop-up opens) and voilà, you breathe new life into your simple prototype and impress without much effort.

Set the reaction to a action

Bet on interactivity

It’s the same with a football match. Honestly, we all know this and have seen quite a lot of those matches: They didn’t look that nice and mainly showed very simple maneuvers or “impressed” with rather unspectacular moves over quite a long time. But there are those moments, when the crazy snap frenzy suddenly starts and e.g. Tom Brady or Russell Wilson see their chance, get the ball from the center, immediately plan a spectacular move, outmaneuver the opponents defense or pitch the ball backwards to a running back or even crazier run the ball themselves and serve a nice quarterback sneak. A perfect way to describe an action-reaction-chain consisting of “only” a few moves!

 

4. Entertainment
Football matches are not only about tactics, collaborating and interacting. Of course they are just as much about entertainment! Certainly, the teams will present themselves in the best possible way and will work extremely hard to finally get the Vince Lombardi Trophy. However, the Super Sunday, especially for the viewers, is also about being entertained by the expensive commercials excelling themselves, and of course by the music acts appearing during pre-game or halftime ceremonies. It’s all about having the perfect night, fun and the perfect presentation of everyone’s skills.

Entertaining interactions

Entertaining interactions

The same applies for your prototype. Once you are done with all the preparations and ready to present it to the decision makers it’s often all about top or flop. So you need to impress. And you can easily do this by simulating your prototype on the device it should finally be used on. Let’s say, you created a prototype to be used on a tablet, well simply simulate it on one! Even better: if you built a location-based service app, you could embed a map into your prototype and set the interaction such that e. g. a pop-up window appears on the screen once you have reached a specific spot. So why not invite your audience for a stroll around the city and they will certainly be impressed by your new LBS app. Or add some music for instance to add to the entertainment.

 

5. Result-oriented discussions
To be honest, the more people are involved, the more opinions rise up. Sometimes this can be really awkward and it’s not always easy to deal with it, especially if you don’t or can’t agree on something. As a prototyper collaborating with various people you are certainly familiar with discussions about things like the size of a button, the position of an image or even the shade of green. But especially when simulating your prototype, everybody can get a realistic impression of the final result and you can steer discussions by focussing your prototype on the most critical aspects of the project. Sometimes less is more, and eventually the perfect position and size are found. You can take this even further: why not invite test users to work with your prototype and ask for their feedback and the experience they had? The aim should be clear: result-oriented discussions will definitely help you create a better product.

Taking home the Vince Lombardi Trophy is THE goal for the New England Patriots and Seattle Seahawks on Sunday. We can all guess how many discussions on tactics, analyses etc. this involves.

Discuss the results

Discuss the results (Photo by Johntex, 2005. under the terms of the GNU Free Documentation License Version1.2)

No matter which move is made, which player makes the deciding touchdown, everything will be strictly monitored and heavily commented on especially by the fans. We are all quite good at that, aren’t we? But even if we root for the same team, it doesn’t necessarily mean that we have the same opinion, and we can certainly support different tactics or know more effective moves.

Probably, the only way to avoid discussions is to be around people sharing your thoughts. But in this case, whether you are the coach, a team member, the prototyper, the product manager or the viewer etc. a vivid and constructive weighing of all options, what-ifs or (missed) chances and opportunities would disappear – and with them also the praise and celebration. Wouldn’t this be boring?

Finally, who will win tonight? Well, we are still undecided, but to make your choice a little easier, here are some facts on the finalists …

The finalist check: New England Patriots vs. Seattle Seahawks.

The finalist check: New England Patriots vs. Seattle Seahawks.

 

What do you think which team will win? Let us know on Twitter, Facebook or Google+.

How To … Adjust the Screen Size of your Prototypes

Today, most websites and apps need to work on various screen sizes, including those of smartphones and tablets. Responsive design is therefore one of the hot topics in UX. With Pidoco you can prototype for multiple devices – all in the same project. All you need to do is to set the desired screen size for your prototype pages. Here’s how to…

 

 1. Web prototypes

When creating a new web prototype, you will start out with a default page size of 960 x 1000 px. To adjust the page size open the page’s context menu (e.g. by clicking on the “Options” icon or by right-clicking on the page) and change the “Width” and/or “Height” values in the Properties tab. Pidoco will automatically remember these settings and apply them to new pages.

Page dimensions of prototypes are easily adjusted via the page's context menu

Page dimensions of prototypes are easily adjusted via the page’s context menu

Hint: Aside from using the breadcrumb navigation as shown above, you can also access a page’s context menu from several other places, including the Page View, Prototype View or the Screenflow View.

Adjust the page dimensions of web prototypes via the Page View and the breadcrumb navigation

Example of the page context menu as accessed from the Prototype View

 

 2. Mobile prototypes

Mobile prototypes come with a selection of common screen sizes, like smartphone (e.g. for iPhone or Android apps) or different tablet sizes, but of course you can set your own size. When adding a new page, you can select the desired screen size from the “New” dropdown in the toolbar. The default is 320 x 568 px (a smartphone screen in portrait mode). To adjust the page size simply open the page’s context menu and change the “Width” and/or “Height” values in the Properties tab.

Other available pre-defined screen sizes are:

  • 7″ tablets (600 x 800 px) in portrait and landscape formats
  • 10″ tablets (768 x 1228 px) in portrait and landscape formats

 

Adjust the page dimensions of mobile prototypes (via the Page View)

Mobile prototypes offer a range of pre-selected default page dimensions for various devices

 

That’s it! You have successfully resized your prototype pages!

Do you need help resizing your prototype pages? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

 

 

PS: If you are not sure which sizes are best to use, here is a quick overview on the commonly used dimensions of websites. Iteracy.com listed the page widths of widespread websites. For instance Facebook and LinkedIn have a fixed width of 980 px, whereas Bing comes along with 970 px and YouTube with 961 px. In terms of the height, 600 px marks an imaginary line from which on a visitor is likely to begin scrolling. According to w3schools.com and hobo-web.co.uk, optimizing your page for a resolution of 1024 x 768 px will guarantee a trouble-free scrolling for the majority of your visitors.

In terms of mobile devices, this is tricky as there are many different old and new devices out there. Here websitedimensions.com collected some useful information as you can see from the image, and mydevice.io presents a list of the physical and CSS values of various mobile devices, tablets and phablets.

However, when creating a new prototype, use page dimensions you expect most of the visitors to be using. In this case, it is recommended to do some research in advance.