3

I need to create a realistic mock-up for an app. Are there mockup tools to create mockups that look like a final app?

(Preferably for Mac OS Cocoa Apps, on any OS: Linux, Windows or Mac)

If not, where could I find PSDs to create such mock-ups with Photoshop?

Improve this question
3

4 Answers 4

Reset to default
4

I depends on the what you're mocking up (mobile v. pc). I find the Webalys PSD's pretty useful, and they have the added advantage that they're free.

Axure is another common recommendation.

If you're creating realistic mockups, why not just use good old HTML, CSS and JS? Mockups are useful as a rough tool to understand interaction, and for that high levels of detail are often a distraction. Consider keeping your mockups low fidelity and then moving straight from mockups to actual product.

Improve this answer
1
  • 2
    I would also recommend low-fidelity prototypes so users don't get fixated on how it looks but how it works. Making it look done can be counterproductive if you want changes made.
    – Ben Brocka
    Sep 16, 2011 at 13:52
4

If you want to produce a very quick, interactive, no-code prototype then you could try Flowella which is completely free and made by Nokia. It's available here

and all you do is set a screen size, load in PNGs of all your screens and then create touch points around the buttons and drag to link them to their destinations. The final output is an interactive flash movie that can be used in a browser or loaded on a mobile phone for testing.

It's great and well worth a look.

Improve this answer
3
  • "flash movie that can be used in a browser or loaded on a mobile phone for testing" unless, of course, said mobile device is running iOS. It does look like an interesting app, but the Nokia label makes me wary.
    – DA01
    Sep 16, 2011 at 13:47
  • >> the Nokia label makes me wary... Why?
    – Robert Grant
    Sep 21, 2011 at 9:11
  • Their operating systems are less than stellar and their simulator software is the buggiest of the bunch (compared to RIM, Google and Apple offerings). It's also a dead platform, so I question any remaining efforts of theirs.
    – DA01
    Sep 21, 2011 at 13:31
4

Paper, pencil.

I'm seconding jensgram and JohnGB. Be VERY wary of 'realistic' demos. They do things and feel like something that is real, but inevitably, they are not. The interactions are designed for the demo and the demo software, rather than the real app, and the real requirements of the production code.

If the demo is merely a throw-away, then that's less of an issue, but if it's any sort of an official 'document' or signed-off milestone, I'd suggest you look into adopting Agile development processes and let the actual app, itself, act as the demo.

Improve this answer
6
  • 2
    I used to dislike realistic demos, too. I used to think they tended to distract users, and that stakeholders would find it hard to turn their gaze away from test data they wouldn't find appropriate in the end product. But increasingly, I'm coming round to a different view - that many designs which work well using hypothetical data fall apart in real-world scenarios, and that realistic content is one of the best ways to detect these moments. But that's a matter for another thread...
    – Jimmy Breck-McKye
    Sep 16, 2011 at 14:29
  • 1
    Yea, that's sort of a different issue. But the solution is the same, really...in an Agile process, one should be using real data as well.
    – DA01
    Sep 16, 2011 at 15:35
  • @JimmyBreck-McKye, use real data in sketchy mockups. Best of both worlds.
    – Alex Feinman
    Sep 18, 2012 at 13:05
  • @AlexFeinman - Well, part of the point of using real data is to see if it creates any issues given the constraints of your visual design. So I think using sketchy mockups, even with real data, still creates risks.
    – Jimmy Breck-McKye
    Sep 18, 2012 at 16:01
  • 1
    But using FAKE content in sketchy mockups would create even MORE risks. Always get the real content going as soon as possible.
    – DA01
    Sep 18, 2012 at 16:09
0

I would really really really reccomend Balsamiq Mockups. You can create some very useful layouts and even play around with small amounts of interactivity all still with a wireframe look.

enter image description here

Mockups is an Adobe Air application and so runs on Windows, OSX and (for now atleast) Linux. I primarily use it on linux and have been very impressed.

Improve this answer
1
  • I tend to disagree with the 'sketched' point of view. If you're going to sketch - do so. If it's a wireframe then make it look like a wireframe. If it's a prototype then there is not anything wrong with adding design to it. Adding a sketched look to a wireframe is an attempt to let reviewers know 'this is not a design' - which I find patronising.
    – Stewart Dean
    May 10, 2013 at 5:41

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