- Pidoco's Screenflow View in 2007: Volker described this as his "masterpiece of graphical design"
- Pidoco's Screenflow View in 2008 with 8 stencil elements and a properties table on the right.
- Pidoco's UI in August 2008 during beta phase
- Pidoco's refined UI in late 2008
- Pidoco's Screenflow View in 2009
- Pidoco's UI in 2012 featuring the breadcrumb navigation
- Pidoco's current UI
Pidoco is turning 5 this month, which for many people means that we have moved from being a startup to becoming an established company. We’re wondering if the label should just be reserved for new companies, or if we will always be a startup as long as we keep our company culture.
For any company it’s important to celebrate the milestones, and for a startup the 5-year milestone seems especially important. One of the reasons for this may be that we hear and tell each other statistics about how many startups fail within the first five years.
Now that we have been around for five years, we thought we’d take a look at some definitions of a startup and give you some of our own. Please comment below with your own suggestions for what it means to be a startup.
Cambridge Dictionary: “A business that has just been started.”
Merriam Webster: “The act or an instance of setting in operation or motion.”
Wikipedia: “A partnership or temporary organization designed to search for a repeatable and scalable business model.”
Mashable: “Companies set up to test business models developed around new ideas.”
Eric Ries: “A startup is a human institution designed to create a new product or service under conditions of extreme uncertainty.”
Silvan, co-founder of Pidoco: “You know you’re not a startup anymore when you have free time on the weekends.”
For the most part, being a startup has a lot to do with company culture. At Pidoco we don’t have hierarchies, we have a stand-up every day and we are still working towards the vision we set out when we founded the company. Please comment below with your own definitions of what it means to be a startup.
We often get asked about recommendations for good wireframing articles and blogs. The following are some of our favorite resources that demonstrate clearly the function of wireframing and best practices. Please comment below with any of your recommendations!
Design Better and Faster with Rapid Prototyping – Smashing Magazine
Rapid prototyping is a process where designs are drafted, reviewed and refined. This article gives you an insight into how prototyping can make your work become more agile and how prototypes can give stakeholders a tangible product that they can interact with. Smashing Magazine is also a great resource on UX and design matters.
Why it’s Important to Sketch before you Wireframe – UX Movement
Designing a website or application can often be a long and complex process. This article focuses on how sketching out design concepts is a process of discovery and trial and error. Once the concept is clear, you can use a tool like Pidoco to refine your concept, add interactions and create concrete specifications.
Tips on Prototyping for Usability Testing – UX Matters
Contrary to belief, even wireframes and prototypes can be used in usability testing. The benefit of getting user feedback at the beginning of the design process is that this can often save companies time and money in the long run. This article looks at the best methodologies for testing your prototypes with end users for getting valuable and reliable results.
Wireframing for SEO – SEOmoz
SEO can often be an afterthought in web design, but it is a crucial aspect that can determine how much traffic will be brought to your website. The SEOmoz blog should help you to plan the structure of your site with SEO in mind. SEO is definitely an area where you should get input from your online marketing team as early on as possible to ensure the structure of your wireframes fits with their requirements.
From Wireframes to Code – UX Matters
If you have ever thought about how to cut development time in your projects, this article is for you. Some people believe that it’s best to begin using code as early as possible to save time later on. Others see the wireframing phase as an important time to try out new ideas without focusing on the technical implementation. This two-part article summarizes which approach is best for different types of projects.
Sketches and Wireframes and Prototypes! Oh my! Creating Your Own Magical Wizard Experience – UX Matters
Just as the Wizard of Oz shows us we each have our own definitions of a heart, a brain and courage, many UX designers have varying definitions of what a sketch, a wireframe and a prototype are. This article looks at the functions of each of these design forms, and how they are suited to different review processes. Remember that sketches, wireframes and prototypes should be used as vehicles for creating a better user experience and this should be your aim throughout your projects.
Shades of Grey: Wireframes as a Thinking Device – UX Magazine
Do you see wireframes as a product or a process? This article will help you to reassess the goals you would like to achieve from wireframing. The author sees wireframes as a process, which is used to generate different design alternatives and to create a user experience based on context.
Better Perspective in Wireframing – The Pro Designer
Creating wireframes without a strategy or roadmap should be avoided. This article will show you what you need to consider, from setting an objective and deadline to ensuring you focus on functionality rather than graphic design. This is a great checklist for anyone beginning a project where they will be using wireframes.
I ♥ wireframes – wireframes.tumblr
This is a gallery with images of sketches and computer-generated wireframes. Perfect for getting inspiration for your wireframes.
Pidoco UX Dictionary Pidoco
Please let us know if we have missed any of your favorite articles from this list. Comment below, or email us at email@example.com if you would like us to give you recommended resources on a particular topic on wireframing. We look forward to reading your suggestions!
For those of you who did not make it to CeBIT this year, we thought we would share our presentation with you. Our CEO, Philipp Huy discussed the advantages of prototyping in an increasingly mobile market. Why is mobile app prototyping an important topic? Mobile internet use has increased rapidly over the past years and has taken over desktop-based access in countries like India already. With more of us surfing the web on smartphone and tablet devices, it pays for companies to develop mobile-compatible websites and mobile apps. For those that already have a mobile product, chances are this needs improvement.
While we may be inclined to focus on content and the commercial goals of a project, the user experience of a mobile app is often the decisive factor in ensuring market success. Prototyping is a great way to tackle the UX challenges that mobile interactions set for designers and developers as it allows them to involve end users and decision makers early on. At Pidoco we value communication, collaboration and user-testing and therefore offer our customers a special Mobile Edition for simulating mobile app prototypes directly on tablets and smartphones with our Pidoco App. With an iterative approach to mobile app design and development as enabled by rapid application prototyping, developers can significantly reduce risk and bring higher-quality products to market faster. We believe prototyping is one of the quickest and most effective ways to ensure market success for your mobile projects and you can see some of our use-cases in the presentation.
We are back in the office after an amazing week at CeBIT! We are very excited to announce that we have won the INNOVATIONSPREIS-IT 2013 Award for best mobile product. Over 4900 companies applied this year to win the prize and we are honored to have such recognition for the Pidoco Mobile Edition. Our Mobile Edition allows users to simulate and test interactive app prototypes directly on mobile devices using the Pidoco App.
Below is an interview (in German) with our CEO Philipp Huy who was at CeBIT 2013 to accept the award.
We want to thank everyone who visited our stand at CeBIT and took the time to try out Pidoco. We are really happy with the positive response we’ve had. Here is a photo of our booth, including our analog magnetic wireframe stencils.
For those of you who were not able to visit us at CeBIT, we’ll keep you updated about upcoming events where Pidoco will be making an appearance!
Please feel free to comment below to let us know what you think of these updates!
We have added over 200 icon stencils to Pidoco – ranging from social media icons to currency symbols. These are organized by category in the stencil palate, so just click on “expand” to see the full range in each category. Once you have added your icons to your page, you can change the size in the context menu. There are five sizes to choose from.
We have expanded our shape stencils to include the triangle stencil to help you get creative in your prototypes.
The new icons can also be found in the Mobile Edition as well as the Autocompleter, Accordion, Rating, and Toggle Section Stencils. You can try out our Mobile Editor with the Pidoco Free Trial.
Toggle Section Update
We’ve updated the Toggle Section so that you can choose the overlay offset when the stencil is clicked in simulation (i.e. where the overlay should open on the page). You can also specify how large you would like the overlay width to be, so you can avoid scroll bars from showing up. You can set a target as an external webpage, or another page in your prototype.
In the example on the left, I have created an overlay with contact information. The overlay opens 50 pixels below and to the right of the “Contact Us” trigger in simulation. Here it is shown in sketched mode.
We’ve been hard at work behind the scenes once again to bring you the features you have requested:
Many of our users have asked us whether we can make it easy for them to create flowcharts in the tool. We’ve now added a flowchart section in the stencil palette, so you can map out your processes. Remember, you can change the size of your page in the context menu – so feel free to give yourself lots of space for your flowcharts.
We also have a new stencil for your prototypes. Now you can use the toggle stencil to show and hide elements on your page. In the example below, I created a separate page with a few stencils and set this page as the target of my toggle stencil. Now when I click on the toggle stencil in simulation this drop-down appears. You can also set a target to external websites.
You can now create teams in Pidoco. This means that instead of emailing everyone individually to tell them they have access to read or comment on a prototype, you can set up a team and automatically give them these access rights. Here I have selected the marketing team to have access to the prototypes in my folder. Now I need to click “Add to Collaborators”. I can set up new teams by clicking on the button highlighted in red. (Expert Plan)
We realize it can be difficult searching through your prototypes, (especially if you have as many as we do). For this reason we have introduced folders in “My Prototypes” to help you organize your projects better. To do this, simply click “Create Project Folder” and click on the folder icon of your prototype to organize it into a folder. The same principle applies when you organize your pages into folders in the editor. (Expert Plan)
Once again, we want to thank all of you who have given us feedback on our User Voice Forum, or by email. We really appreciate it and we hope you enjoy these feature updates. Feel free to comment below, or email us with your feedback on these new features. As always, you can find us on Facebook and Twitter. Happy Prototyping!
Want to be a prototyping superstar? We’ve been making tutorial videos with all our secret hints and tips to help you get the most out of Pidoco. Watch how to use our latest accordion stencil or see how to create a popup in your prototype. You can watch all of these on our YouTube channel. Just click the subscribe button to make sure you don’t miss any of our new releases!
This is our image tutorial video, which shows how you can upload and crop images in Pidoco.
Of course if you would like to talk to an expert from Pidoco, we offer free online demonstrations. Just fill out the contact form and let us know when would be best for you. We’re based in Berlin, so we’re free Mon-Fri 9:00 – 19:00 (CET).
Do you have any suggestions for future videos? We’d love to hear from you. Just comment below!
It’s great hearing from Pidoco users and it’s even better to meet them in real life. The best part is that you never know what they might say about your product. When I took part in a Rails Girls Berlin workshop last month, I met Celine and Saskia, cofounders of promising Berlin startup Qipoqo – a task-swapping platform where you can swap tasks you don’t like for those you do. Saskia was the first person who had ever described the UI of our software as “cute” before and I couldn’t wait to hear what else they had to say about Pidoco.
Saskia and Celine discovered Pidoco after they won a startup competition. They were lucky enough to win free agency help to develop their website, but needed a way to communicate how they wanted the layout and structure of their online platform to be. Having worked with PowerPoint initially, they wanted software that could add more interaction and also give them more ideas of what elements to include in their website.
Even though both founders have no programming background, they found that Pidoco was quick and easy to use and helped them see the bigger picture of the technical requirements of their project:
“Using the mockup was a revelation, because we had no clue how complicated it was. Unless you try to build it yourself even with a mockup, you’re not aware that there are several different ways to get to the same page and that the same page maybe doesn’t look the same depending on where you come from” – Celine
Celine also talked about how they took their prototype to Usability Fix at You Is Now to show potential users. Because prototypes created with Pidoco are interactive, you can get your potential users to click through and see what problems arise with your navigation and layout. This made Celine and Saskia rethink their navigation to make it more intuitive for their users.
We think it’s awesome that they’ve been using Pidoco in their startup journey and of course, we are huge fans of the name. You can sign up for the Beta version of Qipoqo here. In the meantime Celine and Saskia are busy getting support for their crowdfunding campaign. We can’t wait for the task-swapping platform to go live and we wish them the very best of luck.
If you’re a startup and would like to use Pidoco, email firstname.lastname@example.org to see if you could qualify for a 25% discount.
Too many people think that creating prototypes is a quick fix to ensuring that a final application will be user-friendly, but the truth is that prototyping tools can only take your project so far. To create successful functioning applications, you must first take some basic steps to get the most out of this valuable design process.
1. Know your purpose
Whether you are sketching out paper wireframes or want to create a higher fidelity interactive mockup, you should have a clear mindset of what you want to achieve from prototyping and what the requirements of the application are that you are prototyping.
2. Get your team involved
Prototyping is a process that does not require programming. This means that anyone you think can bring value to your concept should be involved in the creation process. With collaboration, you can get the perspective from different teams, which will help you look at your concept objectively.
There are so many possibilities nowadays for communicating, wherever your stakeholders are. Make sure that you take advantage of this. With prototyping software, you can comment in the prototypes to show where you want to make changes, or to make things clearer for others.
4. Be critical
It might be that your design doesn’t make the cut. Often you have to balance the needs of the client with those of the user. This can make design a difficult task. Try to be objective when you look at your prototypes. Remember honesty early on in the development process pays off.
Prototyping is the most cost-effective part of your design process, so take advantage of this. Create multiple wireframes to show your stakeholders. Remember these can be used in A/B testing later. Another advantage is that it can be easier for your stakeholders to articulate what they want when they are given options.
6. Consider your use cases
Too many times people create prototypes without considering the actions and processes of the user. Use cases can be drawn up quickly and often put in a diagram, so you can think about the different functions your users will want to carry out. For more information on use cases, click here.
7. Carry out user testing
Even with use cases, you will often be surprised by how your user responds to your UI. Whether you choose to carry out remote user testing, or watch your user click through the prototype in front of you, it’s invaluable to see how your user interacts with your design.
8. Think of the next step
Remember that your prototype will be used as a blueprint for other designers and programmers. Make sure this is a useful guide for them and be aware of their requirements for the prototype.
9. Document your processes
This is especially important if you are working for a client. A specification document of a prototype is a record that both parties can refer to. This means that if your client demands more features, you can make it clear that this is outside the initial agreement.
10. Don’t throw your wireframes away
Not all wireframes and prototypes should be discarded after a project. You may end up working for the same client again, or want to take ideas from your existing prototypes. Remember, it can be nice to take a basic existing prototype so you don’t have to start with a blank page in your next project.
Do you have any great prototyping tips I have missed? Feel free to comment below.