Web and User Interface Design

Web and User Interface Design.

COURSE DESCRIPTION
Instruction in the methods and techniques of website design from concept to completion. Course covers site construction in HTML with cascading style sheets (CSS). Course emphasizes organizational design considerations such as information hierarchy, legibility, and accessibility, while maintaining a professional standard in graphic design treatment.

LEARNING OUTCOMES
Over the course of the semester, students:

Develop a Foundation in Web Development: Understand the core stages and practices involved in the web development process.
Recognize the Role of Programming in Design: Explore how programming integrates with graphic design to enhance functionality and interactivity.
Engage with Web Design Theories and Technologies: Study foundational theories and essential tools used in modern web design.
Master Industry-Standard Front-End Languages: Gain practical experience with HTML and CSS, preparing for real-world applications.
Implement Current Best Practices: Learn techniques that meet today's web standards, ensuring accessibility, compatibility, and efficiency.

As a result, students should leave the course with the ability to:

Understand and Interpret Front-End Code: Read and analyze code to identify structure, function, and design elements effectively.
Create and Publish Interactive Web Pages: Develop functional and interactive pages suitable for professional presentation.
Design Within Web Frameworks: Navigate the constraints and possibilities within various web frameworks to achieve cohesive designs.

EVALUATION METHODS — ASSIGNMENTS
Video Lectures & Homework Assignments
Between classes, students watch assigned video lectures to introduce new concepts and complete the associated homework assignments to reinforce those topics.

In-Class Assessments
In-class assessments expand on the material from the video lectures/homework assignments and are more open-ended, asking students to apply what they’ve learned in a more complex project. These assessments are completed during class time, allowing students to ask for help with problem-solving and debugging from the instructor and classmates.

Projects
Over the course of the semester, students complete three major projects that cover the foundational knowledge of web design, HTML, and CSS developed throughout the term. Projects are larger, more comprehensive assignments designed to demonstrate students' ability to apply course concepts in a deeper, more sustained way than homework or in-class assessments.

PROJECT DESCRIPTIONS

Project 1: Semantic HTML Portfolio/Blog (No CSS)
Focus: Structure, hierarchy, accessibility, and metadata

In this foundational web design project, students build a three-page static website using only HTML—no CSS or JavaScript. The assignment prioritizes semantic structure, content hierarchy, and accessibility best practices over visual styling.

Students design a homepage, an about page, and a content/blog page that demonstrate clear navigation, meaningful markup, and logical heading structure. Emphasis is placed on proper use of semantic tags (<header>, <nav>, <main>, <section>, <footer>), accessible image attributes (descriptive alt text with defined dimensions), and a readable heading hierarchy.

A significant component of the project focuses on the <head> section. Students implement custom titles, meta descriptions, Open Graph tags for social sharing, and a favicon—introducing them to search optimization, accessibility, and preview behavior across platforms.

The project scaffolds research, wireframing, and structured planning before development. Students analyze existing content-driven websites, produce low-fidelity wireframes, and publish their final site via GitHub.

Learning Outcomes:

Apply semantic HTML to create accessible and meaningful web structure
Establish visual hierarchy through content organization rather than styling
Understand the role of metadata in discoverability and user experience
Develop foundational GitHub workflow skills

Project 2: Print-to-Web Translation (Responsive Design)
Focus: Responsive systems, layout translation, accessibility

This project challenges students to translate an existing print publication (magazine, zine, catalog, or editorial layout) into a fully responsive website for desktop and mobile screens.

Students begin by analyzing a print layout’s grid system, typographic hierarchy, and visual rhythm. They then reinterpret that design for digital space, creating two responsive layouts: desktop (1025px+) and mobile (480px and below).

The assignment emphasizes adaptability between media systems. Students use HTML and CSS (Flexbox, Grid, or other layout methods) to maintain hierarchy while adjusting for scroll behavior, responsive breakpoints, and digital usability. Accessibility standards—including semantic HTML, alt text, color contrast, and logical heading structure—are required.

The project also integrates research and visual benchmarking. Students collect ten web design references and analyze three structural examples that inform their translation strategy. All work is developed and published using GitHub.

Learning Outcomes:

Analyze and translate design systems across media formats
Build responsive layouts using CSS media queries
Maintain typographic and structural hierarchy across viewports
Implement accessibility standards in both structure and styling
Strengthen digital publishing workflow through GitHub

Project 3: Themed Event Website with Motion
Focus: Visual identity, branding, interactivity, accessibility

In this creative web design project, students conceptualize and build a three-page event website for an over-the-top birthday, holiday, or celebratory event. The assignment integrates branding, layout systems, and motion design.

Students first develop a brand guide outlining the event theme, audience, location, color palette, and typefaces. They then wireframe and build three linked pages: a landing page (announcement), an about page (profile of the birthday person, holiday, etc), and a schedule page (event timeline).

The site must include at least one CSS transition or animation to enhance engagement—such as hover effects, fade-ins, or transformations. Students create both desktop (1025px+) and mobile (480px and below) versions to ensure responsive functionality.

Accessibility remains central: semantic HTML, meaningful alt text, sufficient color contrast, and logical heading hierarchy are required. Metadata—including Open Graph tags, theme color, and favicon—ensures professional polish and shareability.

Learning Outcomes:

Develop cohesive visual branding for digital platforms
Apply HTML and CSS to create structured, responsive layouts
Integrate motion through CSS transitions or animation
Design with accessibility and usability in mind
Publish and manage projects using GitHub