I love tools. I especially love discovering new ones that I can use for digital product design.
A few weeks ago I went to a discussion in Brooklyn entitled “Digital Product Design Tools and Tips.” The panel was sponsored by a Brooklyn startup and featured several young designers talking about processes and tools.
I’ve been an avid Photoshop user since the 1990s and assumed when the talk turned to tools, naturally, we’d be discussing the Adobe family. I was shocked when these young New York City designers didn’t mention Photoshop anywhere in their process.
Without exception, every designer discussed their tool stack and included a new generation of lightweight prototyping tools that, honestly, blew me away. They were easy to use, lightweight, and often free. The specific tools included Figma, Adobe XD, and Sketch.
Aside from the toolset, I did find their process for digital product design—digital products being anything a user interacted with via a screen—to be similar to mine.
The process always starts with wireframes.
Wireframing
Wireframing is the process of creating lightweight mockups of your digital products. Most often this is done with paper and pencil. (Figure 1) These wireframes are purposely low fidelity with icons and symbols being sketched without detail. Boxes are used in place of actual photographs and placeholders instead of text. The purpose of the wireframe is to design a layout and feature set and do some initial testing as to whether the design works. Wireframes, sometimes called mock-ups, are quick to create, enabling a designer to go through a number of iterations quickly.
In this early stage of the process, there is no cost to making changes. There have been no commitments to a specific design and making a change is easy with eraser and pencil. The wireframing phase encourages creativity, as dozens of designs can be considered and discussed without any expensive development time used.
Figure 1: Mockups sketched in a designer’s notebook
Prototypes
Prototypes based on loose wireframes increase the fidelity of your design and define exactly what the final design will look like. Often prototypes are designed to be “pixel-perfect” so developers can use them as blueprints for final output. Prototypes are done with the actual images, colors, typefaces, and sizes to be used in the final work. (Figure 2)
Figure 2: Prototypes with mobile, tablet, and desktop versions of the same slide within a digital learning solution
In much of the new generation of design software, the transition from prototype to development is made easier. Prototyping software, like Figma, produces code that can be used in the final presentation based on the prototype. (Figure 3) Code is available in CSS, but also for development on iOS and Android.
Figure 3: CSS Code for a component in Figma
Figma introduction
Let’s do some quick prototyping so you can experience one of the new prototyping tools, Figma. You can visit figma.com and register for a free account. Unless your needs grow significantly, the free account is all you need to take advantage of the feature set of this rapid prototyping tool.
1) Visit Figma.com and create a new Figma document by clicking the “New File” button near the upper left-hand corner of the interface. (Figure 4)
Figure 4: Creating a new Figma document
2) Click where it says “untitled” and rename your file “Exercise 1” (Figure 5) .
Figure 5: Rename the file Exercise 1
3) Click on the Frame tool in the row of tools at the top of the interface. The Frame tool looks like a hash sign (#). From the list of frames that appear on the right-hand side of the interface choose Google Pixel 2. The frame of the Google Pixel 2 will appear. (Figures 6 and 7)
Figure 6: Choose the Frame tool
Figure 7: The Google Pixel 2 frame appears
4) Using the rectangle tool, create a rectangle that is about ? of the way from the top of the interface, ? of the way from the bottom 
Figure 8: Selecting the rectangle
5) Making sure the rectangle is selected (click on it if it’s not), click the fill control from the context-sensitive properties panel on the right-hand side of the screen. Drag the color control that looks like a rainbow to select a general hue. Then use the circle selector towards the top of the control to select an exact color. The rectangle you drew in the interface should reflect the fill color you have chosen. (Figure 9)
Figure 9: Use the color controls to select a fill color
6) Next, select the text tool which looks like a capital ‘T’. With the text-tool drag a rectangle across the center of the larger rectangle you drew initially. This is where the text will when you begin typing. Type the text in the box, “Figma for Digital Product Design.” (Figure 10)
Figure 10: Use the text tool to add a label for the rectangle you added
7) Double click on the text so it is selected. Using the text options in the properties panel select a typeface, size and align the text to the center. Adjust the position of your text so it’s centered from top to bottom. (Figure 11)
Figure 11: Centering the text in the rectangle
8) Click the present button on the top right-hand side of the interface to see your final design. Congratulations! You have produced a mobile prototype for the title screen for this course. Feel free to continue to edit, experiment, and make changes.
I hope you will agree that wireframing and prototyping should be part of the design process for all digital designers creating learning content.