Web Workshop Agenda
From DesignWiki
1. Sitemapping and paper prototyping
Sitemapping and paper prototyping is perhaps the least costly way to complete the initial development of a site’s navigation and structure. After gathering and prioritizing client requirements, a typical early step is to mock up the entire site as an extremely rough paper prototype. We’ll look at a set of typical navigation patterns used in design, and discuss how to prototype interactive features.
2. Testing and wireframing
Once a paper prototype has been completed for a significant portion of the site, the prototype can be tested for viability and alignment with the client’s goals. We’ll set up an in-class testing session using the paper prototypes from session 1, and discuss the scope of testing and design QA throughout site development. Once the paper prototype has been iteratively tested, either a wireframe or a protosite is created. We’ll discuss how to create a wireframe that reflects the client’s requirements.
3. Smart design for the Web, aka: the fun part
Once the wireframe or protosite has been completed and subjected to the same testing rigor that the paper prototype received, the project is ready to move into the design phase. Because revisions begin to be far more costly at this step, it is important to balance download requirements, technical requirements, user and client requirements with the choices for “look and feel”. We’ll discuss how to make design choices that work well on the web. We’ll also discuss how to effectively hire good technical production staff, and how and when to incorporate them into the design process.
4. Delivery of graphics (Smart Design for the Web, part II)
In order for a design to work effectively on line, the designer needs to understand how the graphics will actually be used, how to maximize download efficiency, and what file formats work best for different types of graphics. We’ll discuss how to slice a completed design, and how to provide clean files to the technical production staff. We’ll also cover how to mock up the graphics in a simple HTML page.
5. Introduction to HTML and CSS
The basis for understanding HTML- and CSS-based formatting of web pages is a thorough understanding of the HTML box-model. We’ll cover how to use HTML to structure a web page and how to use CSS to format a grid-based design. We’ll look working with CSS and HTML in Dreamweaver to develop common 2- and 3-column layouts with headers and footers. We’ll touch on formatting the HTML document to optimize the site for google and other search engines.
6. CSS continued...
Beyond structuring the grid-layout of the page, CSS can be used to format type, place colors and background images, add keylines and handle a wide variety of formatting tasks. We’ll look at several approaches for using CSS to define document styling, and look at web-browser tools for analyzing and troubleshooting CSS.
7. Using Dreamweaver to automate page production
This section will look at using Dreamweaver’s templates and library objects to manage repeated elements across multiple pages on a site. We’ll take a single page that we have been working with up to this point, and use Dreamweaver’s template feature to make the creation of additional pages easier.
8. Interacting with a web server
Web-based forms, and other simple forms of interactivity require the installation of CGI or PHP scripts to support the handling of the information. We’ll discuss where to find and how to use pre-written scripts to support forms-based interaction. We’ll also look at using off-the-shelf shopping cart systems. We’ll touch on QA procedures and bug tracking for small to medium-sized sites.
