The process of software development can involve many people working in different locations. The programmer might be in one state, a designer in a different state, CEO in a third state, and a client in a completely different country. When everyone is in the same location they can use sticky notes on the wall but this is not workable for remote teams.
While there are live screen-sharing possibilities, this requires coordination between several time zones. Instead, it is more common to create mock software screens so everyone can review them at their own leisure. Let’s take a look at some best practices when it comes to creating mock software screens.
Library Of Symbols And Shapes
Is important to have a library of common symbols and shapes to use throughout the software interface. Not only does this allow consistency, but it also allows the designer to select an existing pre-created shape and paste it where it needs to be.
Most popular graphic software include common shapes such as squares, rectangles, circles, and trapezoids. These come in handy when creating a brand new software product which does not have an interface yet.
If the task is adding a new or revising an existing screen in software then a library should be created based on what is already used. Symbols and shapes already used in the software can be copied to a separate document so when it comes time to create new or revised screens the look and feel is consistent.
Some graphics applications allow the creation of a custom paint brush from existing artwork. This saves time as a designer will no longer have to switch between their library and the current project to insert a screen element.
Adapts To Different Screen Resolutions
Users of the software application likely have different computers each with monitors with their own screen resolution capabilities. The smallest screen resolution on a home user’s computer is typically 1024 x 768.
Yet, it might not be the native resolution recommended by their monitor manufacturer. This results in everything on the screen becoming bigger which is important for those with poor eyesight.
Perform basic research on the market that will be using the software to determine what their typical screen resolution is. For example, if the target is young adults who play video games then chances are they have good eyesight and are using a high resolution monitor.
Even so, the software should be adaptable to common screen resolutions. The easiest way to ensure this adaptability is to use a grid system when laying out elements on the screen. This ensures all buttons and other interactive components align and resize properly based on the available screen real estate.
Flowing Through Mock Software Screens
Those who are not familiar with the software development process can sometimes be impatient. They think once the mock software screens are created the application itself will be usable within a short time.
Of course, this is not true thus a logic flowchart should be created with thumbnails of each of the software screens. A logic flowchart contains squares and diamonds with arrows pointing between the shapes to indicate flow.
Write a short paragraph for each arrow to explain what is going on. For example “when the button labeled reset is clicked, a confirmation dialog will appear asking yes or no”.
The beginning of this arrow will show a settings screen with the reset button outlined. The other end of the arrow shows a mock software screen of the confirmation dialog.
There are many software programs available which can simulate interaction allowing a user to click a fake button which jumps to another mock software screen. Microsoft PowerPoint is a slide show program usually used for presentations during a lecture. But, it also features interactive elements such as the ability to click a square within a slide that will jump to a different slide.
To create a hyperlink in PowerPoint, the designer clicks the elements then CTRL+K . This brings up a dialog that asks which slide should be shown when that element is clicked.
Professional, But Not Perfect
The process of designing a mock software screen can go on forever if the designer is not careful. When copying elements from one screen to another sometimes stray pixels can appear on the destination screen. Do not let the stray pixels become a distraction during the design process as editing these wastes time.
Instead, time should be spent adding more elements to the screen. This is especially true when providing a mock software screen for remote peers. The important part is that they get the gist of where everything should go.
Depending on the client, stray pixels may or may not need to be edited out. It depends on status of the current relationship with them. Even so, it is much easier to edit out all stray pixels from a completed mock software screen at the end than between adding elements.
Save these mock software screens at the highest file quality with little or no compression. This reduces the chance of artifacts distracting clients during status update presentations. Since these images aren’t hosted on a website, there’s no reason to compress them just to save a few bytes
All being said, the ultimate goal is that everyone understands what the software is going to look like and how it’s going to function. This means the software should use a consistent library of symbols, adapt to screen resolutions, clearly flow from one screen into the next, and is presentable but not perfect. By keeping these best practices in mind, everyone sleeps better at night knowing that there is less chance of a misunderstanding.
This guest post was written by Frank Laughlin. An innovator and adventurer at heart, Frank is committed to providing unique ways of inspiring ideas, sparking creativity and encouraging problem solving. As creator of ideas2apply , Frank encourages creative thinking via the exploration of topics from multiple angles. When not generating new and unique ways to help young minds explore and grow, Frank cultivates his need for adventure through frequent visits to theme parks, sports venues, and instrumental music performances.