Overview of Web Design and Development Process

Web DesignProfessor 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