CxD Archive
Project: Chatbot
Project: Chatbot
  • Chatbot Introduction
  • Challenge & Background
    • Skills & Exploration
  • Project Instructions
    • 1 DEFINE PROBLEM & VALUE PROPOSITION
      • 1.1 Warm-Up Project
      • 1.2 Initial Ideas
      • 1.3 Background Research
      • 1.4 Personas
      • 1.5 Concept Narrowing
      • 1.6 Task Analysis
      • 1.7 Value Proposition & Features
      • 1.8 Team Proposal
    • 2 DESIGN & BUILD SOLUTION
      • 2.1 Database Development
      • 2.2 Sample Dialogues
      • 2.3 Pseudocode Functions
      • 2.4 Develop Complete Dialogue Script
      • 2.5 Style Guide
      • 2.6 Code Development Outline and Begin Coding
      • 2.7 Marketing card
      • 2.8 Code Testing
      • 2.9 Prepare Development Review and Demonstration
    • 3 EVALUATE & REFINE SOLUTION
      • 3.1 Evaluation and Post Interview
      • 3.2 Chatbot Usage Analysis
      • 3.3 App Refinements
      • 3.4 Poster
      • 3.5 Prepare for Poster Review and Demonstration
      • 3.6 Public Presentation Plan and Practice
      • 3.7 Individual Reflection
      • 3.8 Present to the public
      • 3.9 Celebrate
  • Reference
    • Chatbot Code Docs
Powered by GitBook
On this page
Export as PDF
  1. Project Instructions
  2. 2 DESIGN & BUILD SOLUTION

2.5 Style Guide

Previous2.4 Develop Complete Dialogue ScriptNext2.6 Code Development Outline and Begin Coding

Last updated 6 years ago

Create a simple document that outlines the style elements of your chatbot. You will want to determine the following elements, at a minimum, and document a description and visual samples of each when possible.

  • Background color or image descriptions and visual samples

  • Text font-family and font-size descriptions and samples (Consider using for a custom look)

  • Text message "bubble" colors and styles for the chatbot messages and the user messages (you want them to look different)

  • Sound effects - Describe any sound and how it will be used.

  • Buttons - This would include the send message button as well as any other buttons you may use in your chat interface.

❏ Deliverable A style guide document.

✓- Below Standard

✓ At Standard

✓+ Above Standard

The style guide is incomplete and lacking basic descriptions of what the chatbot will look like.

The style guide provides a complete description of the visual presentation and sound of the chatbot that will provide a clear target for coding the HTML/CSS/JS

The style guide provided a rich presentation of the style elements with fine details in how the chatbot should look and sound. The style guide reflects a carefully considered design process with the user experience clearly addressed.

Google Fonts
A portion of a style guide example