How to …. create navigation structures (part 1): The navigation bar

An easy-to-use navigation is a must for every website. Choosing the “right” navigation design, however, depends on your site’s purpose and architecture as well as on the visual and textual content. To give you an overview, we are launching a small series of posts today that will explain common UI design patterns for site navigation and show you how to prototype them in Pidoco with only a few clicks. The series will include the following topics:

  • navigation bar (part 1)
  • tab navigation (part 2)
  • double tab navigation (part 3)
  • doormat navigation (part 4)
  • accordion (part 5)

In the first episode, let’s have a look at the so-called navigation bar. The navigation bar is a simple linear navigation structure that usually appears at the top or left edge (right edge in the case of semitic language sites) of a page and consists of multiple entries that provide quick access to content of a website that is organized in categories. This pattern can be used when users need to be able to find content or features needed to accomplish a task and when it is important to keep navigation display space compact. The navigation bar can be used as top-level navigation of a website or as sub-level navigation in combination with tabs with up to 10-12 categories.

Typical characteristics of the navigation bar are:

  • located at the top or left of a page and has a horizontal or vertical orientation,
  • collection of vertically or horizontally arranged links within one navigation element,
  • each category in the navigation bar is distinctive and clearly separated
  • a form of “Home” item usually represents the first category of the navigation bar,
  • remains unchanged during browsing and is visible on every page to which it links,
  • the current location of the user is not reflected as a state in the navigation bar.

Using a top navigation bar, there is no general recommended number of categories, but it of course depends on the average length of the words you use, the font size, as well as on the size of the page you design for. A considerable benefit of a top navigation bar is that it allows for full use of the width of the page for other content.

Using a left navigation bar, your site is split (at least) into two columns, whereas the left one is used for navigating through the top categories of the site. This kind of navigation bar is best used if page width does not matter as it will require considerable horizontal space.

Now that we have a good understanding of what the navigation bar is and when we should use it, let’s build one. Here is how it goes …

 

1. Setting up the project

To build the navigation bar we will use layers and interactions. To save time, it’s best to have a vague idea of how many category entries the navigation bar should have. As every category of a navigation bar will be on one page, we can create the exact amount of pages in advance and name them accordingly. We can add the respective content later. Here I have created six pages for my web project, whereas my first page is called “Home” and the rest of the pages are entitled “Page 1” – “Page 5”. Hint: You can use a screenflow to visually structure your pages.

Creating all main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)

Creating the main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)

 

2. Designing the navigation bar

To avoid duplicate work and maintain maximum consistency, we will put our navigation bar into a global layer that we can show on every page that should contain the navigation bar. This way, the navigation bar will remain unchanged, no matter where we display it. To create a layer, click on the “New layer” button in the My Layers section. (Hint: If the panel is hidden, open it using the arrow icon.) Now let’s build the navigation bar. The design is completely up to you and, for example, depends on your corporate design and the website architecture. You can find some inspiration on Welie.com or Yahoo! for instance. 

Here I have named my layer “navigation bar” and used an image stencil representing the “Home” page as well as five black rectangles for each category with labels “Page 1” etc.

Setting up the main categories and labels of the navigation bar

Setting up the main categories and labels of the navigation bar

Since we have already created all our pages, we can now quickly link each category to the respective page. To do so, place an action area on top of each category and use the context menu to set a target page. (Hint: This is a shortcut for the “click/show page” interaction.)

Adding target pages to the navigation bar categories

Adding target pages to the navigation bar categories

 

3. Adding page-specific content 

Finally, all that’s left is adding the individual content to each of our pages and to display the layer containing the navigation bar on each of the pages. To do so, we open on the respective page and toggle the checkbox to display the navigation bar layer. 

Displaying the navigation bar on every page

Displaying the navigation bar on every page

 

Finally, we can preview the result by clicking on the “Simulate” button in the toolbarHere is what my finished project looks like.

 

That’s it! You have successfully created a navigation bar!

Do you need help building a navigation bar? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to … design for multiple devices

With an ever increasing number of devices and operating systems on the market it has become virtually impossible to design device-specific content. Responsive design, especially the device agnosticism, has therefore become the de-facto standard of today’s sites. It’s all about the content of a page and that content needs to look great on any device.

But where should designer start? While the razor-sharp focus of mobile sites has lead many to advocate a mobile first approach, the reality for many businesses still is desktop first, influenced by a variety of factors, such as existing site structures or the majority of revenue still coming from desktop users. Focusing on the mobile experience, usually means that content will be much more compact and simplified, concentrating on the main functions and core features. The desktop version then is an expansion of the mobile experience. Starting from a desktop version, on the other hand, allows designers to think more conceptually and design for a full screen experience without having to consider so many limitations. Turning a more complex site into a mobile version later, however, can often be more challenging. The final decision should be based on an indepth understanding of the target audience and their needs based on the most common use cases.

