inside back cover - academy of art universitygradshowcase.academyart.edu/content/dam/grad...

INSIDE BACK COVER

TABLE OF CONTENTS

1 PROJECT

1.1 Abstract 3

1.2 Project Overview 4

1.3 Target Audience 5

1.4 Proposed Medium 6

1.5 Technical Specifications 6

1.6 Flowchart 7

1.7 Sketches & Storyboards 8

1.8 Wireframes 15

1.9 Concept Art 18

1.10 Mood Boards 22

1.11 Typeface 24

1.12 Color Chart 26

1.13 Logo Development 27

2 RESEARCH

2.1 Inspiration 29

2.2 Competitive Analysis Matrix 32

2.3 Market Research 33

2.4 User Personas 43

2.5 Timeline 46

2.6 Directed Study Outline 47

3 BACKGROUND

3.1 Statement of Interest 50

3.2 Portfolio 51

3.3 Autobiography 58

3.4 Resume 59

4 CONCLUSION

4.1 Closing Statement 62

4.2 Bibliography 63

1

In The Trenches // Football Concepts In Motion

With nearly 100 million estimated viewers watching the Super Bowl every year,

American football’s growing popularity is undeniable. Despite its global appeal,

the complex team sport known for its up-tempo pace, physicality, and strategy

can, at times, be difficult to understand. In The Trenches is an application targeted at 18-45

year old computer users who have an active interest in learning and expanding their knowledge

of football. Unlike many of the resources available today, it will focus on illustrating football’s

elaborate concepts, strategy, team alignments, and different player positions in an engaging

and interactive manner.

3

1.1 ABSTRACT

In The Trenches // Football Concepts In Motion4

1.2 PROJECT OVERVIEW

This project is an interactive Flash-driven application. The versatility

of Flash and Actionscript 3.0 will allow me to create a unique

interactive environment that will include smooth visual transitions,

rich content, and ease in accessing database information. By combining

elements of motion graphics and other scripting languages to enhance its

functionality, In The Trenches will serve as a multi-faceted solution for learning

about football.

American Football has been a fan favorite since its inception in 1922, and with

the formation of a new league in 1966 (now known as the NFL), the game has

steadily increased its viewership ever since. Its complexity, pace, and team-oriented

nature brings in new waves of followers each season. Though many baseball purists

may argue, football has earned the title of “America’s Pastime”.

Football has wide-ranging appeal and its primary demographic illustrates

that. Generally speaking, the group tends to be men and women aged

18-45, many of whom possess basic computing skills, and vary greatly in

their educational background, career field, and earning power.

That said, it is vexing that the number of quality resources to help people learn

more about the intricacies of the game are so few. Currently, most football-related

websites or even large companies like ESPN, FOX, or the NFL official site provide

mainly news updates, team statistics, analysis and commentary, and player tracking.

The few attempts to explain the game fundamentals and strategy can only be

found in portal sites or poorly written personal home pages. These tend to include

elaborate text descriptions of key concepts, but remain difficult to comprehend due

to the nature of the presentation.

I have been a fan of the game ever since I was a child. In the last several years,

my knowledge and eagerness to learn the game in more detail has grown

exponentially. With this passion for football and the skills I’ve acquired in the

New Media field, I plan on filling gap between fans’ need for information and

the lack of quality resources that are currently available to them.

Going beyond just paragraphs of text, In The Trenches will serve as a single

unified solution to learning football by incorporating scripting languages that

work together to retrieve and present data, a dynamic database to store an expanse

of information, and motion graphics to deliver a highly visual, entertaining,

and educational interactive application. Users will learn about football concepts,

positions, strategy, and even some of the most commonly run plays. In The Trenches

will provide an innovative new manner in which fans can expand their knowledge

about this immensely popular sport.

Not only will this project test the skills I’ve learned, but it will serve as a springboard

for my career in the New Media field, and act as a tribute to the game that has

brought me so much joy over the years.


1.3 TARGET AUDIENCE

The primary target audience for this application are individuals with basic computer skills,

aged 18-45, who are looking to learn or expand their knowledge of football. The majority

of users will likely have a high school education or above. Given its wide range of appeal

and accessibility, geographic location and income are not factors. A certain degree of intuition or

familiarity with standard to moderately progressive web interfaces is preferred, but not necessary,

in order to interact with the application with minimal difficulty.

5

In The Trenches // Football Concepts In Motion6

1.4 PROPOSED MEDIUM

PROPOSED MEDIUM

In The Trenches will be constructed in Adobe Flash with Actionscript 3.0. This will allow for the smooth integration of

video, handle the core functionality and animations, as well as communicate and retrieve necessary information from a

database. Many of the transitions will be created in After Effects CS4 and the individual movies will be called upon when

needed. To store and access the database information, I will also be relying on PHP and MySQL.

SUGGESTED SYSTEM REQUIREMENTS

Plug-Ins

Flash Player 9 or higher

Hardware

Windows Intel Pentium ll, 450 MHz

AMD Athlon, 600 MHz or faster processor

128 MB of RAM

Mac Power PC G3, 500 MHz or faster

Intel Core Duo 1.33 GHz or faster

128 MB of RAM

Linux - Modern Processor 800 MHz or faster

512 MB of RAM

128 MB graphic memory

Operating Systems

Windows 7

Windows Vista

Windows XP

Mac OSX 10.4 or higher (Power PC)

Mac OSX 10.4 or higher (Intel)

Ubuntu 7.1 or later

Browser Requirements

Firefox 2.x, 3.x

Internet Explorer 6, 7, 8

Chrome 1.x, 2.x

Opera 9.x, 10

Safari 3.x, 4.x

Camino 1.x.x


HOME

SEARCHSEARCHRESULTS

Quarterback

Running Back

Fullback

Wide Reciever

Tight End

Tackle

Guard

Center

Defensive End

