All MATTER computer-based software is developed from sets of detailed paper-based plans – or storyboards – which are provided by subject matter experts (SME) such as academics, teachers, industry specialists, etc. This document provides a set of guidelines on how to produce good storyboards, by providing the following information:

• list and explanation of the key elements of a storyboard,
• illustration of some of the techniques available to our development team,
• worked examples,

 Contents

Key elements of a storyboard

•  
  • The key elements explained

 Rationale
Learning outcomes
Assumed pre-knowledge
Screen layout
Additional resources

• Useful user-interface techniques

Text
Graphics
Video
Pen & paper

•  
  •  Adding user interactivity

Experiments

Graph-plotting

Drag and drop

Equations and derivations

Self-assessment exercises

Common user-interface controls
 

---

Key elements of a storyboard

A good storyboard comprises the following:

• A rationale or brief statement of what the ‘package’ is;
• A set of verifiable learning outcomes, stated in terms of the user and specifying any conditions;
• Any assumed pre-knowledge;
• A visual representation of the screen layout (i.e. user interface) and how this layout might evolve during interaction. You will sometimes need several “pages” of storyboard for one “screen” of software;
• Any underlying data, equations or information that a developer would need in order to build the program;
• Ideally, any resources, such as images or video, to be included.

A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines, for example:

• Interface design
• Website
• Brand design
• Marketing communication (commercials)
• Movie
• Storyboard
• Video game
• Painting

Uses

Mood boards are often used by graphic designers to enable a person to illustrate visually the direction of style which they are pursuing. However, mood boards can also be used to visually explain a certain style of writing, or an imaginary setting for a storyline. In short, mood boards are not limited to visual subjects, but serve as a visual tool to quickly inform others of the overall ‘feel’ (or ‘flow’) that a designer is trying to achieve. Creating mood boards in a digital form may be easier and quicker, but physical objects often tend to have a higher impact on people because of the more complete palette of sensations physical mood boards offer, in contrast with black & white or color-prints of a digital mood board.

———————————————————————

In Chinese ^_^

情绪收集版（mood board）

What is mood board?
mood board是指经由对使用对象与产品认知的色彩，影像，数字资产或其它材料的收集，可以引起某些情绪反应，作为设计方向与形式的参考。设计师运用它来检视色彩，样式，并据以说服其它人之所以如此设计的理由。其应用范围很广，可以用于接口设计，网页设计，品牌设计，营销沟通，电影制作，脚本设计，电玩游戏制作，甚至是绘图，室内设计等等

Why we design mood board? 

从设计的角度来说：

• 在早期的过程，用来概观产品的个性，可以比较看到全貌。
• 可从中制作色盘，取得影像的风格；
• 能凝聚共识，减少日后的反复修改；
• 结合Personas(人物志)探索使用者的真实内涵，塑造产品的性格

从商业的角度来说：

• 建立制作小组对产品视觉感官的共识(大家都同意，且有共同的目标)
• 在早期就决定主要的产品调性，并是以较高层次的方式，可以节省时间成本且符合预期
• 用来了解并传达产品的个性，满足感理上的议题

When we need mood board?

• 有主要功能修改
• 重新改版
• 全新的展品

How to design mood board?

First step 
搜集一组可以形容你的产品的关键词，例如：清爽，专业，有趣，活力 ；通常是粹取自与品牌，营销，或产品元素相关的统计数据，产生的方法可以参考脑力激荡brainstorming
使用图像，展示生活风格，情感，行动，并定义关键词。图像来自杂志，图库型录，田野调查时拍的照片 

Second step

Third step
使用色票(表)，剪纸，打印机印出色块，或剪照片中的颜色。展示你的色彩组合。

Forth step

手工拼贴编排或是在计算机中合成打印成大尺寸以供展示

EXAMPLES:

 This website use a simple flash as a background which leaves a very deep impression in my mind. The background color keep changing so as the title on the page. Online art gallery should is platform which displays the amazing art works. Therefore the mainpage should be fantastic and attractive. ^_^

1. Brief: –
   1. Without it – it is meaningless – just something which I think is nice.

                                          i.    Requirement

                                         ii.    Audience

                                        iii.    Messages

                                        iv.    Further considerations

                                         v.    Budget

                                        vi.    Deadlines

1. Research & Inspiration –
   1. Where does it fit?
   2. What can make it better?
   3. What does audience like?

1. Ideas –
   1. Time to think and come up with something original or fit for purpose – not just the first thing that comes into your head

1. Share & develop –
   1. Other people see things from different perspectives – being open to other thoughts can make your idea stronger.

1. Sketch –
   1. A good idea or layout will show in a sketch
   2. You can’t hide behind software tricks or good Photoshop styling
   3. You have a thought out plan of where you are going before jumping into a layout package.

1. Wireframe –
   1. Screens are defined and functionality is associated to each screen. Ensures client and designer are agreed on what needs to go on what page.

1. Initial visuals –
   1. First stab at what the site looks like – on a sample set of pages – so we do not waste time designing all or building everything and client saying – “I don’t like it”. Usually present 2 different concepts to give client a choice.

1. Design development –
   1. Amendments to chosen initial visual – usually 3 rounds. Client gets exactly what they want.

1. Final production –
   1. Design rolled across all specified pages – gives a blueprint for builder to build to.

                                          i.    Build – some one builds it and makes it real.

1. Design review – Makes sure what is made is what client agreed to.

• NovMind http://www.novamind.com/connect/