Whatever your decision, Pidoco allows you to do both: With the latest release, Pidoco makes designing for multiple devices even easier, allowing you to design responsive experiences in one single project. Here is how it goes …

 

1. Create a new project

Let’s start by generating a new project. To do so, just click the “+ New project” button and the Project View will open up in a new tab.

Step 1: Creating a new project

Step 1: Creating a new project

 

2. Create the desktop page

In this simple example I want to take the desktop first approach. Of course, you can start with mobile as well. To design the desktop version of your site, select a desktop screen type for the first page from the device dialog, such as the web browser. This will create a new page with typical desktop dimensions (1366px by 660px).

Step 2: Selecting a device-specific screen to start your new project

Step 2: Selecting a device-specific screen to start your new project

 

3. Design the desktop page

Now we can start designing the desktop version by adding content to our desktop page from the stencil palette. The web browser displayed around the canvas helps keeping the context in mind. (Hint: You can hide the frame using the “Hide frame” option above the canvas.)

Step 3: Designing a page for the desktop version

Step 3: Designing a page for the desktop version

 

4. Create the mobile page

Once we have designed the desktop version, the next step is to design the mobile version. So let’s create the corresponding mobile page. To save time and make use of the work we have already done, simply duplicate the desktop page using the context menu. (Hint: Rename the page to avoid mixing the two versions up.)

Step 4: Duplicating the desktop page as basis for the mobile version and...

Step 4: Duplicating the desktop page as basis for the mobile version and…

You will now see an exact copy of the desktop page that we want to turn into our mobile version. To do so open the device dialog by clicking the device icon at the top of the canvas and change the screen type to smartphone. This will change the size of the canvas, but leave all elements in their original position. Now you can rearrange the content and resize or reduce it where necessary to fit the mobile screen size.

Step 4: ...changing the screen type to smartphone

Step 4: …changing the screen type to smartphone

 

5. Design the mobile page

The final step is to adjust the design of the page by rearranging and where necessary also removing elements. To do so, simply move the elements to their new positions and resize them. Of course, you should also consider consolidating navigation options, using for example the (in)famous hamburger menu or even weed out the options that your target audience will not be using on mobile devices. (Hint: You should also take a look at the interactions in your prototype to make sure they are optimal in each context of use, e.g. you might think about replacing click interactions with swipe gestures for the mobile version.)

Step 5: Adjusting the desktop design to create a mobile version

Step 5: Adjusting the desktop design to create a mobile version

Finally, in the Simulation View you can check out both the mobile and desktop versions. That’s it! You have successfully created a project for multiple devices!

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

 

Happy Prototyping!

Putting the “frame” in wireframe: New release features more realistic prototypes

Here it is, our latest release! And we have some awesome new features that we think you will love. Check out what’s new…

#1 More realistic appearance of prototypes

Pidoco allows you to easily create screens for specific devices, from smartphone to desktop. Starting with this release, prototype pages now can have an optional device frame in editing and simulation mode that give your designs a better context and will make your prototypes look more realistic. The frame matches the device type you pick for your screens and can be hidden if you don’t need it.

Device frames show context and give prototypes a more realistic look.

Device frames show context and give prototypes a more realistic look.

 

#2 Wider selection of screen types

Along with the new device frames, we have expanded the selection of screen types for you and made it even easier to pick the right one. Needless to say, you can change the screen type at any time and adjust screen size to allow for scrolling pages. The new device dialog will let you pick a screen type, e.g. iPhone, iPad, Android device or web app, when you start a new project. Each new screen will remember this setting until you change it. And of course, there’s also a custom screen size option.

Choosing a screen size is becoming even easier

Choosing the right screen size for your prototype is becoming even easier with the new device dialog.

 

#3 Easier page setup

We have expanded the page setup options next to the canvas, which we introduced in our previous release, in order to make your workflow even smoother. Now you can rename pages, change screen size or switch device types without even having to open the context menu. The page options are always easily accessible at the top of the canvas whenever you need them.

Changing page settings without opening the context menuChanging page settings without opening the context menu

Changing page settings without opening the context menu

 

#4 More simulation options

With this release we have added a frequent request – alignment options for the prototype preview. Now you can not only view your prototypes with or without a device frame, but also simulate scenarios that require left, center or right alignment of screen content. In addition, we have added a “fit to screen” option to allow for a complete view of large prototype pages.

Preview options include device frames, sketched mode, alignment and fit-to-screen.

Preview options include device frames, sketched mode, alignment and fit-to-screen.

 

We constantly strive to improve Pidoco. Stay tuned for more!

