{"id":10050847,"date":"2020-01-20T17:54:24","date_gmt":"2020-01-20T15:54:24","guid":{"rendered":"https:\/\/www.fh-joanneum.at\/?post_type=projects&#038;p=50847"},"modified":"2020-01-20T18:05:52","modified_gmt":"2020-01-20T16:05:52","slug":"design-systems-in-a-nutshell","status":"publish","type":"project","link":"https:\/\/www.fh-joanneum.at\/en\/project\/design-systems-in-a-nutshell\/","title":{"rendered":"Design Systems in a Nutshell"},"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                            Master\\&#039;s Thesis\n                          <\/div>\n                          <div class=\"value fw-bold\">2019<\/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\">Beatrice Bunjaku<\/div>\n                        <\/li>\n                                              <li\n                          class=\"mb-2\"\n                        >\n                          <div class=\"label mb-1\">\n                            Supervisor\n                          <\/div>\n                          <div class=\"value fw-bold\">Konrad Baumann, Fleur Jeanquartier<\/div>\n                        <\/li>\n                                              <li\n                          class=\"\"\n                        >\n                          <div class=\"label mb-1\">\n                            Master\n                          <\/div>\n                          <div class=\"value fw-bold\">Interaction Design<\/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\/konrad-baumann\"\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=1324821130D70CD0\"\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\">FH-Prof. DI Dr.<\/p>\n                        <h6>Konrad Baumann<\/h6>\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\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>A good user experience (UX) is a key factor for the success of a digital product, as nowadays functionality is already a standard requirement. A design system describes a comprehensive collection of values, semantics, syntax and context which forms the basis of a common design language. The system consists of reusable components which conform to clear standards, and it enables additional applications to be created. How do companies benefit from design systems, and how does an established design language improve corporate culture? <\/p>\n<p>Numerous terms, models and procedures which make up a design system are analyzed in the theoretical part of this thesis. It also looks at how to ensure the consistency of complex and continually growing software products, and thus improve the collaboration between developers and designers, how to make designing more efficient and how to enable consistent design scalability. All of this ensures homogeneous and coherent user guidance, and strengthens the personality of the company. <\/p>\n<p>The practical part of this thesis includes the ongoing development of a design system for the CAMPUSonline campus management system at the Graz University of Technology.<\/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\/2020\/01\/design-systems-in-a-nutshell.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell-768x716.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 768px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell-768x716.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 838px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 838px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg 2x\"\n            \/>\n                    <source\n                media=\"(max-width: 838px)\"\n                srcset=\"https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg, https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg 2x\"\n            \/>\n                <img decoding=\"async\"\n        class=\"img-fluid\"\n        src=\"https:\/\/cdn3.fh-joanneum.at\/media\/2020\/01\/design-systems-in-a-nutshell.jpg\"\n        alt=\"Design Systems in a Nutshell\"\n        title=\"\"\n         loading=\"lazy\"             >\n<\/picture>\n\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":26,"featured_media":10050866,"template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10050847"}],"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\/26"}],"version-history":[{"count":0,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/project\/10050847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media\/10050866"}],"wp:attachment":[{"href":"https:\/\/www.fh-joanneum.at\/en\/wp-json\/wp\/v2\/media?parent=10050847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}