design and development process for digital humanities
DESCRIPTION
Slides from presentation I gave at the NEH Digital Humanities Start-Up Grant workshopTRANSCRIPT
![Page 1: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/1.jpg)
Design and Developmentfor Digital Humanities
Jeremy BoggsCenter for History and New Media
![Page 2: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/2.jpg)
InterdisciplinaryHistory
Art
Literature
Geography
Anthropology
Sociology
![Page 3: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/3.jpg)
Information Architecture
Information Design
Design - Web and Graphic
Programming/Development
New Disciplines
![Page 4: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/4.jpg)
Five PhasesStrategy Scope Content Design Development
![Page 5: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/5.jpg)
Five PhasesStrategy Scope Content Design Development
![Page 6: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/6.jpg)
Five PhasesStrategy Scope Content Design Development
![Page 7: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/7.jpg)
Five PhasesStrategy Scope Content Design Development
![Page 8: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/8.jpg)
Five PhasesStrategy Scope Content Design Development
![Page 9: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/9.jpg)
Five PhasesStrategy Scope Content Design Development
![Page 10: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/10.jpg)
Strategy
Purpose of Project
How You Manage Project
![Page 11: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/11.jpg)
Pre-First Meeting
Create Project Hub
Make Project materials available
Assemble Team/Work out Logistics
![Page 12: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/12.jpg)
Pre-First Meeting
Create Project Hub
Make Project materials available
Assemble Team/Work out Logistics
![Page 13: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/13.jpg)
Example : Basecamp
To-Dos
Milestones
Messages
File Storage
![Page 14: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/14.jpg)
Example : PBWiki
Free
Freeform
Different Levels of Permission
![Page 15: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/15.jpg)
Example : Trac
Software
Bug Tracker
Includes Wiki
![Page 16: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/16.jpg)
At CHNM
• Use Basecamp and Trac (for Omeka/Zotero)
• Basecamp for outreach/design things; Trac for software specific things.
![Page 17: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/17.jpg)
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
![Page 18: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/18.jpg)
Scope
![Page 19: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/19.jpg)
First Meeting
Discuss Project Scope
Timeframe for project
Define team roles and responsiblities
Define expectations/management style
![Page 20: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/20.jpg)
Define Scope
![Page 21: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/21.jpg)
Scope Creep
![Page 22: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/22.jpg)
TimeframeStrategy
Scope
Content
Design
Front-End Dev
Back-End Dev
![Page 23: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/23.jpg)
Scope Outcome
List of Requirements and Deliverables
Build in conjunction with other members of team
Define team responsiblities
Rough timeline with milestones for deliverables
![Page 24: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/24.jpg)
Content
Information Architecture
Site Maps
Content Inventories
![Page 25: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/25.jpg)
Sitemaps
![Page 26: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/26.jpg)
Content Inventory
Lists each element on a given page or “state”
![Page 27: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/27.jpg)
Content Outcome
Sitemap with overal structure of site, relationships among pages
Inventory of content; what goes on each page or “state” in your product
![Page 28: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/28.jpg)
Design
Uses work from content, applies design to solve problems
![Page 29: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/29.jpg)
Merge with Content
Content and Design team work together, use sitemap and content inventory to create...
![Page 30: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/30.jpg)
Wireframes
![Page 31: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/31.jpg)
Point of Wireframes
Make sure everything in content inventory is on page
Display relative importance of content
Visual content inventory
Serve as base for ....
![Page 32: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/32.jpg)
Color Mockups
Apply aesthetics to wireframesDesign solutions for problem
![Page 33: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/33.jpg)
Pre-Mockups
Ask team
Brainstorm design goals and objectives
Mood Boards
Color Palates
![Page 34: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/34.jpg)
Design = Communication
What do you want to communicate?
What emotional responses do you want from your users?
![Page 35: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/35.jpg)
Design Outcome
Detailed wireframes that put information architecture into practice
Color mockups built upon wireframes
Design direction for project
![Page 36: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/36.jpg)
Development
Goals
Requirements
Deliverables
![Page 37: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/37.jpg)
Two Types
Front End Development - HTML, CSS, JavaScript
Back End Development - PHP, MySQL, databases
![Page 38: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/38.jpg)
Front EndCreate a Starter Kit
- index.html- screen.css- print.css
![Page 39: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/39.jpg)
Back End
Deals with Dynamic Contente.g. PHP, MySQL
![Page 40: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/40.jpg)
Don’t reinvent the wheel
Use CMSs - Drupal, WordPress, Omeka
Use Frameworks - Zend, CodeIgniter, CakePHP
Use Libraries - Yahoo UI, Prototype, JQuery
![Page 41: Design and Development Process for Digital Humanities](https://reader035.vdocuments.us/reader035/viewer/2022081403/5557aa21d8b42a696c8b498f/html5/thumbnails/41.jpg)
Dev Outcome
HTML/CSS prototype of Mockups
Apply prototypes to dynamic content
Programming scope fulfilled