App Interfaces
App Development
Application Interfaces tell stories: Where are you? Where have you been? Where are you going? What are you doing right now? What can I help you with? The languages of visual design tell us all of these things and much much more. When interfaces are done well, this communication (between Application and User) is efficient, accurate and enjoyable. This is all made possible through a combination of having a clear understanding of the objective(s) and a process where different versions of this story of communication can be tested. For most of my application development work, I tend to work in a slightly “tighter” format, illustrating screens in Adobe Illustrator. I find these wireframes and “black and white” mockups allow me to work quickly and get a fairly accurate sense for how an application will flow. Once an initial screen is blocked in and some basic text is added… it becomes very easy to duplicate screens and start creating multi-screen relationships. In the example above, I’ve illustrated my vision for a music player that includes in-depth multi room speaker system controls. There is an intuitive flow from left to right. Sources on the left, content selection in the middle and the “now playing” and target music system selection on the right. Playback and volume controls are similar to apps in the industry and are consistently placed along the footer of the application window. Within the music system selection pane to the right, there are options for selecting the particular music system as well as making fine tune adjustments to each system.
iOS Development
As with my desktop app development experience, I’ve found it easiest to illustrate application flows in a relatively resolved format using tools such as Adobe Illustrator. Here is an example of the same music player concept where the primary application view is the “now playing” screen (center). Content sources such as local and streaming sources are accessible in a slide over pane to the left. And the target music players can be found in a slide over pane to the right. With the playback and volume controls at the bottom, you may find a surprisingly consistent left to right flow and overall interface experience to the desktop version of the App.
Pixel Perfect
After tuning the application experience in mockup and layout form, the core elements are brought into an IDE (in this case Xcode) and a fully operation app is developed. Color and smooth transitions are tuned and the application is distributed for testing and reliability. Feedback makes its way back into the design cycle for further evaluation and future releases.