본문 바로가기

개발도구/iOS - 아이폰 개발

[아이폰] iPhone and iPad Design Templates and How to Use Them

iPhone and iPad Design Templates and How to Use Them





Design Templates for iPhone and iPad

Now that you have some basics under your belt, it’s time to start designing! Luckily there are plenty of resources available to help you get acquainted with the various iPhone and iPad interface elements. Even if your goal is to create completely customized interfaces, these templates are helpful in getting a baseline grid or dimensions of on-screen elements properly proportioned.

iPhone Templates

iPhone GUI PSD from Teehan + Lax
iPhone GUI PSD Retina from Teehan + Lax
iPhone Stencil for OmniGraffle from Patrick Crowley
iPhone UI Vector Elements from Mercury Intermedia

iPad Templates

iPad Stencil for OmniGraffle from Information Architects
iPad GUI PSD from Teehan + Lax
iPad Vector GUI from Icon Library

What File Format Do I Use for iPhone Graphics?

All graphical assets that will be used to build an app are exported in Portable Network Graphics (.png) format. Technically, the iPhone can display other file formats as well, but PNG files are automatically optimized by the iOS SDK, and consequently should be the preferred format.

This applies to all elements (nav buttons, bars, etc.) and any other imagery showcased in the app. For example, let’s say your app is a portfolio for a photographer. The photos showcased would also be exported in .png format.

The setting to export .png format in Photoshop (File > Save for Web and Devices) looks like this:

PNG settings

Preparing Files for Your Developer

Before handing your files over to a developer, it’s important to understand their capabilities with regard to slicing and dicing your file. If your developer is experienced in slicing and exporting, it can be a huge time saver to offload that task. Personally, I prefer to cut up all of my files to ensure all images are sliced out properly.

When saving out your final images, try using intuitive file naming conventions that will make locating and referencing the correct image files easier for your developer. Here are some example prefixes and suffixes I use:

  • “btn-” for all button images
  • “tab-” for all tab bar images
  • “bkg-” for all background images
  • “-up” for in-active state buttons
  • “-down” for active state buttons
  • “-hover” for hover state buttons
  • “@2x” this is a standard suffix required for all retina display graphics

Another tool I use to communicate with developers is a .pdf file that includes all screens plus notes regarding the design. I define the typefaces, sizes, line spacing and all other styling so there is an easy reference that the developer can use without having to open Photoshop. Yet another resource I provide, especially when I’m working with off-site developers, is a screencast (ScreenFlow and iShowU are my favorites) of the app, walking them through every aspect of the design. This is especially helpful if the app contains animations and/or transitions that are better illustrated in a video.

Conclusion

Technical specifications aren’t sexy but they’re important. Commit these details to memory and you will save yourself a lot of headaches down the road!