Defensive Tackle

Nose Tackle

Linebacker

Cornerback

Strong Safety

Free Safety

Cover 0

8 in the Box

Gunner

Holder

Kick Returner

Long Snapper

Kicker

Punter

Wedge Buster

Punt

Punt Return

Kickoff

Kickoff Return

Field Goal

OFFENSE

DEFENSE

SPECIAL TEAMS

OFFENSE

DEFENSE

SPECIAL TEAMS

4-3 Defense

3-4 Defense

4-4 Defense

5-2 Defense

46 Defense

Nickel Defense

Dime Defense

Zone Defense

Blitz

Pro Set

I Formation

Shotgun

Single Back (Ace)

Double Tight End

Wishbone

Goal Line

Jumbo

Spread

Empty Backfield

Flag

Curl

Hook

Out Route

In Route

Post

Fade

Drag

Flat/Swing

Screen

Play action

PASSING PLAYS

Draw

Reverse

Dive

Trap

Pitch

Power

Sweep

QB Keeper

DEFEND RUN

RETURNING

KICKING

BALANCED

Cover 2

Cover 3

Cover 1

Out of Bounds

Standard

Onside

Pooch/Squib

Interactive Content

Flash Animation

Movie Content

DEFEND PASS

RUNNING PLAYS

Cover 4

Zone Blitz

Stunts

Standard

Fair Catch

Lateral

OFFENSE

DEFENSE

SPECIAL TEAMS

The Field

The Teams

The Objective

Down & Distance

Scoring

Starting The Game

Touchdowns

Offense

Defense

Special Teams

Field Goals

Other

After A Score

Strategies

Examples

POSITIONS

PLAYBOOK

GAME BASICS

STRATEGY

f

f

f

f

f

f

f

f

f

f

f

fm

m

m

m

m

Positions pages

Game Basics pages

Strategy pages

Playbook pages

PER

SIST

ENT

NA

VIG

ATI

ON

7

1.6 FLOWCHART


HOME

SEARCHSEARCHRESULTS

Quarterback

Running Back

Fullback

Wide Reciever

Tight End

Tackle

Guard

Center

Defensive End

Defensive Tackle

Nose Tackle

Linebacker

Cornerback

Strong Safety

Free Safety

Cover 0

8 in the Box

Gunner

Holder

Kick Returner

Long Snapper

Kicker

Punter

Wedge Buster

Punt

Punt Return

Kickoff

Kickoff Return

Field Goal

OFFENSE

DEFENSE

SPECIAL TEAMS

4-3 Defense

3-4 Defense

4-4 Defense

5-2 Defense

46 Defense

Nickel Defense

Dime Defense

Zone Defense

Blitz

Pro Set

I Formation

Shotgun

Single Back (Ace)

Double Tight End

Wishbone

Goal Line

Jumbo

Spread

Empty Backfield

Flag

Curl

Hook

Out Route

In Route

Post

Fade

Drag

Flat/Swing

Screen

Play action

PASSING PLAYS

Draw

Reverse

Dive

Trap

Pitch

Power

Sweep

QB Keeper

DEFEND RUN

RETURNING

KICKING

BALANCED

Cover 2

Cover 3

Cover 1

Out of Bounds

Standard

Onside

Pooch/Squib

DEFEND PASS

Cover 4

Zone Blitz

Stunts

Standard

Fair Catch

Lateral

OFFENSE

DEFENSE

SPECIAL TEAMS

The Field

The Teams

The Objective

Down & Distance

Scoring

Starting The Game

Touchdowns

Offense

Defense

Special Teams

Field Goals

Other

After A Score

Strategies

Examples

POSITIONS

PLAYBOOK

GAME BASICS

STRATEGY

OFFENSE

DEFENSE

SPECIAL TEAMS

RUNNING PLAYS

8

1.7 SKETCHES & STORYBOARDS 1


a

b

This is the first of three storyboard sketches that illustrate what some of the project’s

potential interactivity could be like. The handrawn sketches correspond to a certain

task, designated by the highlighted path on the site map.

Figure A

User first arrives at the “Game Basics” page from the main page and is presented

with six choices. Rolling over any of the icons will invoke a popup dialog with a

short description of that option. After a choice is made, the options shrink to a bar

and sits at the bottom, serving as a persistent secondary navigation system.

Figure B

In the second step, the user has selected the “Field” option which, after a brief

motion graphic transition, shows mock-3D rendering of a football field. The

concept here is that the diagram incorporates of “exploded isometrics” which

allow each section of the field to be separate from one another, similar to pieces

of a puzzle. Rolling over any portion of the field diagram reveals a text description

to help the user understand the purpose of that particular element.

9



HOME

SEARCHSEARCHRESULTS

Quarterback

Running Back

Fullback

Wide Reciever

Tight End

Tackle

Guard

Center

Defensive End

Defensive Tackle

Nose Tackle

Linebacker

Cornerback

Strong Safety

Free Safety

Cover 0

8 in the Box

Gunner

Holder

Kick Returner

Long Snapper

Kicker

Punter

Wedge Buster

Punt

Punt Return

Kickoff

Kickoff Return

Field Goal

OFFENSE

DEFENSE

SPECIAL TEAMS

OFFENSE

DEFENSE

SPECIAL TEAMS

4-3 Defense

3-4 Defense

4-4 Defense

5-2 Defense

46 Defense

Nickel Defense

Dime Defense

Zone Defense

Blitz

Pro Set

I Formation

Shotgun

Single Back (Ace)

Double Tight End

Wishbone

Goal Line

Jumbo

Spread

Empty Backfield

Flag

Curl

Hook

Out Route

In Route

Post

Fade

Drag

Flat/Swing

Screen

Play action

PASSING PLAYS

Draw

Reverse

Dive

Trap

Pitch

Power

Sweep

QB Keeper

