Thoughtful design offers a definitive competitive advantage in numerous industries, and app development is no exception. Design impacts everything from the app’s appearance, to its ease of use, to the emotions people feel while using it. As noted in our book review of Hooked: How to Build Habit Forming Products, the way people feel when interacting with a product strongly influence whether or not it succeeds.
InspiringApps employs a four-stage process (discovery, design, development, and deployment) to take a mobile application from start to finish. While each phase is critical to the launch of a successful product, decisions made during the design phase lay the foundation for the app. Our designers understand the impact of design and consider many factors in order to create an outstanding product.
It’s useful as a client to have a high level understanding of the process and app design tools, for it enables you to know what kind of information is valuable at each stage. The list below summarizes the app design tools we use frequently. Each tool has a place in the process, enabling us to ideate, communicate needs with our team, and share the developing vision with our clients.
The first app design tool, a whiteboard, might be considered old school, but it’s just what we need to collect everyone’s ideas. The InspiringApps conference room features a large whiteboard that often becomes the initial canvas for a project’s structure. Whiteboard sessions help our team move out of the discovery phase by quickly conveying initial concepts and project requirements via hand sketches. All members of the team collaborate, allowing individual ideas that occurred during discovery to be discussed, before creating the design foundation of the app.
Wireframes: Sketch, Adobe XD, Adobe InDesign
After ideating, our team uses either Sketch or Adobe Experience Design (Adobe XD) to create wireframes for a mobile or web project. These app design tools offer very similar features relative to creating the wireframes themselves, but offer some different integrations downstream that we’ll discuss later.
We begin with low-fidelity wireframes in order to focus on the flow of the application, defining both the navigation and framework the app will use. User interface (UI) decisions are often informal when creating low-fidelity frames, and are usually represented in monochromatic gray tones in order to put initial importance on the structure of the application. High-fidelity wireframes are then created as we make purposeful decisions about the color and the graphic elements we incorporate into the designs. (More details in the next two sections.)
Another tool, Adobe InDesign, is excellent for enabling us to deliver these wireframes, along with notes, to our clients. Annotated wireframes provide the client with additional context and rationale behind design decisions and user assumptions, and ensure that key points are communicated with each screen shot. The document serves as the main subject of communication between the client and the design team, and when completed, it is used as the blueprint for development.
Color: Adobe Color
Moving from low-fidelity to high-fidelity wireframes involves a number of UI related decisions. The first step is to evaluate the client’s graphic standards and requirements. Does this client have strict brand guidelines – colors, fonts and logo requirements – that will inform the design? If not, our designers make decisions that complement the goals and requirements of the app.
Considering the project goals, intended audience, and psychology behind design assists us in making the correct color choices for a project. Adobe Color, and similar platforms, allow our designers to experiment with a flexible color wheel and find exact hex numbers to be used in the UI. The ability to toggle between different color rules, such as “complementary” or “monochromatic”, is particularly helpful to see different colors and schemes that can be built around a specific color.
Graphics & Imagery: Adobe Creative Cloud & More
Once the color palette is defined, additional graphic assets in the app may include stock photography, fonts, mockups, icons and more. Although our sources for assets vary from project to project, a few of our favorite sites for these include Shutterstock, Google Fonts and MockupWorld.
At this point in the process we often also leverage a classic in the app designers’ toolbox – the Adobe Creative Cloud. The cloud is a collection of desktop applications that are used for designing, developing, and publishing content for print, web, or mobile applications. A few of the applications we use most often include Photoshop, Illustrator, and the previously mentioned InDesign.
Adobe Photoshop is widely regarded as the industry standard for photo manipulation and graphic images. We use it to edit images, create visuals, or add gradients, effects, or texture to a design. Adobe Illustrator is a vector-based design software that uses computer algorithms to draw shapes and lines, allowing users to scale these graphics without losing quality. We use Illustrator to create icons, logos, or other vector design elements.
Prototyping: Adobe XD, InVision
Some projects with more complicated navigation or interactions benefit from an additional deliverable – a design prototype. This is an interactive representation of the app that allows users to experience the interface, content and/or interactions. A client viewing a prototype of their log in screen could tap the Log In button to proceed to the next view in the app, even though the functionality to log in is not actually built yet.
Adobe XD allows us to create an interactive prototype directly from the static wireframes by creating a link-based flow through the app. While Sketch doesn’t have a Prototype mode within its platform, it does integrate with another prototyping platform – InVision – quite well.
Of course, another prototyping option is to build the code for a specific feature, although that might be done by a developer rather than designer.
Development Spec Sheets: Zeplin
Zeplin is the last app design tool our designers use as they pass the project into development. It integrates with Sketch and Photoshop (but not Adobe XD) to turn pixel-perfect wireframes into an automated specification sheet that a developer can view. The detailed specs help us deliver a high-quality product with minimal time and effort spent on the transfer of styling details.
Although there are many app design tools, each of them plays an important role in enabling us to efficiently and effectively develop an app that becomes indispensable to its intended audience. Our designers would love to help your idea come to life, so contact us if you have an idea you’d like to discuss!