Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

comatory

macrumors 6502a
Original poster
Apr 10, 2012
739
0
I am not a developer but I am trying to make a mockup of my imaginary application. I'd like to use some tool that would allow me to use OS X graphics (windows, buttons etc) to create static images of an app.

I dont know how to navigate in Xcode really, so I was wondering if there was some other solution out there (maybe for UX and UI designers?)

Thanks
 
I realize you said you don't know how to navigate Xcode, but I'd say your best option is to use that.

1. Download Xcode
2. Open Xcode
3. Pick "Create a new Xcode Project" from the "Welcome to Xcode" window if it automatically appears, or go to File > New > Project in the menubar if that window doesn't appear.
4. When it asks you to choose a template, choose "OS X" on the left, then "Cocoa Application" in the main panel. Click next.
5. I assume you can figure out a Product, Organization, and Company name on your own. For "Class Prefix", just put down an abbreviation for your product name. IE, if your project is called "Battery Status", you might use "BS". If your project is called "Untitled Space Shooter", you might use "USS". If your project is called "My Project", you might use "MY". Category seems pretty self explanatory. If your application should create documents, check off the box and say what it'll use as a document extension. Core Data and Spotlight... eh, it really doesn't matter. Hit next when you're done.
6. Save it wherever you want to save such things.
7. The left panel of the main window shows the files in your project. Files ending in .xib are your interface files. Open a .xib file by clicking on it.
8. The middle panel should now be split in two (if it didn't click on the button in the lower left corner of the middle panel to expand the split.) On the smaller left side of the divide, there's a hierarchical list of objects in the file. Click on the Window or Document object on the left panel if you can't already see it on the larger right side and it'll jump into focus.
9. The rightmost panel has two tab bars - one at the top of the panel and one near the bottom of the panel. Since you're entirely focused on UI, there's just 3 tabs you need to know about. If you mouse over them, the tooltip will appear and tell you the name of the tab.

i - On the bottom tab bar, the only tab you're interested in is the "Object Library tab." It's icon is a cube. Click on that and underneath it you'll get a list or grid of UI elements that you can click and drag into the main panel. You can search the list with the search bar underneath it. You can toggle between a grid and a list by clicking on the button next to the search bar.
ii - On the top tab bar, a tab you'll be interested in is the "Attributes Inspector". It's an icon of a pointed slider... it kind of resembles a badge and is near the middle of the bar. Click on it and you'll be able to change attributes of the item you have selected.
iii - Again, on the top tab bar, another tab you'll be interested in is the "Size Inspector". It's an icon of a ruler. Click on it and you'll be able to change the size and position of the item you have selected.

Oh, also, at the bottom of the main panel there's a few buttons. You might be interested in the second, the "Pin" button, which lets you set rules about how elements reposition themselves when the size of their container changes.

10. If you want to test your interface, go into the menu bar and pick Editor > Simulate Document.

A final note... if you want to add more .xib files to your project, go to File > New > File, pick the OS X > User Interface category, and pick the type of stuff you'll be putting in the new .xib file. There's really no need to add extra .xib files, you can use just and stick multiple windows in it, but if you want to be more organized, that's how you do that.

That should be everything you need to know to make the interface for a standard, Cocoa OS X application. Further, when you want someone (possibly yourself) to write code for it, they can just take the project your started and wire it up to some code to make it work.
 
Lo-fi prototypes I'd suggest Fireworks and TAP. Otherwise I use Omnigraffle and Balsamiq to "sketch" up a concept.

I believe where you're coming from you need to split out the process, firstly I'd suggest creating some detailed wire and interactions, from there then make a simple prototype.

Keynote (well last version) was awesome for making iPad/iPhone mock-up with interactions, also means you can drop graphics directly into it.

Otherwise for high fidelity mock-ups then you can't go past Photoshop and Illustrator, that's what I generally use for the production look'n'feel.
 
thanks for all the suggestions I will try Xcode again. Keynote seems like a good solution but you're probably implying that it is too crippled with new version.

i can work in Photoshop but I would really like to use a program where all Cocoa elements are already included. maxbe there are some PSD files put there that contain them as layers?

anyway thanks again.
 
I researched Mockup solutions on Mac for several months.

If you want an instant solution with with built-in Mac theme, ForeUI is the best option: http://www.foreui.com

ForeUI goes beyond static mockups by allowing interaction/simulations.

Here are my notes about ForeUI:
Code:
+ Mac theme
+ Community templates
+ Very comprehensive events system
+ Drag and drop images
- PDFs aren't clickable
+ Can simulate drag and drop
+ Web export
- Multiple selection is a pain (can't just drag a rectangle)
- Ugly iPhone template

Here is a list of other solutions I tried and didn't like for one reason or another:
  • WireframeSketcher Studio
  • OverSite
  • Mockery
  • FlairBuilder
  • App Sketcher
  • Balsalmiq
  • MockupScreens

BTW, MockupScreens is 50% off TODAY on MacZot and has a Mac theme as well:
http://maczot.com/

To be honest though, I actually do my static/limited interaction mockups in Keynote with the http://keynotopia.com templates and a bunch of home-made images. Then I do my highly interactive mockups in Hype (though Adobe Catalyst and Adobe Edge are pretty good too, depending on your needs and skill level).
 
thanks for all the suggestions I will try Xcode again. Keynote seems like a good solution but you're probably implying that it is too crippled with new version.

i can work in Photoshop but I would really like to use a program where all Cocoa elements are already included. maxbe there are some PSD files put there that contain them as layers?

anyway thanks again.

I've found Keynote is good for the basic prototype (e.g. click and feedback for interaction models) though the newer version being crippled to an extent makes it a little more challenging compared to the previous version.

Generally how I've designed in the past was to create high fidelity in Photoshop, cut up then put into Keynote for simple interaction. I'd also recommend ForeUI because it does to the interactions rather well.
 
I realize you said you don't know how to navigate Xcode, but I'd say your best option is to use that.

1. Download Xcode
2. Open Xcode
3. Pick "Create a new Xcode Project" from the "Welcome to Xcode" window if it automatically appears, or go to File > New > Project in the menubar if that window doesn't appear.
4. When it asks you to choose a template, choose "OS X" on the left, then "Cocoa Application" in the main panel. Click next.
5. I assume you can figure out a Product, Organization, and Company name on your own. For "Class Prefix", just put down an abbreviation for your product name. IE, if your project is called "Battery Status", you might use "BS". If your project is called "Untitled Space Shooter", you might use "USS". If your project is called "My Project", you might use "MY". Category seems pretty self explanatory. If your application should create documents, check off the box and say what it'll use as a document extension. Core Data and Spotlight... eh, it really doesn't matter. Hit next when you're done.
6. Save it wherever you want to save such things.
7. The left panel of the main window shows the files in your project. Files ending in .xib are your interface files. Open a .xib file by clicking on it.
8. The middle panel should now be split in two (if it didn't click on the button in the lower left corner of the middle panel to expand the split.) On the smaller left side of the divide, there's a hierarchical list of objects in the file. Click on the Window or Document object on the left panel if you can't already see it on the larger right side and it'll jump into focus.
9. The rightmost panel has two tab bars - one at the top of the panel and one near the bottom of the panel. Since you're entirely focused on UI, there's just 3 tabs you need to know about. If you mouse over them, the tooltip will appear and tell you the name of the tab.

i - On the bottom tab bar, the only tab you're interested in is the "Object Library tab." It's icon is a cube. Click on that and underneath it you'll get a list or grid of UI elements that you can click and drag into the main panel. You can search the list with the search bar underneath it. You can toggle between a grid and a list by clicking on the button next to the search bar.
ii - On the top tab bar, a tab you'll be interested in is the "Attributes Inspector". It's an icon of a pointed slider... it kind of resembles a badge and is near the middle of the bar. Click on it and you'll be able to change attributes of the item you have selected.
iii - Again, on the top tab bar, another tab you'll be interested in is the "Size Inspector". It's an icon of a ruler. Click on it and you'll be able to change the size and position of the item you have selected.

Oh, also, at the bottom of the main panel there's a few buttons. You might be interested in the second, the "Pin" button, which lets you set rules about how elements reposition themselves when the size of their container changes.

10. If you want to test your interface, go into the menu bar and pick Editor > Simulate Document.

A final note... if you want to add more .xib files to your project, go to File > New > File, pick the OS X > User Interface category, and pick the type of stuff you'll be putting in the new .xib file. There's really no need to add extra .xib files, you can use just and stick multiple windows in it, but if you want to be more organized, that's how you do that.

That should be everything you need to know to make the interface for a standard, Cocoa OS X application. Further, when you want someone (possibly yourself) to write code for it, they can just take the project your started and wire it up to some code to make it work.

Thanks I wouldnt have figured it out if it wasnt for these instructions. I decided that I will settle on Xcode. Other solutions seem too costly or they dont contain all the Cocoa elements I want whereas I have Xcode already installed.

There are many things that I wish I could figure out on my own: autopositioning elements when resizing windows or populating NSBrowser with my own items. This doesnt seem as a big deal right now (although I;d like to figure it out later).

For now I have two pressing concerns. Whenever I run Simulator all the images disappear. This must be some setting that I cant seem to find.

The other: is there any way or converting tool that would allow me to turn the mockup into interactive HTML5 element that I could put on my website?

Thank you, so far it has been so much fun to play with. Up until now I haven't really understood how hard it is to come up with useful and good looking UI, even mimicking Apple's UI is a challenge!

When I'll be finished I'll post my mockup here so you can all tell me how bad it is. The project I'm working on is concerned with media and device management in OS X. I am creating a mockup of "device manager" - a new preference pane that would allow user to see which iOS devices are associated to certain libraries.
 
Thanks I wouldnt have figured it out if it wasnt for these instructions. I decided that I will settle on Xcode. Other solutions seem too costly or they dont contain all the Cocoa elements I want whereas I have Xcode already installed.

There are many things that I wish I could figure out on my own: autopositioning elements when resizing windows or populating NSBrowser with my own items. This doesnt seem as a big deal right now (although I;d like to figure it out later).

For now I have two pressing concerns. Whenever I run Simulator all the images disappear. This must be some setting that I cant seem to find.

The other: is there any way or converting tool that would allow me to turn the mockup into interactive HTML5 element that I could put on my website?

Thank you, so far it has been so much fun to play with. Up until now I haven't really understood how hard it is to come up with useful and good looking UI, even mimicking Apple's UI is a challenge!

When I'll be finished I'll post my mockup here so you can all tell me how bad it is. The project I'm working on is concerned with media and device management in OS X. I am creating a mockup of "device manager" - a new preference pane that would allow user to see which iOS devices are associated to certain libraries.

If you attempt to open a .xib in a text editor you'll see that .xib is just a specialized form of XML, just like HTML is, so that may assist in some small way with putting it online.
 
If you attempt to open a .xib in a text editor you'll see that .xib is just a specialized form of XML, just like HTML is, so that may assist in some small way with putting it online.

I will look into it. Maybe it would be easier to just use snapshots in keynote presentation and then somehow convert it to html5 (which I think is possible).

Anyway do you have any idea why my images are not shown in simulator? They are present in interface builder however they disappear when I try to run it in simulator.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.