{"id":627,"date":"2008-08-23T08:41:00","date_gmt":"2008-08-22T22:41:00","guid":{"rendered":"http:\/\/funwithstuff.com\/blog\/?p=627"},"modified":"2008-08-23T08:41:00","modified_gmt":"2008-08-22T22:41:00","slug":"so-you-want-to-mock-up-an-iphone-application-design","status":"publish","type":"post","link":"https:\/\/funwithstuff.com\/blog\/so-you-want-to-mock-up-an-iphone-application-design\/","title":{"rendered":"So you want to mock up an iPhone application design"},"content":{"rendered":"<p><a href=\"http:\/\/www.teehanlax.com\/blog\/?p=447\">This may be a cool set of Photoshop widgets<\/a>, but if you&#8217;re considering using them, please consider using the Interface Builder app that comes with the iPhone SDK. All free, and it&#8217;s the actual tool that real iPhone developers use to build interfaces.<\/p>\n<p>Extending an element is as easy as dragging it out; adding another icon to a toolbar automatically redistributes the others. Everything auto-snaps to build a GUI that follows Apple guidelines &#8212; it&#8217;s easier than Photoshop!<\/p>\n<p>Just as designing a website in Photoshop gives you very little insight into how a website is actually built, designing an iPhone app in Photoshop is not going to help you understand how that&#8217;s going to work either. Interface Builder can be daunting, but for mockups it&#8217;s dead easy:<\/p>\n<p>1. File &gt; New&#8230; and make a new Cocoa Touch application.<br \/>\n2. Window &gt; Library and drag objects into the window.<br \/>\n3. Double-click on buttons to change their text.<br \/>\n4. Window &gt; Inspector and use the first section (Attributes) to change colours\/styles if needed.<br \/>\n5. When you&#8217;re done, File &gt; Simulate Interface and it&#8217;ll appear in the iPhone Simulator.<br \/>\n6. Command-shift-4, then press space. Click on the simulator to grab a pixel-accurate screenshot of your iPhone app, with shadow.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This may be a cool set of Photoshop widgets, but if you&#8217;re considering using them, please consider using the Interface Builder app that comes with the iPhone SDK. All free, and it&#8217;s the actual tool that real iPhone developers use to build interfaces. Extending an element is as easy as dragging it out; adding another &hellip; <a href=\"https:\/\/funwithstuff.com\/blog\/so-you-want-to-mock-up-an-iphone-application-design\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">So you want to mock up an iPhone application design<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,6],"tags":[],"_links":{"self":[{"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/posts\/627"}],"collection":[{"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":0,"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"wp:attachment":[{"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/funwithstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}