Posts in "Wireframing Resources"

10 Great Wireframing Resources

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.

 

Prototypes of Pidoco

 

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

Our very own resource with an overview of UX terms you should know – from Storyboard to Focus Group. Perfect for those new to UX, or those who would like to refresh their memories.

Please let us know if we have missed any of your favorite articles from this list. Comment below, or email us at support@pidoco.com if you would like us to give you recommended resources on a particular topic on wireframing. We look forward to reading your suggestions!

Introducing – Pidoco Tutorial Videos

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!

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.

Feature Snapshot: Working with Layers

Layers in Pidoco are a fantastic way to save time when creating and adapting prototypes. Many already know layers from software programs like PhotoShop. Pidoco features a similar concept that allows users to group and re-use elements, but with one crucial difference: Layers are global in Pidoco.

Image of Global Layers list in the Pidoco Prototyping Software for Interface Design and Usability Engineering

Global Layers are a great way to save time when creating prototypes in Pidoco.

Global Layers are templates that can be reused within a prototype. You can hide and unhide them on any page of a prototype. This means that a layer can be created for the menu bar and website navigation and subsequently be used on all pages with one simple click. This way parts of a website or a web app that appear often do not have to be recreated for every page. In addition, different sections of a page can be compartmentalized into different layers in relation to tasks. An example of this is a webpage with different panes.

Layers in Pidoco are global meaning that any edits made to a layer while on a particular page will affect the layer on all other pages of the prototype where the layer is activated. This is a very handy feature when it comes to adapting a prototype or trying out UI design alternatives: Simply make a copy of the prototype and change the original layer to reflect the new concept. Or create an alternative layer in the same prototype and unhide the original one on those pages where you want the changes to be effective. So here’s how it works.

 

Creating Global Layers in Your Prototype

Layers can be created easily within a prototype when you are in the Page View, i.e. after opening any page of the prototype. To create a new layer in your prototype simply click on the “Create” button in the My Global Layers panel on the right hand side of the screen. Voilà! Doing so will generate a new global layer that will appear as a new entry at the top of the list of layers in My Global Layers. To rename the layer double click on it in My Global Layers and enter the desired name in the text field that appears.

Image of how to create a new layer for a Pidoco prototype to speed up the interface design process.

Creating a new global layer for your prototype takes just one mouse click.

The new layer will automatically be shown on the page you have opened and will be pre-selected so that you can start editing the new layer right away. Layers can be edited in the same way that you would edit the page: Simply drag the UI elements (stencils) from the Stencil Palette on the left hand side onto the layer. You can group them, align them, change attributes, or link them up with other pages. Once you’re done editing the layer, simply switch back to the page by selecting the page above the My Global Layers list.

Image of how to edit a global layer in a Pidoco UI prototype via drag and drop.

With the drag & drop function, editing layers is just as easy as editing pages.

By the way, you can edit any layer that is part of the page you’re on by selecting it under My Global Layers. If you want to edit a layer that is not active on the opened page you have to first display it by selecting the checkbox or switch to a page where it is already in use.  At this point it is good to remind yourself that layers are global and that any change will affect all pages throughout the entire prototype on which the layer is displayed.

 

How to use layers

Let’s say you’ve just created a few new layers, for example for the main navigation of your website or the utilities. You can now use them on any page of your prototype without having to redo the work. To display (or unhide) and use a layer on a page, open that page in the Page View and select (activate) the checkbox of the desired layer. Doing so will make the layer visible on that page.

Image of an active layer in a Pidoco wireframe showing the UI of a travel website.

Layers can be added to prototype pages by simply activating them via the checkbox.

All layers that are visible on the page are marked by a check in the checkbox in the My Global Layers list. Hidden (inactive) layers appear without a check. To hide a layer from a page simply do the reverse: Open that page in the Page View and deselect (deactivate) the checkbox of the desired layer in My Global Layers. Doing so will make the layer invisible on that page. Remember you cannot edit a hidden layer.

Image showing active and hidden layers on a page of a wireframe prototype created in Pidoco's interface design software.

The My Global Layers panel lists all available layers. Simply select the ones you need on any page in your prototype.

This of course also works not only for the navigation of a website, but also for footers, side menus and various other items that you want to re-use. Layers can also be used to model various states of the same page. Say, for example, you wanted to distinguish between the homepage of a web portal before and after the user has logged in. Simply create two layers for the different states of the utilities and/or navigation and duplicate the homepage. Display one layer on each page. Since the links on your layers are also global, you can even include different navigation paths using this method.

 

Managing Layers

All layers available in a prototype are listed in My Global Layers panel on the right-hand side of the prototype while in the Page View. There is no natural hierarchy among layers, but you can order them by dragging them to the desired position in My Global Layers with your mouse.

Image showing how to sort global layers in a Pidoco UI prototype using drag and drop.

Ordering layers is easy and quick in the My Global Layers list via drag and drop.

