Design and Development Process for Digital Humanities

Design and Developmentfor Digital Humanities

Jeremy BoggsCenter for History and New Media

InterdisciplinaryHistory

Art

Literature

Geography

Anthropology

Sociology

Information Architecture

Information Design

Design - Web and Graphic

Programming/Development

New Disciplines

Five PhasesStrategy Scope Content Design Development

Five PhasesStrategy Scope Content Design Development

Five PhasesStrategy Scope Content Design Development

Five PhasesStrategy Scope Content Design Development

Five PhasesStrategy Scope Content Design Development

Five PhasesStrategy Scope Content Design Development

Strategy

Purpose of Project

How You Manage Project

Pre-First Meeting

Create Project Hub

Make Project materials available

Assemble Team/Work out Logistics

Pre-First Meeting

Create Project Hub

Make Project materials available

Assemble Team/Work out Logistics

Example : Basecamp

To-Dos

Milestones

Messages

File Storage

Example : PBWiki

Free

Freeform

Different Levels of Permission

Example : Trac

Software

Bug Tracker

Includes Wiki

At CHNM

• Use Basecamp and Trac (for Omeka/Zotero)

• Basecamp for outreach/design things; Trac for software specific things.

Strategy Outcome

Use right tools for your project, whatever keeps your team on task, up-to-date

Come to your team prepared to discuss importance of project, overall goals for project

Scope

First Meeting

Discuss Project Scope

Timeframe for project

Define team roles and responsiblities

Define expectations/management style

Define Scope

Scope Creep

TimeframeStrategy

Scope

Content

Design

Front-End Dev

Back-End Dev

Scope Outcome

List of Requirements and Deliverables

Build in conjunction with other members of team

Define team responsiblities

Rough timeline with milestones for deliverables

Content

Information Architecture

Site Maps

Content Inventories

Sitemaps

Content Inventory

Lists each element on a given page or “state”

Content Outcome

Sitemap with overal structure of site, relationships among pages

Inventory of content; what goes on each page or “state” in your product

Design

Uses work from content, applies design to solve problems

Merge with Content

Content and Design team work together, use sitemap and content inventory to create...

Wireframes

Point of Wireframes

Make sure everything in content inventory is on page

Display relative importance of content

Visual content inventory

Serve as base for ....

Color Mockups

Apply aesthetics to wireframesDesign solutions for problem

Pre-Mockups

Ask team

Brainstorm design goals and objectives

Mood Boards

Color Palates

Design = Communication

What do you want to communicate?

What emotional responses do you want from your users?

Design Outcome

Detailed wireframes that put information architecture into practice

Color mockups built upon wireframes

Design direction for project

Development

Goals

Requirements

Deliverables

Two Types

Front End Development - HTML, CSS, JavaScript

Back End Development - PHP, MySQL, databases

Front EndCreate a Starter Kit

- index.html- screen.css- print.css

Back End

Deals with Dynamic Contente.g. PHP, MySQL

Don’t reinvent the wheel

Use CMSs - Drupal, WordPress, Omeka

Use Frameworks - Zend, CodeIgniter, CakePHP

Use Libraries - Yahoo UI, Prototype, JQuery

Dev Outcome

HTML/CSS prototype of Mockups

Apply prototypes to dynamic content

Programming scope fulfilled