Pass variables a otra página en Axure

Variables Tutorial

Pass Text to Next Page

This Variables tutorial shows you how to pass text input from one page and display it on a linked page.  It uses variables and the OnPageLoad event.

This zip file contains the RP file needed to complete this tutorial

Pass Entered Values from Page to Page

Step 1: Add OnClick case to Submit button 

 

First, open PassTextToNextPage.rp and open the "Pass Text to Next Page” page.

Select the Submit Button in the wireframe and add a case to the OnClick event. This opens the Case Editor dialog.

Step 2: Store Namefield text in a variable

In the Case Editor, add an action to "Set Variable/Widget value(s)" and click Open Set Value Editor.

In the Set Variable and Widget Values dialog, set "value of variable OnLoadVariable equal to text on widget NameField". This stores the value entered in the NameField text field in the variable OnLoadVariable.

Click OK to close dialog


Step 3: Add action to open Page 1
 
 

With the Case Editor still open, add an action to the existing case to "Open Link in Current Window" and choose Page 1. It's important to note here that this action needs to come AFTER setting the variable value--if we opened the page first, the variable value would never be set. Click OK to close the Case Editor dialog.

Clicking the Submit button will now set the variable to whatever the user enters in the text field, and open Page 1.

 Step 4: Add OnPageLoad case to Page 1

Next, open Page 1 from the Sitemap pane. Here, we want to insert the text value stored in the OnLoadVariable into the welcome text on the page.

In the Page Interactions tab of the bottom pane, add a case to the OnPageLoad event.

 Step 5: Set text on Welcome Text Panel widget

 

In the Case Editor, add an action to "Set Variable/Widget value(s)" and click Open Set Value Editor.

In the Set Variable and Widget Values dialog, set "text on widget Welcome Text Panel equal to value" and click Edit Text.

 Step 6: Insert variable value to text

 

In the Enter Text dialog, place your after the "Welcome " text. In the Insert Variable or Function dropdown menu to the right, choose OnLoadVariable. This inserts [[OnLoadVariable]] to the text. Whatever value is stored in the OnLoadVariable will replace this text.

Click OK to close the open dialogs.

 Step 7: Generate the prototype 

 
 Generate your prototype and test it out. Clicking the submit button sets the value of the variable, opens the next page, and inserts the value into the Welcome text.

The Round Up
Did you pass the test for passing text?

Still need help? Check out the forum or drop us a line at support@axure.com.

Vía: @mvertigo
Fuente: axure.com

UX StrategyDesigning For The Multifaceted User

By Stephanie Troeth ,March 12th, 2013

 

Designing with users in mind is a tricky thing. Not only does it require of us a sound understanding of who our users are, but the actual act of translating what we know about them into a well-designed product is not always an obvious or easy path. 

Currently, our user experience tools tend to focus on “who” users are. I believe this is a hangover from how we traditionally approached marketing and market research. A couple of years ago, I stumbled across a somewhat different method, which has proven useful in a few of my own projects. It has been particularly handy for building value propositions and for clarifying assumptions we make about our users’ behaviours. Most of all, I like how it helps with prioritizing product design decisions.
So, first, let me explain where I think our current toolset falls short, and then I’ll walk you through an example that uses this newer technique. By the end of this article, you should be ready to give it a try yourself.

