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
-
HTK21S1Tietojenkäsittely (AMK)
-
HTK22S1Tietojenkäsittely (AMK)
-
HTK23S1Tietojenkäsittely (AMK)
-
HTK20S1Tietojenkä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
-
HTK22S1Tietojenkäsittely (AMK)
-
HTK23S1Tietojenkäsittely (AMK)
-
ZJAHTK23S1Avoin 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
-
HTK21S1Tietojenkäsittely (AMK)
-
HTK22S1Tietojenkäsittely (AMK)
-
ZJAHTK22S1Avoin 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
-
HTK21S1Tietojenkäsittely (AMK)
-
HTK20S1Tietojenkä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.