DEFEND RUN

RETURNING

KICKING

BALANCED

Cover 2

Cover 3

Cover 1

Out of Bounds

Standard

Onside

Pooch/Squib

DEFEND PASS

RUNNING PLAYS

Cover 4

Zone Blitz

Stunts

Standard

Fair Catch

Lateral

OFFENSE

DEFENSE

SPECIAL TEAMS

The Field

The Teams

The Objective

Down & Distance

Scoring

Starting The Game

Touchdowns

Offense

Defense

Special Teams

Field Goals

Other

After A Score

Strategies

Examples

POSITIONS

PLAYBOOK

GAME BASICS

STRATEGY

10



a

b

Figure A

The user has arrived at the “Strategy” page from the main page and is presented

with a diagram of a football field with the different teams displayed. Similar to the

previous example, mousing over a team will elevate and highlight that selection,

making it clickable.

Figure B

Having selected “Offense”, the user can now choose one of many different

defensive strategies that are displayed in a slideshow manner. Options are a

combination of text and imagery. Additional choices are revealed by a scrolling

motion, activated by pressing on either of the directional arrows on each side of

the screen. Secondary navigation remains at the bottom of the screen, with visual

confirmation of which section the user is currently in.

11



HOME

SEARCHSEARCHRESULTS

Quarterback

Running Back

Fullback

Wide Reciever

Tight End

Tackle

Guard

Center

Defensive End

Defensive Tackle

Nose Tackle

Linebacker

Cornerback

Strong Safety

Free Safety

Cover 0

8 in the Box

Gunner

Holder

Kick Returner

Long Snapper

Kicker

Punter

Wedge Buster

Punt

Punt Return

Kickoff

Kickoff Return

Field Goal

OFFENSE

DEFENSE

SPECIAL TEAMS

OFFENSE

DEFENSE

SPECIAL TEAMS

4-3 Defense

3-4 Defense

4-4 Defense

5-2 Defense

46 Defense

Nickel Defense

Dime Defense

Zone Defense

Blitz

Pro Set

I Formation

Shotgun

Single Back (Ace)

Double Tight End

Wishbone

Goal Line

Jumbo

Spread

Empty Backfield

Flag

Curl

Hook

Out Route

In Route

Post

Fade

Drag

Flat/Swing

Screen

Play action

PASSING PLAYS

Draw

Reverse

Dive

Trap

Pitch

Power

Sweep

QB Keeper

DEFEND RUN

RETURNING

KICKING

BALANCED

Cover 2

Cover 3

Cover 1

Out of Bounds

Standard

Onside

Pooch/Squib

DEFEND PASS

RUNNING PLAYS

Cover 4

Zone Blitz

Stunts

Standard

Fair Catch

Lateral

OFFENSE

DEFENSE

SPECIAL TEAMS

The Field

The Teams

The Objective

Down & Distance

Scoring

Starting The Game

Touchdowns

Offense

Defense

Special Teams

Field Goals

Other

After A Score

Strategies

Examples

POSITIONS

PLAYBOOK

GAME BASICS

STRATEGY


12


a

b

Figure A

In this example, the user has arrived at the “Offense” section, via the

“Playbook” link from the homepage. Clicking on either options causes a) the

chosen selection to play a movie introduction for the upcoming section, and

b) the options themselves to fade into the background as the new content

enters from the foreground.

Figure B

After the introductory motion graphic has played, the user is presented with their

chosen option (Home > Playbook > Offense > Running Plays). The available plays

are shown in slideshow fashion, preserving the consistency from other sections of

the site. Due to the deeper level of navigation, an additional bar has been added

to the bottom, indicating the user’s location in the site hierarchy.


13


c

Figure C

After choosing a play, the slideshow menu fades into the background while the

new content expands in a new window. The content is a Flash-based animation

with supporting text demonstrating how the play is executed, with replay and

close window options clearly marked. Additionally, once the initial animation

completes, the user can hover over any of the player positions in the diagram to

obtain an explanation of the position’s typical responsibilities as well as a link to

a more detailed profile under the “Positions” general section.


14


POSITIONS STRATEGY PLAYBOOKGAME BASICS

TEAMS

SOUND CONTROLS SCREEN CONTROL

SEARCH BOX

STARTING DOWNS SCORINGTHE FIELD OBJECTIVE

MAIN CONTENT AREA

LOGO/HOME

CONTEXT-SENSITIVE POP UP BOX

CONTEXT-SENSITIVE POP UP BOX

In this slide, the user has chosen to explore “The Field” option under “Game Basics” from the homepage. The rendering of the football field

allows the user to hover over certain sections which will reveal a description of that particular characteristic of the field.

1.8 WIREFRAMES 1

15

USER HOVERS TO LAUNCH TEXT INFORMATION AND LINKS

LINKS TO ANIMATION OR ADDITIONAL INFORMATION

MAIN NAVIGATION

SECONDARY NAVIGATION

LINK



DEFENSIVE FORMATIONS


SEARCH BOX

OFFENSIVE FORMATIONS SPECIAL TEAMS

MAIN CONTENT AREA

LOGO/HOME

THE SHOTGUNPRO SET

THEWISHBONEJUMBO

SINGLEBACK

SHORT PLAYDESCRIPTION





This screen is presented after the user selects the “Offensive Formations” from the “Strategy” section. It shows a collection of plays as part

of a horizontal slideshow, with each one having its own short animation when the user mouses over. The scrolling function is controlled by

two directional arrows on the left and right of the screen.

1.8 WIREFRAMES 2

16

SLIDESHOW CONTROLHOVERING OVER SELECTED FORMATION BRINGS INTO FOCUS / CLICKING INVOKES COMPARATIVE DIAGRAM


MAIN NAVIGATION



DEFENSE


SEARCH BOX

OFFENSE

PASSING PLAYS RUNNING PLAYS

