Project Team
Matthew Jerabek
Edmer Buen
Graham Dix
Woo-Young Choi
Alexei Michailowsky
Professors
John Kozodoj
Mike Freeman
Facilitator
Stefan Dickerson
Project Manager
John Omura
ds
Tasks for Fun
Table of Contents
Chapter 1: Introduction
Project Summary 2
Goals 3
5
6
7
8
9
11
12
13
14
15
16
ds
Tasks for Fun
Buttons
Text Entry
Checkboxes, Radios, Toggle and Pill Buttons
Navigation Bar and Title Bar
Typography
Lists
Accordion Menus
Bars
Overlays
Forms
Containers
18
19
20
21
22
23
24
25
26
27
28
ds
Tasks for Fun
Introduction
ds
Tasks for Fun
Project Summary
Ads-Omni (Tasks for Fun) was created by
Jin Lu. She wants to make it easier to analyze
market trends in advertising both online and offline. It will be the first step in creating a closed
loop system that analyses marketing data and
amalgamates online and traditional marketing
methods.
This project aims to create a user interface
library for a mobile application, which will be
targeted towards younger audiences (ages
15-28). These users will participate in multiple
tasks posted by vendors and companies. They
will then be remunerated for their accomplishments, through the application, based on the
number of tasks they have completed and the
difficulty of these tasks.
ds
Tasks for Fun
Goals
ds
Tasks for Fun
Process Diagrams
Contains graphic representations of all interaction flows
available in the application. From the process diagrams,
it is possible to understand the logical sequence of events
users go through to execute tasks and accomplish goals.
The starting points are: the home page, the profile page,
the rewards page, the settings page and the privacy settings page.
ds
Tasks for Fun
Home Page
ds
Tasks for Fun
Profile Page
ds
Tasks for Fun
Rewards Page
ds
Tasks for Fun
Settings Page
Categories
Choose
Categories
Submit
ds
Tasks for Fun
Privacy Settings
ds
Tasks for Fun
Design Concept
Features the layout guidelines, the mood board and the
general visual elements created by the team for the application: colours, fonts, icon and logo. These elements
are not interactive: they do not operate as communication interfaces between the user and the machine. However, they are crucial for a good understanding of the
contents and the interactive elements. There are also
three samples of screens, whose purpose is to provide a
general idea of how the application will look.
ds
Tasks for Fun
Mood Board
Playful
Fun
Engaging
Entertaining
11
ds
Tasks for Fun
Orange
Colours
#F79C34
RGB: 247, 156, 52
#ED7231
RGB: 237, 114, 49
Grey 1
#D35427
RGB: 211, 84, 39
#DAD9D9
RGB: 218, 217, 217
#818181
RGB: 129, 129, 129
#303030
RGB: 48, 48, 48
Grey 2
#E5E5E5
RGB: 229, 229, 229
#555555
RGB: 85, 85, 85
#181818
RGB: 24, 24, 24
12
ds
Tasks for Fun
Fonts
Primary Font
Oswald Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Secondary Font
13
ds
Tasks for Fun
Iconography
14
ds
Tasks for Fun
Logo
ds
ds
15
ds
Tasks for Fun
Screens
16
ds
Tasks for Fun
ds
Tasks for Fun
Buttons
EDIT
DELETE
ADD
EDIT
DELETE
ADD
Normal
Hover
Pressed
Normal
Hover
Pressed
18
ds
Tasks for Fun
Text Entry
Username
First Name
Last Name
Password
Confirm Password
19
ds
Tasks for Fun
Checkboxes, Radios,
Toggle and Pill Buttons
Checkboxes
Default
Disabled
Checked
Default
EDIT
Disabled
DELETE
ADD
Checked
EDIT
DELETE
ADD
Toggle
OFF
ON
20
ds
Tasks for Fun
Navigation Bar
and Title Bar
Navigation Bar
Home
Reward
Setting
Home
Reward
Setting
Home
Reward
Setting
Home
Reward
Setting
Home
Reward
Setting
Title Bar
Balance
5.00
5.00
21
ds
Tasks for Fun
Typography
Header 1 The quick brown fox jumps over the lazy dog
Header 5 The quick brown fox jumps over the lazy dog
Header 2 The quick brown fox jumps over the lazy dog
Header 3 The quick brown fox jumps over the lazy dog
Header 4 The quick brown fox jumps over the lazy dog
Header 6 The quick brown fox jumps over the lazy dog
Paragraph The quick brownox
f jumps over the lazy dog
22
ds
Tasks for Fun
Lists
23
ds
Tasks for Fun
Accordion Menus
24
ds
Tasks for Fun
Bars
Search Bar
Search
Progress Bar
60%
100%
60%
98%
25
ds
Tasks for Fun
Overlays
Lorem ipsum dolor sit amet, quesque
pritoria elerupter quid. Treplus merlop su
imar, keletu per amir harahb hamorozu.
Pericules jarazia emiru amori, geo vrayan
iea vammo, iea vammo, iea qui vammo.
Pipo quemus alli aparut, pelomar ito. Sarop maturli isuts, fromelein friputs. Cronen
bein peloti, meruta lupis pur. Sopre sapiti
mutiquis, firel ilam moruquis quid. Frics.
1 button
2 buttons
26
ds
Tasks for Fun
Forms
Validated
Validated & Disabled
Invalidated
Setting - Edit
Setting - Delete
Setting - Add
EDIT
DELETE
ADD
Active
Inactive
27
ds
Tasks for Fun
Containers
Large - Overlay
28
ds
Tasks for Fun
29
ds
Tasks for Fun