Posts tagged with "wireframing"

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!

Wireframing Competition Winners!

Saturday is an odd phenomenon at CeBIT. When I walked into Hall 6 that morning, I saw groups of kids, students, and the general public carrying bags full of giveaways from companies they have probably never heard of and whose products might not interest them at all. This is a stark contrast to the rest of the week, where you see many people in suits. And yet, Saturday is one of my favorite days to be at CeBIT. It’s a bit more relaxed and it’s nice to have the opportunity to talk about UX and the value of prototyping to the general public and to students who may want to go into the field later.

We decided to set up a wireframing competition to attract people’s attention on this last day. We wanted a way to get people interested in wireframing without giving a product demo. Having a whiteboard, some magnets and some pens definitely inspired creativity. The best thing about it was that even if people did not know exactly what wireframes were, they understood the concept and were happy to take part.

Whiteboard with wireframe magnets

The winning prototype!

Luise creates wireframe magnets

Luise hard at work creating our magnets

I had the idea after seeing a DIY magnet kit on Kongi.com and it seemed like a perfect fit, because I wanted something that would be practical, reusable and easy to transport. (Actually the whiteboard wasn’t so easy to transport, but fortunately we could fit it into our hire-car). Of course we wanted to use the Pidoco design for our magnets, so we drew these by hand. As soon as we were finished, the team came in and started to move the magnets around the whiteboard and that’s when we knew the concept would work. The winners of the competition have won a free annual Expert plan of Pidoco. Stay tuned for more competitions!

What do you think of these competition entries? To see more, visit our Facebook page. Feel free to like your favorite entries and let us know why!

New Year Update – Icons and More!

Icons for social media

It’s time for another product update and we want to thank you once again for all the feedback you have emailed and added to our forum. We really appreciate it!

Please feel free to comment below to let us know what you think of these updates!

New Stencils

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.

Stay Tuned!

We hope you enjoy these updates and stay tuned for our future releases. Don’t forget to follow us on Twitter and like our Facebook Page. Thanks for all your great feedback and Happy New Year!

10 Great Prototyping Tips

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.

3. Communicate
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.

5. Experiment
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.
 

Bridging The Gap: From Paper Scribbles To Interactive Prototypes

Pidoco and ScatchApp are joining forces to help our users make the most of paper prototyping. While Pidoco is a great tool for creating UI prototypes of websites and software applications really easily, we still find that some of our users prefer to create their initial designs on paper. To help our users save time and money, we are working with ScatchApp to see if we can make it easier for our users to transform their paper wireframes into interactive software prototypes. We believe ScatchApp is a great tool that will help our users create prototypes even faster than before and take advantage of the great collaboration and testing features Pidoco has to offer. ScatchApp has won several awards and is a triple Startup Weekend winner of Szczecin 2011 due to its innovation merging the boundaries between paper and computer.

How does ScatchApp work?

ScatchApp works by using unique technology that can recognize the layout and features of paper wireframes. ScatchApp can recognize components such as text boxes, headlines, buttons and image place-holders, which is great, whether you are creating flowcharts or wireframes. Uploading your designs with ScatchApp is easy. Simply draw your sketch on a piece of paper using the relevant symbols, take a photo with your mobile phone and upload the image to ScatchApp. Within seconds, your design will be transformed into a digital wireframe that you can edit online in Pidoco. ScatchApp even aligns the individual elements in your design, giving you a clean, professional-looking layout.

Paper Wireframe of Pidoco Home page

We've sketched out a paper wireframe of the Pidoco home page
that we will upload with ScatchApp.

How will you be able to use ScatchApp with Pidoco?

Here’s an example of how to use Pidoco in connection with ScatchApp. We understand that some people like to sketch out their ideas on paper first. Some even find this helps them be more creative. Naturally, paper has its limitations and even the best paper wireframes cannot produce the same results as prototyping with Pidoco. In addition, paper prototypes cannot be adapted or shared easily. In the example above, you can see that we’ve sketched out the layout of the Pidoco home page. In the picture below, you can see what the finished product will look like in Pidoco once this has been uploaded into ScatchApp. The buttons, text boxes and image placeholders appear in the same visual layout as in the sketch.

Prototype of the Pidoco Home Page

Now we've uploaded our sketched wireframe to Pidoco,
we can edit our prototype and add interactive elements.

In Pidoco we can now link and edit these pages. With Pidoco you can also collaborate on prototypes online in real-time and even use your prototypes in usability testing. What’s more you can discuss your prototypes with colleagues online. Using ScatchApp with Pidoco therefore enables you to model your UI designs with paper and pen, while making the most of all the great features of digital prototyping that Pidoco has to offer. If you would like to learn more about Pidoco have a look at our website, or if you would like to learn how to program your own application against the Pidoco API, take a look at our documentation here.