What are folks out there using for web/ui design? For the most part we use PowerPoint at my company. The UI folks will mock up a screen in PowerPoint and we (the development group) will take it from there. So, for a side gig of mine I decided to do some mock ups to show the client prior to dev and I'm quickly feeling that PowerPoint is not the right tool for this.
What are you using for this type of stuff - some other software? pen/paper?
Currently we go from paper to whiteboard to Photoshop/Illustrator then to code, sometimes skipping the Photoshop step.
I always start out with pencil and paper. It's the quickest/easiest mocking tool, and also the most forgiving. After getting the client to sign-off on the basic idea, I then mock it up in more detail in Photoshop. Once they're happy with that, I start coding!
Visio Wireframes -> PSDs (comps) -> HTML/CSS is the standard where I work...
When dealing with clients, I've found that using something informal is best.
The more functional it looks, the more functional non-technical people will think it is. They don't understand why you have to spend so much time to take that photoshop mockup and make it into HTML, CSS, and JavaScript that looks almost exactly the same.
However, if you're sketching on paper or a whiteboard, everyone understands that it's purely conceptual.
Our designers usually do the basic wireframes in Visio and the detailed design in photoshop / css.
I / we find Visio to be a good tool if you just want to throw something quick together to show the customer.
We used to mock-up wireframes in visio, but then I came accross Axure RP Pro. This is a really easy to use prototyping system. You can put together your site layouts using a drag-and-drop editor, and tie in some pretty neat basic functionality with ease.
My project co-ordinators use it quite a lot and get clients to sign off the basics before we proceed to visual design / technical development. I find it works really well as no matter how clearly you write a spec - clients always seem to struggle with them. It's much better to have something they can see!
For client work we do photoshop mocks, keeping everything pretty rough.
Anything internal goes from paper to code. Honestly, making fancy mocks in photoshop or any other program is a waste of time that could be spent producing something functional. The only reason we do client mocks is so that we can get immediate feedback if we are on the right track.
I think nothing (in the near future at least) will beat the pen and paper or the whiteboard (heck there is even a book about it), but when working on an environment where you need to have deliverables and it is key to be able of document and communicate the UI and UX approaches of a project, you will most likely end up having to use some sort of technology artifacts to complete your work.
In my case, I always go for wire frames sketched either using Adobe Fireworks or OmniGraffle for such a task; by using this approach I allow myself to correctly communicate both the main visual elements and its architecture as well as providing documentation on the approximate measures of the layout and its topology.
In the case motion is involved, then a really simple motion test build using After Effects, Flash or Silverlight will do and will at the same time set expectations in how the stage will behave once implemented.
Keep in mind that these tests should exists for the solely purpose of communicate layout and motion and not to mock in any way a functional prototype. This artifacts should be limited to the motion and behavior in question and be ready to be discarded and used only as reference while developing... no warm attachments to this kind of stuff is key ;)
I know other companies and people have their own way of approaching such task, I have use this for over 2 years and has worked wonders.
My 2 cents.
Cheers!
A great screenshot tool that is much simpler and requires less know-how than Photoshop is SnagIt. It is excellent for taking screenshots of windows, dialog boxes, and even scrolling windows, like long web pages. It has some convenient export options and it's very easy to modify page elements using their box, text and stamp tools. Not the ultimate in graphic design, but excellent for mockups.
Our process:
I have read quite a bit recently about what an ALA article calls Sketching in Code, the idea of producing your mockups in html/javascript.
Proponents of this way of working say that proficient JS developers should be able to throw something together that gives a good impression of the behaviour of the site you're developing.
This gives two advantages:
Balsamiq Mockups looks interesting. After doing some Mockups, I think that the best approach is to use something really abstract at the beginning to have the focus on the abstract functionality.
That's why I don't like creating a "real" UI at the beginning because it takes (me) a lot longer to create a "real" UI Mockup than a "Napkin" one as I don't have to worry about proper Alignment and all the small, yet time consuming design details that take a lot of time.
Adobe Fireworks is awesome for creating simple mockups. It is better than Photoshop because it uses vector shapes which can be resized without image quality loss. It also has the easiest tools for handling vector shapes that I have seen on a program.
Our consultants use Mockup Screens ("Quick and Easy Screen Prototypes"). It's easy to alter screens and the scetches make clear that this is only a design.
Another tool in this area is WireframeSketcher. It's an Eclipse plugin for quickly creating UI mockups and prototypes.
We have spent quite some time selecting from this category of tools lately for a large project, so have some current experience with most of them
Balsamiq and iPlotz are getting all the attention lately and they are both very good tools for simple sketchy" look mockups, and while we found the sketchy/hard-drawn look a HUGE benefit (well written about elsewhere) we also wanted more interactive demo features.
We then found FlairBuilder and it does what the others do just as quickly (also an AIR app) except that it goes much further (if you want it to) and creates interactive demos that actually run ie. the controls are all real windows controls.
My main issue was that is doesnt have a "sketchy" look, and after a few pleasant exhanges with the sole developer he has agreed to add this as a theme which I believe is almost done.
Why having a sketchy/pencil theme its so valuable is causing reviewers to not focus on detail (colors/fonts/alignment etc) and more on function & concepts, as well as to stop manager thinking that its "almost done" :-)
See the history comment with the developer here
getsatisfaction.com/.../pencil_sketch_styles_as_used_by_balsamiq_and_iplotz
We own licences for iPlotz, Mockups, Axure and now FlairBuilder, and find we use FlairBuilder the most now.
But each to their own!
try JumpCharts. i used them once and liked them... would have used them again if i didn't find a full-time gig
We have had good experiences with Axure (http://www.axure.com/). Prototyping is easy, and there some great added value in having clickable wireframe models of the application.
I recommend using Google doc drawing tool, its simply awesome and easy to share and update.
Excellent for mocking up a small number of web pages, showing them to your boss, then getting approval before starting work.
Used it myself. I was very happy with it.
Sketches on paper, cut into components and held to a board/wall via small round magnets. This gives the power of pencil-and-paper methods but gives you faux "drag-and-drop" reorganizing support.