A wireframe is a basic visual guide of the user interface.

learn more… | top users | synonyms

38
votes
8answers
2k views

How to work with visual designers who treat wireframes as literal graphic suggestions?

Recently I started to face quite many cases on my client projects when a visual designer on the team produces design that looks like wireframes produced by me, only colored. Perhaps, the obvious ...
31
votes
45answers
2k views

What tools (ideally affordable ones) would folks recommend for creating a website wireframe? [closed]

What tools (ideally affordable ones) would folks recommend for creating a website wireframe? What tools have you used, and did you find them better than pen and paper?
21
votes
26answers
9k views

Which prototyping tools? [closed]

This links heavily into the following question: What are some great web-based prototyping tools? However I didn't want to limit the suggestions to "Web Based" tools, I have found and used the ...
20
votes
9answers
6k views

What techniques can I use to wireframe sites with responsive/fluid layouts?

How do you make wireframes for responsive or fluid layouts? Typical wireframing techniques are static and aren't well suited to showing how designs scale. What techniques exist to capture the dynamic ...
20
votes
7answers
2k views

Using color in wireframes…is this a “no no”?

Recently, an internal debate was started at work regarding the use of color in wireframes. A junior designer had finished a nice set of wireframes and was told at the end to turn everything into ...
20
votes
8answers
976 views

Quantifiable benefits of wireframing and prototyping?

I'm trying to come up with a few sources for quantifiable benefits of wireframing and prototyping, but I am having trouble finding results. I've seen plenty of "reduces requirements phase, improves ...
16
votes
11answers
6k views

Should wireframes or functional requirements be created first?

When should you create a functional requirements document for a website redesign project? Are there instances where an FRD would inform the wireframes? I'm used to functional requirements being ...
15
votes
11answers
9k views

What is the difference between Wireframing and prototyping

What is the difference between Wireframing and prototyping? Prototype should be interactive and Wire-frame Static? Am i right?
13
votes
5answers
210 views

At what point does interactive wireframing become redundant?

At what point does interactive wireframing become redundant? How much of the site do you really need to create (using tools such as Axure), before you can call it a working prototype? Working on a ...
12
votes
8answers
2k views

Are wireframes appropriate for requirements documentation?

The design, development, and testing folks are having a conversation at the moment about requirements. Part of the conversation is about the purpose and use of wireframes. Our change analyst is ...
11
votes
3answers
4k views

Printable sketch templates for Android phones

Can you recommend a printable sketch template ("idea sheet"/6up) for Android phones? Preferably, the template should contain several real-size screens to sketch on. Here's what I'm using for ...
10
votes
5answers
903 views

What is a wireframe?

Ok. I sort of know what is a wireframe, but I still need a lot of help. The question actually wants to ask how to get started when "designing" a wireframe for an online shop. I am doing an internship ...
10
votes
2answers
619 views

Caption below or above image for navigation purposes?

It was already discussed here that for layout purposes, where images and video appear on a web page, ordinary captions are probably best placed below the graphic — largely due to convention. I want ...
10
votes
3answers
396 views

What is the best way to map content to your information architecture deliverables?

I usually create a site map and wireframes as delivery but what is the best way to add info about what content (text, forms, images, videos etc) that should be included on the individual pages? Do ...
9
votes
9answers
2k views

Best practices for interactive prototypes deliverables?

I'm introducing Axure prototypes to a client for the first time. While Axure offers very detailed annotations and specs, I think it's overkill for this project—a scheduling application for internal ...
9
votes
11answers
2k views

How can animations be depicted in wireframes effectively?

I came across a question on Quora about jQuery animations in wireframes, which got me thinking about the general conventions in depicting any animation in static wireframes. I've been using either ...
9
votes
5answers
1k views

Pixel precision of wireframes?

I was asked to design a series of interactive wireframes using Axure for client who wanted to see how we would approach a design process. I made the designs in grey scale in relatively medium fidelity ...
9
votes
4answers
656 views

