Featured feature: More colors for your prototypes

Today, we released a feature many of you have been eagerly awating. We added a color picker to our editor. This allows you to choose finely granulated colors for your prototypes in addition to the standard colors previously available.

You can choose a color by picking a color from the color palette or by entering an RGBA or HEX value.

Last but not least, pages now can also have a custom background color.

Featured feature: Stencil rotation

With this new feature, you can rotate every stencil Pidoco offers. When you select one or more stencils, you will find an additional rotation handle above each stencil. We believe this is pretty self-explanatory – we have nothing to add. ūüôā

Featured Feature: Improve mobile testing

We know that context is very important when it comes to testing prototypes on real users. This is the reason why we try to make testing on real devices smooth and realistic.

Today we shipped two new features that help you test your smartphone and tablet prototypes.

The first is the ability to quickly open a page on your mobile device by copying the URL or scanning a QR code.

Now you also have the option to open a page in fullscreen mode. If you use the feature “Add to Home Screen” on your smartphone (Safari for iOS or Chrome for Android) your page will be automatically scaled to match the width of your device. Moreover, browser UI elements will be hidden.

Happy prototyping!

Featured Feature: New copy-paste shortcut

Today we released a new Pidoco feature which further improves your productivity while creating prototypes.

Now, if you press Ctrl (or Cmd on Mac) before dragging one or several stencils with your mouse, the selection will be duplicated.

Sign in and try it our today.

Happ prototyping!

Featured Feature: Freely order pages and layers

The powerful layer feature has been an integral part of how Pidoco allows users to reuse components in their projects to speed up their workflow.

Layers function as global asseta across a project: Once created, the same layer can be used on multiple pages by simply selecting it from the layers list. When the layer is edited, the changes are instantly visible on all those pages. This is a very efficient way of avoiding redundant work.

You can stack and order any number of layers on a page. Combining the right layers can help you create new pages in the blink of an eye.

Being able to mix pages and layers, i.e. to place the page content between the content of several layers in the stack, has been a highly demanded feature. We had to make some major changes to our system before being able to offer this new option.

Now everything is in place and we are happy to announce that pages and layers can be freely stacked and ordered. This will make using layers easier and more efficient.

Finally, remember that using layers in combination with interactions offers a lot of new possibilities.

Sleeker, faster, better: The New Pidoco

Over the past months we’ve been hard at work building a new version of Pidoco to create an even better experience for you. Many of you have helped us by participating in several rounds of usability tests. After incorporating your feedback into our design, here’s the¬†result: a new Pidoco version that we are certain you will love.

So, what’s new?

#1 Sleek design

In order to ensure an optimal usability, the new Pidoco now greets users with a clean new design providing a clear overview and facilitating access to all core functions. The Home screen is now fully integrated with the other views and syncs easily with the editor while you are working on your projects. We’ve also extended the breadcrumb navigation to the Home view and improved access to support options as well as account and license information. In addition, we have polished the preview, our dialogs, and the sidebar in the editor to make them easier to use.

 

Pidoco Prototyping Tool - Home View

The new home screen has been redesigned and now offers quick access to frequently used functions.

 

#2 Perfect overview

One of the most noticeable changes is the brand-new Map feature. Instead of a simple list of screens, the first thing you see upon opening a project is a complete overview of all its screens in the form of a screen map. Aside from a thumbnail depiction of each screen the map shows you the links between pages, giving you a quick insight into the structure of your project. Simply drag your pages to individually reposition them. The map comes complete with zoom and scroll functions, just like you would expect. Of course you can still switch back to the traditional list view, where you can organize your pages in folders.

Pidoco Wireframing Tool - Map View

The new Map view gives a great overview of the project.

 

#3 Quick access

Projects can at times become quite complex. The improved Project view offers easy access to all the components of your projects. Five main tabs conveniently structure your project and let you jump directly to screens or assets, manage access, review or reply to comments, and save project versions.

In addition, we introduced Quick Actions for each element, offering frequent actions such as editing, simulating, exporting and sharing of projects or editing pages at the tips of your fingers at any time.

Pidoco project view with five main tabs: pages, assets, comments, collaboration, versions

The improved project view provides easy access to all parts of the prototype in the five main tabs.

 

#4 Convenience functions

From projects to pages, assets and comments, we have re-designed how elements are displayed. A unified list pattern provides an easy-to-grasp overview of projects, screens and assets while search, sort and filter functions allow you to optimize how you work. Sorting refers to element name, creation date or last edit, while filters are available for screen sizes or asset types, depending on the type of element.

