Posts tagged with "Prototyping"

How to Survive as a Project Manager

Being a project manager can be tough. You’re the person who needs to know about all aspects of the product, from its conception and development to sales and customer support. Last week I went to a talk given by Karsten Rieke – former product manager at Xing. From his presentation and the discussion afterwards, I want to share some tips with you for being a successful product manager.

Respect your team
Trust and respect goes a long way. Appreciate that you have a talented team who are experts in their fields and be prepared to listen to what they have to say.

Know your stuff
If you want respect from your colleagues, you will also have to learn how to speak their language- this means knowing your numbers or some key programming concepts. This will help communication and get people to take your suggestions seriously.

Know how others like to work
The slides from the presentation categorize how people in different departments behave and what their work styles are. Not everyone will fit into these stereotypes, but it is worth thinking about how your colleagues work best and how you can fit around that.

Get your team to communicate
At Pidoco we have scrum meetings every day across all of our departments, so that the marketing team knows what the programmers are working on. We also encourage everyone to ask questions, which creates an open atmosphere. It also helps us to see how our individual tasks make up the bigger picture in moving our product forward.

Go outside for inspiration
As product manager, you should be pushing for your product to move forward. Meet with current customers to see how they use your product and how they would be affected by the improvements you have planned. Other people in your industry can also inspire you to try out new things.

Thanks to IxDA Berlin for organizing this event and click on the link below to access the slides.

You can find out more about Karsten Rieke on Xing.

Check out our new design!

Our new editor design finally went live this weekend! We hope you like our fresh new look and take advantage of its new features. We’ve updated the ‘My Prototypes’ section, where you invite others to view, review and collaborate on your prototypes. In the prototype creator itself, we have included new stencils (such as the much-desired “accordion” stencil – thanks to your feedback!) and updated our export function, so now you can specify the components to be included (or excluded) from your Word and PDF exports.

New UI design of our prototype creator

Our new UI design

To find out more updates about Pidoco, find us on facebook or follow us on twitter!
Until next time, Happy Prototyping!

Working with Folders in Pidoco

Have you checked out our new folder system yet? At Pidoco, you can now use folders to organize your pages, stencils and layers. This is a great way to help you keep track of your work, especially if you’re working on a big wireframe project. You can organize your work thematically, or according to the navigation of your site. You can also create subfolders, which is great if you have lots of content in your project. Some people create different pages in Pidoco to show the different states of a wireframe, such as when a popup is used. With Pidoco’s new folder system, you can then group your pages in the same folder or subfolder to help you keep on top of your work. The new breadcrumb navigation system shows you which folder you are currently in just like when you use your computer’s file system. This makes it easy to see exactly where you are in your prototype and move to other folders and pages.

Selecting prototype folder via the new breadcrumb navigation

Selecting prototype folder via the new breadcrumb navigation

Using folders with Pidoco is easy. To create a new folder, simply click on the plus sign next to the “Folders” label in the Prototype View. This will take you straight into your new folder. From here you can add new pages, subfolders and other elements. You can name folders and add existing pages to your folder by clicking on the context menu of your page and selecting a folder in the parent folder category. You can select multiple pages by holding the ctrl key and clicking the pages you want to organize in the folders.

In the example below, you can see that I have created a folder called “Home” in my Social Network project. I can now organize my page into the folder “Home” or into one of its subfolders (shown by the ‘/’ symbol).

Organizing pages into folders

Organizing pages into folders using the context menu of a page

We hope our new folder system will save you time and make your prototyping even quicker than before by helping you organize your projects. Watch this space for more information about new features. Happy prototyping!

Breadcrumb Navigation

At Pidoco, we’ve updated our navigation system. We’ve made it even easier for you to move between the pages and layers of your prototype, helping you get to the parts of your project you need quickly and easily. We have now included forward and back buttons to help you go back to the previous view of your prototype, just like in your browser bar.

Breadcrumb navigation in prototype creator

Moving to a new page in your prototype

We’ve introduced a breadcrumb system, which enables you to see where you are in your prototype at any time. Boxes will appear at the top of your screen showing you which prototype, folder and page you are working from. These are clickable, which means if you are working from a page, you can go back to these sections. When you hover over the arrows in your breadcrumbs, a menu will also appear. You can then use this to switch to a different page or layer in your prototype, without having to go back to the prototype view. This is a fantastic feature, which should make finding your pages even easier.

Prototype global layers in breadcrumb navigation

The breadcrumb navigation in our prototype creator lets you see what global layer you're working on