(Smashing’s note: If you enjoy reading our articles, you'll love the Smashing eBook Library. Get immediate access to all Smashing eBooks with 70% discount and vote on the topics you’d like to learn more about. We’ll prepare eBooks that fit your needs best! Subscribe now!)

We Are Multifaceted

Put yourself in the shoes of a user for a moment. Imagine that a friend has introduced you to a new Facebook group about a subject you both like. If you are the shy sort, like me, you would lurk around for a little while. Once you became more familiar with the group’s dynamics, you might gradually become bold enough to post a comment or share an appropriate link.
Imagine also, then, that you’ve stumbled upon a blog post on a topic that you care strongly about. Someone has posted a comment that you completely disagree with — I’ll wager that, if you’re fired up, you would post almost immediately, rather than take the time to absorb previous posts. You remain the same person, yet your reaction to something will depend on what it is and what is happening at the time. This is normal.

Acting differently according to circumstance and context is natural. Image source.
What does this mean for us as designers? For me, it means that our deliverables right now are probably too prescriptive in their details about who the user is. We would probably do better to work towards a clearer understanding of the user’s varying contexts — contexts that would yield different behaviors and decisions.
In short, our current tools tend to focus on the person, not on predicting their reactions and, therefore, what we should effectively be designing for.

Personas, User Journeys, Mental Models?

Personas, when created properly based on research, distill what we know about a few key user profiles. They have many advantages, particularly in enabling a common language among stakeholders about who our users are. User journeys and experience maps show a potential path that a user can take through an application or website. They are great for understanding flows and for mapping user needs to functionality.
However, both of these tools, and others similarly derived, take on a depth-wise view of the user. User journeys can map out specifically what a user may do, too, but not take into account why they make certain decisions. With personas, you garner some degree of knowledge about users’ background contexts and activities, but they might contain more detail about particular user profiles than what you need to design app-wide features.
Consider what is actually involved in your typical design process. At any stage, your design needs to cater to different activity flows. As designers, we often have to collapse a complex range of user behaviors into quantifiable feature sets that could feasibly fit a product management schedule.
Between personas and user journeys, it would get unwieldy to explore and map these complex ranges of behavior in a way that wouldn’t give us a headache. The closest tool we have at our disposal is the mental model, with which you map out a user’s intentions and tasks. However, a generic use of mental models doesn’t always take different contexts into account at a glance.
The question remains, how can we better position a product or design an interface that maps onto users’ decision patterns when their behaviors and motivations span a spectrum?

Modelling User Groups

I finally found a semblance of the method I’d been looking for while gate-crashing a guest lecture by a friend and colleague, David Rollert, a designer with extensive experience.
Holding a roomful of smart design-engineering students at his attention, David showcased a number of user experience tools that day, including a way to model groups of users. Using a dating website as an example, he explained how we can define key “dimensions” of customer groups (figures 1 and 2 below). This first step is not dissimilar to what we often already do when creating personas. The following diagrams are quoted from David’s slide deck, with his blessing.

Figure 1. Demographic dimensions for a dating service.

Figure 2. Psychographic dimensions for a dating service.
This next step is where we start to look for patterns. Then, picking two of these dimensions, he showed an example of a 3 × 3 matrix where you could map someone’s immediate goal relative to the role they preferred to play (figure 3). In order to fill in the matrix, David asked the question, “What does each group need?”

Figure 3. Mapping target customers: What does each group need?
A similar technique of user modelling is mentioned in A Project Guide to UX Design by Russ Unger and Carolyn Chandler (chapter 6, page 90), but it barely spans a page. While emphasizing the need for real user research, this reference still aligns with what we’ve always done — grouping users according to who they are, rather than what the users want to do or what drives them.
I thought it was fascinating. Rather than asking the question of “who” these customer groups are, what if we were to ask different questions? Such as, “What do these groups of users want to do?” or “What do they need to know?” Over my next few projects, I started incorporating this technique into my own work with clients, and it has turned out to be a useful tool on many occasions.
Before getting much further, I want to point out that this method is not a deliverable. It is not something you just draw up and send over to your client or product manager for sign-off. It is a technique that is most effectively used in a workshop format with all stakeholders in the same room.

Exploring Our Assumptions About Users

“User” has become such a loaded word. We pile all our beliefs, interpretations and emotional baggage onto the word “user” and on what they would want. Having been on many teams, I’ve started to realize that it’s a common problem that not all stakeholders and team members understand the word “user” in the same way. This is why having a set of personas internally can help iron out the issue of language.
However, the problem with personas is that they place a particular user on a map discretely, but they are not necessarily the best high-level tool for looking at continuous spectrums of user contexts.
The matrix technique explores what we know and what we don’t know about our users by looking through the lens of contexts for their behaviors and motivations.
I’ve used this method to do the following:

• to establish key audiences;
• to understand or validate value propositions;
• to help prioritize research areas and product features — to identify what we already know and where we lack data;
• to pinpoint which features are vital.

It is essentially a structured brainstorming tool to make sense of user patterns. Best of all, it can be an easy way to unpack assumptions that each stakeholder is making about their users.

Step 1: Draw Your Matrix

In the many times I’ve since done this little thinking process with clients or workshop attendees, a 3 × 3 grid has worked best for me. This is probably because it gives enough variation without being too precise — thereby keeping us from getting analysis-paralysis.

Figure 4. A blank matrix.

Step 2: Identify Important Axes

The next step is to identify how many of these different “selves” of our users can exist in this system we are designing for.
Let’s talk about the example of a potential social app for runners. It’s a straightforward offering with which local runners can post routes and visiting runners can find routes. We could imagine virtual competitive elements; a runner might have previously posted a time that you are trying to beat on the same route. Or you might just want a scenic run as a way to explore a new city’s environments.
What kinds of behavioural attributes can we come up with for runners who would likely use this app? I tend to think in terms of “opposing” attributes. You might end up with a list looking like this and the corresponding user stories:

• explorative
  “I want a new way to experience this city through running.”
• competitive
  “I like to race against someone else, or against myself.”
• frequent
  “I run a lot, several times a week to every day.”
• occasional
  “I run once a week or less.”

Your axes might then look like this:

curious	↔	engaged
social	↔	individual
explorative	↔	competitive
frequent	↔	occasional
visitor	↔	local

Depending on the project you are working on, you may or may not know something about the users you are talking about. The team with which we explored the idea of this social app belonged to a sports shoe company and consisted entirely of runners who travel fairly frequently to run marathons. They had also done studies previously and gotten some ideas of the spectrum of novice runners to advanced runners, and some insight into the kinds of people who use an existing Web app that they produced.
As you go through this exercise, keep in mind what you know about your users and what you are presuming. From the list above, choose two axes that most interest you or that you think are worth exploring. Choosing might be difficult if you are just starting with this method; in which case, the best thing to do is to dive in and see what happens. If it doesn’t work or if ideas don’t seem to flow, change your axes and keep going.

Figure 5. A blank matrix with a pair of key axes.

Step 3: Identify Key Questions

I liken this step to a “magic 8 ball” process. Ask a question! I generally like, “What would these users want to do?” Or, even more simply, “What do they want?” The latter question would cover what users want to know and what they would want to do. You could also ask questions like, “How would they feel?” as a kind of emphatic exercise.
As you think up questions, keep a list handy. You’ll need it later.
In this example, let’s stick with “What can they do?” Or, from a user’s perspective, “What can I do with this app?”

Figure 6. A blank matrix with axes and a question.

Step 4: Fill It Up

Fill in the matrix as best you can. If you already have some insights from research, then mark which things you know for certain, as opposed to things you believe to be true but have nothing yet to back it up.
Generally, by the time you’ve filled the first matrix, you’ll have a fairly good idea of what information you already know about your users and what further research might be required.

Figure 7. Filling in a matrix.

Step 5: Iterate

Once you are done with the first matrix, set that aside, and draw another blank grid.
You can do one of two things:

1. Pick another question from your list, “What do these users need from us?”; or
2. Switch one of your axes to something different, but stick to the same question.

Start filling in the matrix again from the top. Remember, this is a brainstorming process. Putting down ideas that you can refine later is more important, so try to move rapidly through each iteration.
When you have done as much as you can with this iteration of the matrix, do the dance again: pick another question, or switch another axis.
It’s best when your team collectively chooses which questions and spectrums to think about.
Rinse and repeat. You’ll likely find that you can generate a lot of matrices in the space of just an hour, even if it may be a slow start at first.

Analysis And Key Insights

Once you have done a few of these, it is time to sit back and look for patterns. Let’s look at a few things that could emerge.

Assumptions vs. Knowledge

One important thing to remember — I cannot emphasize this enough — is when you and your team sit down and write this all out, what you have is merely a summary of a complex set of assumptions. As you manage your discussions around any insights, keep in mind that you are discussing various degrees of potential truth. This is an handy tactic to avoid getting into fights about too much detail!
With your matrices in hand, now is a very good time to see which set of users we already know about, and how confident we are in stating their needs. Obviously, it is also a very good time to identify which users we know nothing about. Have we already done any research on any of these user groups? Do we have any case studies that back up any of the answers we have listed in the matrices? In short, what do we know, and what don’t we know?
If we don’t have any evidence at hand to back up some of these user needs we have written down, then these are merely assumptions that we need to test. Assumptions are great because they serve as perfect design hypotheses. With this set of matrices, we can now identify what kind of user research we need to undertake to validate our assumptions.

Common Factors

Quite often you’ll notice that some questions generate similar results all the way down one column or one row. For example, in figure 7, we assumed that all “exploring” users would likely be interested in finding new routes regardless of whether they are locals or visitors and, similarly, that all “competitive” users would likely be interested in time-keeping.
Nothing is wrong with this; it just means that when we come to test for these needs, we will have some parameters to decide what kind of users we need to talk to. And when we come to design for these scenarios, these features will likely represent the “baseline” functionality to include in our app.

Priority and Dependencies

Sometimes, when you are trying to prioritize features, the practice of generating these user matrices can help you unpack some clear dependencies. In the case of our app, it became clear very quickly that the type of users who would populate the routes in a meaningful way would be locals — before being used by visitors. This means we needed to make the app attractive to local runners first, from all standpoints: in our feature set, in our communications and in our marketing.

Core Value Proposition

“Value proposition” is just a fancy way of describing the promise of the value you will be providing to customers. When you work through a set of matrices, you might find that you have a clearer view of what you are really promising users by addressing the ranges of users’ needs and contexts.
As for our little example, we had done a handful of matrices in less than an hour. Suddenly, one of the team members shouted excitedly, “‘I wish I knew where to run!’ That is the question we need to answer!”
I handed her the pen, and she scribbled the figure below (8) at the bottom of our last matrix. We knew then that, for this app to succeed, we would have to be able to answer this question, no matter what the user’s context — and that would be our core value proposition at its rawest. With this, we now had an excellent focus on the reasoning behind the design, and we’d just given ourselves a clear fundamental principle through some bottom-up thinking.

Figure 8. Value proposition.

Taking It Further

So, we have a set of matrices on our hands and some high-level analysis and insight. What next?
First, as with many workshop tools that encourage structured brainstorming, the process is as important as the result itself, possibly more so. As I stated in the beginning, this process doesn’t generate a pretty formatted deliverable — rather, it clarifies how we really think about our users.
Having gone through the process of generating these matrices and analyzing them, you should find that you can take on subsequent challenges with more clarity:

• Decide which user groups require more research, from which you can generate personas, mental models and user journeys for more detailed tasks, if required.
• Establish a product road map based on having identified which needs should be met across user groups, so that you can decide which features to design and build together.

One happy little byproduct of expressing user needs through such matrices is that you can delineate each of them into a corresponding user story, which fits nicely into an agile methodology. Using our app again as an example, we can create a user story like, “As a local runner, I want to find new routes to run.” You could then decide whether that user story is a validated user need; if so, you could transfer it into a design-then-build process.

When Does It Work Best?

I’ve successfully used this method in conjunction with others when I help startups figure out how to approach their user base, and also what they ought to build first. It fits neatly into methodologies such as the Lean Startup because it creates a structured basis for generating hypotheses. I’ve found it to be excellent both as a preliminary thinking tool to facilitate design decisions and as a synthesizing tool in the process of user research.
No doubt, as you explore this method, you may find other ways it works for you, or not at all. You could say that there is the right tool for every job, but sometimes the best tool is the one that gets the job done in the simplest and quickest way.
In this case, we have a very simple way to enable us to think about the ranges of user behaviors and motivations — while keeping their contexts in mind.

Further Reading

• Mental Models: Aligning Design Strategy With Human Behavior, Indy Young
• A Project Guide to UX Design, Russ Unger and Carolyn Chandler
• “User Stories: A Strategic Design Tool,” Penny Hagen and Michelle Gilmore
• User Stories Applied for Agile Software Development, Mike Cohn
• The Lean Startup, Eric Ries

Acknowledgements

Many thanks to David Rollert, who sparked the idea for the approach described in this article, and who I hold wholly responsible for opening my eyes to better ways to achieve great user experiences.
(al)

Tags: GuidelinesProcessUser Research

Stephanie Troeth User experience strategist, designer/researcher. Jewellery artist, photographer, improvisation musician, urban gardener, slow food aficionada, polyglot. Independent researcher on the perception of immigration and cultural bias. Lived on four continents, on four islands. Currently living in London, UK.

Source: uxdesign.smashingmagazine.com

Axure: como hacer que se borre el texto predefinido en un formulario cuando el usuario empieze a escribir en él

El ejemplo más común es cuando creamos un formulario de búsqueda, por ejemplo. El campo del formulario tiene escrito 'Buscar' por defecto. Pero queremos que cuando el usario comience a escribir en el mismo, desaparezca el texto 'Buscar' y aparezca sólo lo que el usuario escriba.
Para ello el formaulario debe de ser un dinamic panel y le damos la siguiente orden en el 'onKeyUp':

set text on widget (nombre de nuetro formulario) equal to ""

Free Wireframing Kits, UI Design Kits, PDFs and Resources

To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.
In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.

(Smashing’s note: If you are looking for a good book on mobile, this is the one. Our brand new book on best design and coding practices for mobile, Responsive Web design and UX design for mobile. Get it now!)

Free Mobile GUI PSD

Android GUI PSD
This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.

RIM Blackberry PSD
A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.

Android Sketch Stencil Version 1.0
A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.

All elements of Maemo 5 GUI in PSD
This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.

iPhone 4 GUI PSD (Retina Display)
GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.

iPad GUI Kit in PSD
This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.

Android 1.6 Wireframe stencil for Omnigraffle
Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.

Google Android GUI PSD
Here are the GUI elements of Android, built using vectors to scale.

iPad GUI PSD Kit
This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.

Google Android PSD
A stencil set for Google Android prototyping.

Fireworks template for Android
In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.

Sexy Vector Cell Phone
This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.

iPad Stencil for Omnigraffle
Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.

iPhone App Wireframe Template

Mobile – iPhone

iPhone GUI Elements
Some beautiful iPhone elements. All graphics are layered Photoshop files.

iPad and iPhone Design
Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.

Design Stencil for iPhone and iPad
A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.

Apple iPad fully editable PSD
A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.

Palm Pre GUI PSD
This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.

iPhone UI Vector Elements
Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.

iPad Vector GUI Elements: tabs buttons menus icons
This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

Free Social Networking GUI PSD Kits

Free Full-Layered Facebook GUI PSD Kit
The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.

Facebook GUI Free PSD Resource
A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.

Facebook Applications
A sizable collection of elements for creating wireframes for Facebook applications.

Omnigraffle Twitter Widget Stencil
This set includes a selection of useful Twitter widgets and badges.

Wireframing Kits

Best Practice UX Forms Stencil v1.1
A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.

Form Elements UI Kit
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Wireframe Shapes
Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

Wireframe kit for UI Designers
A set of various wireframes, such as product details, list of items, front page, mobile phone.

MBTI sketching paper for ideation
MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.

A4 sketching paper
This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.

Wireframe Magnets (DIY Kit)
This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.

Paper wireframe templates
The finished product include seven variations, as well as PSDs.

Wireframe template
A useful print-and-sketch template available for downloading.

iPad Idea Sheet
A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.

Scenario, Taskflow and Grid Sketch Sheets
A set of beautiful printable sheets for ideas and sketching

Free Photoshop browser template
Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.

Interactive Sketching Notation 0.1
The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.

MobileMe Full iPhone GUI
For use with WinterBoard, this is a beta release, so there may be unthemed elements.

Android Wireframe Templates (PDF)

Free Keynote UX Stencils

Advertising Stencil Kit
A set of very useful advertising stencils.

Dragnet website wireframes kit v 0.9
Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.

User Interface Design Framework
This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.

Browser Form Elements PSD
Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.

Sketching and Wireframing Kit
Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Photoshop Form Element Templates
This set includes all common form fields and mouse and link pointers, optimized for ease of use.

Web Browser Elements
This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.

UI Design Kit
This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.

Wireframe Symbols
This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.

Web UI Element Pack
This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.

Wireframe Kit for Google Drawings

OmniGraffle Stencil for Ext JS v3.0
This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.

Flex 3 Stencil
Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.

Aqua GUI
A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.

Flex Darkskin PSD UI
A beautiful set of 16 PSD files.

Web Wireframe Kit
Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.

UI Buttons and Icons
This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.

Quommunication Stencil Kit
This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.

Mac OS X Interface 2
A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.

OmniGraffle UX Template
The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).

