Skip to main content

Web UI 2Laajuus (3 cr)

Code: HT00BP68

Credits

3 op

Responsible person

  • Jarkko Immonen

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.

Enrollment

18.11.2024 - 09.01.2025

Timing

13.01.2025 - 19.05.2025

Number of ECTS credits allocated

3 op

Mode of delivery

Face-to-face

Unit

School of Business

Campus

Main Campus

Teaching languages
  • Finnish
Seats

0 - 51

Degree programmes
  • Bachelor's Degree Programme in Business Information Technology
Teachers
  • Heikki Sateila
Groups
  • HTK21S1
    Tietojenkäsittely (AMK)
  • HTK22S1
    Tietojenkäsittely (AMK)
  • HTK23S1
    Tietojenkäsittely (AMK)
  • HTK20S1
    Tietojenkäsittely

Objectives

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

Learning materials and recommended literature

Learning material shown by the teacher.

Documentation:
https://help.figma.com/hc/en-us
https://tailwindcss.com/docs

Teaching methods

- Contact lessons
- Exercises
- Final project

Exam dates and retake possibilities

The final project will be presented in the seminar organized at the end of the course.

Alternative completion methods

Sinulla on oikeus hakea osaamisen tunnistamista ja tunnustamista, jos sinulla on aiemmin hankittua osaamista (esimerkiksi muualla suoritettuja korkeakouluopintoja), joita voidaan katsoa hyväksi nyt suoritettavaan tutkintoon.

Osaamisen tunnistamisessa ja tunnustamisessa on kolme päätapaa: hyväksilukeminen (korvaaminen, sisällyttäminen) ja muulla tavoin hankitun osaamisen tunnistaminen ja tunnustaminen sekä opinnollistaminen. Lisätietoa JAMKin tutkintosäännössä, luku 17.

Lisätietoja saa opintojakson vastuuopettajalta.

Student workload

81 h

Further information for students

Avoin amk 10 (included in the total capacity)

Evaluation scale

0-5

Evaluation criteria, satisfactory (1-2)

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.

Evaluation criteria, good (3-4)

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.

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

Prerequisites

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

Enrollment

20.11.2023 - 04.01.2024

Timing

04.03.2024 - 20.05.2024

Number of ECTS credits allocated

3 op

Mode of delivery

Face-to-face

Unit

University Services

Campus

Main Campus

Teaching languages
  • Finnish
Seats

20 - 30

Degree programmes
  • Bachelor's Degree Programme in Business Information Technology
Teachers
  • Jarkko Immonen
  • Joonas Nahkala
Groups
  • HTK22S1
    Tietojenkäsittely (AMK)
  • HTK23S1
    Tietojenkäsittely (AMK)
  • ZJAHTK23S1
    Avoin AMK, Tiko, AMK-polut, tietojenkäsittely, tradenomi amk

Objectives

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

Learning materials and recommended literature

Learning material shown by the teacher.

Documentation:
https://help.figma.com/hc/en-us
https://tailwindcss.com/docs

Teaching methods

- Contact lessons
- Exercises
- Final project

Exam dates and retake possibilities

The final project will be presented in the seminar organized at the end of the course.

Alternative completion methods

Sinulla on oikeus hakea osaamisen tunnistamista ja tunnustamista, jos sinulla on aiemmin hankittua osaamista (esimerkiksi muualla suoritettuja korkeakouluopintoja), joita voidaan katsoa hyväksi nyt suoritettavaan tutkintoon.

Osaamisen tunnistamisessa ja tunnustamisessa on kolme päätapaa: hyväksilukeminen (korvaaminen, sisällyttäminen) ja muulla tavoin hankitun osaamisen tunnistaminen ja tunnustaminen sekä opinnollistaminen. Lisätietoa JAMKin tutkintosäännössä, luku 17.

Lisätietoja saa opintojakson vastuuopettajalta.

Student workload

80 h

Further information for students

Avoin amk 10 (included in the total capacity)

Evaluation scale

0-5

Evaluation criteria, satisfactory (1-2)

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.

Evaluation criteria, good (3-4)

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.

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

Prerequisites

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

Enrollment

01.11.2022 - 05.01.2023

Timing

06.03.2023 - 19.05.2023

Number of ECTS credits allocated

3 op

Mode of delivery

Face-to-face

Unit

School of Business

Campus

Main Campus

Teaching languages
  • Finnish
Seats

0 - 30

