11

There may not be a "typical" UX Designer, but if there was a normal one, what is the main tool or tools that is in front of them as they craft, plan, think, and create an incredible UX that shows real forward thinking? (As you can see, I'm asking as a relative novice.)

  • Do they do much of their thinking in mockup form, producing wireframes or flat, unclickable images of the interfaces, and then hand that to coders, explaining verbally what would pop up when this or that box has text entered, etc?

  • I am guessing that though many UX people also code, it is still not typical for them to do their thinking/experimenting by coding each idea themself?

  • So, what's the basic tool you guys use for creation? And what is your main deliverable to hand over to the next person in your chain (coders etc)?

Improve this question
1
  • Seriously great answers to this are rolling in. It would be hard to anoint one of them as the right answer. But I am stealing these ideas left and right.
    – estephan500
    Jun 17, 2011 at 12:27

11 Answers 11

Reset to default
6

Like Paul Swain, I usually have in front of me Word, InDesign, Illustrator, Photoshop and I hate to say it powerpoint (without the bullets) and lots of paper and pens, the templates I use vary week by week and indeed the Konigi ones are great.

I'm against apps that are 'for' wireframing, prototyping and the like as everyone I've tried I fell constrained by the application having my thoughts constrained by the options the tool offers me and so I much prefer pens and paper and clients do to as they can sketch along with us collaborating during workshops we run.

These apps of course have a place and time but in early stages of a design process everything needs to be considered in a disposable manor, once somethings digital internal management and more so clients often feel that its final and costly to change.

I've also found that knowing my way around microsoft scripting (VB) for excel and word has allowed me to save endless hours documenting, collating and forming opinions from user research and content analysis that would have otherwise never have been discovered in the time allotted.

Improve this answer
0
6

I'm with Khal and Paul here: Paper and Pencil. I'm not an "official" designer or anything, but when i sit down to cook up a design for a site, I ususally resort to paper and pencil - firstly, because i'm easily distracted and if i were to do it on the computer i would never finish. Secondly, I can work fastest with paper and pencil: It's easiest to just scratch a design out real quick. I then put that layout into code and get the layout in the web browser. Then, as Khal said, i check that layout against friends and other websites, checking it's "professionalism" but also it's creativity. Finally, I add in color schemes and content. So really, all i need is:

  • Pencil
  • Graph Paper
  • Ruler
  • Laptop with JSFiddle, Visual Studio, and Google Chrome (w/ dev tools)
Improve this answer
2
  • 1
    +1. Snap. (with IE and Firefox around too to check the javascript is cross browser).
    – James Crook
    Jun 16, 2011 at 21:35
  • @James yep, exactly. I tend to design/develop for Chrome (knowing that it will work exactly the same in Safari), then tweak to work across FF4 and IE9 (with all the older browsers last)
    – Thomas Shields
    Jun 16, 2011 at 21:47
4

To the many good answers here I would add:

  • whiteboard & markers
  • stickie notes
  • butcher paper (or other large sheets)

For early stages when you're still trying to work out the personas and user stories, our UX folks find these tools essential.

Improve this answer
2
  • +1 for large sheets of paper. A sketchboard on the wall for everyone to see with personas, flows and ideas attached is a really valuable tool.
    – Khal Weir
    Jun 17, 2011 at 10:58
  • @Khal, and if you're still working out where some of the concepts go (like when doing concept mapping), you can write things on stickie notes so you can move them around on the large sheet, then take the whole sheet of paper with you when you're done.
    – Monica Cellio
    Jun 17, 2011 at 14:20
4

I'm never far from :

  • my notepad (for taking notes while interviewing or observing users)
  • sketchbook, Sharpies and Promarker pens (for sketching ideas)
  • Axure (for creating prototypes)
  • Visio (for creating flow and UML diagrams)
  • Google Analytics (for current usage data)
  • developers and designers on my team (for bouncing ideas off)
  • books (I have a collection of UX related books in my Kindle account for reference and inspiration)
  • a web browser (ready to hit a collection of bookmarks for inspiration or research)

My deliverables depend on the stage of the project, it could be a Word or Excel file of findings, a sketch of a new interface or a fully interactive prototype which I pass on to stakeholders or developers where appropriate.

I personally don't code any more, but if you are comfortable and quick writing HTML/JS there no reason you shouldn't prototype in code.

Improve this answer
4

The most important tool I use is my brain (and a quite place to think!). I will work through as much of the design in my head first before even touching a piece of paper or software tool. This allows me to quickly validate designs so I don't waste time with wire frames until I am pretty sure its going to work. Once I am confident it will work I will move to a prototying/wire frame package that suits the thing I am trying to design. This will help me refine my ideas further.

If I am planning to use standard controls and interactions I will use Balsamiq Mock ups for this. Its fast, cheap and takes the pain out of wire framing so you can concentrate on designing, not using the tool. If I am planning to use non-standard interactions I will use Fireworks (and maybe sketch some of the interactions first) as it is much more powerful. Fireworks although powerful can be quite frustrating and time consuming to use so I only use it if design requires it.

If the interactions are suitably complex I will also use Visio to map out any processes that help explain the interactions further.

When the wireframnes are finished I then use my colleagues to critique and suggest improvements. After any reworking I will send the wire frames off to the graphics department to be beautified. When everyone is happy the designs will then be sent to the developers.

Improve this answer
3

It depends on the type of work - at the moment I'm working on a competitor analysis so it's Word all the way. For the more creative tasks, I do most of my thinking in my sketch book.

It's very rough and lets me get my ideas down quickly. If these sketches are going client side, I'll do them on paper (I usually use the Konigi graph templates). I can also use Pro Markers on these documents - clients seem to love them.

From there, I'll put them into Axure and present prototypes that way. If there's unique functionality, I'd normal describe it through annotations. I do code myself but nothing too fancy. I'll head to the tech team if I need coding skills now = LAZY!

If it's going to be more of an offline delivery, I'll use Illustrator for wireframing and include the annotations alongside.

So main tools are Sketchbook! and Axure - I usually hand over wireframes to the design team for the first look and feels.

Improve this answer
3
  1. Paper Pencil
  2. FireWorks
  3. Color pic - for color picks
  4. Aptana ( HTML & CSS )
  5. Firefox with Fire Bug

It depends up on visual design vs functional stages...

When you are at functional stage a simple paper & pencil is really useful. When you move on to your desktop you can start with blocks. I use FireWorks as it gives me clean tools to build basic layouts & let me play around with master pages etc.

Once the design is complete visually I fire up Aptana & start my HTML CSS work, I cannot complete my work without FireFox & Fire Bug.

Improve this answer
2

Coworkers.

Users.

Pads of paper. Email.

Improve this answer
2

Notebook - for taking notes! Sticky notes - for brainstorming Sketchpad - with assorted pens Axure and visio for wireframing/creating flows etc. Many web browsers - with favorite online resources to hand Books - for reference and information Notepad++ dreamweaver - for creating prototypes

Improve this answer
2
  • Google (including google images)
  • Paper and my favourite pencil
  • Stickies
  • Whiteboard and working coloured markers
  • A bookshelf of great books for reference and inspiration - especially when I think some of my thoughts are starting to get stuck in a rut.
  • Inkscape
  • Paint.net
  • Critiques from people who are not friends or family (not always possible!)
  • Word
  • Excel
  • XMind
  • Last but maybe not least: some good music on Spotify and a decent coffee!

Often I string together mocked up screenshots (created using Inkscape) of successive stages of a proposed ui using simple html pages (using image maps and links) to simulate interactive use. It's a higher form of storyboarding - customers love this and it helps their management buy-in because the 'get' it - plus it's a great guide to developers.

Remember the more room there is for misinterpretation, misunderstanding, miscommunication and mis-everything-else, the more likely your deliverables won't do the job you might have intended them to.

Improve this answer
1

Like everyone else, pen and paper. As for software, it really depends on what computer I'm using but typically some mix of:

  • code slinging: Kod, Notepad++, Xcode, or DreamWeaver
  • wireframing: mostly pen and paper, though I'll use almost any software if told too
  • visual design: Photoshop, Pixelmator, Fireworks, Illustrator, InkScape
  • as many web browser and mobile device simulators as I can get/need for the task
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.