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.
Visit the Student Gallery.
About This Course
Project-Based Learning
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 Skills Will I Develop?
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.
What Software and 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).
Course Instructor(s)
The course is taught by the following instructor(s):
Piper Nilsson
Piper Nilsson is a graphic/Web designer and educator. Piper has been working with the Web since 1997, working in various roles as a designer, programmer, and information architect, Piper blueprinted sites for such global clients as MetLife, Pepsi, ETS, and Citibank.
Course Outline
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.
Frequently Asked Questions (FAQ)
How Do The Courses Work?
Our courses are project-based and instructor-led. In each course you’ll complete a series of lectures, projects, discussions, and critiques designed to stretch your creative skills. Weekly assignment deadlines keep you on track, and with no set-logins or Zoom meetings, you can build your studies around your schedule.
Who Are The Instructors?
Our courses are developed and taught by our industry-leading faculty of creative professionals. This means that you’ll learn in-demand skills, get feedback on your work, and build a portfolio of creative work. View our Student Gallery for featured student projects.
When Can I Start?
Classes start January, April, and August, and this course is completed in a 15-week term. College credit from this course can be applied to a range of Degree and Certificate programs at Sessions College. You can enroll in this course on an individual basis or as part of a program.
Explore our Programs: Bachelor's Degree | Associate Degree | Undergraduate Certificate
How Do I Register?
To register for a program, complete our program application. To register for this course on an individual basis, please contact our admissions team at admissions@sessions.edu. An Admissions Advisor will contact you to setup your enrollment.
| Course Tuition and Fees | |
|---|---|
| Tuition | $300/credit |
| Registration Fee* | $200 |
| Total Course Price | $1100 |
Registration fees are nonrefundable after 5 days from enrollment.
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).