Web Design I
3 credits
WEB 231: Web Design I
Learn to manage the website design process
Students will create a small business site working step by step, researching and creating a blueprint, developing wireframes or priority guides to map pages, creating a custom logo, developing responsive layouts, and using mood boards to develop and implement color choices in CSS. The site will be tested, validated, and profiled for performance and students will explore how to add a Shopify template. In addition, students will use Adobe Portfolio to create a simple online portfolio, learning how to create a presentation of work samples for prospective clients.
Course At A Glance
Course Features
- 100% online
- Project-based
- Instructor-led
- Credit-bearing: 3 Credits
- Classes start January, April, and August
Instructor(s)
The course is taught by the following instructor(s):
Take this course as a standalone or as part of the following program(s):
Course Projects
Competitive Analysis and Information Architecture
Let's begin with 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. You'll also learn a methodology for developing an information architecture. Different GUI design conventions are explored in reference to building maps for typical site areas.
Wireframes and Priority Guides
This week we will concentrate 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 learn about low fidelity, high fidelity, and responsive wireframes and discover how priority guides can be used as an alternative to wireframes. You will also look at the application of prototyping tools, learning some tips and tricks for using Adobe XD.
Color, Image, and Type
Now it's time to explore 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 and type, you'll examine some some current best practices for using images on the Web and implementing typography.
Website Performance
This session will explore website performance. We will begin with a look at Core Web Vitals and how they measure page performance. You will learn how to run performance tests using Google's Chrome Lighthouse and learn techniques to speed up the Largest Contentful Paint (LCP), avoid Cumulative Layout Shift (CLS, and discover additional resources for studying performance.
Understanding the User Experience
This session will explore 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.
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. In the final lecture we will explore 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 launch a starter portfolio site with Adobe Portfolio.
Sample Student Work
by Carol Mancini
Course Outcomes
What Are The Course Projects?
Projects in this course include a site concept and map, page layout design, development of type, color and image designs, testing, validation, performance, and usability tests, and creative sample presentations.
What Software or Supplies Do I Need?
- Computer with Internet connection.
- Adobe Photoshop or equivalent program.
- Adobe Dreamweaver or equivalent program OR experience in coding from scratch in HTML/CSS
- Prior experience working with Bootstrap, Skeleton, or equivalent framework.
- An account with a Web hosting service (free services are available).
What Will I Learn?
Students in this course can expect to learn to:
- Develop and present a well-researched competitive analysis for a small business website 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 or priority guides.
- Develop informal mood boards to define the design style of the website and implement an appropriate color scheme for a client.
- Use best practice approaches to incorporating color, type, and images in conjunction with CSS.
- Follow basic principles of usability in page layout and navigation design.
- Use current approaches to testing, validating, and performance profiles and explore how to add a Shopify template to a site.
- Perform a usability test to assess the effectiveness of Web site structure or functionality.
- Learn how to present creative work samples to clients and employers, using Adobe Portfolio to create a simple online portfolio.
Getting Started
Course Registration
- Classes start January, April, and August
- 3 Credit Course
- Project-Based: Exercises, Discussions, and Critiques
| Course Tuition and Fees | |
|---|---|
| Tuition | $510/credit |
| Registration Fee* | $200 |
| Total Course Price | $1730 |
Registration fees are nonrefundable after 5 days from enrollment. All tuition includes a digital materials fee for course content.
Course Registration Form
To register for this course, use the form below to enter your information and desired start date. An Admissions Advisor will contact you to arrange payment and provide you with an Enrollment Agreement.
Frequently Asked Questions (FAQ)
What Are The Courses Like?
Our courses are project-based. In each course you’ll enjoy a series of lectures, projects, discussions, and critiques designed to stretch your creative skills, earning college credit for your completed course.
How Much Time Do I Need?
Classes start January, April, and August, and this course can be completed in a 15-week term. College credit from this course can be applied to a range of degree and certificate level programs at Sessions College.
Who Are The Instructors?
Our courses are developed and taught by our faculty of professional artists, designers, and photographers. This means that you’ll learn in-demand skills, get feedback on your work, and build a portfolio of creative work.
Is Sessions College accredited?
Yes. Since 2001, Sessions College has been accredited by the Distance Education Accrediting Commission (DEAC). The Distance Education Accrediting Commission is listed by the U.S. Department of Education as a recognized accrediting agency and is recognized by the Council for Higher Education Accreditation (CHEA).