Online Web Design Course

Web Design I

To design today's Web sites, you need a complete skillset. Clients expect you to be able to research, plan, build, design, and test a site, using contemporary technologies and design styles. In this online Web design course, you'll learn a systematic professional approach to Web design, using site maps, wireframes, HTML/CSS layouts, comps, color palettes, usability tests, and other tools and concepts to make sure your designs hit the mark. Four portfolio projects will challenge your Web design skills, helping you build an understanding of how to manage Web design projects in a professional context.

Online web design course image
A professional approach to designing client Web sites

Develop a professional approach to Web design

Instructor-Led Course

Feedback from design professionals

Creative Projects

Stretch your skills, grow your portfolio

Learn at Your Own Pace

Self-paced and scheduled programs available
Course Outline
Preview course topics and assignments.

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.

Project - Site concept and map

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.

Project - Site planning

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.

Project - Web color and images

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.

Project - Blog design

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.

Project - Usability tests

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 dos and don'ts for getting your portfolio up and running and learn some cool DOM-based methods for a slick presentation of graphic content.

Project - Art/design portfolio site

Course Objectives
Building skills? Here’s an overview of what you’ll learn in this course:
  • 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 Registration

Interested in this course? Scheduled and self-paced enrollment options are available. Ask Admissions about taking this course as part of a degree or certificate program.

Course LevelClasses startRegistration FeeTechnology FeeTuition
Degree course
3 credits, 15 weeks
Jan, May, Aug$200$50/semester$475/credit
Vocational course
60 clock hours, 3 months access
Enroll today, start tomorrow$50$25/course$534
* Registration fees are nonrefundable after 5 days from enrollment. All tuition includes a digital materials fee for updates to course or program content.

Software and Supplies

To take this course you'll need:

  • Computer with Internet connection.
  • Adobe Photoshop or equivalent program.
  • Adobe Dreamweaver or equivalent program OR experience in coding from scratch in HTML/CSS
  • An account with a Web hosting service (free services are available).

Who’s Teaching

Course developed by Christopher Schmitt

Student Feedback

The instructors have top credentials and experience and are always there to offer a new perspective, as well as valuable coaching and mentoring. - Myriam Keaton, Associate Degree in Graphic Design.

Student Gallery

Getting Started

Enrolling online is easy and convenient.
Chat with our knowledgeable admissions staff to select course and program options.
Complete your registration entirely online.

Related Programs

Did you know? You can take this course as part of an award-winning certificate or degree program.