How To … Create a Custom Stencil

Custom stencils are a very effective way to build prototypes! With only a few clicks you can quickly design your individual collection of custom-built elements. This helps to save time as you can reuse them again and again. Plus: Custom stencils ensure a consistent design throughout the entire prototype by employing them as templates. And here is how it goes …

 

1. Create a custom stencil

Custom stencils are templates that can either be built from scratch using the stencil palette or from an existing group of elements in your prototype. They can serve as convenient building blocks for your prototype as you only have to design a custom stencil once and can quickly change it across the entire prototype by altering any instance of it. To create a new custom stencil from scratch, simply click on the “CREATE STENCIL” button at the top of the stencil palette.

Creating a custom stencil in Pidoco

This will open a new canvas where you can design your stencil. You can use any element in the stencil palette (including regular stencils, but also uploaded images, icons or even other custom stencils) and also add interactions. If you haven’t already done so, give your custom stencil a name by double clicking on it in the breadcrumb navigation.

Renaming a custom stencil with a double-click in the breadcrumb navigation

Renaming a custom stencil with a double-click in the breadcrumb navigation

Once you’re finished, click on “Done” in the toolbar to close the custom stencil canvas and get back to the page. The new custom stencil will be added to the end of the stencil palette and can easily be identified by the preview image with the dark edge.

If you want to turn an existing group of elements into a custom stencil, select them with your mouse and open the context menu. In the context menu, click on the “Convert elements to custom stencil” icon. This will turn the group of elements into a custom stencil and open the custom stencil canvas, where you can edit it.

Converting a group of elements to a custom stencil

Converting a group of elements to a custom stencil

Hint: You can also nest custom stencils within other custom stencils. Simply use an existing custom stencil to build a new one.

 

2. Re-use a custom stencil

All your custom stencils will be added to the end of the stencil palette. For better visual recognition they show up as a thumb of the stencil with a dark background. To use a custom stencil in your prototype, simply drag and drop it to the canvas like a regular stencil. Since custom stencils behave like normal stencils, you can use them the same way.

Re-using a custom stencil by dragging and dropping it to your canvas

Re-using a custom stencil by dragging and dropping it to your canvas

Hint: You can find your custom stencils using the stencil search. Just type the name of the custom stencil or enter “custom stencil” to see all.

 

3. Edit a custom stencil

You can edit a custom stencil at any time. To do so, double-click on the custom stencil, either directly on the page or in the stencil palette. This will open the custom stencil canvas where you can edit the stencil.

Re-arranging an existing custom stencil

Re-arranging an existing custom stencil

Note: Remember that custom stencils are and behave like templates. This means that all instances of the custom stencil are connected. Editing a custom stencil has a global effect across the entire prototype, which means that all the changes made in one instance of it will propagate immediately to all other occurrences wherever you have used the custom stencil – unless you cut the link (see below).

Editing a custom stencil will change all instances of it across the prototype

Editing a custom stencil will change all instances of it across the prototype

4. Individualize a custom stencil

Often, you will want to use a custom stencil as a template to save time, but adapt it to alter the content. Or you may simply wish to avoid global changes in case the template is edited. To do so, add the custom stencil to the canvas and open its context menu. A click on the “Detach from custom stencil” icon will cut the link to the template and let you modify the stencil without any effect on the custom stencil or any other instance thereof.

Detaching an instance of a Custom Stencil from the template

Detaching an instance of a Custom Stencil from the template

Note: Before you can start editing the stencil, you will have to ungroup the elements by clicking on “Ungroup elements” in the context menu as they have been grouped to make it easier to identify and position the stencil. Now you can easily play with the components of the custom stencil and e.g. adapt headlines or add image captions while maintaining consistency.

Ungrouping an element combination before editing the content

Ungrouping an element combination before editing the content

 

That’s it! You have successfully created and edited your first custom stencil!

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

Happy Prototyping!

How To … Quickly Find And Add Elements

A few days ago, we released our shiny new and re-designed stencil palette bringing you an even better prototyping experience. One of the exciting new features is the stencil search atop the palette which combines with a “Quick Add” function to help you save precious time while prototyping. Now you can find elements even faster and add them to your prototype straight away. And here is how it goes …

 

Step 1: Search an element