Degree programmes
  • Bachelor's Degree Programme in Business Information Technology
Teachers
  • Joonas Nahkala
Groups
  • HTK21S1
    Tietojenkäsittely (AMK)
  • HTK22S1
    Tietojenkäsittely (AMK)
  • ZJAHTK22S1
    Avoin AMK, Tiko, AMK-polut, tietojenkäsittely, tradenomi amk

Objectives

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

Learning materials and recommended literature

Opettajan osoittama oppimateriaali.

Kirjastojen omat dokumentaatiot:
https://help.figma.com/hc/en-us
https://tailwindcss.com/docs

Teaching methods

- Luennot
- Ohjaus- ja tehtäväkontaktit
- Tehtävät
- Lopputyö

Exam dates and retake possibilities

Loppytyö esitellään opintojakson lopuksi järjestettävässä seminaarissa.

Alternative completion methods

Sinulla on oikeus hakea osaamisen tunnistamista ja tunnustamista, jos sinulla on aiemmin hankittua osaamista (esimerkiksi muualla suoritettuja korkeakouluopintoja), joita voidaan katsoa hyväksi nyt suoritettavaan tutkintoon.

Osaamisen tunnistamisessa ja tunnustamisessa on kolme päätapaa: hyväksilukeminen (korvaaminen, sisällyttäminen) ja muulla tavoin hankitun osaamisen tunnistaminen ja tunnustaminen sekä opinnollistaminen. Lisätietoa JAMKin tutkintosäännössä, luku 17.

Lisätietoja saa opintojakson vastuuopettajalta.

Student workload

Opintojakson keskimääräinen kuormittavuus on 80 tuntia

Further information for students

Avoin amk 5 (included in the total capacity)

Evaluation scale

0-5

Evaluation criteria, satisfactory (1-2)

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.

Evaluation criteria, good (3-4)

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.

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

Prerequisites

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

Enrollment

01.11.2021 - 09.01.2022

Timing

10.01.2022 - 31.05.2022

Number of ECTS credits allocated

3 op

Virtual portion

1 op

Mode of delivery

67 % Face-to-face, 33 % Online learning

Unit

School of Business

Teaching languages
  • Finnish
Degree programmes
  • Bachelor's Degree Programme in Business Information Technology
Teachers
  • Jarkko Immonen
  • Joonas Nahkala
Groups
  • HTK21S1
    Tietojenkäsittely (AMK)
  • HTK20S1
    Tietojenkäsittely

Objectives

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

Learning materials and recommended literature

Opettajan kirjoittama oppimateriaali.

Kirjastojen omat dokumentaatiot:
https://help.figma.com/hc/en-us
https://tailwindcss.com/docs

Teaching methods

- Luennot (verkossa ja luokassa, tallenteet tarjolla)
- Ohjaus- ja tehtäväkontaktit
- Tehtävät
- Lopputyö

Exam dates and retake possibilities

Lopputentti järjestetään opintojakson lopussa joko konetenttinä tai loppukeskusteluna. Uusintamahdollisuuksista tiedotetaan erikseen opintojakson lopussa.

Alternative completion methods

Sinulla on oikeus hakea osaamisen tunnistamista ja tunnustamista, jos sinulla on aiemmin hankittua osaamista (esimerkiksi muualla suoritettuja korkeakouluopintoja), joita voidaan katsoa hyväksi nyt suoritettavaan tutkintoon.

Osaamisen tunnistamisessa ja tunnustamisessa on kolme päätapaa: hyväksilukeminen (korvaaminen, sisällyttäminen) ja muulla tavoin hankitun osaamisen tunnistaminen ja tunnustaminen sekä opinnollistaminen. Lisätietoa JAMKin tutkintosäännössä, luku 17.

Lisätietoja saa opintojakson vastuuopettajalta.

Student workload

Opintojakson keskimääräinen kuormittavuus on 80 tuntia (3op)

~20h webinaareja
~15h kontaktiohjausta
- 20h itsenäistä työtä
~25h lopputyötä

Content scheduling

Voit tarkentaa toteutuksen etenemistä ja aikataulua, esim. jos on erilaisia vaiheistuksia (labrat tai harjoitukset, työelämään tutustuminen jne.), voit kertoa, miten ne ajoittuvat toteutukselle.

Evaluation scale

0-5

Evaluation criteria, satisfactory (1-2)

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.

Evaluation criteria, good (3-4)

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.

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

Prerequisites

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