Unit 14 - Design - Web Tutor

Colour Scheme

HCI and Design Concepts

Learning Outcomes

Week	Lesson Activity	Learning Assessment	Skill Developed

5.1	20 min Explain and discuss Assessment 1 and answer any questions A discussion on alternative ways of collaborating as teams. How to share designs, how to share code, how to share a project plan, how to share a blog site. 20 min Explain The Basics of Use Case Diagrams 50 min Create a use case diagram for the proposed website	Questions and Answers Use Case Diagram	Business Analysis
5.2	20 min Explain Use Case Specifications 10 min Video: What is a Use Case an example of using Use Cases for Business Analysis Video: User Stories in Visual Paradigm also goes into agile development and UeXceler Document Use Cases in Visual Paradigm	Questions and Answers Use Case Specifications Wireframes	Use Case Analysis GUI Design
5.3	52 min Homework: Agile Requirements - Visual Modeling Techniques an excellent video on the agile life cyle and how to gather business requirements. Probably too detailed, but useful for Unit 1 as well as Units 10 and 14

Article: What Is User Experience Design? Overview, Tools And Resources
Website: Colour Scheme Designer by Palleton
Resource: Font-Squirrel - A site full of free fonts that can be used in websites
Example: The kind of questions that can be used to evaluate a website or its design
Tutorial: How to document user stories in Visual Paradigm
Handbook: Visual Paradigm - Agile Handbook explains user stories, use cases, confirmations, kanban boards and wireframing. This approach could be used in the implementation stage of developing the web site.
Video: How to Draw a Use Case Diagram (6 mins).
Tutorial: How to Draw a Use Case Diagram in Visual Paradigm
Video: What is a Use Case (12 mins). Very clear on the whole but a Use Case should only represent one function a computer performs. In this example a person is performing some of the actions such as plug phone in to recharge.

Harvard Ref: Farrel, S. 2015.
Test Paper Prototypes to Save Time and Money: The Mozilla Case Study
[Online][Accessed 8th October 2015].
Available from: http://www.nngroup.com/articles/mozilla-paper-prototype/

Harvard Ref: Nielson, J. 2003. Paper Prototyping: Getting User Data Before You Code [Online]. [Accessed 8th October 2015]. Available from:
http://www.nngroup.com/articles/paper-prototyping/
Harvard Ref:Nielson, J. 2011. Parallel & Iterative Design + Competitive Testing = High Usability [Online]. [Accessed 8th October 2015]. Available from:
http://www.nngroup.com/articles/parallel-and-iterative-design/
Harvard Ref:Mayer, K. 2015. The Characteristics of Minimalism in Web Design [Online]. [Accessed 8th October 2015]. Available from:
http://www.nngroup.com/articles/characteristics-minimalism/
The 10 Design Concepts Web Developers Need to Know
Best Practices in Modern Web Design
Shneidermans Eight Golden Rules of Interface Design
First Principles in Interactive Design
Software: Balsmiq - Wireframe Mockups downloadable software free trial for 30 days