Finally, a massive thank you to all our loyal test users supporting our efforts in improving Pidoco. If you would like to join our monthly usability tests, just send us a quick email to support@pidoco.com and we will be happy to provide you with more information.

 

Happy prototyping!

 

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

Coming Soon: More Realistic Prototypes

The next release is just around the corner and we want to give you a sneak preview of some upcoming improvements we’re excited about. So here’s what you are soon going to see when you log into your Pidoco account.

 

Easier page setup

We are introducing an even easier way to create prototypes for a large number of devices, including iPhone, iPad, Android devices and web applications using our new device dialog. Instead of selecting the device or page type with every new page, you will select a default device type for your project when you create it. Of course, you can change the page type at any time and you will still be able to have pages for different devices in one prototype.

Choosing a screen size is becoming even easier

Choosing a screen size is becoming even easier

 

More realistic appearance of prototypes

Along with the new page setup, prototype pages will receive an optional frame in editing and simulation mode that will make your prototypes look more realistic than ever. The frame will match the device type you pick for your pages and can be hidden if you don’t need it.

Device frames make prototypes more realistic

Device frames make prototypes more realistic

Of course, there will also be some additional improvements with the next release. So stay tuned…

How to … create a slide hamburger menu

Especially in mobile applications hamburger menus are used to display additional content. Even though expert opinions might differ, the icon consisting of three stacked lines on the very left or right corner of a page can be found in many apps and is still industry standard. That is why I want to show you today how you can create such a hamburger menu, combine it with layers, and make it interactively slide in and out. And here is how it goes …

 

1 Select the hamburger icon

Let’s start creating a page where the hamburger icon can go to. To do so and to save you time, just use the stencil search atop the palette, type in “hamburger” and drag and drop it to the desired position.

Adding the icon menu using drag and drop

Adding the icon menu using drag and drop

 

Since the menu is supposed to be slideable, we will work with layers. That is why we build the frame on that page and only add the content that is the same on every page of this project. (Here: In my project “Slide hamburger menu” I called the first and only page “Start Page”.)

 

2 Create layer

Now we build the menu. To do so, open the layer panel and click on the “+ new layer” button. To facilitate your work and to have a perfect overview, it’s better to rename the layer.

Adding a layer via the My layers panel

Adding a layer via the My layers panel

 

The next step is to fill that layer with content. To do so, make sure that the layer is toggled and highlighted in green in the panel. Editing now works like always, so just add your elements to the canvas. As it is a slide menu, you can e.g. use a rectangle with a smaller width and height than the actual project page has and add some text representing the menu entries and the content to be linked.

Creating a slide menu on a layer

Creating a slide menu on a layer

Since we need a start page to be displayed as well, just create another layer and add the content to be displayed there. (Here: I called my layer “Start page”.)

To add content to the other layers, repeat that process.

 

3 Arrange layer order

As the menu should always be in front of every other layer, make sure that it is listed as the first layer in the layer panel. To arrange the order, simply use drag and drop and move the menu layer to the right position.

Arranging the order of the layers in the interaction panel using drag and drop

Arranging the order of the layers in the interaction panel using drag and drop

Note: If a layer is toggled, it will be displayed in the Simulation View. If you don’t want to show it, untoggle it.

 

4 Add interactions

The last step is to add interactions to the project to make the menu slide in and out and to display the corresponding layer.

4.1 Add interactions to the menu icon

To make the the menu slide in, let’s go back to your first page. Open the context menu of the hamburger icon and go to the interactions tab. The interaction pairing needed here is a click action and a change of the layer visibility. Select the corresponding layer from the dropdown and use the visibility “toggle” such that the menu appears and disappears upon a click on the icon.

Adding an interaction to the hamburger icon to make it collapse

Adding an interaction to the hamburger icon to make it collapse

 

4.2 Add interactions to the menu entries

Now we need to make the menu list entries interactive. To do so, select your menu layer in the layers panel at the right, open the context menu of the first menu entry and go to the interaction tab again. (Here: I used an icon and text and grouped it by selecting it and clicking on “Group elements” in the context menu.) Choose the reaction “change layer visibility”, select the layer to be displayed from the dropdown and set the visibility to “show”. Since only one layer should be displayed if you click on a list entry of the hamburger menu, we need to add more system reactions, because all the other layers should be hidden. So, we click on “Add reaction” and add another reaction for the other list entries. This time, we set their visibility to “hide”.

Adding interactions to the menu entries]

Adding interactions to the menu entries

 

You can also add interactions to the content of the layers. To do so, just repeat the previous steps and make sure that layers don’t overlap in the Simulation View.

 

That’s it! You have successfully created your first slide hamburger menu!

 

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

Happy Prototyping!

 

 

How to … create custom font styles with custom stencils

