6

I'm looking to get some input from experienced designers, since my main job revolves around coding and not so much designing...

What good tools are out there that one can use to mockup some os x style interfaces? Something more modern would be preferable, not a tool that was the bees knees back in 2006 or something.

Also if it's a mac app, then even better. Thanks in advance!

Improve this question
5
  • 4
    I don't have any UI design experience, but I will say: be careful how good it looks early on. No matter how many times you tell them, they will start editing copy and pixel alignment rather than sticking to the big picture and basic concepts you are hoping to iron out.
    – horatio
    Commented Jan 28, 2014 at 18:48
  • 1
    Thanks for the pointer. So you're saying keep it very basic because the better it looks the more they'll get obsessed about the look of it rather than the functionality?
    – coconutpear
    Commented Jan 28, 2014 at 18:56
  • 1
    Yes. I think this is why a lot of the mockup tools have a "sketchbook" feel.
    – horatio
    Commented Jan 28, 2014 at 21:30
  • Are you asking about hi-fi UI design mockups, or sketched wireframe mockups? Or both? Or neither?
    – DA01
    Commented Jan 28, 2014 at 21:31
  • 1
    I will second horatio. I find that showing mockups that are high fidelity (meaning they look close to the real thing) can be a huge catch-22 and often leads to a lot of client misunderstandings. It also encourages the client to focus on colors and fonts rather than things like business objectives, usability, and user tasks.
    – DA01
    Commented Jan 28, 2014 at 21:32

3 Answers 3

Reset to default
5

I think this question has been asked before but I haven't found it yet and if you do a google search for wireframing tools or mockup tools you will get a huge list to go through. That said some people use Omnigraffle for mockup which if I had to use I would.

Other tools:

Depending on what you are doing and have a decent amount of design skills I would create your own mockup in Illustrator or Photoshop.

Edit per your comment

Thanks Gramps. The reason I asked was because of the overwhelming amount of these tools available, I'm trying to find the best one used my most designers. Much as Photoshop and Illustrator are the defacto.

Some would say Onmigraffle or balsamiq are the most popular but if you are worried about the design I would consider you implement designing in the browser because it would result in the best possible output and would be easier when transitioning from the mockup to a working site. Just be aware there will always be some variance from design on paper to actual code. Dont worry about the CSS or visuals something along this line that works on the intended device:

enter image description here

Improve this answer
5
  • Thanks Gramps. The reason I asked was because of the overwhelming amount of these tools available, I'm trying to find the best one used my most designers. Much as Photoshop and Illustrator are the defacto.
    – coconutpear
    Commented Jan 28, 2014 at 18:52
  • 1
    there will be nothing better than actually designing in the browser which I have transitioned to. That said, I would wireframe the basic components you will need and animations then you can present a working prototype but keep it simple so maybe black and white. I will edit my answer to reflect an example.
    – user9447
    Commented Jan 28, 2014 at 18:54
  • I really like to know what tool was used to create the blueprint wireframe, at the bottom of your answer? It looks great!
    – Sander Schaeffer
    Commented Apr 2, 2014 at 11:53
  • Sander: My guess is the graffletopia.com/stencils/1205 stencil for Omnigraffle
    – Bradley Dwyer
    Commented Aug 3, 2014 at 7:19
  • Fwiw, the OmniGraffle link gives a "not available in US store at this time" error -- generic link to OmniGroup's 'Graffle page here.
    – ruffin
    Commented Sep 14, 2015 at 14:01
2

Have you tried using xCode Storyboards? Can't get too much more Apple-app-looking than that and xCode contains every kind of element that can ever be put into an OSX app.

Improve this answer
0

I just tried using Omni-Graffle (version 5) and I have to say there are some major obstacles if your doing screen design:

  1. Font sizes are not in pixels, nor are they correct: If I enter some text in OmniGraffle and give it a size of 12, then export the screen as a PNG and open it in Photoshop, the text size is in reality 9 pixels. If I enter 18, in Photoshop it's 15, etc.

  2. Colors: the way OmniGraffle handles colors is not good. It relys on apples built in color picker which gives inaccurate results. For example: example, I create a Red with 255 0 0 or #ff0000. If I now use the color picker tool in OmniGraffle and click on the red I just created it is now 242 0 0.

  3. Screen size: you can't set a screen size in Pixel, only in points (pt).

I'm now also searching for a reliable wireframing and mockup tool. I can't really blame OmniGraffle though. It's actually a flow-charting tool and not really intended for wire frames.

Improve this answer
1
  • Some notes: font sizes aren't the same as the size of the letter in pixels. Omnigraffle is really for wireframing, not hi-fi visual design.
    – DA01
    Commented Sep 29, 2014 at 21:51

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