Overview of Web Design and Development Process Web Design Professor Frank

Site Development Team Skill set needed: – Strategy and planning – Project management – Information architecture and user interface design – Graphic design for the web – Web technology – Site production

Project Stakeholder/Sponsor Usually, sponsor = customer or client Initiates website project Provides strategic vision and purpose Also: approves contract/work plan, responsible for budget and schedule, and provides resources

Web Project Manager Coordinates day-to-day implementation of project

Usability Lead Shapes overall user experience; user testing, user research and persona development, and universal usability standards Evaluates success of project and measures project outcome (“Does the site accomplish the goals?”

Information Architect Organizes and categorizes web site structure and content

Art Director Overall look and feel for the web site

Web Technology Lead Bridge and plain-English communicator between technologists and creative and project management elements of the team Provides the primary data-processing architecture for the project, technical specifications for the overall web development framework, matching strategy and goals to appropriate technology solutions

Site Production Lead Converts initial web site page mockups, designs, and wireframes into html pages Manages work of building the site’s pages (HTML, CMS, etc)

Site Editor Responsibility for written content and editorial quality of the finished site Long-term job, bridging the transition from a site development project into an ongoing web publication process (ie maintenance of site)

Web Teams

Initial Planning Understand and communicate your top 3 goals Know your audience Web analytics as planning tool Design critiques Content inventory

Reminders! Place yourself in the background Work from a suitable design Don’t overwrite Prefer the standard to the offbeat Be clear Do the visuals last Revise and re-write

Reminders! Be consistent Do not affect a breezy manner Degrade gracefully Do not explain too much Make sure your user knows who’s speaking

Static Webpages Content/layout don’t change with every request to server; change only when a web author manually updates them with a text editor or web editing tool Simple, secure, less prone to technology errors and breakdown, and easily visible by search engines

Dynamic Webpages Adapt their content or appearance depending on the user’s interactions Content can be changed quickly on the user’s computer without new page requests to the web server Very flexible, but require rapid, high-end server

Web Content Management Enable large numbers of nontechnical content contributors to update/create new web pages Users need little/zero knowledge of HTML, CSS Use database to store web content; text and media files stored as XML

Blogs Simple CMS Easy publication of text, graphics, and multimedia content Built-in tools that enable blog readers to post comments (optional) Built-in rss features allow subscribers to see when a blog site has been updated

Wikis Support easy collaborative creation of web pages by groups of users All users can change the content of the wiki pages, not just post comments about the content

RSS RSS = “Really Simple Syndication” A family of xml-based feed formats that can automatically provide an updated set of headlines, web links, or short content snippets to many forms of Internet media

Evolution of Web Tools Moving away from conventional website to collaborative creation and publishing Google Docs Microsoft Sharepoint

Leveraging Web-Based Services Use free websites (Flickr, YouTube) in conjunction with primary site Establish a web presence where your customers are

Site Development Process

Site Definition and Planning Define goals/objectives for web site Site production checklist – Production – Technology – Web server support – Budget Appoint site editor to be “process manager”

Information Architecture Inventory all existing content Create prototypes of parts of site Deliverables: – Design specification – Description of site content – User-tested wireframes and prototypes – Multiple graphic and interface sketches – Technical support specification

Site Design Project acquires look and feel Deliverables – Content components, detailed organization and assembly – Functional and logical components Templates Accessibility

Site Construction Bulk of site’s pages constructed and filled out with content User testing Maintainable code HTML and CSS code validation

Site Marketing Publicize! Cross-promote with affiliated businesses, media, events, directories, gov’t agencies

Tracking, Evaluation, Maintenance Analyze server logs Maintain the site Backups and site archives

Project Charter Planning team’s concise statement of core goals, values, and intent Should define content scope, budget, schedule, and technical aspects of the web site

Goals and Strategies What is the mission of your organization? How will creating this web site support your mission? What are the 2-3 most important goals for the site? Who is the primary audience for the web site? What do you want the audience to think or do after having visited your site? What web-related strategies will you use to achieve those goals? How will you measure the success of your site? How will you adequately maintain the finished site?

Production Issues What is the budget for the site? What is the production schedule for the site, including intermediate milestones and dates? Who are the people or vendors on the development team and what are their responsibilities? How many pages will the site contain? What is the maximum acceptable count under this budget and schedule? What special technical or functional requirements are needed? Who will be responsible for the ongoing support once the site is launched?

Avoid “Scope Creep” The gradual but inexorable process by which previously unplanned features are added, content and features are padded to mollify each stakeholder group, major changes in content or site structure during site construction are made, and more content or interactive functionality than you originally agreed to create is stuffed in

Shaping the Final Project Charter Statement of work or deliverables Business needs the site will support Success metrics Project scope and description Roles and responsibilities Project Budget Project Risk Assessment Ongoing tech support for hosting, databases, applications Editorial maintenance

General Advice Ready, fire, aim Stay away from visual design until everything else is in planned Small is good Plan the work, then work the plan