Thanks to another great feature we have added, you can work on different pages of your prototype in different browser tabs. What’s more, if you do this, the tabs in your browser will be clearly labeled to show what pages or layers you are working on. In your browser, you will then be able to change the order of your tabs to suit you and use shortcuts to flick through these tabs. To open a page in a new browser tab, simply click on the page whilst holding down the ctrl button. You can also click on the special icon in the breadcrumb menu. With Pidoco, you can save the URLs of these tabs for the next time you work on your prototype. What’s more if you send the URL to someone collaborating with you on a prototype, they will also be able to open this page automatically.

These are just some of the new features we’ve added to make working on your prototypes even easier. We hope you enjoy working with our new navigation system. To see how the new Pidoco navigation system works, you can also check out our YouTube video! Pidoco explained: the new breadcrumb navigation pidoco

Adding Folders and Custom Stencils

As already mentioned in our previous blog post about the new navigation that we implemented, there were a few new features that had to be finished before we can continue deploying the new version of pidoco. That is also the reason why we weren’t able to deploy this yet, since the features first had to be tested and stabilized to include them into this new preview. Up to now we have finished four out of the five open issues that we mentioned in the other blog post:

Navigation to other pages

We added a little menu to each breadcrumb that opens when you hover over the little grey arrow as shown in the screenshot. It lists all the elements on the same level and you can pick one to switch to that view. We also added a button that opens the desired view in a new browser tab such that you then can easily switch between several views. This way, navigating through your prototype should be as fast as before.

Folders

You can now add folders to your prototype where you can put anything inside. This allows for better organization of all the pages, layers, etc that your prototype contains. In order to move an item to a different folder, use the context menu. A drag and drop moving into a folder has not been implemented yet.

Custom stencils

We already have layers to reuse groups of elements across several pages, but they are always at the same position. From now on you can convert a group of elements into a so called custom stencil that then appears in the palette and can be added anywhere in your prototype. You can add several instances of it to the same page, you can choose different positions, and any change will automatically be applied to all the instances.

New visual design

Since it already took longer to implement things up to now, we skipped this part and will change the design in one of the next versions.

Stability

A whole lot of bugs have been fixed already, but there are still some left to be fixed. As long as we are not satisfied with the quality we won’t deploy the new version. However, it shouldn’t take very long anymore until we reach that point.

Let us know what you think

We would love hearing from you what you think about this new version! If you have any suggestion or feel that there is something important still missing, please don’t hesitate to get in touch with us.

Many thanks for your support!

Designing Pop-Ups Easily in Pidoco

KISS – “Keep it short and simple.” This is the mantra behind Pidoco, and it is the reason why we have avoided cluttering the tool with complexities like page states, panels and so on for simple things like creating pop-ups. Meanwhile, there is no reason why you should not use pop-ups in your prototypes. In fact, there are strikingly easy ways of creating pop-ups in Pidoco without complex, intransparent functions. And here is how you do it.

The trick is using two pages and two layers. In one of my earlier blog posts I talked about how to work with global layers in Pidoco. This is one situation where they are particularly handy. In order to create a pop-up in your prototype simply follow these steps:

1. Create the page on which you want the pop-up to appear.

Creating a new prototype page in Pidoco to design a wireframe

 

2. Create a layer for the page content and use it to design the page. You will need to put all stencils that will be covered by the pop-up onto this layer.

Placing elements on a layer of a Pidoco prototype.

Place the page content on an extra layer.

 

3. Create a second layer for the pop-up. Design the pop-up on that layer, e.g. using a rectangle in which you place the content of the pop-up. Once you are done with the pop-up, make sure to de-select the layer in My Global Layers.*

Creating a second layer in the UI prototype for the pop-up.

Create a second layer in your prototype to design the pop-up.

 

4. Once you are done with this, go to the Prototype View and duplicate the page.

Duplicating the prototype page in order to create a second prototype page with the pop-up.

Duplicate the page to create a page that will contain the pop-up.

 

5. Now open the copy and activate the pop-up layer. Then link up the “pop-up page” with the original page and vice versa. Voilà, done!

Linking the two wireframes to be able to navigate between the prototype pages and simulate the pop-up.

Link the two prototype pages together to simulate the pop-up.

 

This simple recipe will allow you to create functioning pop-ups without resorting to complexities such as panels, states and the like. Instead of using a panel, you simply will have two pages. Easy, isn’t it?

You can also use the pop-up method to create lightboxes. Simply start the pop-up layer with a rectangle whose fill color you set to semi-transparent. This is easily done through the context menu. Make sure the rectangle covers the entire page. Now you can lock the rectangle in place and continue designing the lightbox content.

So, how about you? Have you tried to figure out how certain things are easily done in Pidoco? Let us know below!

 

* Remember: You can order global layers in the My Global Layers panel by dragging them to the desired spot. The layers are displayed in the order in which you place them, i.e. the top layer will show up on top of all the others. For the pop-up layer to come out on top make sure that the pop-up layer is placed above the layer with the page content in the My Global Layers list.