1 / 19

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

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

gene
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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?) :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?

  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 Students • Web Site Planning • project • process

  13. 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

  14. 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

  15. 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

  16. Outcome – through the project

  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?

  19. ::: Thank You ::: Leong Lee, Ph.D. Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee, USA

More Related