25 votes
Accepted

Logical colors for a wireframe

Logical colors would be to show visual hierarchy with a range of one color. Exactly like you did in your wireframe. I can see clearly how text is built (title vs body), what the position and ...
user avatar
24 votes
Accepted

What is the name for wireframing in the browser?

Wireframing in an app is called Wireframe Developing the wireframes to interactive demos (e.g.Bootstrap) is called Prototyping Edit: Helpful prototype types from the slides @Jose mentioned in his ...
user avatar
  • 16.1k
18 votes
Accepted

How to handle an enormous list of checkboxes?

This is where UX is being tasked to fix something that isn't fixable at the UX level. I'd go as far to say this is where a back end system is unfairly asking a user to make decisions that they shouldn'...
user avatar
  • 41.6k
15 votes
Accepted

What is a wireframe deck?

"Wireframe deck" is not an industry wide term that refers to a specific presentation format. Your best bet would be to seek a definition from the employer, possibly giving them a few examples so as to ...
user avatar
11 votes

How to handle an enormous list of checkboxes?

I would try something like GMail tags. You have a filter and the list of checkboxes inside a scroll area Other good option is something like Pocket Chrome plugin You have a filter and the selected ...
user avatar
10 votes

Logical colors for a wireframe

I always made wireframes as low-res as possible to encourage the client to focus on structures and interactions rather than colors, fonts, and copy. So I stuck to greyscale. The closer to their ...
user avatar
  • 8,974
9 votes

What is the name for wireframing in the browser?

You can use a wireframe as a prototype, but not all wireframes are prototypes. Wireframe = a diagram that uses black and white lines only and no color. Prototype = anything that helps you test a ...
user avatar
8 votes
Accepted

Is there a standard to wireframing?

I don't think there is a standard, but (for me personally) there are a few steps. Most noticeable are the low fidelity and high fidelity steps. There are ofcourse a few extra steps before and after ...
user avatar
7 votes
Accepted

So I created personas. What's next?

Well, it all depends. Each project has its particularities, you'll have different resources, time, budget and so on. There's always the temptation to do more and to over analyse to play safe, which of ...
user avatar
  • 32.1k
7 votes
Accepted

What open source and free wireframing tools are there?

MyDraft - https://mydraft.cc/ - https://github.com/mydraft-cc/ui - Can be used online, written in typescript, react and redux, uses font awesome library for icons. I found it by searching on github ...
user avatar
  • 129
6 votes

What is the difference between wireframing and prototyping?

A wire frame is used to capture requirements, share ideas and to begin to outline the specification and structure. They can be limited to single page diagrams, or more commonly now - a full site. ...
user avatar
  • 61
6 votes

The difference between mock-up, prototype and wireframe

A wireframe is a outline sketch of layout. It doesn't look anything like the real finished product. It just shows where the various elements will be. A prototype and a mock-up....there we don't have ...
user avatar
6 votes
Accepted

The difference between mock-up, prototype and wireframe

Wireframes are schematics that display basic elements without going into details. Prototype is a detailed simulation of the future design, often to a point where it's mimicking the interaction. It ...
user avatar
  • 4,893
6 votes

The difference between mock-up, prototype and wireframe

In my 8 years of experience I have never found that this is used consistently, you cannot rely on meaning the same thing if someone talk about a wireframe or a mockup. Especially about Mockups: Some ...
user avatar
6 votes

Should wireframes be tested?

A rule of thumb you can consider is: Is the hifi mockup significantly more attractive than the product you're trying to improve? If you're asking a user to compare a shiny hifi concept to a terrible ...
user avatar
  • 8,027
5 votes

Should wireframes or functional requirements be created first?

When you wireframe first, you are defining a solution before you know what you are trying to resolve. You have to define the problem before you know how to design the solution. Hence, requirements ...
user avatar
  • 51
5 votes

Clients and mockups

I employ a technique I call "MVW" Minimum Viable Wireframes : Put the least amount of effort into the wireframe that conveys the design and purpose to it's intended audience. If a napkin sketch gets ...
user avatar
  • 4,734
5 votes

How to better do wireframes for material design?

A good way to wireframe for Material Design on Android would be to use a Wireframing tool for Android itself - WireFlow by Ludomade. It is brilliantly developed and offers most shapes used in Material ...
user avatar
5 votes

How abstract/specific are your wireframes?

I feel like the question is very broad but I'll try to tackle it in the best way possible. TL; DR Start with low-fi wireframes to iron out the features and interactions. Use a prototype tool like ...
user avatar
4 votes

Designing wireframes keeping accessibility guidelines in mind

I've been working with UX teams to help establish good practices with regards to including accessibility early on as well as documenting some issues in wireframes and designs. Matt Obee covered keys ...
user avatar
4 votes

What is the difference between wireframing and prototyping?

Wireframing and prototyping are exceptionally useful and underused tools in the tech world. Website and app wireframes are useful to determine the layout and overall look and feel of each screen or ...
user avatar
4 votes

Blueprint VS WireFrame

UX terms are evolving, as I currently understand it blueprint is a design guidelines or style guide that must apply to all UI's in a system. It will have actual proportions for padding, icons, layout ...
user avatar
  • 5,279
4 votes

Clients and mockups

This may sound funny but I am not joking... Make crummy looking mockups. Find some design software that lets you render your ideas as imitation pencil-drawings, preferably one with multiple-...
user avatar
  • 1,011
4 votes
Accepted

Should a style guide be defined before wireframes are started

I've always been of opinion that the right content, flow and interaction design is more important than how something looks. This does not diminish the fact that a solid brand experience is very ...
user avatar
4 votes

Should UI designer and UX designer work on wireframe together?

The UX Designer, in my experience, is responsible for creating wireframes. However, you'll collaborate with everyone on the project team as you do it. I've worked on fancy sites where the UI designer ...
user avatar
  • 8,974
4 votes

Annotating wireframes in sketch - how do you do it?

Assuming this is for dev handover/client engagement. There are a couple of things you can do here that I do/have done: Look into software: Zeplin is great for this as it automatically numbers ...
user avatar
  • 2,644
4 votes

Should wireframes be tested?

In my view this depends a lot on What the maturity of your design is and Where the biggest uncertainties and risks remain in your design that you want to minimize through testing. Generally, testing ...
user avatar
3 votes

Designing wireframes to be implemented as designed

After years in the field as a designer, a design executive, and a PM, at both large and small companies, unfortunately there isn't a single good answer on how to get engineering to build the design as ...
user avatar
  • 1,071
3 votes
Accepted

Explaining Wireframes to Remote Clients Sent via Email?

Whenever I create a wireframe document, I make enough space on the right for annotations. Annotations are really nice so you can explain what an element is and what it could do in certain scenarios. ...
user avatar
  • 5,385
3 votes

Difference in designing wireframes for apps in Nexus 5 like phones with virtual navigation bar and other phones with hardware navigation buttons

First off, wireframes are not high-fidelity screens, so striving pixel perfection should not be the main goal. Having said that, Android screens are dependant on size as well as density. Reading up ...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible