Tag Info

Hot answers tagged

26

It's important for me to keep my prototyping in at least two threads, and three if I am trying to understand detailed interactions with animation. Thread 1: Flow, function, form, and data Starting on paper (actually usually a whiteboard design session with others). Focus on screen flow, then major functions and potential layouts of particularly important ...


26

I'm sure different people will have different views on how much or how little wireframes and prototypes overlap. What follows is how I approach the two: If you are considering an application or a website, and you look at the page level for example, a wireframe and a prototype are superficially the same things, from a physical perspective. They can both be ...


26

If you building a responsive site that has a couple of trigger widths (one version of the page at 1028px, one at 700px and one at 320px (with flexible widths between those trigger points of course) I suggest you work with two versions of the wireframes. One which is as detailed as usual and one that only contains the layout blocks. That way you could ...


18

If s/he's colouring in your wireframes then possibly you're providing them with too high a fidelity version. Try lowering the fidelity so that they have to put some interpretation into your wireframes while still respecting the IA requirements. Here's my crude example of high vs. low fidelity wireframes. /EDIT - Edited the mockup so it's not quite so ...


15

Could working more collaboratively overcome some of this so that the visual designer gets to understand the thinking behind the wireframe and so gets an understanding of what they are then able add over and above colour? On reading your description of a wireframe it sounds very final with little room for interpretation. If you are in the business of ...


14

Sounds like your colleagues got a little lost in assumptions without thinking about what the purpose of a wireframe is. Let's start with a loose definition provided by Wikipedia: A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in interface design to suggest the structure of a website ...


13

Well, for starters, if this is an internship, this question really should be directed to your mentors and coworkers. The point of the internship is to learn from them. That said, a wireframe is a sketch to communicate the idea/concept. The term comes from 3D modeling where the wireframe is the basic primitives of the object to give a sense of form and scale ...


13

This answer applies to most presentations, not just UX ones. A good presentation is like a story, where you take your audience on the journey that you want them to experience. If you send the presentation to them ahead of time, you lose the ability to take them on that journey. There are other potential negatives as well in that your audience may start ...


12

I have to agree with some of the other posters here. Paper and pencil (or pen or marker) is the best, cheapest way to start your prototyping. There's no reason to use something like Photoshop, because you aren't doing a full-blown design. The various software packages specifically for mockups and prototypes are all nice, but can become very expensive, and ...


12

My favourite illustration about design processes is the following: Don't even care about where does it come from, it's the long-forgotten old-style software design (when there wasn't separate UX and technical design, there was software engineering, and engineering processes), but it still holds the key. As you see, all start roughly at the beginning, but ...


11

For prototypes I'd say that you need to get to the level of detail where you are able to explain and illustrate the functionality in a way that is easy to understand. However, it is also of major importance that no-one believes your prototype to be a finished (or nearly finished) product. In that case you run the risk that your customer either thinks that ...


11

I think you risk the requirements vs design debate here. Wireframes are pretty important but I think it depends how you conceptualize them. The following is my own opinion but backed by pretty standard industry processes in my experience. Requirements should generally be written only because you are describing what a solution needs to do. They should be ...


10

I've found the most important thing is to set expectations. Stakeholders, especially those who are decision makers, tend to expect polished presentations, and so the idea of something being presented that looks rough and full of caveats simply seems wrong. In addition, make sure to: Put it in their terms, and make the purpose clear. Wait until you have ...


10

From a prototype standpoint, I find there to be a spectrum of options: paper wireframes <--------------------------------------------> working code How many steps you put in between those two ends of the spectrum depends on a number of things, but tends to be where things can get mired. I'm a big fan of keeping wireframes as lo-fi as possible. ...


10

The best and fastest way to learn is to wireframe. Make up a project and create a wireframe. Or make a wireframe of an existing site. Nothing beats practice for learning.


10

According to Wikipedia, in the UX context a Scamp is: Scamp - a first rough or mockup usually used in artworking terms (scamp up a design during a design brief). /EDIT - Another link discussing possible origins of the term: What is a Scamp? Finally, here are another load of definitions. Preliminary design or layout of an advertisement or other ...


10

It doesn't make any sense to measure a UX designer's progress at making wireframes. Wireframes are just a way to communicate with other people and can take many forms, from sketches to mockups to "interactive" wireframes produced with software like Axure. Their purpose is to represent ideas in a form that can be discussed with stakeholders, team members and ...


10

In my opinion having wireframes pixel imperfect is definitely the way to go. I prefer a sketchy style for two reasons: It drives my inspiration. By not worrying about creating perfectly looking wireframes it's easier to test different iterations and I'm much more able work out creative approaches than when creating strict and perfectly aligned wireframes. ...


9

I've read a very interesting article some time ago that was called "To sketch or not to sketch" - you should have a look: sketch question Whenever creativity is needed you should not limit your thoughts with tools you use. My personal choice for later cleanups is a tool close to the area I'm handling with. For HTML/CSS I usually start with simple layouts and ...


9

I personally am a big fan of Axure for rapid medium fidelity prototyping and I really like the fact that you have so many widgets you can pull in to create decently high fidelity mockups Android Library for Axure prototyping However for creating high fidelity and production level mockups,my tool of choice is Photoshop Android 4.0 Ice Cream Sandwich ...


9

As JohnGB says - titles above in this kind of scenario. But I'd be tempted to trial having the title overlay the images in order to suggest that you can click on either the title or the image. Yes the cursor change should be a cue as well but you can use a slight darkening/lightening of the title background as you hover over the image to give a further hint ...


8

Interesting that Adobe Fireworks has gotten little love on this site. Among other things, I've enjoyed Building in different states Master pages HTML objects, like links and icons, can be given markup that will export (internal & external links, metadata, all that goodness) Exports standards-compliant, CSS-based layouts with actual stylesheets Native ...


8

I personally use Balsamiq for the first few revisions, and then go straight to an HTML prototype using a CSS framework like Blueprint.


8

At UPA conference a half year ago, I was in a session in which people discussed tools: HTML vs Axure vs Balsamiq vs FlairBuilder for prototyping. Axure and Balsamiq got some votes. FlairBuilder gets my vote. I was live-twittering, and someone outside the session suggested we download and try the FlairBuilder demo. We did so on the fly, and were immediately ...



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