The top layer in the list will be displayed on top of all others, and so on. Note that the page entry above My Global Layers is not a layer, but represents the page you are on. Elements contained directly on the page will be displayed on top of all layers.

So, this gives you a brief idea of what layers can do for you. Have you tried the layer feature yourself? We’d love to hear about your experience.

About Feature Snapshots: Feature Snapshots address topics that are essential in the daily work of interface designers and all those using wireframes for professional purposes. As such, they are intended to help you learn how to tackle such challenges using Pidoco. One of the key benefits of prototyping is the possibility of working with design alternatives to find out which best suits business and user needs. This particular Feature Snapshot is about working with layers in Pidoco and how it can support the iterative design process.

Feature Snapshot: Embedding Prototypes in Office Documents

Pitching an idea or concept for a new website or application to your client is not only about understanding what your client wants, but also about developing a presentation that allows you to demonstrate that your product will satisfy your client’s requirements.  Delivering a good product presentation is the art of convincing clients that your work is worth their time and money. Unfortunately, it can be a real hassle to update a presentation if you change your mind about a key aspect of the concept, especially when you are using images of the user interface to visualize key ideas or scenarios of use in your presentation. And the same problem often arises again when you have to update a presentation or specification document after receiving feedback from a client.

Pidoco offers an easy solution to this problem! The Direct Link feature allows you to continually update images of your prototype within various office documents, for example a PowerPoint presentation.  This gives users the ability to update office documents to the most recent version of a prototype without the hassle of using copy and paste on each individual image.  Using the direct link feature users can embed links to various prototypes within a presentation and then send the file to clients or colleagues for documentation or reviewing.  The embedded links will appear as graphics of the related prototype in the document.  Unlike static images, however, the embedded images can be updated with just one mouse click, sparing users from the unfortunate job of having to manually exchange old images versus newer ones, one by one.  Updating the embedded links synchronizes the images in the document with the current version of the Pidoco prototype found online thereby ensuring that the latest changes are automatically incorporated into the presentation.

Step 1: Extracting a link from Pidoco

Image 1: The direct linking dialogue window.

Using embedded images with Pidoco prototypes is easy. Here’s an example of how to use the direct link feature with Microsoft’s PowerPoint software. In order to embed a direct link into your PowerPoint presentation you must first extract a link from Pidoco. To do this, open your Pidoco prototype.  Go to the Screenflow View of your open prototype and open the page that you want to embed into PowerPoint.  Then point at the “Share” button in the Toolbar and click on the “Get a link to this Prototype” option. You will see the dialogue window shown in image 1.

Copy the link located in the text field marked “PNG”.  This is the link you will embed into PowerPoint.

Step 2: Embedding the link into PowerPoint

Image 2: Inserting a direct link into a PowerPoint presentation

After you have copied the link to your prototype from Pidoco’s website, you can embed it into an opened presentation. Go to your PowerPoint presentation to complete the embedding process. Open the “Insert” option located on the Office Toolbar and click on the “Picture” option as shown in image 2:

Image 3: Using the dropdown menu options to embed a direct link

Once you have clicked on the picture option, the following “Insert Pictures” options will appear (image 3):

Image 4: The result: A neatly inserted image of the prototype that can be easily synchronized with the original prototype

Paste the link into the text field labeled “File Name”.  Then open the dropdown menu of the “Insert” button, and select the “Insert and Link” command.  The image of your prototype will appear in the selected slide of your PowerPoint presentation, as can be seen in image 4:

Step 3: Synchronizing Prototype and PowerPoint Presentation

Now that you have embedded the image it is easy to synchronize the presentation with the most current version of your prototype. To do so, click on the Office Button and point to the “Prepare” option.  Click on “Edit Links to Files” (image 5):

Image 5: Easy synchronizing of presentation and prototype with one mouse click

Clicking on this option will automatically update your presentation to include the most recent state of the prototype created in Pidoco.

Benefits of the Direct Link Feature

Summing things up, Pidoco’s Direct Link feature is a fast and easy way to keep your files up-to-date even when your prototypes change frequently, which often happens in early design phases.  This will help you communicate and share information better with your clients or colleagues and will minimize the time you spend on updating presentation and specs.

Are wireframes outdated?

The Blog post on “Forget the Wireframes, Throw Away Your Boxy Layouts — Design BIG!” points to the idea that people should think “outside the box” or “outside the wireframe”.

At least that is what the title of the post tries to convey. The author Fernandes Wendell claims that:

…many online portfolios out there have much of the same old look and feel: boxy, wireframed and boring look. My suggestion is to get away from this usual, tired style. These types of layouts are overdone…

I totally agree with him on the point that many designs are looking the same, specially if you’re working in WordPress. The basis of all design should be to have a rough concept and outline on how you’re gonna design your interface, let alone on where elements are going to be placed. If you decide to place a banner a bit more to the left or right and whether you gonna have a background picture which is not following a straight line, then it will surely still follow A line..in other words, I do not believe that “forgetting the wireframes” is the way forward.

Nontheless, it is an interesting article and is a good read for GUI designers