SPECIAL TEAMS

MAIN CONTENT AREA

LOGO/HOME

PLAY 1

PLAY 5

PLAY 2

PLAY 6

PLAY 3

PLAY 7

PLAY 4

PLAY 8

[ THE TRAP PLAY ]

In a trap, a guard on thebackside of the play (away from the direction the running back is heading) will pull and lead block for the running back (most of the time guard will blindside an unblocked down linemen and kick him out of the play).

INFORMATIONWINDOW

SELECTED PLAY(MAGINFIED ANIMATION)

After selecting the “Running Plays” option, the user would be shown 8 plays to choose from, each having an animation when moused over.

When one is selected, the remaining plays will fade and shrink to the background. The chosen play will enlarge and the animation will play.

Video playback controls and informational text box will accompany each selection.

1.8 WIREFRAMES 3

17

MAIN NAVIGATION

UNSELECTED PLAYS FADE INTO BACKGROUND



This is a preliminary mock-up of the intended interface for In The Trenches. It is important to me that certain characteristics of football be reflected

in my design. The sport is predicated on versatility, strength, organization and intelligence. While no single visualization can encapsulate every aspect

of the sport, my goal was to create a balanced concept that would allow many of those characteristics to be interpreted and represented by smart,

appropriate imagery and design sensibility.

PATH: Home > Game Basics > The Field > End Zone & 50 Yard Halves

1.9 CONCEPT ART 1

18


One of my priorities during the design process was to strike a balance between different design styles. Football, being a physical sport requires a

certain degree of muscularity to the interface design to do it justice. On the other hand, today’s game is played under the stadium lights and is

broadcast in brilliant high-definition, so that an audience of millions can partake. The ability to combine “sleek and modern” with “distressed and

worn” was paramount.

PATH: Home > Strategy > Offense

1.9 CONCEPT ART 1

19


Some of the design motifs that are incorporated into the interface are similar to their real-life counterparts that can be found on the actual field of

play: high contrast field markers, a grass playing surface, and metal embellishments found on sideline equipment. Others strive to create a feel - like

the use of steel grilles to create a sense of battle-ready gear, or the distressed markings to establish a feeling of tough-mindedness and grit.

PATH: Home > Strategy > Offensive Formations > The Shotgun

1.9 CONCEPT ART 3

20


To suggest that football is only about getting dirty and using brute force to win couldn’t be further from the truth. It is also a game that involves

much strategy and intelligence, as well as finesse. To represent those qualities and strike the aforementioned balance, I decided to use a combination

of simple vector elements, subtle glows, fluid animations, and a slimmer typeface to suggest a more sleek and modern feel. Successfully combining

these opposing styles will project an accurate representation of what today’s game is all about.

PATH: Home > Playbook > Offense > Running Plays > The Trap Play

1.9 CONCEPT ART 4

21


The content on this Visual Mood Board suggests some of the stylistic approaches that have helped me form the look and feel of my design

to this point. I was able to find inspiration from a wide variety of industries: everything ranging from film to self-promotion and even the

automotive industry. The images are from both web and printed materials. Although it is just a handful of examples, it provides a general

feel for my artistic direction.

1.10 MOOD BOARDS

22


The purpose of this Content Mood Board is to express some of the approaches in functionality and content that I will be emulating in my

thesis project. Some of the imagery consists of possible Flash-based forms of navigation that I will be exploring for use in my project. Other

images are of layout schemes for video content, 3D models, and other interactive content that might influence my choice of presentation.

1.10 MOOD BOARDS

23


TYPEFACE SELECTION

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890

abcdefghijklmnopqrstuvwxyz1234567890

Frutiger 55 Roman



Frutiger 45 Light



Frutiger 65 Bold

The typefaces I have selected for this project consist of select weights from the Frutiger, Akzidenz-Grotesk, and Stag families. I chose the Frutiger

and Akzidenz-Grotesk typefaces because of their clean look and legibility at different sizes. They will handle the bulk of the body copy and certain

headlines within the project. The Stag family was chosen for their muscularity, and especially in the case of the bold weight, its slightly athletic tone.

The latter will be responsible for certain headlines or callouts which require more impact than the other typefaces can provide.

1.11 TYPEFACE

24




Stag Medium



Akzidenz-Grotesk BQ Regular



Akzidenz-Grotesk BQ Bold



Stag Bold

1.11 TYPEFACE

25


CMYK:

RGB:

CMYK:

RGB:

CMYK:

RGB:

CMYK:

RGB:

51 / 33 / 44 / 3

133 / 148 / 139

54 / 46 / 62 / 20

112 / 110 / 93

0 / 0 / 0 / 88

70 / 69 / 71

0 / 0 / 0 / 100

0 / 0 / 0

CMYK:

RGB:

CMYK:

RGB:

CMYK:

RGB:

CMYK:

RGB:

5 / 28 / 100 / 0

241 / 185 / 27

2 / 6 / 99 / 8

235 / 209 / 4

44 / 47 / 73 / 19

133 / 113 / 78

59 / 29 / 100 / 9

160 / 140 / 27

CMYK:

RGB:

CMYK:

RGB:

CMYK:

RGB:

CMYK:

RGB:

0 / 0 / 0 / 0

255 / 255 / 255

0 / 100 / 74 / 50

139 / 0 / 30

31 / 95 / 89 / 53

102 / 19 / 20

27 / 29 / 0 / 0

184 / 176 / 217

1.12 COLOR CHART

26


FOOTBALL CONCEPTS IN MOTION

IN THE TRENCHES

IN THE TRENCHESFOOTBALL CONCEPTS IN MOTION

IN THETRENCHES

IN THETRENCHES

IN THETRENCHES

INT

HE

TREN

CHES • FOOTBALL CONCEPTSIN

MO

TIO

N

FOOTBALL CONCEPTS IN MOTION

