We just launched a new product: Collectives on Stack Overflow. How do they work? Listen to learn more.
25

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 post: Paper Prototypes Tools often used: Paper, Pen, Markers Low Fidelity Prototypes Tools often used: Balsamiq, Axure High Fidelity Prototypes Tools ...


25

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 hierarchy of buttons and images are, etc The most commonly used colors are shades of grey. It is more neutral. That's the only feedback I have. When you show this to ...


18

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't have to. If the issue is that people enter items they sell under a different name than what's already in the system, then the proper solution would be a ...


15

"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 illustrate that you've thought the problem through and are looking for clarification. Over on EnglishLanguage.SE a similar question was asked: What is a Deck, ...


11

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 items become a tag


10

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 corporate colors (and fonts, icons, logos), the more they focused on those things. In my experience, color is the responsibility of the Visual Design team, not the ...


9

The straight-out answer to that is pretty simple: It's in the nature of a prototype to be beneficial. If it's not beneficial, then you're doing it wrong... If it's not beneficial, then it's not prototyping by definition... When you start prototyping, you need to know why you are prototyping. You need to know what the benefits will be. If you don't know ...


9

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 hypothesis. Such as, will this javascript function do the job? Is this layout clear enough Is this UU flow optimal Do users like this color palette? Typical ...


8

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 like user research, user stories and scenarios, etc. But lets focus on the wireframing like you ask. After your user (and client) research, there are a few steps:...


6

Start with the smallest form factor first (in your case the phone) since the lack of space will give you the opportunity to require you to define the primary focus of the app and what is the primary content that must be provided to allow the user to do his task and not allow you to add too much extraneous stuff. While moving up to higher form factors, ...


6

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. They are akin to blueprints. They can be offline diagrams or more often now, created in a dedicated piece of wire-framing software. A wire-frame is part of the ...


6

I don't see any reason that you couldn't approach a UI designer with the linked wireframes. However I would include some idea of what the product concept is when presenting your ideas. I see that you have a lot of piecemeal interactions (header like pinterest, layout like revision 3, etc) so you should make sure your pieces are serving your user in achieving ...


6

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 exact definitions and ways of differentiating them. I would say that "mock-up" to me sounds like something that is still in fairly early stages whilst a "...


6

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 can be created on paper, with a specific program or by coding up the dummy data and/or services. Mock-up is a class of designs that include both wireframes, hi-...


6

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 visual designer call a high fidelty visual design a mockup, some UX people call a very low fidelity thing a mockup. I recommend to show examples if you want to ...


6

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 course increases times, and sometimes affecting the initial research because data is no longer accurate. What I mean with this is that your list and process ...


6

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 for wireframe tool repos and then looking at those with lots of stars.


5

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 state what a product needs, not the solution. Also are your wireframes literally ideation pieces for discussion, or are you striving towards fully functional ...


5

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 the point across, great. If it's a whiteboard sketch that you and the developer make together and take a picture of, go with it. (My favorite) Both of ...


5

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 Design for Android and is very easy to make almost perfect mockups and then replicate them on Photoshop/ Sketch. It can be done on the go and can be shared as ...


5

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 Adobe XD or InVision to make a hi-fi wireframe/mockup/prototype. Iterate here until all the problems are flushed out. Avoid using random data at all costs. ...


4

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 page. Prototyping is an effective tool for validation and as a way to test your development company. Wireframing Wireframing is probably the most well ...


4

In a small fast paced agency ...waterfall doesn't work too well. Which you've experienced first hand. ;) Agile is the way to go. Be it formal, or completely informal. The ultimate goal in either case is to get out of the 'step by step' mentality of wireframes -> visual design -> development. The best way to get out of that is to make sure all 3 things ...


4

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 issues above. To his list I would also add: Structure: understand how the heading structure works on the page, where lists are, WAI ARIA Landmarks and data ...


4

Decisions of color usage, specific color scheme, etc. are beyond low fidelity wireframe. Lo-fi wireframes are great for ideas generation, communication and problem exploration. Concentrating on concrete details will loose your focus on concept, which is more important at this stage. And be ready for some of your sketches to be throwed out, that could be ...


4

A flowchart is a flowchart regardless of which device it is viewed on.


4

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 specified. It would be a pattern for the accurate construction of all UI's in the system. Google Material Design 'red-line' specification wireframe abstracts ...


4

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-colored pencils available. Use that software to render any UI elements and dummy text in pale grays, so that they are clearly inferior to the Clean Bold Dark Type ...


4

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 important and that a good design can influence your visitor, but it has to come second. After all content has been determined you'll be better able to design it. You ...


4

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 drives the design, with my push-back to keep it simple, clear, and intuitive. We collaborate on interaction effects and page layouts. (I've never determined a ...


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