The stencil search is available in the Page View where pages are edited. To find the desired element, simply start typing the first letters. This will activate the stencil search and automatically filter the palette to only show stencils that match your search. This works at any time, provided you aren’t editing or have selected any element on the page. You can search stencils, icons, uploaded images and even custom stencils – everything is searchable!

Find your element with the new search bar

Finding an element using the new stencil search

 

Step 2: Add stencil

Once you have spotted your element in the search results, either drag and drop it onto the canvas with your mouse or use the arrow keys to select the stencil from the search results and hit “enter” to add it to the page. Hit “enter” again to keep adding more of the same stencil.

Use your cursors to quickly add an element

Quick Add: Using the arrow keys and “enter” to quickly add an element to the canvas

Hint: Stencils with multiple variants (e.g. icons, arrows, charts or flowchart elements) appear under one generic symbol in the palette, but will be listed with all variants in the search results. If you drop the generic element onto your canvas, a pop up will allow you to choose from the available options.

Choose an icon

Choosing an icon from the icon selector

 

That’s it! You have successfully added elements using the re-designed stencil palette and the new stencil search!

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

Happy Prototyping!

New element search makes prototyping easier

At Pidoco we work hard on delivering a great prototyping experience and are constantly improving our tool. This time we have re-worked the stencil palette, a core part of how prototypes are created, to save you precious time while building your prototypes and make prototyping even more convenient and fun. So what is changing?

 

1. New design

Let’s start with the obvious: we improved the design of the stencil palette. As of today, the palette comes along with a neat new design that is not only pretty, but makes it easier to find the stencils you are looking for. The former stencil categories have been removed and similar stencils have been grouped to reduce the total number of elements, so you won’t need to scroll as much. In addition, we have moved the options to upload images and create custom elements (called “Custom Stencils”) to the very beginning of the palette so you can easily access them whenever needed.

The new flat design

Stencil palette with new design

Where similar stencils have been grouped in the palette, you will find a little number after the stencil name that indicates how many options are hiding behind the stencil symbol. The arrow symbol, for example, represents 16 different types of arrows and lines.

Choose your arrow type

Choosing an arrow type from the arrow selection dialog

 

2. Stencil search and Quick Add capability

With the release of the newly designed stencil palette we are also adding a new feature that you will love: a stencil search. Located atop the stencil palette the search bar will considerably facilitate your work. At any time while editing a page simply type the beginning letters of the stencil you need. This will activate the search function and auto-filter the stencil palette. Then use your mouse to add the desired stencil or simply use the arrow keys to select the element and hit “enter” to add it to the canvas. Hit “enter” again to keep adding more of the same stencil. You can search anything from stencils or icons to custom stencils and uploaded images.

Search bar in the stencil palette

Using the new search bar to find a text stencil

 

3. Creating Custom Stencils

One of the great time savers in Pidoco are Custom Stencils: These elements can be custom built from existing stencils and serve as templates or masters that can be reused and easily updated. Creating a custom stencil will become easier with this release as we have moved the feature right into your sight at the top of the stencil palette. Simply click the “Create Stencil” button and start editing your custom stencil. While we were at it, we also gave the Custom Stencil canvas a new look to make it easier to distinguish it from the page canvas.

Create a custom stencil

Editing a custom stencil

By the way, all custom stencils appear at the end of the stencil palette and are visually marked.

 

4. Uploading images

Just like Custom Stencils, uploading images is a great way to save time and expand your stencil pool, e.g. by adding your own icon libraries. You can even use uploaded screenshots or design comps to quickly piece together an interactive prototype using our Action Area to create transparent hotspots for links or gestures. With this release, you will be able to access the image upload much more easily while editing a page as we have moved it to the top of the stencil palette. All uploaded images will be listed at the end of the stencil palette, just like your custom stencils.

Upload an image

Uploading an image

 

5. New icon selector

Pidoco features over 300 icons you can use in your prototypes. You wil find almost anything you need, from social media icons to common toolbar symbols. To help you pick the right icon even faster, we have added a new icon selection dialog that gives you a quick overview of all available icons. Now, instead of having to find the right icon in the stencil palette, you can simply add a generic icon to the canvas and then pick from 300+ icons via the dialog. Picked the wrong one? No problem – double-clicking the icon will reopen the dialog and let you pick a different icon.

