UI layout/simulation tools

Just wondering what tools folks use for UI layout/design/simulation. I know the paper-based layout is a great way to get started, but at some point getting more specific and visual is important.

So… working with a woman who is not a technical person, but knows her field. We are looking for a good layout/simulation tool for smartphone apps. She’s tried Balsamiq (not enough detail; hard to use), and FluidUI (so far the best: easy to use; non-techy; drag and drop) and I’ve seen ForeUI (seems more desktop-y than smartphone). Simulation is important to be able to review how the app actually works.

Suggestions, anyone? Thanks much…

1 Like

This is something we talk about a lot, and something we change a lot. At thoughtbot, Photoshop has pretty much completely fallen out of favor — mostly because it prevents us from leveraging fluidity and animation in the ideation stage. Photoshop was great when image assets were more important to our finished products, and responsive design didn’t exist; you could export assets directly from the mockup. Now that we construct almost everything in CSS, the layer between Photoshop and a real page is thicker and much more annoying. Not to mention Photoshop’s terrible text rendering.

The ability to think through and iterate on things like animation and fluidity in the early stages of a design is critical if you want to use them in a meaningful way.

A lot of the designers here have adopted sketch http://www.bohemiancoding.com/sketch/ for high fidelity designs, since you can export vectors and since the interface is faster and nicer than illustrator (and since fireworks in being discontinued.) The design firm Upstatement used indesign to do mockups for the Boston Globe website — indesign has a tool to preview responsive design. Lastly, Adobe is developing a responsive-geared wysiwyg tool called edge reflow http://html.adobe.com/edge/reflow. All of these options however still prevent us from utilizing the power of the web platform in the ideation stage.

I’ve been a big advocate of designing in browser, and while this allows you to use animation, the box model, and fluidity easily, the mental layer between writing CSS and seeing its result is even bigger than any of the layers between a static visual mockup and a live page. Bret Victor has a good talk on why being able to directly manipulate your product is awesome http://vimeo.com/64895205.

So I guess to summarize, I don’t think any tool is perfect, but depending on what’s important to you, you might find a tool that allows for mocking up one kind of thing well.

Thanks, @edwin… I especially appreciate the link to Bret Victor’s talk… I’m a big fan of his. His Inventing on Principle presentation was awesome.

That’s a great talk. He’s very inspirational.

Personally I have found myself using Sketch more and more these days. In the past my toolbox always had OmniGraffle for wireframes and Photoshop for visual design. While I still rely on both aspects these days I find that Sketch allows me to work more seamlessly as I define the UX first and often jump straight into code within the browser, if a visual style is set, which often happens in product design. However, for a lot of work you can’t throw visual design out the window.

I find that depending on the project I design different visual assets. I often find myself doing a small bit of idea generation and visual work within Sketch, but then once I have a clear direction I move to code, polishing and iterating on that style as I build out different aspects.

By doing this I rely more on my wireframes for overall layout beyond just gray boxes showing where items might go. Things such as type hierarchy and such come into play as I want to make sure the layout is nailed down before I code. Because of this Sketch allows me to do some pretty hi-fidelity wireframes, without going overboard on the visual side. Remember, the goal of wireframes is to define your UX first, not your visual style.

I still find I can experiment with the visual style and iterate on ideas quicker within Sketch. This is where I start adding color, texture, contrast, and playing with type. Since I did the wireframe within Sketch, it’s easy to move forward based off what I already laid out.

Another great thing I love about Sketch is Artboards. Artboards allow you to have one document but with numerous areas for your work. This allows me to zoom in on one screen, but then zoom out and see the overall flow as I move from one page to the other.

Beyond Sketch If I’m demonstrating a flow to non-technical users or want them to experience it in a more realistic manner than “ok once you click this button fumbling through pages or a pdf go to page 3 of the document.” I export my wireframes as a PDF then create a clickable PDF within Adobe Acrobat. This allows users to experience the design flows without moving to code right away. A great app that takes this one step further is invisionapp.com. I’ve found inVision allows users to click through and experience the flows best, and leave comments/feedback as they go through things. While I try to move to the browser as quick as possible I find clickable PDFs and things such as inVision allow you to toss around tons of ideas before generating lots of HTML/CSS that could just get thrown away if the idea is garbage. This works really well when honing in on key features and other aspects of the project, but sometimes doesn’t scale to larger projects.

In the end the goal is always to create the best experience possible first by defining user flows and information hierarchy. Remember this is my own workflow, and I find myself tweaking it all the time. What might work for me, might not work for others. Project requirements might require a more refined prototype, in which code in the browser might be best, others might require a less refined one. Find what works for you and always be open to trying new techniques and tools.

As always, feel free to reach out with questions as I tend to get rambly and excited when talking process.