Teaching a New Web User Interface Design Course to Computer Science - Web Technology Undergraduates

Leong Lee, Ph.D.Assistant Professor, Dept. of Computer Science

Austin Peay State University, Tennessee, USA

2

Introduction

• Background – APSU Computer Science• Motivation• “The End in Mind”• Course Design• Outcome• Challenges

3

Background – APSU Computer Science

• The Department of Computer Science & IT offers a Bachelor of Science degree with a major in Computer Science and Information Systems (CS&IS)

• Four areas of study or concentrations:– Computer Science – Information Systems Concentration – Internet and Web Technology– Database Administration

• There are currently about 400 CS&IS majors• Around 30 to 40 graduates each year

4

Background – APSU Computer Science

• Four minors:– Computer Science – Computer Networking– Mobile Software Technology– Web Technology

• To graduate, a CS&IS major student needs to choose/satisfy– a concentration – a minor (or second concentration)

• After graduation, most CS&IS graduates would seek employment

5

Motivation - Questions

• Two computer science (Internet and Web Technology concentration) graduate A & B, will graduate in May next year (not 1965)

• Both can write good programs, same GPA• A’s user interfaces are pleasant, professional, and follow basic

design principles; A is also experienced in the latest web interface programming tools

• B’s user interfaces are ugly, something is just not right; B has no web interface design / programming experience

• If you are an employer looking for a software developer (only one), which one will you employ (in today’s economy with a tight budget)? Why?

6

Motivation

• CSCI 4940 Internship in Info. Technology • Database Administration and Internet and Web Technology

concentration students are given internship opportunities• Potential employers (who have taken in our interns)

expressed interests in having students with more interface design skills (nicer websites?)

• Technology trend: HTML 5– HTML 5 is just the markup– Use CSS to create the visual look and feel– Separate content from presentation (keep 99% of the design in CSS)

• Result? Let’s design a Web User Interface Design Course

7

Motivation

• CSCI 4940 Internship in Info. Technology • Database Administration and Internet and Web Technology

concentration students are given internship opportunities• Potential employers (who took our interns) expressed

interests in having students with more interface design skills (nicer websites?)

• Technology trend: HTML 5– HTML 5 is just the markup– Use CSS to create the visual look and feel– Separate content from presentation (keep 99% of the design in CSS)

• Result? Let’s design a Web User Interface Design Course

8

I am not a born programmer / designer :PI am not good at Math (born?) :P

Basic web design principles are easy (1 course), and they can be incorporated into programming

codes (it will be fun)

CS students can be trained in basic design skills, like they can be trained in programming skills

Examples?

9

Functional site following 4 basic design principles (AmphibAnat.org, 2007 to 2010)

• NSF funded ($1,116K)• Web interface design:

(different design templates)• Client-side programming:

JavaScript, CSS, html• Server-side programming:

C#.net• Relational database

design/admin: Microsoft SQL Server

• Server setup/admin: Microsoft IIS web server and Microsoft Windows server

10

“The End in Mind”

11

“The End in Mind”

• Upon completion of this course students should be able to– demonstrate the understanding of web site planning by producing a

real-life web application design and development project (static site)– … others

• A “good” web design– aesthetically appealing with engaging presentation layouts and

attractive graphics

• It fits nicely with our existing courses– CSCI 3300 Introduction to Web Development (client side)– CSCI 3350 Web User Interface Design (aesthetics)– CSCI 4000 Advanced Web Development (server side)– … others, database, server etc

12

Course Design - Teaching Methodology

Design Principles• web design• space design

Technical• programming

• tools

Web Site Planning• project• process

Students

13

Course Design – Design Principles

Web Site Planning• project• process

Students

• 4 basic web design principles– alignment, proximity, contrast and

repetition– Assignment 1- ideation sketchbook

• Visual space design principles– scale, stability, dynamics, contrast,

asymmetric– Assignment 2 - ideation sketchbook

• Textbooks (1 & 2)– The Principles of Beautiful Web Design,

2nd Edition, by Jason Beaird– The Non-Designer's Web Book, 3rd

Edition, by Robin Williams & John Tollett

Design Principles

14

Course Design – Technical

Students

• Students should have programming background (C++ and/or Java)

• CSCI 3300 Introduction to Web Development (client side)

• HTML & CSS are reviewed• Textbooks (3 & 4)

– Adobe Dreamweaver CS5 Classroom in a Book, Adobe Press

– Adobe Fireworks CS5 Classroom in a Book, Adobe Press

• Assignment 4 – Dreamweaver website• Assignment 5 – Fireworks site mock-up

Design Principles

Technical

15

Course Design – Website Planning

Students

• To develop a real-world web user interface mock-up/prototype

• A individual project1. Content report, client requests, visual

research, 4 sketches, color scheme2. Fireworks (png) mock-up file3. Sliced Fireworks (png) file, working

static website (html, css, images) with content

4. Presentation, website portfolio (screen captures)

• Assignment 3 – visual research• Term Test –theories

Design Principles

Technical

Website Planning

16

Outcome – through the projectNo Website Title Internal Client1 Taskforce Doug Catellier,

GIS Analyst2 apdatasolutions.org Doug Catellier,

GIS Analyst3 2nd Order Differential Equations Dr. Samuel Jator,

Professor Mathematics4 J Computing Dr. Samuel Jator,

Professor Mathematics5 Hydraulic Geometry Dr. Gregory Ridenour,

Professor Geography6 Pothole Management Website Mike Wilson,

GIS Manager

17

Outcome – through the project

• Basic web design principles emphasizing alignment, proximity, contrast and repetition

• Web design topics incorporating layout, color, texture, typography and imagery

• User interface design principles for web pages• Client side programming• Web site planning• Process of designing and developing user interface mock-

ups/prototypes

18

Challenges

• Good design work requires time and effort– e.g. Assignment 1 takes around 15 hours for some of the students

• CS students are good programmers, but they are not used to visual design work (initially, will need to overcome the hurdle)

• Professional web design software is expensive• The course is now compulsory for CS&IS Internet and Web

Technology concentration students– Class will become bigger for the next run of the course

• Extremely good design vs extremely bad design => grading?

::: Thank You :::

Leong Lee, Ph.D.

Assistant Professor, Dept. of Computer ScienceAustin Peay State University, Tennessee, USA