Choose an icon

Choose an icon

 

6. Easy page set-up

Last but not least, we are making it easier to find and change page settings. Although strictly speaking it is not part of the stencil palette, this new feature will save you lots of clicks by giving you direct access to page size information and the context menu where you can change page size and other page properties via a new information element atop the page canvas.

 

Easily change the page dimensions

Easy access to page properties in the context menu

How do you like our recent makeover? 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 feature requests and other 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.

 

Happy Prototyping!

 

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

Top 10 UX Pitfalls

You can’t wait to get your new product off the ground and out into the wide and open internet space! But beware: There are a number of UX mistakes out there waiting to rain on your parade. Remember that UX is more than just a neat design or catchy layout. Here are our top 10 UX pitfalls and how to avoid them.

 

#1 Poor content

business-762538_1280

Congrats, your site finally launched showing off an awesome new design! Unfortunately, while spending plenty of time planning out the exact structure and layout of your site, you forgot about the content. Remember that great UX is not just structure and design – content is still king and the reason why people come to your site. Make sure to sit down with your marketing and content team early on to develop a strategy for creating and maintaining effective and useful content for your target audience. Avoid undermining your UX by second-grade content or outdated content and keep in mind that content requires updates on a regular basis or you will risk boring and losing users. When redesigning a site, critically analyze its content, i.e. text elements, pictures, videos, to decide which elements have become obsolete or should be replaced with new information.

 

#2 Too much content

196H_2Just like content can be too old, there can be too much of it. While you may have a very specific vision for your site circling around in your head, keep in mind that internet users have incredibly short attention spans and don’t usually read all of your texts. The vast majority of visitors will leave your page straight away if they can’t find what they are looking for quickly. So, don’t swamp them with too many facts and figures and risk losing them to your competition. Critically evaluate which content really is relevant to your audience and prioritize important content. Consider visually highlighting the most important facts or main features to aid the user in digesting the content of your site. Avoid lengthy copy, for example by trying to cut word count in half. And of course, make sure that the information provieded are not only up to date, but precise, effective and useful. You know best what your target group is interested in, which language they speak and how you can trigger them best. So make sure that your site’s UX isn’t undermined by an information madness and turn your visitors in loyal customers!

 

#3 Ignoring platform specifics

nature-laptop-outside-macbook_2

You are looking to make your product available on different mobile platforms to make it truly “cross-platform”? Great idea: With an average of 3.3 hours spent on their smartphone each day, 85% of the people consider mobile devices an essential part of their everyday life. But remember that the big mobile platforms have not only similarities, but significant differences as well. So don’t sacrifice great UX by cutting corners and releasing the exact same version for all platforms. Make sure to understand and account for the specifics of each platform when going mobile with your product. There’s a fine line between being consistent across platforms and frustrating users with a UX that doesn’t fit in with what they are used to.

 

#4 Ignoring UI guidelines

apple-iphone-desk-officeEach of the big mobile platforms provides designers with very detailed guidelines, but since you are an absolute ace and about to revolutionize the market, you listen to your intuition to design what feels right. Don’t! Depending on the platform, users expect certain layouts, behaviors or navigation options in their apps. Avoid frustrating them or, even worse, losing them by ignoring UI guidelines. Stick with the recommendations and deviate only where it is absolutely necessary, for example because it serves a very specific purpose. Favor industry standards and best practices over individuality: Just remember how often you facepalmed due to hidden menus or buttons, unclear icons, blurry gestures or navigation paths and confusing visual effects. Reading and following the applicable human-interface guidelines – at least for the commonly used systems iOS and Android – should help you create a pleasing experience for your users.

 

#5 No prototyping

You have done your user research, have sketched down some ideas and perhaps even created some wireframes or a design comp and think you’re all set? But you’ve forgotten one vital step: You didn’t build a prototype! While static wireframes or mockups are a great way to flesh out some of the basics in terms of structure and design, they do not help you figure out if there are issues with the navigation flow of your product – and you know the devil’s in the details! To make sure that you have covered all major issues to tackle during the design process, you should build a real prototype as early as possible. This will allow you to uncover weak points of your product, like a poor navigation, missing native gestures or other problems and will show you any areas of your product that need animations, changes or other special attention that will require significant time during design and may have been overlooked during project scoping. Prototyping will also give you more confidence in judging and planning for sufficient design and implementation time. So, to avoid unpleasant surprises, better start prototyping now instead of jeopardizing your product’s well-being.

 

