Web Design I

Master a professional approach to designing client Web sites

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.

Tuition: $900 US

Course Instructor(s):

Mai Xiong is a Web designer and educator.

Catherine George is a digital media designer, developer, and instructor.

Course content developed by Christopher Schmitt.

Requirements:

To take this course you'll need:

Computer with Internet connection (56 Kbps modem or faster).
Adobe Photoshop or Fireworks, or equivalent digital imaging program.
Adobe Dreamweaver or equivalent Web page design program.
An account with a Web hosting service (free services are available).
Basic experience in HTML and CSS.

Prerequisites:

The following courses can help you meet the above requirements:

Course Objectives:

Students learn how to:

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 collage-style and formal mood boards to define the design style 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.

Course 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 Web site project.

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 ongoing 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 site project.

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.

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.