Upload
jeremy-boggs
View
1.567
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Slides from presentation I gave at the NEH Digital Humanities Start-Up Grant workshop
Citation preview
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