IN THE TRENCHES IN THETRENCHES

X

o

IN MOTION

IN THETRENCHES

CONCEPTS FOOTBALL

O

x

O

IN THETRENCHESFOOTBALL CONCEPTS IN MOTION

1.13 LOGO DEVELOPMENT

27


SECTION SEVEN

URL: www.sectionseven.com

Section Seven Inc.’s site uses a high contrast color scheme

and an innovative navigation system that mimcs the

opening of a pamphlet. The scrolling horizontal content

is fitting given the content, and the visual pop ups serve

as design elements as well as a simple system of support

for the user.

STAR TREK OFFICIAL SITE

URL: www.startrekmovie.com

Though the Star Trek movie site may not be the most

technically innovative site, it excels at creating and

maintaining a particular atmosphere. There is a consistency

that is the result of thoughtful design considerations and

attention to detail. A persistent navigation “orb” is the

anchor for the site’s futuristic concept.

2.1 INSPIRATION

29


NISSAN MOTORS (UK)

URL: www.nissan.co.uk/#vehicles/city-cars

Nissan Motors’ UK site is effective at creating individual

presentations for each of its models. While each vehicle

is different, the manner in which they are presented is

uniform, showing that they can count on a solid main

structure while allowing more character to be displayed in

the subsections. The light, airy design lessens the impact of

what would normally be a media-heavy site.

NAWLZ

URL: www.nawlz.com

While the NAWLZ site is not exactly the pinnacle of

usability, it has unique style all its own. I was impressed

at the amount of artwork displayed and the method that

it is presented to the visitor. Traditional rules High-impact

visuals and an unorthodox navigation system sets the stage

as NAWLZ invites the user to follow multiple “issues”, or

storylines. The site incorporates many Flash techniques and

tricks, but also finds a way to make it work.

2.1 INSPIRATION

30


DODGE RAM CHALLENGE

URL: http://ramchallenge.yahoo.com/index.html?

pid=CWebPage&adid=RamChallengeMicrosite

The most impressive aspect of this site was how accurately

it targets its specific demographic. Big bold imagery, heavy

audio soundtrack and a gritty overall feel that screams

muscularity. It also uses a layover approach to the selected

content while graying out the previous menu, that is similar

to one I plan on using in my project.

FAT-MAN COLLECTIVE

URL: www.fat-man-collective.com

The appeal of this site is its navigation system. Though

I don’t plan on using 3D in my project, there is a simplicity

and focus on the content that is created by using so

much whitespace. Also, the options that are presented in

Fat-Man’s remote control-like handset in the lower-right

could find a place in my interface, likely for additional

features or for help/support.

2.1 INSPIRATION

31


HOW AMERICAN FOOTBALL WORKS

IN THE TRENCHES NFL.COM OFFICIAL SITE

FOOTBALL 101(ABOUT.COM)

BREAKTHROUGHBASKETBALL *

BASKETBALL PLAYS AND TIPS.COM *

AESTHETICS

URL

INTERACTIVITY

USABILITY

CONTENT QUALITY

SCOPE / DEPTH

VISUAL REINFORCEMENT

VIDEOS

FORMAT / ORGANIZATION

HELP & SUPPORT

EXCELLENT AVERAGE POOR

http://www.nfl.comhttp://football.about.

com/cs/football101/a

/bl_football101.htm

* Due to lack of direct competitors, these sites cover a different sport but are similar in content and approach.

http://www.breakthroughbasketball.com/

http://www.basketball-plays-and-tips.com/

index.html

http://entertainment.howstuffworks.com/

football2.htmN/A

2.2 COMPETITIVE ANALYSIS MATRIX

32


SITE 1: HOW AMERICAN FOOTBALL WORKS

URL: http://entertainment.howstuffworks.com/football2.htm

Functionality & Features

This site is mainly text content broken down into basic categories, very similar to the

majority of other resources regarding football on the Internet. There are some links

to other resources and they do use some images to help illustrate certain concepts.

There is also an image gallery with some photographs of real gameplay that helps to

explain some concepts.

User Requirements

Typical users would likely know little or nothing about football, judging by the

content on the site, and the tone in which the content is written. There seems to

be no educational, occupational, race, or income-related user requirements.

Usability Strengths & Weaknesses

Strengths: This site has a very simple goal (doesn’t try to do too much), fast page

loads, the text is mostly legible, has a consistent and simple layout, and has decent

use of text weight and bullets.

Weaknesses: The breadcrumbs don’t go deep enough on this site, it has an

extremely poor navigation system, difficult to find the homepage, navigation text

size is smallest on the entire site, has too many ads, no alt text for images, and

often times the link names don’t match page names.

Content Analysis

The content is simple and to the point, but some of the supporting images don’t do

a good job in reinforcing the concepts. The verbiage is easy to understand, and the

information itself is accurate.

2.3 MARKET RESEARCH

33


Visual Design

Since it is a subsection of the parent site, howstuffworks.com, it is hard to be overly

critical of it’s design. That said, there is no real design involved in the presentation

of information. It is the most basic of all layouts, and is effective in presenting the

information. The color scheme provides sufficient contrast but the ads and external

links disrupt any attempt at visual cohesion.

Relevance

Howfootballworks.com is similar to my concept because of its content -

introducing and explaining basics of the game. Though I would do many things

differently, especially in terms of design and layout, the nature of the content is

very similar to what I will be incorporating into my project.

2.3 MARKET RESEARCH

34


SITE 2: NFL OFFICIAL SITE

URL: http://www.nfl.com


NFL.com is a fully featured site with all sorts of content. It has real time updates of

scores and game statistics, one of the largest video collections available (sortable by

several different criteria), daily news articles, RSS feeds, player statistics, as well as a

store that sells officially licensed NFL merchandise. It also serves as a portal to all 32

individual team websites. There is far more to mention, but that is just a glimpse of