The Quick Search works like a dynamic filter and is now available in all views, from stencil palette to screen list. Just start typing wherever you are to find what you are looking for.

In addition, we have standardized editing options across all views to speed up your workflow and keep things as simple as possible.

Finally, you will find convenient meta information on many elements, which will help you find what you are looking for.

 

#5 Drag & drop

While this is not a new feature in Pidoco, we have vastly improved the drag & drop upload. Previously available for images, we have now expanded this helpful feature to entire screens: Simply drop a screenshot onto the Map or screen list and Pidoco will automatically create a new screen in the right size and add it to your project with the uploaded screenshot placed as background image, so you can immediately start editing or linking that screen.

Additionally, we have rolled out drag & drop in all views, so you can now sort and move elements easily.

Drag your pages to move into folders.

Drag your pages or assets to organize them in folders.

 

#6 Better access to comments

Commenting has been a core collaboration feature of Pidoco from the start. Now we have incorporated a new Comments panel into the main editing view to offer better access to comments while editing a project. Comments are now also color-coded so you can see more easily which issues have already been resolved and which still require your attention.

Comment panel in the editor sidebar.

The redesigned sidebar in the editor includes a comment panel for quickly accessing all comments while editing the prototype.

 

#7 Link sharing

Collaboration is at the heart of Pidoco: You can share your projects with any person for viewing, commenting, forking or editing. We have improved the sharing mechanism, now you can easily retrieve the sharing link and share it with colleagues or clients without having to use the standard email option.

 

#8 More powerful preview

The preview has received a new design as well. But even more important, we have added a full-screen viewing mode to allow you to present your prototypes in the best light. The comment markers now come in different colors, allowing you to recognize their respective status without having to open them first.

Pidoco Prototyping Tool - Preview

With its new design, the preview shows the prototype in action and has been equipped with a new full-screen mode.

 

Of course, there are also a bunch of small improvements we have made, including better access to settings and profile information or new dialogs, but see for yourself: See the new Pidoco in action!

Let us know in the comments what you think or email us at support@pidoco.com.

Upcoming Release: What’s New

So, we’ve been telling you all about the upcoming release of the new Pidoco. Now it’s only a few weeks before it will be arriving. To allow you to familiarize yourself with the new Pidoco version, we have put together a little guide showing you what’s new. Enjoy!

 

#1: Home View

Pidoco Prototyping Tool - Home View

The new home screen has been redesigned and now offers quick access to frequently used functions.

 

The Home view has been redesigned to give you a better overview of your projects. While the project list is very similar to the current list, the Home view will now offer some neat improvements:

  • Quick Actions: Instead of the old tabs, we have turned some of the most important options, such as editing, sharing or exporting into quick links that allow you to more easily access them.
  • Toolbar: We have added a toolbar to the Home view to make work even faster for you.
  • Search: Now you will be able to search for projects, which is especially useful if you have many.
  • Filtering and sorting functions are now available to manage your projects more efficiently.

 

#2: Project View

Pidoco Wireframing Tool - Map View

The new project view greets Pidoco users with a map of the entire project, offering easier orientation and a better overview.

Perhaps the biggest change in the Project view is the new Map feature. The Map will give you a visual overview of your entire project, allowing you to quickly find and access the right pages or simply get a better grasp on the project. Zoom in to see more details or zoom out to get a bird’s eye perspective. Of course, you can always switch to the list view to search for pages or sort them into folders. Note: For existing projects, you will still see the page list first. Upon switching to Map view, you will find your pages and can arrange them as you see fit.

The new Project view also comes along with several tabs that neatly contain the available functions. They will be replacing the tabs of the current Home view.

  • Pages: Shows all pages – as map or list, depending on your preferences
  • Assets: This is where you can now manage all your assets. Upload screens, graphics or icons, create screenflows or manage your masters and layers.
  • Comments: This is the central place for reading and replying to feedback you receive through the commenting feature.
  • Collaboration: Managing invitations and access rights happens in this tab.
  • Versions: This is where you can now find all versions of a project – manually generated milestones as well as auto-saved backups.

 

#3: Editor

Pidoco Prototype and Wireframe Editor

The editor view now offers easy access to all comments without interrupting the workflow. The layer panel also has received a new design.

