research

Whats been done before you? Save your research for reference and inspiration.
keywords
Select adverbs that refect how you want users to react and feel.
If your app was a person how would you describe them?
reative/communication brief
This is a document that summarizes the creative direction for the project. Objectives, message,
audience, critical details, specifc requirements and it can also include things like moodboards.
wireframes/storyboards
This is a skeletal representation of the application used to understand spacial relationships
between objects and fush out user interactions.
.
functionality document
A written explanation of how each element of the site will work. It details out, in text, how each object
in the application will work and how users interact with the objects. Size, color and functionality are
all aspects. It is common for this to accompany the wireframe or storyboard.
mockups
This is the polished look of your application or site and the most fun part. Photoshop, freworks or
illustrator are commonly used and organization and naming conventions of layers and folders is key.
development
The code! This is where all previous steps come together and a working web application is made.
HTML, CSS, PHP, ActionScript and Javascript are common tools.
THE INTERACTIVE DESIGN PROCESS
4
4
4
4
4
4
4
KEY ELEMENTS
Document Statement
The frst thing to put on the page is what you want the reader to get out of this document. If its just yourself
this helps you focus by thinking in detail, before you code what you are getting into.
Description of the project
A one of two sentence statement of what the project is about, your elevator pitch.
Front-end functionality
A list of shared or common features such as image gallery, fade or slide? How do things work on your site? A
sitemap is also common, how does information fow? In short, you need a detailed description of each page
and every element on that page.
Back-end functionality
Detailed list of back end requirements such as database, CMS or code language like PHP or Ruby.
Wireframes
It is common to have a full set of wireframes (one for each page template) that accompany the functionality
document. This offers a visual representation of the doc. and helps us understand spacial interactions be-
tween elements on each page.
Rules and Guidelines
Start with the homepage.
Be as detailed as possible.
Dont forget to detail animation and style.
Dream, but remember you will actually have to code this stuff!
Make this document for humans to read.
It should be detailed enough that a developer would not even need to speak to you. Answer all questions.
In any large project, interactive or building a home you should never start with out a detailed plan on what you
need and how things work. Welcome to the functionality document. This is where the rubber meets the road
and you are able to get down to specifcs on how you want things will work, how the user will interact with what
THE FUNCTIONALITY DOCUMENT
2010 site functionality doc
HOME FUNCTIONALITY
1) 960px wide photo or video. Largest content on home page. Displays a different picture each
time the page refreshes.
2) Caption appears on hover
3) 4 smaller thumbnails of random stories, each with caption that appears on hover
4) Jquery based user poll.
Must have input fields and then an option to show poll results
results will be displayed as either a bar graph or a pie chart.
For input options -- need to have a minimum of 2 (yes/no situation), maximum of 5
We need the ability to choose whether results are displayed as pie chart or bar graph
colors for bars/wedges: Green = #a39b57, Red = #a8322, Orange = #dd991f, Brown =
#23180f, Beige = #c699c6d
5) Most viewed stories
Displays 5 most viewed stories from website, most viewed is on top of list.
Displays story title and short 1-line summary
6) Actual number of views displayed in a small circle that sits "on top" of the green bar.
7) Displays the Syracuse News21 twitter, 5 posts at a time, most recent on top
8) Displays 5 most recent comments on all stories
THE NEW HEADER
9) The navigation itself is styled different but still has the same functionality
on mouse over of page name, the red bar slides under that page name
On click, the page name changes from white to red, and the red bar stays under that
name
10) THE HUGE HEADER content
this is a 960x540 hd video
"War ends, but the consequences endure | click to play" = the play button
11) The national header is translucent (still has a slightly darker bar across, not just floating)
and resides on TOP of the video (think the menu bar in Mac OS X snow leopard - you can see
the background behind the translucent menu bar)
apartfromwar.news21.com
example
12) This button raises and lowers the page content.
When closed the whole header+nav rests at just about 200px from the top of the
browser page.
When huge header is open, it should be very near 600px (~590px) from top to bottom
of nav
This button works exactly the same as the the button on the fellows' video bio.
When you hover over the arrow/"+" area, "reveal more" appears underneath
the plus sign turns red on hover
clicking on that makes the navbar slide down, pushing the
rest of the page content, revealing the full header
as the nav is sliding down, the "+" sign is rotating to
become an "x"
To close header, the reverse happens.
you hover over the "x" and it turns red and "hide" appears
below
click on that makes the nav and header slide up, as the "x"
rotates back to a "+"
** a note about the header:
The header is only full open by default thru the use of cookies (or something) the first
time a user arrives to the HOME page of apartfromwar.org
after that, even if coming directly to the home page, the header is closed by
default.
if they arrive to a story level page, or any other page other than the home, the header
is closed by default.
(?) Clicking on "Click to play" has the same functionality as clicking the "+"/arrow but
ALSO starts video playback after the window has fully opened.... clicking the "+"/arrow
does NOT start video playback.
ABOUT FUNCTIONALITY
1) 1) 960x550 video describing our News21 project.
2) Caption appears on hover
3) Title of the section
4) Body text describing our News21 project
5) Pull quote
same as the pull quote from the blog, but left justified instead of right justified
6) Thumbnails of supplementary stories, each with caption that appears on hover
apartfromwar.news21.com
example
example
STORIES (1) FUNCTIONALITY
1) Sliding thumbnails representing the stories.
Displayed 3 at a time.
Features a 4:3 thumbnail image that needs to be uploaded along with the story on the
back end
2) Title of the story and 1-line explanation/synopsis.
Right justified counter (1/3 = 1st story of 3, etc)
3) Left and right arrows allow you to navigate through the thumbnails
on roll over arrows turn the red color
on Click of right arrow, the speech bubble thumb on the left disappears towards the left
(as if there's a line directly to the left of the shape, it goes behind that line ... i.e. the
space between the far left shape and the arrow always remains clear), and a new
speech bubble thumb comes from the right side. (basically, all three slide over one
position to the left)
opposite occurs onClick of left arrow
STORIES (2) FUNCTIONALITY
1) Toggle between Thumbnail view and List view.
current page is in white
2) List view of stories
List is sortable by title, author, date, and tag
3) When you roll over the "+" button at the bottom of the list, the "+" turns red, and the sentence
"drag to reveal more stories" appears for a 3 seconds
clicking on the plus sign/triangle sticking off the bottom extends the list of stories like
this.
dragging the list down pushes the rest of the page's content down.
dragging it back up makes the list shorter and brings the rest of the page's content back
up
FELLOWS FUNCTIONALITY
1) thumbnails of all the News21 2010 fellows
apartfromwar.news21.com/stories
example
example
example
STORIES (1) FUNCTIONALITY
1) Sliding thumbnails representing the stories.
Displayed 3 at a time.
Features a 4:3 thumbnail image that needs to be uploaded along with the story on the
back end
2) Title of the story and 1-line explanation/synopsis.
Right justified counter (1/3 = 1st story of 3, etc)
3) Left and right arrows allow you to navigate through the thumbnails
on roll over arrows turn the red color
on Click of right arrow, the speech bubble thumb on the left disappears towards the left
(as if there's a line directly to the left of the shape, it goes behind that line ... i.e. the
space between the far left shape and the arrow always remains clear), and a new
speech bubble thumb comes from the right side. (basically, all three slide over one
position to the left)
opposite occurs onClick of left arrow
STORIES (2) FUNCTIONALITY
1) Toggle between Thumbnail view and List view.
current page is in white
2) List view of stories
List is sortable by title, author, date, and tag
3) When you roll over the "+" button at the bottom of the list, the "+" turns red, and the sentence
"drag to reveal more stories" appears for a 3 seconds
clicking on the plus sign/triangle sticking off the bottom extends the list of stories like
this.
dragging the list down pushes the rest of the page's content down.
dragging it back up makes the list shorter and brings the rest of the page's content back
up
FELLOWS FUNCTIONALITY
1) thumbnails of all the News21 2010 fellows
apartfromwar.news21.com/stories