Whats the best way to present interface ideas to stakeholders?

My current preferred method of developing and testing ideas for interfaces I'm designing is creating interactive, sketchy, grayscale prototypes using Axure. I find using grayscale helps put the focus ...
9
votes
5answers
8k views

What tools can I use to design for Android 4.0 (Ice Cream Sandwich)? [closed]

I have to create a few prototypes (Balsamiq style) for Android 4.0 (ICS). I tried looking into tools etc from previous questions and from Google, but nothing seems to work for me. What tools can I ...
9
votes
6answers
1k views

Based on your experience, what are the capabilities and limitations of Axure? [closed]

Just started playing around with Axure, an integrated development environment for wireframes, prototypes, and specifications. Already I'm wondering why there's not integration for: business ...
9
votes
3answers
620 views

Google Drawing - Wireframing? [closed]

I just read an article about Google Drawing (part of Google Docs) and how useful it is for wireframing. Do you have experience with Google Drawing for wireframes, that could give feedback on how ...
8
votes
4answers
434 views

Making changes to existing products

I keep coming across this situation and was hoping someone would have more information on this: We have an existing product and I have been requested to "make something work better", so I start by ...
8
votes
5answers
264 views

advice for demoing wireframes to clients

I've been working on a web app, and have gotten the wireframes pretty far along, based on initial in-house research & discussion. The biz guys are eager to set up some demos of the wireframes to ...
8
votes
3answers
170 views

Is there any issues with approaching a website re-design from a mobile first perspective?

I've read the book Mobile First and agree with many of the points made. However, I still do not approach a project creating a set of mobile wireframes and then desktop. I still design the other way ...
8
votes
1answer
188 views

Modular approach taken to designing, how do you decide what needs to be wireframed?

Doing a corporate website redesign. Usually unique templates would be identified and those are the pages that would be wireframed instead of having to do every single page. What happens if the website ...
8
votes
2answers
356 views

How do you currently manage wireframes and storyboards for software releases?

I'm very new to wireframing in an Agile environment (2-week sprints). My wireframes and storyboards contain features for immediate release as well planning as for future releases. I'm using Visio, ...
8
votes
3answers
430 views

How do I represent conditional displays in wireframes?

I am working on a pretty big project. There are many use case scenarios possible for the different user types. I produced deliverables for the client which are essentially persona competition ...
7
votes
2answers
3k views

What is a scamp, UX? [closed]

Does anyone have a definition of the term "scamp", as used in the UX community? By context of use, it appears to be some kind of wireframe, but careless? Examples of actual scamps would also be very ...
7
votes
1answer
340 views

Where should navigation go for a linear process?

I'm working on a iPad project with a linear process. At the moment I have a 'link' style navigation sat at the top in the 'navigation bar'. I've been doing some early test and the verdict is ...
7
votes
2answers
811 views

Building Upon Prototype Code

The developers where I work are rather underwhelmed by the Word specification which can be output from Axure. They asked whether it could produce usable code that could be built upon. I have a kind ...
6
votes
6answers
1k views

Do high fidelity wireframes defeat the purpose?

Isn't the purpose of a wireframe to remove fidelity, assisting stakeholders in focusing on structure, architecture, content and general layout instead of the finer details about the graphic design? ...
6
votes
6answers
395 views

Interaction with a grid with complex cells

Problem definition: A grid where each column represents an attribute of a task and each row is a task One of the columns represents the progress reported on that task Multiple persons can be ...
6
votes
3answers
265 views

How to show links on wireframes during user testing?

We were conducting user tests, in which we gave the user some tasks to perform, on a set of interactive wireframes we had created. All links on the page were blue (shown below). Because the links ...
6
votes
4answers
273 views

How many interface designs are necessary beyond the initial mockup phase?