The editor also has received a little upgrade. The main new features will be:

  • Comments panel: You can now read and reply to feedback directly as you are editing your project.
  • Layers panel: The layers panel has received a redesign to make it easier to distinguish the page from the layers and to allow you to focus better on the stage.

 

#4: Preview

Pidoco Prototyping Tool - Preview

With its new design, the preview shows the prototype in action and will be equipped with a new full-screen mode.

The preview will have not only a new design, but also offer a new full-screen mode for viewing projects without any distraction. The comment markers now come in different colors, signalling their respective status for an easy overview. Of course, we are keeping the different hand-drawn and wireframe modes, so you can choose how to present your project best.

 

#5: General/Convenience

Pidoco Wireframing Tool - Sharing feature

New convenience functions and an improved sharing feature make working with Pidoco even more productive.

More generally, there will be a few new convenience functions that we will be rolling out across the system. They include:

  • New design: The pretty “flat” design looks a lot cleaner and will show your projects in the best possible light to give them full focus.
  • New dialogs: All dialogs have been revised to make them easier to use.
  • Drag & drop lists: The project, page and asset lists now allow you to sort items using drag and drop.
  • Filtering¬† and sorting: Filtering and sorting functions will be available in all list views to help you manage pages, assets and more.
  • Quick Search: The dynamic search function will be available in almost every view.
  • Sharing: You will be able to retrieve the sharing links without having to send an email.

We are very excited to share the new Pidoco with you in just a little while and hope you’ll like it.

So, watch out for the release date!

 

How to … Create a Contextual Action – Swipe to Delete

Your goal is to offer the best experience possible to your users. You don’t want them¬†to go the extra tap mile to navigate between pages, to delete an item from a list, to add a song to a playlist, to archive a message or to unsubscribe from a newsletter. Actions like these are all so-called contextual actions¬†and always relate to touch gestures.¬†Contextual actions are a good way to provide quick access to quite common actions in a mobile application and at the same time are a brilliant way to reduce the number of taps the user needs to complete the task.

 

What to consider when including contextual actions in a mobile application?

When executing a contextual swipe action, most of the people expect a destructive result, such as deleting. That’s mainly because of the original use of the swipe gesture towards the left in order to delete an item. This well-known gesture also relates to the physical act of crossing something out on a list.

To create effectively working contextual actions consider some more points.

1. Context: Instead of including text, use clearly understandable icons to represent the action items (e.g. a basket or an “x” for deleting)
2. Consistency: Keep the meaning of the contextual swipe action consistent throughout the app. When multiple actions are associated to the same touch gesture you confuse users.
3. Confirmation: To avoid frustration and error, ask for a confirmation before completing an action.
4. Conflicts: Don’t use too many swipe gestures and make sure they don’t interfere with other swipe actions (e.g. to navigate between pages).

 

Now that we have the basic information, we build an app with a contextual action and will use a swipe gesture to delete list items. And here’s how it goes …

 

1. The project setup

I created a mobile project called ‚ÄúMy Notes‚ÄĚ, which is a prototype of an app in which you write down your thoughts or create to-do lists or sketches etc.¬†My app includes a list with two notes. When swiping to the left of one entry, a “Delete” button shows up and after tapping on it, the note is deleted.

Swipe to delete a note from the list

First I created the pages for my list – one for each state: full and empty list and add a page for the two notes that should be displayed in the app. The pages all serve as frames only as the content will come from the layers I added. That’s why in my prototype all the 4 pages nearly look the same. Here: I added a status bar to the top and a headline. The footer differs only a little. The pages that list the notes have an extra text stencil at the bottom to display the total amount and the empty list contains a little icon at the bottom right to create a new note.

Additionally, I used 7 layers, whereas each represents the different stages of the deleting process: full list, item #1 deleted, item #2 deleted as well as the 4 layers that display the respective buttons. Here: I created 4 layers in total, one for each required button in the full list and two after the deletion process.

I recommend to create the pages and layers first. You can add the content later, but it helps you to quickly build and link your content.

 

2. Creating the contextual action

Now let’s continue the work at the contextual action to delete a note with a quick swipe to the left. To do so we proceed step by step.

Step 1: Start the app

We start on the first page (Here: “1 – Start: Entire list”) and activate the first layer that contains the complete list (Here: 1. Full list) consisting of¬†one list with 2 notes and 2 lines of text. For that I added a list stencil and placed some text in the lines.

Activate the layer with the full list

 

Step 2-1: Swipe to the left in order to delete item

