{"id":263,"date":"2020-04-06T07:30:44","date_gmt":"2020-04-06T07:30:44","guid":{"rendered":"https:\/\/blogs.zeiss.com\/tech\/?p=263"},"modified":"2020-04-15T10:33:34","modified_gmt":"2020-04-15T10:33:34","slug":"from-design-to-code-bridging-gaps-through-good-collaboration-tools","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/","title":{"rendered":"From design to {code} – bridging gaps through good collaboration & tools"},"content":{"rendered":"\n

Working as an experience designer at ZEISS Digital Innovation Partners and interacting on a daily basis with colleagues from business and engineering, it is essential to make ideas experienceable rapidly, iterate on feedback and bring products out to customers quickly. To reach this goal, we put our efforts into creating a working culture that fosters collaboration within the cross-functional teams focusing on exchange, knowledge sharing and mutual understanding. <\/p>\n\n\n\n

This cross-functional team work requires the right mindset and culture, the right skillset and in addition the right toolset. This last element \u2013 having the right software \u2013 is an aspect that sometimes gets neglected, although it has a crucial influence on collaborations efficiency and effectiveness in our daily work. I recently experienced how the saying \u201ca craftsman is only as good as his tools\u201d turned out to be true within a specific design task. The software I am referring to is Webflow \u2013 an online tool for building and running websites that helps us solving a project challenge in a new way. Whether you\u2019re woodworking or designing, the tools you choose shape the final product as well as the way to get there.<\/p>\n\n\n\n

Of course, each tool has to fit the needs of the specific challenge. In this case, the brief came directly from the product users \u2013 who provided valuable feedback on the product APEER (www.apeer.com<\/a>) \u2013 a cloud-based digital image processing platform that enables researchers and developers to collaborate. From the research conducted it became apparent that we could create a lot of value through a reworked landing page. In need of a flexible CMS system, we decided to use Webflow to enable designers to build a landing page quickly without requiring major developers\u2019 resources.<\/p>\n\n\n\n

At first sight, Webflow looks like a typical online website\nbuilder \u2013 but it is also very different than that. With the integrated CMS\noffering, it helps to facilitate marketing efforts and meet business\nobjectives. In the \u201cDesigner\u201d interface, designers can create the site\nstructure and visual appearance with most flexibility, while collaborating with\nmarketing colleagues who can fuel the pages with content through the \u201cEditor\u201d. <\/p>\n\n\n\n

Webflow is also closely linked to the tech toolchain\nand can be used to develop and deploy the website directly. Their claim, to\nenable everyone to \u201ccode visually\u201d is reflected in the \u201cDesigner\u201d where you can\nadd, position and style elements. At the same time, the underlying system\nautomatically generates the necessary code in the background. Most design tools\nhide the complexity and core principles of the web medium. They make it simple\nfor designers to draw boxes and shapes without thinking of responsiveness or\nweb behaviour in the first place. <\/p>\n\n\n\n

With Webflow, this is very different. Directly when\ncreating elements, one has to think of their position and size almost as a web\ndeveloper would do while translating designs into code. One has to understand\nthe principles of nesting of elements and CSS classes since there is a one to\none correlation between an action taken on the interface and a CSS or HTML\nchange in the background. This way of working triggered a lot of\ndiscussions and exchange between designers and developers, which helped us to\ncollaborate more closely. I still remember sitting together with a colleague\nfrom the development team explaining to me how the \u201cflex-wrap\u201d property affects\nthe children of a flexbox element. This way, the tool helped us to speak the\nsame language and greatly improved mutual understanding.<\/p>\n\n\n\n

It should not be left unsaid that Webflow has a steeper\nlearning curve than other design software. Even though designers are familiar\nwith HTML and CSS basics, adding them as restrictions to a design process is a\nvery different experience. The time it needs to get up to speed using the tool,\nhowever, is minor, since designers do not work on concepts but build the \u201creal\nthing\u201d and can therefore get it out to the customer quicker.<\/p>\n\n\n\n

While our ambition stays the same to design and develop great solutions for our customers \u2013 always having superior customer experience in mind \u2013 the methods and toolsets continuously change and need to be adapted. Therefore, the most valuable skill is the ability to keep on learning. New technology enables ever better support, and we need to be able to make use of it. <\/p>\n\n\n\n

Working in cross-functional teams and collaborating\nclosely between design, tech and business forces us to speak the same language\nand to use tools that support our collaboration. The above-mentioned software\nis an excellent example for this fact. Technology, design and business moved\ncloser together, as we reduced waste and the time needed to do coding. We could\nmove fast, iterating quickly and therefore focus on the customer needs \u2013 all by\nusing a really valuable tool. Other software is to come and to be explored, and\nwe need to stay adaptable and open for tools that help us solve future\nchallenges and to continue to work in cross-functional teams.<\/p>\n","protected":false},"excerpt":{"rendered":"

Working as an experience designer at ZEISS Digital Innovation Partners and interacting on a daily basis with colleagues from business and engineering, it is essential to make ideas experienceable rapidly, iterate on feedback and bring products out to customers quickly. To reach this goal, we put our efforts into creating a working culture that fosters collaboration within the cross-functional teams focusing on exchange, knowledge sharing and mutual understanding. <\/p>\n","protected":false},"author":10,"featured_media":265,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[1,7,22],"tags":[],"topics":[23],"class_list":["post-263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-ui","category-innovation","topics-collaboration"],"acf":[],"yoast_head":"\nFrom design to {code} - bridging gaps through good collaboration & tools - Digital Innovation Partners<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From design to {code} - bridging gaps through good collaboration & tools - Digital Innovation Partners\" \/>\n<meta property=\"og:description\" content=\"Working as an experience designer at ZEISS Digital Innovation Partners and interacting on a daily basis with colleagues from business and engineering, it is essential to make ideas experienceable rapidly, iterate on feedback and bring products out to customers quickly. To reach this goal, we put our efforts into creating a working culture that fosters collaboration within the cross-functional teams focusing on exchange, knowledge sharing and mutual understanding.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Partners\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-06T07:30:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-15T10:33:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1596\" \/>\n\t<meta property=\"og:image:height\" content=\"957\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Clara Fessler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Clara Fessler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/\",\"url\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/\",\"name\":\"From design to {code} - bridging gaps through good collaboration & tools - Digital Innovation Partners\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg\",\"datePublished\":\"2020-04-06T07:30:44+00:00\",\"dateModified\":\"2020-04-15T10:33:34+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/#\/schema\/person\/9fbf753045b33731c44b6d689d75d03e\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg\",\"width\":1596,\"height\":957,\"caption\":\"Whiteboard scribbles\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/tech\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"From design to {code} – bridging gaps through good collaboration & tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/tech\/\",\"name\":\"Digital Innovation Partners\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/tech\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/#\/schema\/person\/9fbf753045b33731c44b6d689d75d03e\",\"name\":\"Clara Fessler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/tech\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/Clara-Fessler-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/Clara-Fessler-150x150.jpg\",\"caption\":\"Clara Fessler\"},\"description\":\"Clara joined Digital Innovation Partners in early 2018. As a designer she enjoys working on innovative projects through diving into user\u2019s needs, co-creating and testing designs.\",\"url\":\"https:\/\/blogs.zeiss.com\/tech\/author\/clara-fessler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"From design to {code} - bridging gaps through good collaboration & tools - Digital Innovation Partners","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/","og_locale":"en_US","og_type":"article","og_title":"From design to {code} - bridging gaps through good collaboration & tools - Digital Innovation Partners","og_description":"Working as an experience designer at ZEISS Digital Innovation Partners and interacting on a daily basis with colleagues from business and engineering, it is essential to make ideas experienceable rapidly, iterate on feedback and bring products out to customers quickly. To reach this goal, we put our efforts into creating a working culture that fosters collaboration within the cross-functional teams focusing on exchange, knowledge sharing and mutual understanding.","og_url":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/","og_site_name":"Digital Innovation Partners","article_published_time":"2020-04-06T07:30:44+00:00","article_modified_time":"2020-04-15T10:33:34+00:00","og_image":[{"width":1596,"height":957,"url":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg","type":"image\/jpeg"}],"author":"Clara Fessler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Clara Fessler","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/","url":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/","name":"From design to {code} - bridging gaps through good collaboration & tools - Digital Innovation Partners","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/tech\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg","datePublished":"2020-04-06T07:30:44+00:00","dateModified":"2020-04-15T10:33:34+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/tech\/#\/schema\/person\/9fbf753045b33731c44b6d689d75d03e"},"breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6.jpg","width":1596,"height":957,"caption":"Whiteboard scribbles"},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/tech\/from-design-to-code-bridging-gaps-through-good-collaboration-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/tech\/"},{"@type":"ListItem","position":2,"name":"From design to {code} – bridging gaps through good collaboration & tools"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/tech\/#website","url":"https:\/\/blogs.zeiss.com\/tech\/","name":"Digital Innovation Partners","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/tech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/tech\/#\/schema\/person\/9fbf753045b33731c44b6d689d75d03e","name":"Clara Fessler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/tech\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/Clara-Fessler-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/Clara-Fessler-150x150.jpg","caption":"Clara Fessler"},"description":"Clara joined Digital Innovation Partners in early 2018. As a designer she enjoys working on innovative projects through diving into user\u2019s needs, co-creating and testing designs.","url":"https:\/\/blogs.zeiss.com\/tech\/author\/clara-fessler\/"}]}},"author_meta":{"display_name":"Clara Fessler","author_link":"https:\/\/blogs.zeiss.com\/tech\/author\/clara-fessler\/"},"featured_img":"https:\/\/blogs.zeiss.com\/tech\/wp-content\/uploads\/2020\/04\/photo-1532622785990-d2c36a76f5a6-300x180.jpg","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/tech\/category\/general\/\" class=\"advgb-post-tax-term\">General<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/tech\/category\/ui\/\" class=\"advgb-post-tax-term\">UI<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/tech\/category\/innovation\/\" class=\"advgb-post-tax-term\">Innovation<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">General<\/span>","<span class=\"advgb-post-tax-term\">UI<\/span>","<span class=\"advgb-post-tax-term\">Innovation<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 6 years ago","modified":"Updated 6 years ago"},"absolute_dates":{"created":"Posted on April 6, 2020","modified":"Updated on April 15, 2020"},"absolute_dates_time":{"created":"Posted on April 6, 2020 7:30 am","modified":"Updated on April 15, 2020 10:33 am"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":5,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/posts\/263\/revisions\/272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/media\/265"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/tags?post=263"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/tech\/wp-json\/wp\/v2\/topics?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}