Template for Blueprint CSS Comps
This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.

Apple Elements for OmniGraffle
Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.

DeviantART ID PSD Kit
These 15 professionally designed, fully customizable templates include MINI and Original ID templates.

Browser Screens and Website Elements
Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.

960 Grid Template for OmniGraffle

Control of different browsers for designers (download link)
A PSD library of controls in browser interfaces of Mozilla Firefox, Opera, Internet Explorer and Safari.

Useful Articles

• The Importance of Wireframing
  A comprehensive article on how wireframing plays an important role in information architecture
• The Future of Wireframes
  As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.
  
• Wireframing Is Not a Religion
  Wireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.
• Five Commandments for Wireframing
  Paul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.
• 20 Steps to Better Wireframing
  Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.

Resources and Round-Ups

• I Love Wireframes
  A tumblog dedicated to wireframes, prototypes and mock-ups.
• Wireframe Showcase
  This site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.
  
• Standard Screen Patterns for Web Interface Design
  Here are some principles and patterns for rich interactions.
• 50 Free UI and Web Design Wireframing Kits and Resources
  This post focuses on wireframing tools and standalone applications, as well as resources you need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements and mobile elements, which you can use in any graphics editor such as Photoshop or Illustrator, or with pen and paper.
• A Collection of Printable Sketch Templates and Sketch Books for Wireframing
  Here are 20 resources that you can use in the sketching phase of application development.
• A Collection of Printable Web Browser Sketching and Wireframe Templates
  All of these printable sketching templates have all been designed especially for Web designers. Each has an imprint of a Web browser (either Safari, Chrome or Firefox).
• Useful (Offline) Utensils and Toolkits for Designers
  Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? In this article, you will find a great list of free downloadable tools, as well as a collection of notepads and other products to purchase for offline planning and design.

Related Posts

• 35 Excellent Wireframing Resources
  Here are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.
• Free Printable Sketching, Wireframing and Note-Taking PDFs
  In this article, you will find a concise collection of ready-to-print sketching, wireframing and note-taking templates. Most are geared to the design community, but some could be used in any industry for any purpose.

Fuente: smashingmagazine.com