{"id":10073449,"date":"2022-04-21T09:35:40","date_gmt":"2022-04-21T07:35:40","guid":{"rendered":"https:\/\/www.fh-joanneum.at\/?post_type=projects&#038;p=73449"},"modified":"2022-04-21T09:36:00","modified_gmt":"2022-04-21T07:36:00","slug":"interactive-web-experiences","status":"publish","type":"project","link":"https:\/\/www.fh-joanneum.at\/en\/project\/interactive-web-experiences\/","title":{"rendered":"Interactive Web Experiences"},"content":{"rendered":"<div class=\"wp-block-sidebar-layout-container margin-bottom-normal\">\n    <div\n        class=\"container-lg\"\n        style=\"--bs-gutter-x: 0;\"\n    >\n        <div\n            class=\"row\"\n            style=\"--bs-gutter-x: 0;\"\n        >\n            \n<div class=\"col-12 col-md-3 order-1 order-md-0 sidebar\">\n            \n<div\n    id=\"\"\n    class=\"wp-block-institute-card margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n                                    <div class=\"row justify-content-around\">\n                    <div class=\"col-8 col-sm-6 col-md-12\">\n                        <a\n        class=\"medien-und-design institute-card\"\n        href=\"https:\/\/www.fh-joanneum.at\/en\/institute\/design-communication\/\"\n        target=\"_self\"\n    >\n                            <div class=\"major-bg-color\">\n            <div class=\"wrapper\">\n                <div class=\"header\">\n                    <span>Institute<\/span>\n                <\/div>\n                <h4>Design &amp; Communication<\/h4>\n            <\/div>\n        <\/div>\n            <span><\/span>\n                    <\/a>\n                    <\/div>\n                <\/div>\n                        <\/div>\n<\/div>\n\n<div id=\"\" class=\"wp-block-fact-box margin-bottom-normal\">\n  <div class=\"container-lg\">\n        <div class=\"row justify-content-around\">\n            <div class=\"col-8 col-sm-6 col-md-12\">\n                <div class=\"card border border-light p-3\">\n                    <ul class=\"list-unstyled mb-0\">\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Bachelor\u2019s Thesis \n                          <\/div>\n                          <div class=\"value fw-bold\">2021<\/div>\n                        <\/li>\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Author\n                          <\/div>\n                          <div class=\"value fw-bold\">Patrick Wibmer<\/div>\n                        <\/li>\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Major\n                          <\/div>\n                          <div class=\"value fw-bold\">Interaction Design<\/div>\n                        <\/li>\n                                              <li\n                          class=\"\"\n                        >\n                          <div class=\"label mb-1\">\n                            Supervisor\n                          <\/div>\n                          <div class=\"value fw-bold\">Dietmar Mosbacher<\/div>\n                        <\/li>\n                                          <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div\n        id=\"\"\n        class=\"wp-block-person-card margin-bottom-normal\"\n    >\n        <div class=\"container-lg\">\n            <div class=\"row justify-content-around\">\n                <div class=\"col-8 col-sm-6 col-md-12\">\n                    <a href=\"https:\/\/www.fh-joanneum.at\/en\/university\/person\/dietmar-mosbacher\"\n    class=\"person-card\">\n    <div class=\"border border-light h-100\">\n\n        <div class=\"image-wrapper\">\n            <picture>\n        <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/online.fh-joanneum.at\/JOANNEUMonline\/visitenkarte.showImage?pPersonenGruppe=3&amp;pPersonenId=8091C6E156E23FFB\"\n        alt=\"\"\n        title=\"\"\n                 onerror=\"this.src = 'https:\/\/www.fh-joanneum.at\/app\/themes\/fh\/public\/images\/avatar_dummy.e5edf9.png'\"     >\n<\/picture>\n\n        <\/div>\n        <div class=\"p-2 p-xl-3\">\n                            <p class=\"mb-1 hyphens\">Doz. (FH)<\/p>\n                        <h6>Dietmar Mosbacher<\/h6>\n                            <p class=\"mb-1 hyphens\"> MSc<\/p>\n                        <p class=\"mb-0 hyphens\">\n              Head of Postgraduate Master&#8217;s Program &#8220;Visual Communication and Image Managament&#8221;\n            <\/p>\n        <\/div>\n    <\/div>\n<\/a>                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n<\/div>\n\n<div class=\"d-none d-md-flex col-md-1 seperator-column\"><\/div>\n<div class=\"col-12 col-md-8 order-0 order-md-1\">\n     \n<div id=\"\" class=\"wp-block-text-content margin-bottom-normal\">\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col\">\n                <p>With this bachelor&rsquo;s thesis, the author is trying to find out which impact animations and interactions have on users. The process of creating an interactive website and what needs to be considered is discussed. The bachelor&rsquo;s thesis also deals with the development of different web technologies, contemporary web design, and current trends. How does a website design come about in the first place?  What is interaction and how can it take place? <\/p>\n<p>Important and frequently used interactive elements of a website are presented, including different types of buttons, selection elements, and versions of cards and sliders. Often the display of animations in designs poses problems. On this topic, useful functions of common web design tools are mentioned that are helpful in this respect. Furthermore, complex animation tools, such as Webflow, AfterEffects and Lottie, as well as their possible applications are introduced. Finally, the author discusses the difficulties in creating and implementing interactions and presents a solution for designers, developers, and customers.<\/p>\n\n            <\/div>\n        <\/div>\n            <\/div>\n<\/div>\n\n<div\n    id=\"\"\n    class=\"wp-block-image-slider margin-bottom-normal\"\n>\n    <div class=\"container-lg\">\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"swiper-outer-wrapper\">\n                    <div class=\"image-header\">\n                        <div class=\"swiper-navigation\">\n                            <div class=\"swiper-button-prev-custom\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M8 13L2 7L8 1\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                            <\/div>\n                            <div class=\"swiper-button-next-custom\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M1 1L7 7L1 13\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"swiper image-slider-swiper\">\n                        <div class=\"swiper-wrapper\">\n                                                                                                <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2-768x548.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2-768x548.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2-1024x730.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2-1024x730.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2-1536x1096.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2-1536x1096.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1542px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-2.jpg\"\n        alt=\"Interaktive Weberlebnisse 1\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 FH JOANNEUM \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5-768x653.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5-768x653.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5-1024x871.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5-1024x871.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1288px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1288px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-5.jpg\"\n        alt=\"Interaktive Weberlebnisse 4\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 FH JOANNEUM \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4-1024x683.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4-1024x683.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4-1536x1025.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4-1536x1025.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1670px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-4.jpg\"\n        alt=\"Interaktive Weberlebnisse 3\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 FH JOANNEUM \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                    <div class=\"swiper-slide item\">\n                                        <picture>\n                        <source\n                media=\"(max-width: 576px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3-1024x683.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3-1024x683.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3-1536x1025.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3-1536x1025.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1670px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2022\/04\/interaktive-weberlebnisse-3.jpg\"\n        alt=\"Interaktive Weberlebnisse 2\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 FH JOANNEUM \/ Information Design<\/p>\n                                                                            <\/div>\n                                                                                    <\/div>\n                    <\/div>\n\n                    <div class=\"swiper-navigation-pagination\">\n                        <div class=\"swiper-button-prev-custom\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M8 13L2 7L8 1\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                        <\/div>\n                        <div class=\"swiper-pagination\"><\/div>\n                        <div class=\"swiper-button-next-custom\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\" fill=\"none\">\n  <path d=\"M1 1L7 7L1 13\" stroke=\"\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n<\/svg>                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<\/div>\n\n\n        <\/div>\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":10073440,"template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10073449"}],"collection":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/users\/11"}],"version-history":[{"count":0,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10073449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media\/10073440"}],"wp:attachment":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media?parent=10073449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}