#6 Too much prototyping

Prototyping is a critical part of the design process, but with ever more powerful prototyping and wireframing tools at our hands, it’s easy to get tricked into creating all too elaborate prototypes and get lost in unnecessary details. Don’t waste time on pixel-perfect prototypes that will be thrown away anyway in the next iteration. Instead, focus on the important aspects of your product. Design the things that are controversial, not what is common sense. Instead of trying to preempt the visual design, spend time on developing alternative solutions to UX problems that you can test with users and then pick the best-performing option. Most of the time, you can gather great feedback with simple interactive prototypes that model the flow of your product. Remember that there’s a trade-off between time spent and the benefit of being able to get feedback early on in the design process using prototypes.

 

#7 No testing

What you gain on the swings, you lose on the roundabouts. You may save time by skipping the testing, but you may pay for it later with a suboptimal UX. Sure, you may not have endless time to test every teeny-weeny bit of your product, but without any feedback from real users you will never be able to understand fully how they will be using it, what the shortfalls and potential UX problems are or what your customers love about it. This means you will not be able to deliver the best UX or evolve your product to match exactly the needs of your users. Avoid this by planning for sufficient testing time during the design stages of your project and build in a functioning feedback loop. Also, make sure to test with real-world users in real-life settings, so you can detect problems related to environmental parameters such as operating system, browser, type of device or even the situation in which users are engaging with your product – the context of use. Often, just five people are enough to detect up to 85% of the problems. If in a crunch, you can also set up an in-team test or ask a few power users of your product for an in-depth interview. Testing really pays: The more issues you can solve before the release, the less time you will be wasting on fixing them later or winning back frustrated users.

 

#8 Ignoring feedback

We all don’t like getting our noses rubbed in the mess we’ve created. Dealing with criticism on one’s work can be difficult, but the solution is not to ignore the feedback because these are just some users’ opinions. Doing so means risking that your product’s UX will not be what it could. Instead, remember that every piece of feedback is like a little present – users are taking time to tell you how they think you could improve your product. Once, test results are in, better start the treatment immediately. Prioritize, which issues are critical and need immediate fixing. Sort out feedback that is related to strategic design decisions. But listen carefully: Are you possibly trying to solve the wrong problem? Or may you have picked the wrong target audience? Early feedback can give you insights beyond product design that may change your entire product strategy, since you may uncover new use cases or find that the ones you were adressing are irrelevant. Don’t waste this chance!

 

#9 Trying to be unique

one-way-street-582635_1280

Yes, your product is your baby! But you don’t need to be unique in your design. Trying to be too original can be a UX liability, especially when it comes at the expense of ignoring known user interface patterns just for the benefit of creating a unique UI. Doing so will likely pose a burden to your users as they will need to learn your UI in order to understand and cope with its unique behavior. Most of the time, using native UI elements and sticking to well-established patterns is the best way to go. Avoid burdening your users with novelty and instead focus on simple designs that make your branding stand out. This will also help you prevent users from leaving because they feel as if you didn’t care about them, which 68% of them tend to do.

 

#10 Lack of communication

goats-173940_1280More often than not you will be working in a team consisting of such diverse roles as product managers, designers, coders, marketing experts or business analysts. Each one brings a different point of view to the table, which can be difficult if each person believes they know best. This can quickly result in a war of opinions and put your project’s success at risk. Avoid becoming one of the 97% of websites that fail at UX by making time for communication at each stage of the design process. Try to facilitate discussions and make sure that goals are clearly communicated and accepted and that solutions derive from well-understood problems. Ideally, you have already established some UX principles or even developed a UX guide that can help steer discussions the right way or avoid lengthy arguments. It also helps to have clear team structures with clearly define roles and decision-making processes and regular meetings, perhaps even a communication guide. Also, think about involving different roles in user testing so they can whitness how users respond to certain design decisions and make room for informal communication, such as lunch-and-learns or hackathons to improve communication between team members. Learn from each other’s experience and focus on creating an amazing product!

 

Images used are bound to Creative Commons Deed CC0.

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!