Every time we start a new software project at my company, we will go to great lengths figuring out the best and most user friendly interface possible. We often have many reasons for the decisions we ...
6
votes
2answers
189 views

How to design a wireframe logically?

I'd like to know what is the reasoning you go through when you wireframe a page. After having determined the different components of a page, I usually identify the primary/secondary contents and key ...
6
votes
4answers
2k views

Is there any HTML5 or Javascript based Wireframing tool which can work on iPad? [closed]

I want to keep my ipad with me to show my ideas to client because laptop is heavy and I think iPad can do this. Is there any HTML5 or Javascript based Wireframing tool which can work on iPad and can ...
5
votes
5answers
250 views

Send wireframes before a demonstration?

I'm an in-house UX Designer for a medium sized company, and big part of my job is building wireframes for inclusion in spec documents. Usually, the workflow goes something like this - the product ...
5
votes
6answers
2k views

Is it uncommon in the industry to use Inkscape to create wireframes? If yes why?

I've come across a lot of industry folk who do not know about the existence of Inkscape. I'm beginning to wonder if it hurts to say that I have used Inkscape for wireframes instead of Illustrator or ...
5
votes
7answers
1k views

What is the best (& quickest!) way to learn wire framing? [closed]

I need to get-up to wire-framing speed! What's the easiest way to learn? I have a good understanding of the concepts as a content manager, but my next role requires these additional skills.
5
votes
3answers
592 views

Wireframes first or after rough visual design sketches?

This is how I usually work: After completed business and user requirements gathering I have a brainstorming session together with the project group to come up with big, high-level ideas about the ...
5
votes
4answers
662 views

How much detail in wireframes?

How much detail should you put in your wireframes? I have been creating a lot lately and I usually end up putting a lot more detail in something that I am handing off to another designer; whereas if ...
5
votes
3answers
251 views

How to wireframe an efficient UI when the project manager refuses to spend time to conduct user research?

I often have to face this situation. I'm asked to wireframe UIs without having any information about the final users (their profiles, needs, preferences, and key tasks). First, I usually study ...
4
votes
4answers
321 views

Is there a convention for identifying final vs. placeholder text in wireframes?

I'm working on a bunch of wireframes where I have a mix of near-final and copy-guide text. Near-final copy are text that our visual designers should use in their designs verbatim, and copy-guides are ...
4
votes
5answers
171 views

Clients and mockups

I tend to define a mockup as a functional analysis made fancy by wrapping a visual coat around it so everybody can understand the logic and structure featured in the proposal. For us (UX, IxD, ...
4
votes
3answers
278 views

Visual language for fixed and fluid widths

Is there a common visual language (symbols) to highlight what parts of a web page that should be fixed or flexible when you're doing wireframes? For example - a web page consists of two columns. One ...
4
votes
4answers
185 views

Phone or Tablet mockups: chicken or the egg?

What form factor should we start with, when the boss asks for "mobile" wireframes? Should we choose phone, full-sized tablet, or "mini" tablet - and why? I am finding the Nexus 7 a good starting ...
4
votes
5answers
318 views

How to deliver wireframe changes to team members

I'm working in a small project team as an interaction designer. The product is in development and not released to the public yet. In the beginning all the product's features have been designed in ...
4
votes
2answers
304 views

What are some of the best wire framing pracitices/guidelines for mobile first approach for an ecommerce website?

I'm working on redesigning a 90's ecom website - the goal is to make it mobile phone/tablet friendly and we have decided to go the mobile first way because the website has more mobile visitors. My ...
4
votes
4answers
1k views

Best type of UI specifications for UI design?

I've had some problems handing over specifications that were wireframe designs + explanation of elements, to UI designers/artists. What tended to happen was that the first few screens created were ...
4
votes
3answers
353 views

Admin interfaces for reporting data

I am trying to design how an assigned administrator for a web app that manages students and audiobooks, can generate a report to view the data in longituginal graph. The admin can either view ...