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
Introduction Background – APSU Computer Science Motivation “The End in Mind” Course Design Outcome Challenges
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
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
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?
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
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
I am not a born programmer / designer :PI am not good at Math (born?) :PBasic 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 skillsExamples?
“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
Course Design - Teaching Methodology • Design Principles • web design • space design • Technical • programming • tools Students • Web Site Planning • project • process
Course Design – Design Principles Design Principles Students • Web Site Planning • project • process • 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
Course Design – Technical Design Principles 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
Course Design – Website Planning Design Principles Technical Students Website Planning • To develop a real-world web user interface mock-up/prototype • A individual project • Content report, client requests, visual research, 4 sketches, color scheme • Fireworks (png) mock-up file • Sliced Fireworks (png) file, working static website (html, css, images) with content • Presentation, website portfolio (screen captures) • Assignment 3 – visual research • Term Test –theories
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
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 Science Austin Peay State University, Tennessee, USA