VCD3112 Introduction to User Interface DesignBahçeşehir UniversityDegree Programs ENERGY SYSTEMS ENGINEERINGGeneral Information For StudentsDiploma SupplementErasmus Policy StatementNational QualificationsBologna Commission
ENERGY SYSTEMS ENGINEERING
Bachelor TR-NQF-HE: Level 6 QF-EHEA: First Cycle EQF-LLL: Level 6

Course Introduction and Application Information

Course Code Course Name Semester Theoretical Practical Credit ECTS
VCD3112 Introduction to User Interface Design Fall 2 2 3 5
This catalog is for information purposes. Course status is determined by the relevant department at the beginning of semester.

Basic information

Language of instruction: English
Type of course: Non-Departmental Elective
Course Level: Bachelor’s Degree (First Cycle)
Mode of Delivery: Face to face
Course Coordinator : Dr. Öğr. Üyesi İPEK TORUN
Recommended Optional Program Components: None
Course Objectives: This course concentrates on training the students to develop effective graphic design interfaces with Web page design. Analysis and design phases of the Web development process will be executed through given tasks.

Besides, students explore new software and technical information for creating content and design graphics for Web. Concept development from group discussions to final execution is encouraged.

Learning Outcomes

The students who have succeeded in this course;
1) define basic web technologies
2) define the Internet technologies that enable the World Wide Web
3) display skills to implement web sites based on web standards
4) design adaptable, accessible and optimized web sites
5) display skills to build HTML pages
6) display skills to style HTML pages using CSS
7) define capabilities and limitations of JavaScript
8) display skills to create and optimize multimedia content for the web
9) use common design patterns while designing web sites
10) display skills to balance aesthetics and usability issues when designing websites

Course Content

The course is structured in three parts.

First part aims students to understand the “High Level Design Decisions and Design Strategy for Web Development”, analyzing the requirements of the stakeholders of a web site to develop a conceptual content model prior to the visual design of the web page.
Second part will concentrate on visual design of web interfaces through a prototyping process for visualizing the ideas in the conceptual model and developing clear navigation tools for information requirements of stakeholders. Students will transfer their prior knowledge on layout, colors and typography to web medium.
The third part aims to give technical skills on production of web sites, including the animation tools, hypertext markup and optimized graphics.

Weekly Detailed Course Contents

Week Subject Related Preparation
1) First meeting: Introduction to the course, class discussion on course and student objectives
2) A brief history of the web. Introduction to web technologies and internet infrasructure. Assignment 1: Website analysis
3) HTML elements, attributes and document structure. Exercise 1: Building a basic HTML page. Presentation of Assignment 1. Assignment 2: Simple CV
4) Introduction to CSS: Selectors, statements and the cascade. Exercise 2: Styling Assignment 2. Assignment 3: Styling Exercise 1
5) Semantic HTML and accessibility. CSS box model and positioning, attribute and pseudo-selectors. Resources: Using images on a web page. Project 1: Design patterns
6) Resources: static resources and image optimization. Project 1 research presentations and critique.
7) Graceful degradation and responsive design. CSS @ rules and media types. Project 2: Portfolio website
8) Javascript: Programming basics. Variables, types, arrays, hashes and functions. Project 2 critique.
9) Javascript: The Document Object Model (DOM). Project 2 critique.
10) Javascript frameworks and graceful degradation. Browser compatibility. Project 2 Presentation
11) HTML Forms. CSS tips & tricks. Final project.
12) Text encoding. Language specifics. Search Engine Optimization (SEO). Final project critique.
13) Embedded multimedia. Final project critique.
14) Recap. Final project critique.

Sources

Course Notes / Textbooks: Will be distributed weekly
References: 1) ISO-9241-151 Ergonomics of human-system interaction — Part 151: Guidance on World Wide Web user interfaces
2) Sam Quayle, 2010, An Introduction to HTML Prototyping
3) Jennifer Tidwell, A Pattern Language for HCI Design, http://www.mit.edu/~jtidwell/
4) Handcraft — Online prototyping tool. Alternative to Codeanywhere
5) TextMate — Recommended code editor for Mac OS X
E - TextEditor — Recommended code editor for Windows
Mozilla Developer Network — HTML, CSS and JavaScript reference
6) When can I use… — A good resource for checking browser compatibility of HTML and CSS features
7) A List Apart — Recommended reading on web technologies
Course slides — The presentation I use in class
FontSquirrel — Good resource for web-ready fonts and home of the @font-face generator
8) Google Web Fonts — Web fonts served by Google for free
Code Academy — Online course for learning programming basics with JavaScript
9) InVision — Web bsed tool for building image-based mock-ups

Evaluation System

Semester Requirements Number of Activities Level of Contribution
Application 8 % 15
Quizzes 1 % 5
Homework Assignments 2 % 40
Final 1 % 40
Total % 100
PERCENTAGE OF SEMESTER WORK % 60
PERCENTAGE OF FINAL WORK % 40
Total % 100

ECTS / Workload Table

Activities Number of Activities Workload
Course Hours 14 56
Study Hours Out of Class 13 44
Homework Assignments 8 16
Quizzes 1 4
Final 1 4
Total Workload 124

Contribution of Learning Outcomes to Programme Outcomes

No Effect 1 Lowest 2 Low 3 Average 4 High 5 Highest
           
Program Outcomes Level of Contribution
1) Build up a body of knowledge in mathematics, science and Energy Systems Engineering subjects; use theoretical and applied information in these areas to model and solve complex engineering problems.
2) Ability to identify, formulate, and solve complex Energy Systems Engineering problems; select and apply proper modeling and analysis methods for this purpose.
3) Ability to design complex Energy systems, processes, devices or products under realistic constraints and conditions, in such a way as to meet the desired result; apply modern design methods for this purpose.
4) Ability to devise, select, and use modern techniques and tools needed for solving complex problems in Energy Systems Engineering practice; employ information technologies effectively.
5) Ability to design and conduct numerical or pysical experiments, collect data, analyze and interpret results for investigating the complex problems specific to Energy Systems Engineering.
6) Ability to cooperate efficiently in intra-disciplinary and multi-disciplinary teams; and show self-reliance when working on Energy Systems-related problems
7) Ability to communicate effectively in English and Turkish (if he/she is a Turkish citizen), both orally and in writing. Write and understand reports, prepare design and production reports, deliver effective presentations, give and receive clear and understandable instructions.
8) Recognize the need for life-long learning; show ability to access information, to follow developments in science and technology, and to continuously educate oneself.
9) Develop an awareness of professional and ethical responsibility, and behave accordingly. Be informed about the standards used in Energy Systems Engineering applications.
10) Learn about business life practices such as project management, risk management, and change management; develop an awareness of entrepreneurship, innovation, and sustainable development.
11) Acquire knowledge about the effects of practices of Energys Systems Engineering on health, environment, security in universal and social scope, and the contemporary problems of Energys Systems engineering; is aware of the legal consequences of Energys Systems engineering solutions.