Trying to illustrate how to implement a design to a mobile developer can be quite a challenge if you aren’t well-versed in programming for iOS or Android. Likewise, it’s challenging for a developer to adequately implement a design if he or she isn’t equally experienced with photoshop (or your design tool of choice).
To bridge this gap at Two Toasters, designers are tasked with building out design specifications which detail the various colors, fonts, and assets throughout the app. Furthermore, to guarantee that our designs are translated perfectly, we’ve adopted a process of red-lining our mockups that details information about layout and styling. The guide that follows describes the intricacies of how to relay some of this information and creating a complete design spec as detailed below.
For the purposes of the guide, I designed two screens for a fake Twitter iOS app called hootie.
- Mockups
- Deliverables
- Design Spec
- Assets
- Redlined Mockups:
- PSD
- I’ve found it much easier to design all screens in a single PSD with a combinaton of smart objects and layer comps.
- Photoshop Scripts
- Github App