1 / 35

Overview of Web Design and Development Process

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.

zuwena
Download Presentation

Overview of Web Design and Development Process

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Overview of Web Design and Development Process Web Design Professor Frank

  2. 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

  3. 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

  4. Web Project Manager • Coordinates day-to-day implementation of project

  5. 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?”

  6. Information Architect • Organizes and categorizes web site structure and content

  7. Art Director • Overall look and feel for the web site

  8. 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

  9. 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)

  10. 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)

  11. Web Teams

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

  13. 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

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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

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

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

  23. Site Development Process

  24. 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”

  25. 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

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

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

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

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

  30. 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

  31. 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?

  32. 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?

  33. 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

  34. 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

  35. 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

More Related