CSF3133 Web-Based Interface Design Course Outline PDF

WEB-BASED INTERFACE DESIGN DAY & TIME: EVERY MONDAY | 3-5 PM Assoc. Prof. Ts. Dr. Wan Nural Jawahir Hj Wan Yussof VENUE: BK4SMS PhD (UMT), MSc., B.IT (KUSTEM)...

WEB-BASED INTERFACE DESIGN DAY & TIME: EVERY MONDAY | 3-5 PM Assoc. Prof. Ts. Dr. Wan Nural Jawahir Hj Wan Yussof VENUE: BK4SMS PhD (UMT), MSc., B.IT (KUSTEM) [email protected] Ph.D, M.Sc. (UMT), B.IT (KUSTEM) Expertise: Computer Vision and Image Processing 019-2281714 [email protected] Prof. Madya Ts. Dr. Wan Nural Jawahir Hj Wan Yussof Web designer salary in Malaysia How much does a Web Designer make in Malaysia? https://malaysia.indeed.com/career/web-designer/salaries https://my.jobstreet.com/career-advice/role/webdesigner/salary  Agenda 1 Course Sypnopsis 2 Course Content & Schedule 3 Course Learning Outcomes 4 Course Assessment 5 Course Contents  Course Synopsis This course offers the knowledge of integrating a basic concept of Human Computer Interaction (HCI) with Web Design. This course also, practically, will expose students to the two (2) core technologies for building web sites which are Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Before the end of this course, students will develop a simple web site by applying the principles and methods to the design of user-centred web sites. This course is critical for exposing students to the fundamentals of web interface design and web programming. Course Learning Outcomes Describe the basic concepts of human and computer 1 interaction and the web interface design. (C2, PLO1) Analyze web design principles and methods to be 2 applied in the developed websites. (C4, PLO3) Build HTML Code and CSS (mark-up languages, 3 scripting languages, and interface design) based on the problem domain. (P4, PLO10) Course Assessment Assessment % Quiz 5 CLO1 / PLO1 : Knowledge & Test 10 Understanding Final Exam 20 Test 5 CLO2 / PLO3 : Cognitive Project Report 15 Final Exam 20 Practical Report 15 CLO3/PLO10 : Digital Skill Practical Test 10 100  Internet and the Web Web Standards and Achievements Information over the Web Network Overview Topic 1 Client / Server Model Internet Protocol Introduction to Internet and World Wide Web Uniform Resource Identifiers & Domain Names Markup Language  Design for Target Audiences Website Organization Visual Design Principles Design for Accessibility Writing for the Web Topic 2 Color Usage Graphics and Multimedia Uses Web Design Features of Other Designs to Consider Navigation Design Page Layout Design Design for Mobile Web  Navigation Design Page Layout Design Design for Mobile Web Topic 2 Web Design Best Practices Web Design (Part 2)  Document Type Definition Website Templates HTML Elements Heading, Title, Meta, and Body Elements Heading Elements Paragraph Elements Line Break Elements Topic 3 Blackqoute Elements HTML Phrase Eelements Ordered List Unordered List List of Descriptions Special Characters Structure Elements Anchor Elements  Introduction to HTML 5 HTML 5 Structure Elements Topic 4 HTML 5 New Elements HTML 5 Form Input HTML 5  Inline Styles Embedded Style Sheets Topic 5 Conflicting Styles Linking External Style Sheets Cascading Style Sheet (CSS) (Part 1) Positioning Elements  Elements Dimention Box Model and Text Flow Drop- Down Menus Text Shadows Topic 5 Rounded Corners Cascading Style Sheet (CSS) Colour (Part 2) Box Shadows Multiple Background Images  Introduction Data Types, Literal and Variables Dialogue Box Operators Topic 6 Conditional Statements and Looping Javascript Functions JavaScript Objects  Large-Scale Project Development Web Development Process The Whole Overview of Domain Name Web Hosting Topic 7 Choosing a Virtual Host Page Layout Design Web Development Web Mobile Design The Best Practices of Web Development  Human Input and Output Channel Human Memory Thinking: Reasoning and Problem Solving Emotions The Difference between Human Personality Topic 8 Psychology and Interactive System Design Human Computer Interaction Interaction Models Human Computer Interaction Framework Ergonomic  Today’s Activity Objective: Analyze a website to understand key aspects of web design. Group Formation (5 minutes) You will be divided into 10 groups, each consisting of 5-6 members. Each group will be assigned a specific website to evaluate. Website Evaluation Guidelines (5 minutes) Your group will analyze the assigned website based on the following criteria: Aesthetics: Is the website visually appealing? Consider the design, color schemes, and overall look. Navigation: Is the website easy to navigate? Can you find information quickly? Responsiveness: How well does the website perform on different devices (e.g., smartphones, tablets, computers)? Content: Is the content clear, relevant, and engaging? Group Discussion (15 minutes) Discuss the website within your group using the criteria above. Appoint one group member to take notes and summarize your discussion. Presentation (30 minutes) A few groups will present their findings to the class. Your presentation should be 5 minutes long and cover your analysis based on the criteria. Be prepared to share your group’s thoughts and observations. You can choose from several popular websites, such as: 1. E-commerce sites (e.g., Amazon, Shopee) 2. News sites (e.g., BBC, The Guardian) 3. Social media platforms (e.g., Facebook, Instagram) 4. Educational institutions’ websites (e.g., university websites) 5. Entertainment/Streaming sites (e.g., Netflix, YouTube, Disney+) 6. Travel and Hospitality sites (e.g., Airbnb, Booking.com, TripAdvisor) 7. Government or Public Services sites (e.g., Gov.uk, IRS.gov, Malaysian Government Portal) 8. Non-Profit or Charity sites (e.g., WWF, Red Cross, UNICEF) 9. Technology/Software Company sites (e.g., Apple, Microsoft, Google) 10. Sports/Entertainment News sites (e.g., ESPN, Bleacher Report, TMZ)