A Complete Course in Web Site Design
Web Design I

To design today's Web sites, you need a complete skillset. It's not enough to simply develop a visual design. Clients expect you to be able to research, plan, build, design, and test a site, using contemporary technologies and design styles.

In this course, you'll learn a systematic professional approach to Web design. You'll use site maps, wireframes, HTML/CSS layouts, comps, color palettes, usability tests, and other tools and concepts to make sure your designs hit the mark.

Students entering this class are expected to have a basic competence in HTML/CSS design, Photoshop or Fireworks, and Dreamweaver. Building upon those skills, students will complete four portfolio projects that challenge their Web design skills and build an understanding of how to manage Web design projects in a professional context.

Class projects include: information architecture, competitive analysis, wifeframes, layouts, mood boards, color palettes, usability testing, designing for blogs, and portfolio design.

Christopher Schmitt is an award-winning Web designer and developer ... get bio

Develop and present a well-researched competitive analysis for a Web site project.

Create and present an orderly, well-structured information architecture for a Web site project.

Create and present clear and cleanly designed page-level wireframes indicating the layout of content and features on main site pages.

Create valid one, two, or three-column CSS layouts for a Web site project.

Develop a collage-style mood board to define the personality of a Web site.

Develop and and implement an appropriate color scheme for a client.

Use best practice approaches to incorporating JPEG, GIF, and PNG imagery in conjunction with CSS.

Use CSS to specify and layout typography for main Web page applications, including titles, headers, and body text.

Use CSS to precisely manipulate column width, alignment, paragraph formatting, blockquotes, and initial caps.

Follow basic principles of usability in page layout and navigation design.

Perform a usability test to assess the effectiveness of Web site structure or functionality.

Design an artist's portfolio site, making sure important objectives are met and using a DOM-based technique for presenting graphics.

Outline:

LESSON 1 Competitive Analysis & Information Architecture Lesson One provides an overview of the different steps in a Web design project, focusing on the essential planning steps that no Web project should start without. You'll explore how to define a site's business objectives, perform a competitive analysis on your client's competitors, and present your design recommendations. In the second half of the lesson, you'll learn a methodology for developing an information architecture. Different GUI design conventions are explored in reference to building maps for typical site areas. In the exercise, you'll conduct a competitive analysis and develop a site map for your first project—a beauty salon site.

LESSON 2 Wireframes and Layouts Lesson Two concentrates on the challenge of developing wireframes and layouts for the main pages in your site. In any Web design project, presenting the client with well-designed, clearly-labeled wireframes is a crucial step in confirming the priority and location of different page elements. In this lesson, you'll also explore techniques for creating and validating one, two, or three-column layouts in HTML so you can prepare page content for visual design using CSS. In the exercise, you'll structure the wireframes and layouts for your beauty salon site project.

LESSON 3 Color and Imagery Lesson Three explores the process for developing a visual design for a site project. You'll learn how to create a formal or informal mood board, using it as collaborative tool for establishing a site's personality. You'll explore how to select a color palette and look at how color schemes are implemented in professional page layouts to support branding and site navigation. Turning your attention to imagery, you'll examine some some best practices for using images on the Web and learn techniques for combining images with CSS: background images, tiles, stationary images, and text-as-image. In the exercise, you'll use the color and imaging techniques to complete the visual design for your beauty salon site.

LESSON 4 Web Typography Lesson Four examines the essential topic of typography. You'll review some fundamentals of typeface anatomy and classification and explore how to choose typefaces for different Web page applications, including titles, headers, body text, and pullquotes.
As you'll discover, the basic principles of typography still apply on the Web, but the differences between the Web and print, as well as the inherent limitations of the medium, must be taken into account. In the latter part of the lesson you'll learn some essential concepts for CSS type layout, including font selection, column width, alignment, paragraph formatting, using blockquotes, and initial caps. In the exercise, you'll apply these typography techniques to the design of a blog page layout.

LESSON 5 Understanding the User Experience Lesson Five explores the hot-button issue of usability, the ease with which a Web user accomplishes a task on a Web site. The lesson begins with an exploration of how common Web surfing habits affect the placement and usability of various site features. You'll also examine some tried-and-true principles for effective Web navigation design. In the second half of the lesson, you'll learn a formal process for conducting usability tests, looking at how to administer focus groups, card sorting, and A/B tests. In the exercise, you'll design a site, then perform a formal usability test on it.

LESSON 6 Online Portfolios An online portfolio is an essential marketing tool for any designer, showcasing your best work and telling potential clients what you have to offer. Lesson Six explores some principles and techniques for building an online portfolio for an artist or designer. You'll explore fundamental do's and don'ts for getting your portfolio up and running and learn some cool DOM-based methods for a slick presentation of graphic content. In the final exercise, you'll design an art/design portfolio site—for yourself or for an artist/designer you may know.

Tuition: $803 US