If font style matters for your prototype, we have some great news. Pidoco’s custom stencils are a great way to create unique templates that you can reuse throughout a project. Combined with the rich text stencil you can easily create your custom font templates, for example to style headlines, subheadings, paragraphs or navigation – a unique font template library. This may not only help you save a lot of time but also ensure a consistent design language throughout your project. And here is how it goes …

 

1. Create your custom stencil

First, you will need to define your custom font styles. To do so, you can create several custom stencils – one for each font style. The custom stencils will be added to your stencil palette and instead of the standard text stencil, you can use them to create text elements with the desired style. In one of our previous posts, we explained how to create a custom stencil. In brief: the easiest way to start building your custom stencil is a click on the “CREATE STENCIL” button in the stencil palette. This will open a new canvas where you can design your stencil.

Creating a new custom stencil in Pidoco

 

2. Add a text element

Depending on the type of content you want to style, drag the corresponding text element into your custom stencil, e.g. HEADLINE 1 to define a title, HEADLINE 2 for a subheading, TEXT BLOCK for a paragraph or even a LIST stencil. It is worthwhile changing the content to something that will immediately tell you what type of content is represented by a certain style. For instance, you might call a title something like “This Is A Title”.

Adding a text element to the custom stencil by dragging and dropping it to your canvas.

 

3. Style your text

Once you have added the right text element to your custom stencil, start styling it. You can do this by double clicking the text element and adjusting the font size, font weight or alignment. Pidoco even offers a number of font and highlight colors.

In this example I created a headline and used bold and capital letters, a font size of 42px and grey text.

Editing a text element using the inline editing function.

Once you are done styling your font template, just click outside the text.

 

4. Use and reuse your custom styled fonts

When you are finished editing your custom stencil, click on “Done”. Of course you can create multiple custom stencils if you have several font styles you need for your prototype. All your custom stencils will be added to the end of the stencil palette. (Hint: Make sure to give each custom stencil a unique name for easy recognition!)

Using custom stencils to work with pre-defined font styles

Instead of using the standard text stencil, you can add your font templates. Once added to the canvas, you should break the link of that instance to the template using the context menu and clicking on “Detach from custom stencil”. Now you can edit the content of the custom stencil.

Detach the custom stencil to start adding your individual content

 

5. Examples

Styling your text within a custom stencil always works the same. So just give your creativity free rein! To get some inspiration, here is a small gallery with a few examples.

 

That’s it! You have successfully created your very own custom font styles!

 

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!

Size matters! New release features multi-resize and improved icon scaling

The Berlin summer is treating us very well this year, but that’s no reason for us to take it easy as we’ve been working on a host of new features for improving your prototyping experience. With the latest release we are introducing multi-element resizing and an improved way to scale icons freely. In addition, we have redesigned the breadcrumb navigation and have made it easier to access page options. So here’s what’s new…

 

#1 Time saver multi-element resizing
Adjusting the size of multiple elements individually can be really tiresome. The new multi-element resizing option will save you lots of time: Just select all the elements that need to be resized and resize them all at once. This works with any scalable element.

Selecting multiple, but similar elements for further editing

Selecting and resizing multiple elements at once

 

#2 Better scaling of icons
With the latest release, all icons have become freely scalable, allowing you more flexibility in how you use them: Make them tiny, fit them exactly to a button, or blow them up to giant size – it’s your choice. But worry not, the convenient default sizes (16px, 24px, 36px, 48px, 64px) are still available to make it easier to match icon sizes.

Scaling icons to flexibly adapt their size

Free icon scaling combined with convenient default sizes

 

#3 Easier navigation
The breadcrumb navigation has been redesigned and now takes up less screen real estate giving you even more space for your creative work. We have also made it easier to access other projects and pages via the breadcrumb navigation: Hovering your mouse over the respective breadcrumb will give you a dropdown with all available items.

Using the breadcrumbs facilitates the navigation between the different prototype parts

Using the breadcrumbs facilitates the navigation between the different prototype parts

To keep things clean, common browser options like browser back and forward or opening items in a new tab are now only accessible in the usual manner via the respective browser controls or using right click or shortcuts (e.g. Ctrl + click).

 

#4 Better access to page setup
The context menu that was previously accessible via the breadcrumbs has moved directly to the page canvas with the latest release. This makes it much easier to access the page options. Simply use the “Change” link to adjust page size or background images or rename the page.

Accessing the page options via the editing panel

Easy access to page options directly at the canvas

 

Defining the most important values in the page options

Changing page options directly at the canvas

Note: Double-clicking on a breadcrumb item to rename it still works as before.

 

#5 Prototypes are now projects
A small change you will hardly notice is the renaming of prototypes to projects. To avoid confusion we are moving to the more neutral projects.

 

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

 

By the way, did you know that you can submit feature requests and other ideas via 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?

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?