Now we want to display the delete button following a swipe gesture to the left. To do so, the layer with the full list remains active on the start page and we add two action areas on top of the two list entries. The reason we do this is that we have two options: delete item #1 or #2 first and the layers should be placed on top of each other. (Hint: Use drag&drop the re-order your layers in the panel.)

Let’s¬†delete the entry #1 first. For that we add the following interaction pairing to the action area: When the user swipes to the left, then change layer visibility and select the layer that contains the respective delete button. (Here: “1. Delete button – Full list – Note #1”).

Link the action area to display the “Delete” button

 

Step 2-2: A “Delete button” appears

Now, we open the layer with the first¬†“Delete” button. (Here:¬†1. Delete button – Full list – Note #1)¬†Then we add a button to the first entry,¬†change the color (via the context menu) and add it to the right of the list. To visualize the swipe action even more, we can adjust the text by moving it a little to the left and reducing the length.

Add the “Delete” button to confirm the destructive action

 

Step 3: Tap on “Delete” to confirm your destructive action.

We know it’s necessary to tap on the “Delete” button to¬†confirm the destructive action. That’s why we link the button to to the prompting page that shows the second list entry only. Here: After deleting the first list entry, the interaction pairing is: When the user clicks/taps, then show page “2 – Note #1 deleted”.

Link the “Delete” button to the page with the reduced note list

This next page should show the reduced list. That’s why we open it and¬†activate the layer¬†that includes the shortened list after successfully deleting the first list entry. (Here: “2. Note #1 deleted”)

Activate the layer on the new page with the reduced list entry

 

Step 4: The entry is deleted.

Now only one entry is left on the list (Here: item #2). We can also delete this entry. To do so we add another contextual action¬†by repeating the previous steps. As the list will be empty in the end, we only link “Delete” button to a blank page (Here: “3 – Result: Empty list”).

Show an empty list after deleting all notes from the list

To delete the second list entry, repeat these steps and only change the layers and page accordingly.

 

3. Simulation

Voilà! To test your contextual actions take your mobile device, open the Pidoco app (available via Google Play or the App Store) and start the simulation of your project by selecting it from the project list.

 

That’s it! You just finished your your project including contextual swipe actions.

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

Happy Prototyping!

How to … create an infinite scroll page

Have you ever managed to reach the bottom of your social media feed? Probably not! Because it applies the¬†concept of infinite scrolling. That’s definitely a¬†trending and dynamic way to replace the pagination links and to display the¬†vast amount of data¬†on both mobile devices and websites.

How does it work? This one-pager makes clicking to see new or more content redundant. Because the main functionality of an infinite page is that the user scrolls the content and every time the end of the screen apparently has been reached, new content is continually and automatically loaded .

The only thing that should be kept in mind,¬†because it might limit the use, infinite scrolling considerably triggers the user’s attention and although it’s kind of optimistically tempting and challenging to never be able to reach the end of the page, it can also be very exhausting and frustrating.

Now let’s have a look how such infinite scroll pages can be created in Pidoco. And here’s how it goes …

 

1. The project setup

To visualize the infinite scroll page, I created a mobile project called “Friends”. That’s the prototype of an app where you and your friends can update each other on the latest things such a news, thoughts or images etc. These updates are shown on the screen of the mobile device and if you scroll the page more news by your friends are displayed.

As¬†one-pager, my prototype of course consists of 1 page only¬†and additionally has¬†some layers. And here’s a little confession: Although we‚Äôre about to create an infinite scroll page, and usually you won‚Äôt be able to reach the bottom of the page, our project will have an end. But as a prototype, it of course will help to demonstrate the behavior of the infinite scroll page. That‚Äôs why my infinite scroll page can be scrolled three times and then the end will be¬†reached. So a total of 7 layers is needed, whereas there’s¬†1 layer for each scrollable content to be displayed (here: 4 layers). Additionally, a loading symbol should appear for a short time when new content is loading while scrolling down the page. That’s why 1 layer for each loading screen (here: 3 layers) is needed, too.

Preview of the finished app “Friends”

 

2. Creating the infinite scroll page

2. 1. Building the infinite page

Based on the default height of 640px, we increase the page size using the toolbar at the top of the canvas by a little more than 3 times and set the height to 2100px and also added some elements like a status bar and icons.

Create a page with an increased page height

 

2.2. Creating the scrollpage content

Now that we have built the basic structure of our project, we continue creating the content of the infinite scroll page. That’s why¬†we create the first layer by clicking on “+New layer” in the layers panel and add some placeholders such as an icon, image stencil and some text. For a realistic scrolling experience, the first screen ends with the default page height. Hence, the content won’t exceed the height of 640px.

Add content to the first layer of the scrollpage

 

Repeat that step for the other layers that are continually loaded. The content of the next layer then starts where the content of the previous layer has ended and so on and so forth.

 

2.3. Creating the loading page content

Let’s go on and add the loading page icon. To do so, we add a new layer again and add a loading icon. Just use the quick search bar at the top of the stencil palette by entering “load”¬†and drag the icon to that position where the layer that contains all the news ends.

Display the load page icon at the end of each screen

 

Repeat that for the other loading icons.

 

2.4. Adding interactions to load the page content

We continue with the¬†interactions. When about to reach¬†the end of the screen, more content should be loaded. That’s why we make use of¬†action areas¬†on each content layer. The first action area starts at the half of the content layer. Since first a loading symbol should be displayed and then the new content should appear when the user scrolls the page, we add the following interaction pairing in the interaction dialog: When the user hovers, then change layer visibility. (Note: We use¬†an hover action here, because while scrolling the screen we inevitably hover with our mouse over the entire screen!) Now we select the layer that contains the first loading icon (Here: Load 2) and set the visibility to “show”, the next reaction makes it invisible again by selecting change layer visibility¬†and setting the visibility to “hide” and adding a delay of 1 second. The final reaction to be added is change layer visibility, choosing the layer with the content to be displayed next (Here: Content 2), setting the visibility to “show” and using the delay of 1 second.

Adding interactions to load the next content of the infinite scroll page

 

Repeat that for all the other layers.

Hint: Don’t forget to deactivate the layers again that we only activated to align our action area. To start the app only the layer needs to be displayed that contains the first content.

 

2.5. Jumping back to the start of the news feed

Having reached the end of the news feed, there should be an option to automatically jump back to the start to avoid annoying scrolling back to the top. Therefore we add an arrow as well as some text to the bottom of my last layer (here: my layer is called “content 4). Then we use the following interaction pairing: “When the user clicks/taps” then “scroll the page” and select¬†“to top” as position with a duration of 1 second¬†and then add for every content and loading layer the additional reaction “change layer visibility” and set the visibility to “hide”. But don’t forget to display the first content layer (here: Content 1) as it represents the start of the feed.

Use interactions to automatically jump back to the start of the news feed

 

3. Simulation

Voilà! To test your infinite scroll page open your browser to experience the behavior and start the simulation of your project by selecting it from the project list.

 

That’s it! You just finished your first infinite scroll¬†page.

 

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

 

Happy Prototyping!

5 Common Misconceptions About Wireframing And How They Can Be Avoided

There are many articles listing and summing up the pros and cons of wireframing, defining what a wireframe is and what not¬†and where the difference between prototypes and wireframes are.¬†That’s why we won’t go that much into detail here and rather focus on 5 common misconception about wireframing and how they can be avoided.

 

Lo-fi wireframes help to create the architectural structure and to highlight core functions

Lo-fi wireframes help to create the architectural structure and to highlight core functions

1. Wireframes have to be hi-fi

Wireframes come in many different shapes, sizes and even with a different degree of fidelity – from low to medium to high fidelity – all depending on your individual wireframing needs. So yes, wireframes can contain many details and the more they look like the final product, the less abstract you have to think. Of course it’s a good way to demo¬†your app or website idea as well as its USPs and core features¬†to potential clients, investors or stakeholders who prefer the touch-and-feel experience over abstract thinking. But you certainly won’t present them your very first idea. Especially in the early phase of the product development process you only want to quickly scribble your basic idea¬†and refine it with same basic elements, placeholders or transitions. It’ll be all about testing your idea and its feasability.

The lo-fi wireframe supports all that! So put your papers aside, stop overexplaining your idea, and just use a simple lo-fi wireframe and tell a story with few words only. Additionally, the lo-fi wireframe prioritizes the core functions of your deliverable by demonstrating the structural placement of the content, potential functionalities and intended interactive product behavior. In terms of design, you can keep things functional rather than pretty and if necessary at all just use a few colors only, integrate some placeholders where text or images should be.

 

Wireframing is the best way to bridge communication

Wireframing is the best way to bridge communication (picture by Mabel Amber via pexels.com under CC0 license)

2. Wireframing is for UX folk only

The awareness for UX has risen in the past years and more and more companies understand the value of integrating UX in their product development process. However, the term “user experience” is¬†on the edge of becoming a fuzzy buzzword. Wireframing is closely connected to UX as it’s about the alignment of elements and mainly about creating an interface that users are happy to interact with.¬†That of course pushes¬†the assumption that wireframing¬†is limited to the people who mainly focus on UX. But it’s not. Because wireframes are necessary for everyone who’s involved before the release of the finished app or website.

First of all, wireframes however provide a quick¬†way to achieve¬†a joint understanding of the deliverable. They also help¬†to bridge communication and to get all your product¬†stakeholders from the developer to the designer to product manager on the same page. Thereby¬†the iterative process loop of getting feedback and improving is assured.¬†But it’s also about the users! Before investing a lot of time and money in coding and releasing the app or website, you certainly use your wireframes to run several usability or A/B tests. During that iterative process, wireframes are the quickest and easiest way to generate results and to create the best possible user experience.

 

Wireframes are the skeleton of every development process

3. Wireframing is unnecessary in times of agile development

In times of agile development, wireframes seem to be out of time and apparently, the focus now moves on to interactive medium- to even high-fidelity prototypes. Because such kind of prototypes¬†speed up usability testing, extend feedback rounds or even help to lean back on living documentation. That’s not wrong, but speaking of time and cost effectiveness in the early product development stage, you won’t skip¬†development steps and start with a highly detailed version straight away. Instead, create a consistent and well-structured development process to avoid misunderstandings from the very beginning.

And that’s why a wireframe is still needed and even more: it’s the skeleton¬†of your deliverable! Wireframes help you to create the architectural structure of your deliverable, build the concept and form the foundation. It’s more than just a sketch and the wireframe will soon evolve over time, receive more and more details,¬†morph¬†from a wireframe to hi-fi prototype, become the code-ready version and finally the released version.

 

Wireframes support the collaborative developing process

Wireframes support the collaborative developing process (picture by Startup Stock Photos via pexels.com under CC0 license)

4. Wireframing is best done in presentation programs

There are many different ways to create a wireframe and basically it depends on your needs and so any program could¬†be helpful to¬†scribble an idea. That’s why¬†often some of the most common presentation programs are used. And they¬†might even be sufficient if you want to click some¬†screens. But what if you want to receive¬†feedback¬†on your¬†wireframe, would like others to be able to edit it, or you need to send¬†it to your stakeholders?¬†The only way to do it is forwarding¬†the¬†presentation file. However, it’s very likely that not everyone will be able¬†to¬†access it¬†and see the result properly due to program incompatibilities. Working already with a few people, you’ll get many emails with¬†a lot of feedback, which you’ll have to sort, combine it with the corresponding spot in the presentation file¬†and also have to compare all the submitted change requests.

Here it helps to consider the main functions of a wireframe: consistently gaining feedback. The best way to do that is by choosing and using a wireframing or prototyping tool that suits your needs best and most of all allows for collaboration. After defining your product team roles, you can make them all join your wireframe in the professional wireframing program. Now, all of you can view the current state of the wireframe, share comments on it, edit the wireframe together in real time or separately while everyone still gets the latest wireframe state.

 

Wireframes and visual comps rely on each other

Wireframes and visual comps rely on each other (image by Pixaby via pexels.com under CC0 license)

5. Wireframes can be replaced with design comps

Design comps¬†(short version for comprehensive layouts) act as the visual drafts of the final product, which means they actually¬†look like the final app or website just by adding graphics where formerly placeholders were seen in the relatively sparse looking wireframe and moving them nearly pixel-perfect to their positions. Comps are the layouts ready to be forwarded to the decision-makers and once approved serve as the design guide. That’s why it’s quite tempting to assume that such visual comps make creating a wireframe absolutely redundant. But in fact it’s not! Where comps focus on design, wireframes also include the interactivity.

It might be one of the longest ongoing discussion in the field of UX and wireframing. However, there’s a good way to keep things clear: wireframes act as the basis of a visual comp or at least as¬†its supplement and help to define the product requirements. Most importantly, wireframes support the data-driven UX process, while comps support the visually-driven design process. With that¬†mindset, visual comps and wireframes only come along together and rely on each other as they will be your best¬†way to both create and iterate your deliverable.

 

Did you experience more misconceptions about wireframing? Let us know via
support@pidoco.com or Facebook and Twitter.