web development process - aspirationtech.org · web development process website development is...
TRANSCRIPT
![Page 1: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/1.jpg)
Web Sites For Advocacy and Web Sites For Advocacy and Community Organizing: Community Organizing:
Basics, Essentials, and Best PracticesBasics, Essentials, and Best Practices
Web Development ProcessWeb Development Process
These training materials have been prepared by Aspiration in partnership with Radical DesignsThese training materials have been prepared by Aspiration in partnership with Radical Designs
Funded by the Community Technology Foundation of CaliforniaFunded by the Community Technology Foundation of California
These materials are distributed under a Creative Commons license: Attribution-ShareAlike 2.5 These materials are distributed under a Creative Commons license: Attribution-ShareAlike 2.5
![Page 2: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/2.jpg)
Learning GoalsLearning Goals
►Define phases of web development processDefine phases of web development process►Consider web development as organizational Consider web development as organizational
developmentdevelopment►Enumerate web development stakeholdersEnumerate web development stakeholders►Understand different site publishing modelsUnderstand different site publishing models
““static” versus “dynamic” sitesstatic” versus “dynamic” sites►““Drill down” on graphic design processDrill down” on graphic design process
![Page 3: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/3.jpg)
Web Development ProcessWeb Development Process
►Process PhasesProcess Phases DiscoveryDiscovery
Site goals and audiences, requirementsSite goals and audiences, requirements Information architectureInformation architecture
Requests for Proposals (RFP) and biddingRequests for Proposals (RFP) and bidding Technology and vendor selectionTechnology and vendor selection Graphic DesignGraphic Design Content DevelopmentContent Development Integration, testing and launchIntegration, testing and launch
![Page 4: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/4.jpg)
Web Development ProcessWeb Development Process
►Website development is organizational Website development is organizational development in two directionsdevelopment in two directions OutboundOutbound
Who you are messaging to?Who you are messaging to? What messages do you want them want to hear?What messages do you want them want to hear? Your web site is the one place for all facets of your Your web site is the one place for all facets of your
organization to co-exist coherentlyorganization to co-exist coherently
InboundInbound Who has responsibility and control over design and Who has responsibility and control over design and
publishing your web content?publishing your web content?
![Page 5: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/5.jpg)
Web Development ProcessWeb Development Process
►Who is involved?Who is involved? DesignersDesigners WritersWriters Web developersWeb developers Integrators/Project ManagersIntegrators/Project Managers StrategistStrategist Information Architecture DesignerInformation Architecture Designer Executive staffExecutive staff
![Page 6: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/6.jpg)
Web Site Delivery TechnologyWeb Site Delivery Technology
►Static Web SitesStatic Web Sites HTML pages are managed offline, served “as is”HTML pages are managed offline, served “as is” Dreamweaver TemplatesDreamweaver Templates FTP from client to serverFTP from client to server No database on serverNo database on server Simplest form of “brochureware”Simplest form of “brochureware”
![Page 7: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/7.jpg)
Web Site Delivery TechnologyWeb Site Delivery Technology
►Content Management Systems (CMS)Content Management Systems (CMS) Database-drivenDatabase-driven
Pages are created on the flyPages are created on the fly
Feature set:Feature set: TemplatingTemplating WYSIWYG online editingWYSIWYG online editing Publishing workflowPublishing workflow VersioningVersioning PermissionsPermissions
![Page 8: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/8.jpg)
Web Site Delivery TechnologyWeb Site Delivery Technology
►Open Source vs Proprietary SolutionsOpen Source vs Proprietary Solutions Know the difference, tradeoffsKnow the difference, tradeoffs Open Source platforms Open Source platforms cancan be insurance policy be insurance policy
►A few Open Source CMS we likeA few Open Source CMS we like Drupal: www.drupal.orgDrupal: www.drupal.org Joomla: www.joomla.orgJoomla: www.joomla.org Plone: www.plone.orgPlone: www.plone.org Wordpress: www.wordpress.comWordpress: www.wordpress.com
![Page 9: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/9.jpg)
In-Depth: Graphic Design ProcessIn-Depth: Graphic Design Process
►Graphic design conveys organizational Graphic design conveys organizational identityidentity Choosing designs that resonate is criticalChoosing designs that resonate is critical
►Most web sites need two templatesMost web sites need two templates Home pageHome page Second-level page templatesSecond-level page templates
►There are well-defined processes for getting There are well-defined processes for getting templates designedtemplates designed
![Page 10: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/10.jpg)
In-Depth: Graphic Design ProcessIn-Depth: Graphic Design Process
►Graphic design process stepsGraphic design process steps Create “wireframes”Create “wireframes”
Wireframes are sketches of your page layoutWireframes are sketches of your page layout Based on information architectureBased on information architecture
Choose color palette to reflect organizational Choose color palette to reflect organizational identityidentity
Select graphics that convey goals and personality Select graphics that convey goals and personality of organizationof organization
Generate templates from final designGenerate templates from final design
![Page 11: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/11.jpg)
In-Depth: Graphic Design ProcessIn-Depth: Graphic Design Process
►Design process exampleDesign process example Utility Reform Network redesigned their siteUtility Reform Network redesigned their site Multiple wireframesMultiple wireframes
Combined best elements from eachCombined best elements from each
Applied multiple palette treatmentsApplied multiple palette treatments Merged best color featuresMerged best color features
Finalized front page layout and graphicsFinalized front page layout and graphics Created secondary page based on front pageCreated secondary page based on front page
![Page 12: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/12.jpg)
![Page 13: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/13.jpg)
![Page 14: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/14.jpg)
![Page 15: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/15.jpg)
![Page 16: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/16.jpg)
![Page 17: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/17.jpg)
![Page 18: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/18.jpg)
![Page 19: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/19.jpg)
![Page 20: Web Development Process - aspirationtech.org · Web Development Process Website development is organizational development in two directions Outbound Who you are messaging to? What](https://reader034.vdocuments.us/reader034/viewer/2022052320/5f062ce97e708231d416abdd/html5/thumbnails/20.jpg)
End Of SectionEnd Of Section
►Questions?Questions?►Comments?Comments?
Thank You!Thank You!These training materials have been prepared by Aspiration in partnership with Radical DesignsThese training materials have been prepared by Aspiration in partnership with Radical Designs
Funded by the Community Technology Foundation of CaliforniaFunded by the Community Technology Foundation of California
These materials are distributed under a Creative Commons license: Attribution-ShareAlike 2.5 These materials are distributed under a Creative Commons license: Attribution-ShareAlike 2.5