Voice prototyping
Add to favorites
Take a look at voice prototyping.
UI Design Handbook
1
UI Design Aesthetic
3:52
2
Design for accessibility
1:59
3
Localization
1:14
4
Color Selection
5:06
5
Pick Fonts
3:35
6
Font Managers
2:06
7
Icon Organizer
2:59
8
UI Sound Design
4:25
9
Stock Images
1:29
10
Image optimization
1:46
11
Illustrations
1:38
12
Realistic Mockups
2:47
13
UI 3D Assets
2:29
14
Introduction to Animations
5:09
15
UI Animation Resources
1:45
16
Apple Watch Faces
2:06
17
Designing for Apple Watch
4:24
18
Designing for Apple TV
1:58
19
Design for Game Center
3:43
20
Designing for CarPlay
1:37
21
Designing App Clips
7:05
22
Designing Widgets
3:29
23
Design Systems
1:27
24
UI Kits
3:33
25
Prototyping Tools
3:22
26
Voice prototyping
2:14
27
Prototyping with Code
3:01
28
Turn your Designs into Code
2:18
29
Version Control Tools
2:12
30
Developer Handoff
1:05
31
Color Theory
10:35
32
Dark Interfaces
3:53
33
Icons
10:32
34
Background Patterns
5:41
35
Typographic Scales
2:40
Protopie
In its 5.1 version, ProtoPie launched the Voice Prototyping feature. This is an exciting news for its community and you can read more about it in the announcement they made.
Voiceflow
Voiceflow, with a similar concept of Sayspring (one of the first apps in the market) is a collaborative tool where the users can prototype and build voice applications for Alexa and Google Assistant, with no coding experience. **
Adobe Xd
Adobe Xd first introduced Voice Prototyping in 2018. It is a cool add-on to the design tool. You can add voice prototyping to your designs in Xd and trigger those actions with voice commands.
Botsociety
Botsociety is another design tool that can help you design voice interfaces. You can design small details of the conversational experience.
Further reading
There are some interesting articles, like the one from NPR design where Rebeca Rolfe talks about her experience designing for Voice Assistants.
Voice prototyping with Adobe Xd
To date, Xd is the only design tool that provides voice prototyping. Let's open our exercise file and click on the Prototype tab bar.
Select all the artboards and you will notice a blue arrow button, which is the action button, at the right side of the art board.
Next, focus on the side bar and from the Trigger drop down, choose Voice. For the Command, we will type Voiceover.
Then for voice, let’s choose Matthew and for Speech, we will copy the text that we have on the UI. Once the user will click on the button, they will be able to hear what is written.
Finally, let’s preview our prototype and test the voice interaction in preview mode. Once you click the button, you will hear a voice reading the text. One thing to not forget is to press the SPACEBAR key while speaking to speak with voice command.
Conclusion
Even though this market is still young, there are many good tools and techniques that can help with designing for voice assistants. As voice prototyping is still a recent field, we urge you to play around with different features to get a better understanding.
Learn with videos and source files. Available to Pro subscribers only.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
ui-design-handbook-voice-prototyping
1
UI Design Aesthetic
Learn about UI design aesthetics.
3:52
2
Design for accessibility
Learn about accessibility in design.
1:59
3
Localization
Read more about the importance of localization.
1:14
4
Color Selection
Select colors for your projects
5:06
5
Pick Fonts
Select the most suitable fonts for your design.
3:35
6
Font Managers
Manage your fonts more efficiently.
2:06
7
Icon Organizer
Organize your icons in a better way.
2:59
8
UI Sound Design
Importance of sound in UI design
4:25
9
Stock Images
Find the right images for your UI
1:29
10
Image optimization
Optimize your images to improve performance.
1:46
11
Illustrations
Add illustrations to your design project
1:38
12
Realistic Mockups
Resources to add realistic mockups to your design.
2:47
13
UI 3D Assets
Work with 3D assets in your design projects
2:29
14
Introduction to Animations
Learn about basic animations in UI design.
5:09
15
UI Animation Resources
List of tools and resources for UI animation.
1:45
16
Apple Watch Faces
Create customizable watch faces for the Apple watch
2:06
17
Designing for Apple Watch
Getting started with Apple Watch Design
4:24
18
Designing for Apple TV
Learn the basics steps to design for Apple TV
1:58
19
Design for Game Center
Learn how to design for Game Center
3:43
20
Designing for CarPlay
Learn the basics of designing for CarPlay
1:37
21
Designing App Clips
Learn how to design app clips for iOS
7:05
22
Designing Widgets
Design widgets for your applications.
3:29
23
Design Systems
Create design systems for a better workflow.
1:27
24
UI Kits
Learn more about UI Kits and where to find them.
3:33
25
Prototyping Tools
Learn about prototyping tools.
3:22
26
Voice prototyping
Take a look at voice prototyping.
2:14
27
Prototyping with Code
Read more about prototyping with code.
3:01
28
Turn your Designs into Code
Learn how to turn your Designs into Code.
2:18
29
Version Control Tools
Share and synchronize your files with your team
2:12
30
Developer Handoff
Learn more about developer handoff.
1:05
31
Color Theory
Understand color theory to select the best color themes for your application.
10:35
32
Dark Interfaces
Add dark mode to your application.
3:53
33
Icons
Learn more about UI icons.
10:32
34
Background Patterns
Create beautiful background patterns.
5:41
35
Typographic Scales
Learn more about typographic scales.
2:40
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Daniel Nisttahuz
Senior Product Designer at Design+Code
Motion Designer @Design+Code
7 courses - 12 hours
UX Design Handbook
Learn about design thinking, with exercises. Free tutorials for learning user experience design.
2 hrs
UI Design Handbook
A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.
2 hrs
Create a Promo Video in After Effects
In this course we will show you how to create a promo video using After Effects.
2 hrs
Animating in Principle
Learn how to animate interactive user interfaces from Figma to Principle. Get to design the app flow for multiple screens, interactions, and animations. At the end of the course, you will have a beautiful prototype that you can share with stakeholders.
1 hrs
Video Editing in ScreenFlow
Learn different techniques, transitions actions and effects to edit a video using Screeflow
1 hrs
Motion Design in After Effects
Learn animation and motion design with After Effects
3 hrs
Learn iOS 11 Design
Learn colors, typography and layout for iOS 8
1 hrs