the scope of what is available.

User Requirements

Judging by the sheer amount of information as well as the content itself, the

majority of users who come to NFL.com are probably already fans of the game.

Many of them likely follow the happenings of their favorite team or players. It is a

team-oriented league, with heavy emphasis on branding of those 32 teams and

the site reflects that in its display and organization of related content.

It is also likely that the average visitor has an intermediate level of knowledge in

regards to football terms and concepts in general, as most of the articles use a

combination of football slang, abbreviations, and images in their headlines. This

requires a certain level of familiarity, otherwise the amount of information would

be very intimidating and frustrating.

I assume that most site visitors also have a good idea of the type of information

they are looking for and are internet-savvy enough to know how to find it. To

reinforce that, one only has to look at some of the customization abilities that can

be found on the site, allowing delivery of custom content either by email or login.


Strengths: NFL.com has consistent sitewide navigation, clearly marked links,

complex but effective layout scheme, legible type, clear headlines, as well as good

image and video quality. Other positives include clear controls for video players and

submit buttons, a help section, and error messages explain the problems and is

reversible. Given the amount and nature of content, the site loads very quickly.

Weaknesses: The color scheme lacks contrast in some sections. Lack or alt text for

images. Also, the banner ads become distracting over time.

Content Analysis

The site covers everything and anything related to the National Football League.

There is a big focus on active user input in the form of polls, quizzes, interactive

content, and more. It even has a feature that allows users to trim and create their

own video clips based off of the content available on the site. It is primarily a news

site for the different teams, players, and coaches but it also has sub-sites and sec-

tions that cover other aspects of the game such as the history, community events,

their television network, as well as their online store.

2.3 MARKET RESEARCH

35


Much of the content comes from the AP news sources as well as contributing

writers unique to the site itself. Team and city-specific bloggers also write columns

on a daily and weekly basis. Built-in forums and discussions, statistics database, as

well as a vast video library round out the other main content.

Visual Design

NFL.com takes a very modular approach to presenting the massive amounts of

information it has. The layout is simple but effective, with good use of typography

and color. The site does not rely on metaphors for its images, so there is no

confusions over meanings. It is a clean and modern feel that uses high impact

images and simple video players to keep the viewer focused on the content.

Relevance

Even though NFL.com has a section explaining the game as well as the rules, it is

very small and difficult to find. However, the main reason NFL.com is relevant to

my site is because it is an excellent example of how to organize large quantities

of information. Though I will only be focusing on the main aspects of the game,

it is still going to be a challenge figuring out how to deal with that much data.

Also, from a design standpoint this site has a few elements that I might try to

emulate in my own interface.

2.3 MARKET RESEARCH

36


SITE 3: HOW FOOTBALL WORKS (ABOUT.COM)

URL: http://football.about.com/od/football101/Football_101.htm


This site provides limited information on a few selects aspects of the game. As part

of its content, it gives users links to other sites that have more detailed information

on the subject. Aside from that, this site has no features to offer the visitor aside

from a text explanation of general concepts.

User Requirements

Users that visit this site are probably casual fans who just want to learn a thing or

two about football. Their interest might be fleeting and perhaps they don’t expect

much from their search query. There seems to be no educational, occupational,

race, or income-related user requirements.


Strengths: Sub-headings are set in bold type, use of sans serif typeface for onscreen

legibility. The site has a sitemap, though it is merely a list of alphabetized links.

Weaknesses: Lacks dedicated navigation scheme, layout is inconsistent and broken

from one page to the next, no focal point on any page, lacks alignment of text,

poor color scheme/contrast, links are not always obvious, difficult to find specific

information, architecture is unorganized, no introductory text for main sections, no

site map, cluttered interface, unrelated banner ads, no images to support content,

categories not focused (scope is too wide).

2.3 MARKET RESEARCH

37


Content Analysis

The content is very generic and not very well written. The site informs the user

in only the most general of terms, never going into any detail to reinforce the

concepts. The lack of supporting imagery or diagrams hurts the site immensely,

especially since football is already such a complex sport. The worst part about this

site is that is has many holes in its information. Fundamental aspects of the game

are left out, not even represented in the navigation. Furthermore, the presentation

of the content is often misleading in that many links that the visitor assumes will

take them to relevant information is instead only a link to another website.

Visual Design

The visual design of Football 101 leaves much to be desired. Its uninspiring color

scheme and terrible layout make it a nightmare to look at. Even the color scheme

changes depending on which page/section you’re currently on. Any cohesion in

design is disrupted by banner ads and unnecessary secondary or even tertiary

navigation on certain pages. There is no real home page or any type of identifiable

branding to enhance the site’s identity.

Relevance

Just as some sites have attractive visual appeal or an approach that might be worth

emulating, there are also lessons to be learned when something is so incredibly bad

that it defies reason. Football 101.com is relevant to my design because in many

ways it represents everything that I need to remind myself NOT to do from a design

and usability standpoint.

Often times, it might be difficult to find a truly poor example of design and

execution. In that sense this site is a perfect roadmap to follow if one wants a

different viewpoint. Instead of trying to simulate a good example on a credible site,

this one provides the exact opposite. It becomes easier to see what can happen

when a site is poorly planned and fundamental principles of usability are ignored.

2.3 MARKET RESEARCH

38


SITE 4: BREAKTHROUGHBASKETBALL.COM

URL: http://www.breakthroughbasketball.com/


Breakthroughbasketball.com is an information-rich site covering all the fundamental

aspects of the game of basketball. It combines traditional text information with a

large number of supporting images and diagrams to help reinforce the concepts.

There is also a fair amount of homemade video clips on the site as well.

User Requirements

Typical users that come to this site must have a modicum of patience, since

there is a large amount of information, but a relatively ineffective and tiresome

organizational scheme. Those new to basketball can also benefit from certain

