{"id":10084322,"date":"2023-06-02T12:58:16","date_gmt":"2023-06-02T10:58:16","guid":{"rendered":"https:\/\/www.fh-joanneum.at\/?post_type=projects&#038;p=84322"},"modified":"2023-06-02T13:11:26","modified_gmt":"2023-06-02T11:11:26","slug":"ui-animation-clear-user-interfaces-through-animation","status":"publish","type":"project","link":"https:\/\/www.fh-joanneum.at\/en\/project\/ui-animation-clear-user-interfaces-through-animation\/","title":{"rendered":"UI Animation \u2013 Clear User Interfaces through Animation"},"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\">2022<\/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\">Stefan Lamprecht<\/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\">Anika Kronberger<\/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\/anika-kronberger\"\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=A7F62C9B3C1CE750\"\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\">DI (FH)<\/p>\n                        <h6>Anika Kronberger<\/h6>\n                            <p class=\"mb-1 hyphens\"> MA<\/p>\n                        <p class=\"mb-0 hyphens\">\n              Senior Lecturer (FH) \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>Every day we interact with countless interfaces intended to help us perform various tasks. Due to technical enhancements in the area of web and app development, it is possible for designers to realize complex interface concepts. Animation can now be integrated into websites and apps in just a few steps, when before a lot of effort was put into trying to implement the work of designers as well as possible.<\/p>\n<p>Thanks to the current opportunities, animation has become increasingly important in the design of user interfaces in recent years. However, websites and apps should not be exclusively extravagant and complex. User Interfaces must be intuitive and easy to understand. Additionally, they should not confuse users or limit them in their interaction. This Bachelor&rsquo;s Thesis deals with whether animation can play a supporting role in digital products and which aspects of the user experience can particularly benefit from it.<\/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\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3.png, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3-768x461.png 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3-768x461.png, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3-1024x614.png 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3-1024x614.png, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3-1536x922.png 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1536px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3-1536x922.png, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3.png 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1600px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3.png, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3.png 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-3.png\"\n        alt=\"UI-Animation \u2013 verst\u00e4ndliche User Interfaces durch Animation 2\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Stefan Lamprecht \/ 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\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4-1024x683.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4-1024x683.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1500px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1500px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-4.jpg\"\n        alt=\"UI-Animation \u2013 verst\u00e4ndliche User Interfaces durch Animation 3\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Stefan Lamprecht \/ 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\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5-1024x683.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5-1024x683.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1500px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1500px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-5.jpg\"\n        alt=\"UI-Animation \u2013 verst\u00e4ndliche User Interfaces durch Animation 4\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Stefan Lamprecht \/ 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\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-768x512.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-768x512.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-1024x683.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1024px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation-1024x683.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1500px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 1500px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2023\/06\/ui-animation-verstaendliche-user-interfaces-durch-animation.jpg\"\n        alt=\"UI-Animation \u2013 verst\u00e4ndliche User Interfaces durch Animation\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\n                                                                                    <p class=\"text-muted mt-2\">\u00a9 Stefan Lamprecht \/ 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":10084314,"template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10084322"}],"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\/10084322\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media\/10084314"}],"wp:attachment":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media?parent=10084322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}