Favorite pasteboard/mockup solution?


(Jody Joy) #1

What are some suggestions for a great mockup board where you can throw ideas on and off with ease, shrink images quickly, add some opacity, etc. Basically just a quick workflow aid to test out design ideas for your website. I can image InDesign, but what others can folks suggest?

Just to clarify, no fancy wire framing, UI needed, etc., just for visual narrowing down of colors, image placement/selection, font selection, etc.


(Mathew Mitchell) #2

I think this depends on your very specific needs. I tend to use the following a lot:

  • OmniGraffle Pro: absolutely love it
  • Affinity Designer
  • Acorn

All of these are good tools, but depending on your specific needs/habits one may be much better for you, or perhaps none of them will fit for you.


(Dave) #3

You mentioned no “fancy wireframing” but I think Balsamiq is worth mentioning anyway. It’s a fantastic web-based mockup tool made for the Mac. It allows us to arrange pre-built widgets using a drag-and-drop WYSIWYG editor. I originally purchased OmniGraffle for mocking up new sites, but after using Balsamiq once, I relegated OG to creating org charts (it is a GREAT product, too!).


(Mathew Mitchell) #4

@Jody: BTW OmniGraffle just received a free minor-point update that allows it to work more closely with their relatively new StencilTown project (free collections of various figures to use). Lots of these are used for developing web-based ideas. Check out StencilTown here: https://stenciltown.omnigroup.com

It’s just a beginning effort, but I imagine stencil town will grow by a lot over the coming year.

@dave: Balsamic (which I didn’t know about) could be even better for the right need. Thanks for suggesting!


(Jody Joy) #5

Thank you everybody. Affinity Designer was 50% off and 2 days before I posted this I went ahead and purchased it since I was looking for an alternative to Illustrator. Matthew had it as a suggestion so I wanted to see what I could do with it. Without even knowing what to do I opened it up, saw there was a checkbox for artboard and set that. Then I just started throwing images and colors into the space. Exactly what I was looking for, which is a space to combine a bunch of images together to see which ones had the feel I was looking for, then to use SIP to grab colors from some of them to begin to build a palette. Then continue to use it as a simple space for images, color and text to begin roughing out a web page. Even though I really don’t know how to use it yet, it feels very intuitive and doesn’t seem to get in the way.

I have never used a wireframe approach, and wonder what the point of widgets is when designing. Wouldn’t that all just be another layer to not only learn, but get in the way- between your assets and your RW page? Curious to know how it fits into the workflow. I was looking for a tool to help me determine the asset choice (images, text, color, etc.) in the first place. Then RW becomes the way to build the structure.


(Mathew Mitchell) #6

@JodyThat’s great news. I really like Affinity Designer. BTW they have made a few good videos about how to use the software that might be worth exploring as well.


(Dave) #7

@Jody The wireframe approach is fantastic for figuring how how a page/site will look when completed…and for conveying that to the client. I especially love Balsamiq not just because it’s so incredibly easy to use, but because the widgets are slightly imperfect - so the finished product doesn’t get in the way. That is, since it’s not “perfect,” they make it easy to gauge the customer’s response, and to elicit honest feedback from them. In addition, they (or, at least Balsamiq’s) work great as a collaboration tool - so as the UX guy, I can easily design the overall look and feel while at the same time the project organizer can view them through the end-user’s eyes…all while our programmer is figuring how to make it all work.