What Could Be Added to Photoshop & Sketch for App UI Design?
These popular design tools aren’t quite keeping up with the day-to-day needs of app UI designers. Allow me to elaborate on four key design tasks which have not yet been addressed by these industry-leading software products.
Designing for Multiple Screen Sizes and Orientations
On Web, Android and iOS platforms most, if not all UIs, need to be designed to work well on multiple screen sizes and orientations, yet today’s versions of Photoshop and Sketch forces each design document or artboard to be defined as a single fixed size and orientation. What’s really needed is a set of layout tools, more along the lines of Interface Builder in Xcode, that enables the creation and preview of designs that are responsive to multiple screen sizes and orientations. UI designers want to create a single design and then preview it in multiple screen sizes and orientations quickly and on-the-fly. We want to be able to visually create and preview anything a developer can create in code.
Designing & Communicating App Flows
Today’s versions of Photoshop and Sketch don’t enable designers to easily and quickly communicate the relationships and flow between individual views or screens. UI designers don’t design isolated static screens, but experiences that entail multiple paths or flows through an app from one screen or state to another. We need to be able to design and then communicate to a team how a user moves through an app to accomplish various tasks and goals. A built-in flow mode that would enable a designer to link various sets of layer comps or artboards together in different paths, along with various kinds of annotations, would be a real boon to app UI designers.
Designing & Communicating UI Animations
Of course, designing, prototyping and specifying animations and transitions are also high on the list of app UI design activities. Thankfully, some great tools such as Pixate, Origami and Framer, are quickly maturing to address those needs, but a lot of time is spent exporting assets from Photoshop or Sketch for use in these other tools. An integrated animation toolbox along with preview and export modes would help make this increasingly important app UI design activity front and center in a designer’s workflow.
Preparing Build Specifications
Developers aren’t mind readers that can just look at design comps and know which typefaces are used, the distances between design elements, and the various states that UI elements might assume. Special-purpose tools like Zeplin are beginning to fill the design specification void, but it would be make for a more efficient workflow if a designer didn’t have to turn to multiple pieces of software to communicate the details of a design to developers.
Adobe and Bohemian Coding, I’d love to help you figure out how to more fully meet the needs of today’s app UI designer. And by the way, easy exporting of assets is only the tiny tip of this iceberg.
Update: Be sure to check out my 2-years later follow up to this article—Follow-up on “What Could Be Added to Photoshop & Sketch for App UI Design?”