sections of the site, as some of the information caters to the inexperienced.

There are no technical requirements to speak of other than a standard web browser.


Strengths: The site uses a fixed width layout, ensuring that the majority of users can

display the intended content without issues. The typography and paragraph size

are legible and concise. I found the menu to be straightforward and accurate in its

categories, with good use of a flyout menu for secondary links. There is also

efficient usage of color and bold type for headlines and section breaks. Video

content is clearly marked and players are equipped with playback controls.

Weaknesses: It is also easy to lose track of your place in the heirarchy of the site

itself, with no visible breadcrumbs to indicate your location. To compound the

issue, many links are not representative of the pages they link to. Certain pages

suffer from being overly link-heavy, and could benefit from better organization and

more descriptive sections. This also includes breaking down many long pages of

information into shorter ones, in an effort to reduce the tremendous amount of

vertical scrolling currently required. Error messages abound for some content, with

no visible system of help to rectify the problems.

2.3 MARKET RESEARCH

39


Content Analysis

Breakthroughbasketball.com has a wealth of information - from fundamentals,

to drills, offensive and defensive philosophies, and even an advice for an aspiring

coach. What the site suffers from in terms of aesthetics, usability, and organization

it makes up for, in part thanks to the sheer amount of helpful, relevant informa-

tion. The “basics” of the sport are covered detail, and the vast majority of concepts

include supporting diagrams and sometimes even video clips.

Visual Design

The site lacks contrast and needs a better mix of either imagery or design elements

to break up the high amount of text on each page. Good use of typography, albeit

basic. It is clear this site focuses on content more than visual appeal.

Relevance

This is one of two sites that I’ve included in my Market Research that is not

football related, mainly due to the lack of direct competitors for my chosen subject.

That said, I decided to seek out sites that draw upon a similar approach to their

intended goal, thought the actual sport itself is different than mine. I found

Breakthroughbasketball.com’s goal similar to mine in that it strives to provide the

visitor information on the sport’s fundamentals. Another parallel is the organization

of the main categories: distinct sections for offense, defense, and plays. The site

also illustrates a few things to be wary of: making sure the scope of the site is

broad enough without sacrificing focus, and keeping a healthy mix of text and

images/video to balance out the content.

2.3 MARKET RESEARCH

40


SITE 5: BASKETBALL PLAYS AND TIPS

URL: http://www.basketball-plays-and-tips.com/index.html


Basketball Plays and Tips is a very bare-bones site. Its content in terms of presenting

basketball fundamentals is primarily presented with large amounts of text with an

occasional image thrown in for good measure. Another aspect of this site is that it

acts as a basic portal for other basketball-related gear and articles, served up in the

form of various links scattered across many pages. There is also a glossary of terms,

article database, newsletter, and a primitive form that allows users to submit their

own training drill.

User Requirements

Users who visit this site will need to demonstrate a certain level of familiarity with

the sport in order to get the most out of the content. If accessing the information

on basketball basics, this is even more apparent since the style of writing is very

personal and often uses slang and other terms commonly associated with the game.

Due to the layout and advertising on the site, a typical user would also need to be

able to sift through a fair amount of distracting advertising.


Strengths: Perhaps the only strong suit of Basketball Plays and Tips is the variety of

the content. Even then, it would depend on your perspective. It covers, at least in

some detail, a far more diverse grouping of information ranging from basketball

basics to quotes by famous players and coaches.

Weaknesses: Difficult to tell where you are in the context of the site, due to lack

of breadcrumbs. The organization of the site is very unstructured, with content

scattered all across the board. Ads dominate every page, to the extent that the first

half of each webpage is dedicated to recurring Google sponsored ads, requiring the

user to scroll halfway down to reach the first “real” semblance of information.

The typography is weak as are other presentational rules: inconsistency in link

appearance, multiple text alignments on the same page, distracting placement of

animated graphics, and even an entirely different navigation system for certain

sections of the site.

Content Analysis

As previously mentioned, this site is a collection of links to other sites that sell

related gear and training videos, with a small section devoted to learning actual

game concepts. While that part of the site is noticeably small, there is a significant

portion that covers basketball “drills”. These include author provided drills as well

as a place where users can submit their own. Users will also find sections devoted

to basketball-related quotes, jokes, training aids, and gear. There is little imagery to

assist in explaining concepts, and the video content is almost non-existent.

2.3 MARKET RESEARCH

41


FALL FALLSPRING SUMMER2009 2010 2010

SUMMER2009 2010

AUGJUL SEP OCT NOV NOVDEC DECJAN FEB MAR APR MAY JUN JUL AUG SEP OCT

RE

SE

AR

CH

& D

ES

IGN

Task Analysis

Interface & Graphics

Wire Frames

Information Architechture

Research

Final Mockup

Optimize graphics & audio

Gather content

MIDPOINT REVIEW

QA TEST 1BREAK

FINAL PRESENTATION

PR

OD

UC

TIO

N

Actionscripting & PHP Coding

Database Creation

Develop PHP/MySQL/AE skills

Develop Actionscripting skills

Database Testing

Debugging

Implement AIR

CANM 618: Web Tech II

GS604: Professional Practices

CANM699: SpecialTopics (Web Tech 3)

GS610: Creativity & Profitability

CANM699: Advanced Scripting

CANM 663: Adv. Motion Graphics

CLA

SS

ES

US

AB

ILIT

Y TE

STI

NG

Revise & Output

User Testing

Debug & Refine

GS801: Visual Design

DS 1-on-1: Scripting

DS900: Usability Lab Internship

CANM 643Design Concepts

GDS801: User Experience

BREAK

BREAK

Presentation Practice

Research AIR

2.5 TIMELINE

46


My lifelong association with football began on January 10, 1982. To a

generation of fans, that date will always be associated with one of

the most celebrated moments in Pro football history, known simply as

