Web UI 2Laajuus (3 cr)

Objective

During Web UI 2 course, you will learn how to independently develop and design versatile, responsive websites and user interface components. You will understand the importance of accessibility, information hierarchy, and visual hierarchy in the design of web applications. Web-technologies are used for development. Prototyping tools and usability-focused methods are used for design.

After completing the course, you have learned to create independently responsive and usable websites with a CSS library using prototyping tools and to create user interface components.

Course competencies
- Web development competence
- Systems and methods in ICT
- Learning and information management competence

You will learn to use prototyping tools and layout libraries. You understand the importance of layout design and usability in web application development. You can create a usable, accessible, and functional website based on a prototype you create.

Content

- UI / UX design
- Layout libraries
- Responsible website design
- Accessibility

Qualifications

Web UI (HTKA0030) or adequate HTML and CSS skills.

Assessment criteria, satisfactory (1)

Sufficient 1: You recognize the terms used in the course. You know the importance of layouts, animations, information hierarchy, usability, colors, and typography in the user interface of website. You can use the prototyping tool to create a prototype of a website.

Satisfactory 2: You use the terminology of the course. You know the importance of layouts, animations, information hierarchy, usability, colors, and typography in the user interface of website. You can use a prototyping tool to create a prototype of a website, and a working version based on it.

Assessment criteria, good (3)

Good 3: You use the terminology of the course fluently. You know the importance of layouts, animations, information hierarchy, usability, colors, and typography in the user interface of website and are able to apply some of this knowledge in practice. You can use a prototyping tool to create a prototype of a website, and a working version based on it. You can justify your solutions in the design and development of web applications.

Very good 4: You use the terminology of the course fluently. You understand the importance of layouts, animations, information hierarchy, usability, colors and typography in the layout of web applications and will be able to apply your knowledge in practice. You can use the prototyping tool to create a prototype of a website, and based on that prototype, a ready-made version. You analyze and are able to justify your solutions in the design and development of web applications.

Assessment criteria, excellent (5)

Excellent 5: You use the terminology of the course fluently. You understand the importance of layouts, animations, information hierarchy, usability, colors and typography in user interface of website and will be able to apply your knowledge in practice. You can use the prototyping tool to create a prototype from a website, and based on that, a ready-made version. You analyze and be able to justify your solutions in the design and development of web applications. You master the planning process and are abloe to solve problem situations.