- What Tools Do You Need?
- Becoming a Designer
- Planning for a Specific Platform
- Starting with a Workflow
- Creating Pixel-Perfect Digital Mockups
- Reiterating Before It's Too Late
- Preparing for the Next Stage
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Pixel-Perfect Digital Mockups
After fully documenting the application in a wireframe or sketches, it’s time to start creating art assets for the implementation of the software’s design. Some designers may only be working on interaction design and concepts—such as interface feature implementation or gesture utilization—and as a result won’t be implementing the actual visual design of the project. If that’s the case for you, feel free to skip this section.
Creating art designs for a project is often one of the most difficult concepts to teach in any field of design, not just app development. Although interaction is very much an objective concept, and a platform’s descriptive documentation clearly outlines when to use gestures, aesthetic design is much more subjective. Ahead are general tips and recommendations for creating app art, but for those looking to get additional help on aesthetic design, consider taking an art class or reviewing books on visual design principles.
Most of the example work described in this section is performed using Adobe’s Photoshop, an industry-standard tool for anyone in the creative arts. The program allows designers to use a variety of visual tools such as brushes, shapes, and erasers to create nearly anything imaginable. Developing your own style and skills in Photoshop is something that takes time to master; the best artists in the industry often have a dozen or more years of experience and are still learning and growing.
If you’re a new designer and uncomfortable with Photoshop, consider searching for tutorials online that best mimic the specific visual style you hope to achieve in your app and then use blog posts, podcasts, or videos to walk you through the steps needed to create this look. There are thousands upon thousands of Photoshop instruction sources online, and they can be an invaluable resource. Likewise, there are many books on Photoshop that can help you tap into the potential of every tool the program has to offer.
A great visual design is a very important component of interaction design; if a designer can’t fully represent how to interact with an app via simple text, iconography, and interactive features users won’t be able to understand the software, and in turn the app won’t see much success.
Visual cues create a path for users, helping them find safe ground so they don’t fall astray. That’s a reason why it’s often wise for a project’s interaction designer to also be the visual designer, because a uniform thought process by a single individual helps maintain coherence between interaction intention and visual implementation. Imagine interaction design as the artistic idea, Photoshop or programmed code as the paintbrush, and the visualization of the app as the canvas. It’s much easier to bring a work of art to life if only one person is in control of the paintbrush from start to finish.
The amount of art required for an app can fluctuate from project to project based on the technical requirements of the software, the desired visual aesthetics, and the platform, so there’s no straight answer for how much art will be needed every time. A thorough discussion with the project’s lead programmer is the best way to determine how to bring a wireframe to life with both art and code. Once again, this is where that extra time spent developing a detailed wireframe and application design document comes in handy; a programmer can review these and instruct the designer how they want the project’s visual assets to be created.
On iOS and Android, most art will be produced in the PNG file format and will be imported and referred to in code to make the visuals appear on screen. It’s best to create as little art as possible in Photoshop or another image-based program, instead implementing elements with code for native interface design pieces. Code is typically more nimble and able to be altered more easily while also being rendered on screen more quickly. Applications will thus be more responsive and require less work while also being less likely to break down when the operating system changes in the future. Each programmer has a different opinion, however, on what they prefer to do in code and what they want to do using other assets, and so constant communication with the app programmer is required.