Sketch and InVision DSM: Designing a Chat Client

Sketch and InVision DSM: Designing a Chat Client
Sketch and InVision DSM: Designing a Chat Client
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 15m | 242 MB

Discover how to leverage the power of Sketch and InVision Design System Manager (DSM) to design a user-friendly chat client interface. Instructor Emmanuel Henri shows how to conceive a design for a chat client in a team or agency environment using Sketch for visual design and journey mapping, as well as InVision DSM for managing project assets and interaction. Along the way, he shares UX best practices that you can implement to create products that users find enjoyable and easy to use. Learn how to get visual inspiration for your project, create mockups, and design the conversation screen. Then, see how to manage your designs with DSM, including how DSM can be used with stakeholders.

Topics include:

  • Getting visual inspiration for a project
  • Designing the main chat list
  • Creating initial symbols
  • Designing the conversation screen
  • Managing the colors, components, and text sections
  • Managing designs with Design System Manager
Table of Contents

1 Build your chat client with Sketch and InVision Design System Manager (DSM)
2 What you should know

Initial Research
3 Set up Sketch Craft and InVision DSM
4 Visual inspiration for the project
5 Ideas and mockups
6 Finalize mockups

Design the Main Chat List
7 Create initial symbols
8 Create the list view
9 Add the list of people
10 Create the message area

Design the Conversation Screen
11 Create the chat text input
12 Create the simulated chat
13 Multiply the simulated chat
14 Reorganize the prototype

Manage Designs with DSM
15 Overview of InVision DSM
16 Manage the colors section
17 Manage the components section
18 Manage the text and other sections
19 Practical overview of DSM usage

20 Next steps