“The Catch”. Just a child at the time, I didn’t understand the game at all, but I

took notice of how one memorable play managed to throw everyone in the

room into an emotional frenzy.

Beneath the bone-jarring collisions, visceral nature of competition, and inventive

touchdown celebrations, there lies a plan that is predicated on precision in

execution, teamwork, and strategy. Every successful play is a product of hard

work, preparation, and vision. Not only is it the ultimate team sport, but also

possibly one of the most complex, requiring athletes with different skill sets to

accomplish one common goal by figuring out the best way to advance the ball

down the field, using any and all means available to them.

It is this combination of unique factors that I’ve grown very fond of over the

years. Similarly, many are also the same keys in becoming a successful New Media

designer. Whether I’m pushing pixels into the late night hours trying to perfect

a certain design, or troubleshooting lines of code to figure out why one extra

comma is breaking all of my project’s functionality, it often comes down to

preparation, execution, and the foresight to use the proper tool at the right

time. As is the case in football, I’ve come to enjoy this often frustrating but

ultimately rewarding process.

In my years following the sport, I have noticed that learning resources available to

fans are scattered, narrow in scope, and elementary in presentation. Additionally,

typical television coverage uses terminology that often confuses my friends, who

are more casual fans of the game. As a result of my interest in football, new

media technology, and filling an obvious void, my decision to embark on this

thesis feels very natural.

As technology continues to evolve and the tools of our trade giving us

greater creative freedom, New Media designers are at liberty to create

works of art that can inform and inspire. This project provides me the

opportunity to explore the possibilities of merging my knowledge of the sport

with my talent in design. I look forward to the challenge of creating a uniquely

interactive application that will provide users with a clean, intuitive, and unique

approach to learning more about the game of football.

3.1 STATEMENT OF INTEREST

50


DREAM SEQUENCE

Semester: Spring 2009

Class: Advanced Digital Imaging

Instructor: Michael Brunsfeld

Software: Photoshop CS4

This project was and exercise in compositing, using layer

masks, blending modes, and cloning techniques to

construct a surreal dream sequence. This composition

illustrates life’s uncertainties that we all experience, and

was nominated for the 2009 Spring Show.

BATS


Class: Advanced Digital Imaging

Instructor: Michael Brunsfeld

Software: Photoshop CS4

This piece was an exploration in the creation and

customization of brushes within Photoshop. All brushes

used were created from bitmap imagery and the building

was shot in downtown San Francisco.

3.2 PORTFOLIO

51


FLASH PHOTOGRAPHY PORTFOLIO

Semester: Fall 2008

Class: Scripting

Instructor: Martha Breen

Software: Flash CS4, Actionscript 3.0

The goal of this project was to incorporate some of our

own imagery into a Flash-based slideshow that pulled its

data in dynamically. I used my own photography as the source

material. This piece was on display at the 2009 Spring Show.

GIBSON GUITAR

Semester: Fall 2008

Class: Scripting



I used my love for guitar as the basis for this exploration

into using strings of data in Actionscript to create a visual

coordinate-based highlight effect.

3.2 PORTFOLIO

52


ACTIONSCRIPT 3.0

Semester: Fall 2008

Class: Scripting



On the left a custom music player built with document classes to load sound dynamically, with pan, buffer, and playback

options. In the middle is an exercise in which I learned how to use Actionscript in conjunction with HTML as the dynamic

content, while being aware of the limited support for styling via CSS. The project on the right is a piece that focused on loading

multiple swfs externally into a main swf container, while associating captions, imagery and menus with each unique swf file.

3.2 PORTFOLIO

53


ANIMATED ILLUSTRATION


Class: Topics in Motion Graphics

Instructor: Ryan Medeiros

Software: After Effects, Photoshop, Illustrator

This motion graphics project was done using original artwork and vector

imagery. The concept required the use of animated Photoshop layers,

keyframing motion paths, null objects, and camera animation. Painstaking

from start to finish, I was proud to have this nominated in the Motion Graphics

category at the 2009 Spring Show.

3.2 PORTFOLIO

54


BROADCAST PROGRAMMING ID


Class: Topics in Motion Graphics

Instructor: Ryan Medeiros

Software: After Effects, Photoshop, Zaxwerks Pro Animator, Trapcode Form

The premise behind this project was to create a bumper ID for a television network.

In an effort to match TNT’s simplistic style, I used a combination of basic expressions,

particle effects, 3D lighting, and third party plug-ins to achieve this effect.

3.2 PORTFOLIO

55


USABILITY WEBSITE

Semester: Fall 2008

Class: Principles of Usability

Instructor: Kathleen Watson

Software: Photoshop CS4, Dreamweaver CS4

This goal of this 10-week group project was to develop a website for a fictitious online dating

service, while maintaining a strict focus on usability. We gained valuable exposure to the creation

of various types of needs, competitive, and task analyses. We also produced scripts, instructions,

storyboards, and prototypes in an effort to help us with our usability testing procedures.

3.2 PORTFOLIO

56


SOUND SPECIFIC: FINAL PROJECT

Semester: Fall 2008

Class: Sound Specific

Instructor: Scott Looney

Software: Logic Pro

Similar to the Movie Soundtrack project, this piece required more

precision in my video and sound editing technique as well as more

realistic creation of ambient noise. I also utilized Logic’s synthesizer tools

to compose a matching soundscape.

MOVIE SOUNDTRACK

Semester: Fall 2008

Class: Sound Specific

Instructor: Scott Looney

Software: Logic Pro

In this project I created a soundtrack from scratch to overlay movie

footage from “The Kingdom”. Using Logic Pro, I was able to create

ambient noise, edit input levels, and manipulate sound effects to

correspond with the action on screen.

3.2 PORTFOLIO

57

inside back cover - academy of art universitygradshowcase.academyart.edu/content/dam/grad...

Documents