{"id":16555,"date":"2018-11-06T08:10:58","date_gmt":"2018-11-06T16:10:58","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16555"},"modified":"2020-10-13T00:18:55","modified_gmt":"2020-10-13T07:18:55","slug":"united-states-animation","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/","title":{"rendered":"The United States of UXPin"},"content":{"rendered":"<h2><b>Introduction<\/b><\/h2>\n<p>The creation of advanced designs and prototypes can be tricky these days. At some point, you&#8217;ll end up with dozens of artboards or pages that look nearly identical. As a designer, you know that these details are essential for the end product to be presented to your users.<\/p>\n<p>But does every small detail need to be created like this?&nbsp;Is it the only way to design dynamic components with different content?<\/p>\n<p>The problem with any image-based design tool is that they must design static version of key screens. So this is what designers try to prepare &#8211; flow, key screens and key components from use cases. It\u2019s time-consuming, but does it have everything developers need to implement it?<\/p>\n<p>Nope.<\/p>\n<p>Developers need to know<b>&nbsp;every state<\/b>&nbsp;of every component used on the project. Components are dynamic and reactive. If a designer locks all this energy into a static set of artboards, it will blow up in her face. Imagine a simple design with a dropdown and a button. That&#8217;s it! The button needs to have a default, hover, active and, probably, disabled state. Dropdown has a hover and active state on the selector, and hover\/active\/disabled states on every option on the dropdown menu list. That gives you over 15 static artboards to represent all the states. And what if something changes? How do you keep it up to date?<\/p>\n<blockquote>\n<p style=\"text-align: left;\">This is a difference between Design and Development theses day &#8211; different levels of efficiency.<\/p>\n<\/blockquote>\n<p>In UXPin, we introduced Multistates elements back in 2015 to address some of these problems. And we can say it loud and proud: this is a totally unique concept in the design tools landscape. In many cases, it\u2019s why our users choose UXPin.&nbsp;Still, the design and prototype world is rapidly evolving and it requires increasingly sophisticated methods and tools to cover all fields.<\/p>\n<p>More animation. More mobile. More code-based tools.&nbsp;So, we reevaluated all use cases and granted this concept a second life. And now we are happy to introduce our shiny new <b>States <\/b>feature! Here\u2019s what you need to know to get started.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16563\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/fgif-1.gif\" alt=\"States by UXPin\" width=\"600\" height=\"379\"><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Focus on user feedback<\/b><\/h2>\n<p>First, we had to gather feedback about Multistates. Our users have given plenty of feedback since its introduction three years ago. After a tremendous effort from our research team, we finally found a simple way to understand the issues and categorized them as:<\/p>\n<ul>\n<li>Usability improvements<\/li>\n<li>Product requests<\/li>\n<\/ul>\n<p>Our first thought was to simply improve the UI for Multistates. However, soon we found that this would only solve some of the usability issues.<br \/>\nWhat about the ability to propagate style and content between states of an element?<br \/>\nWhat about an animation created \u201cout of the box\u201d based on the changes?<br \/>\nOr the possibility to nest an element with states inside another element with states?<br \/>\nWhen these questions came up, we knew we had to go deeper.<\/p>\n<h2><\/h2>\n<h2><b>Inspired by nature &#8211; states of matter<\/b><\/h2>\n<p>That brought us back to the core question &#8211; what <i>ARE<\/i> the states?<br \/>\nAfter a few brainstorming sessions, one direction especially attracted us &#8211; the idea of <i>transformation <\/i>of the elements. The main idea was that EVERY element should have the possibility to have a different set of properties (styles) stored as states and that these states can be switched to generate <i>element transformation<\/i>.<br \/>\nSounds lovely, doesn\u2019t it?<\/p>\n<p>Then we started to look for more general rules (is the number of elements stable between states? Is the number of states in symbols the same?, etc.)&nbsp;Diving deeper into this app architecture question led us to a great analogy for what we are building, which is the states of matter.&nbsp;So any matter, for example water, can transform between states (solid, liquid, gas and plasma) but the number of particles in the environment remain constant. <\/p>\n<p>The same goes for elements in UXPin. You can now build advanced components with different states and transform between the states of elements, but the number of elements will always stay the same. They just change their state &#8211; style, position, size, interactions, etc.<\/p>\n<p>&nbsp;<\/p>\n<h2><b>Different states of the same element<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16556\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/Main-GIF.gif\" alt=\"different states of applications with UXPin\" width=\"1246\" height=\"362\"><\/p>\n<p>The biggest challenge, and the biggest opportunity, for us was the question &#8211; how should States be built from the perspective of the app architecture? The easiest way to understand the change is to compare it with the older concept, Multistates.<br \/>\nCreating another state of a Multistate was basically duplicating all the elements from a previous state. After the duplication, those were different &#8211; disconnected elements.<\/p>\n<p>In the new concept of States, adding the another state of the element creates <b>another alternative set of properties of the same element<\/b>. It does not duplicate the same element again. It gives the element another alternative appearance, another level of existence.&nbsp;<\/p>\n<p>You can edit the style and content of states, but it still will be the same element\u2014with states. Also, if you remove the element on one state, it will be removed across all states.&nbsp;This approach gives us the possibility not only to transform elements with animation, but also greatly reduces impact on browser performance.<\/p>\n<h2><\/h2>\n<h2><b>States on states on states\u2026<\/b><\/h2>\n<p>One of the most powerful things you can build in UXPin using States is\u2026 another state.<br \/>\nImagine building simple elements with states (buttons, headers, etc.) and using them in more complicated elements with states (login forms, dashboards, use panels, etc.).<br \/>\nFrom the interviews with our customers, we know that a lot of designers try to build that and end up with a lot of symbols and artboards.<\/p>\n<p>Thus, States were developed to nest states within states and to manipulate the active state beyond that. To support this process, we\u2019ve added the ability to manage states from the layers panel. It helps not only to change the states but also to see, understand and redesign the hierarchy of elements in any component.<\/p>\n<p>&nbsp;<\/p>\n<h2><b>Push changes to other states<\/b><\/h2>\n<p>One of the biggest limitations with the old Multistates was the difficulty in updating already created elements with different states. As mentioned above, this happened because we were duplicating elements. With the new approach to the architecture, we finally solved this problem.<\/p>\n<p>This was one of the biggest design and development challenges for the team. We had to cover two use cases that are quite tricky:<\/p>\n<ul>\n<li>Push changes in style\/content to other states<\/li>\n<li>Have the ability to reset changes added to a state<\/li>\n<\/ul>\n<p>Keeping in mind these two use cases, we came up with the concept of the <b>base state<\/b>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16564\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/01_-base-drop-down.png\" alt=\"drop down menu design with states\" width=\"764\" height=\"439\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/01_-base-drop-down.png 764w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/01_-base-drop-down-522x300.png 522w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/p>\n<p>A base state is one with a bit different power than the other states. As its name suggests, it acts like a base\/foundation on top of which other states are built. When you update the base, you update it for all states. That is to say that the change will appear in all other states too (unless the change of the same property of an element is overridden in another state). For those in software development: <i>inheritance<\/i> and <i>overriding\u2014<\/i>sounds familiar? :) &nbsp;<\/p>\n<p>Here\u2019s an example. You designed a \u201cSend message\u201d button and built it in three states: default, hover and active. Then you have the shape of the button, dimensions, style and \u201cSend message\u201d text on it. After a few tests, you decide you want to remove the word <i>message<\/i> , so the button just reads \u201cSend\u201d. The base state lets you change that text just in one place and it applies automatically to other states!<\/p>\n<p>Some of you might be wondering, \u201cOk, but what about when I want different text in some specific state?\u201d For example \u201cSent!\u201d in an active button state from the example above. You can set an <b>override<\/b> on any other state other than the base. Simply edit the button text in the chosen state to override the text of the base state. After that, changing <strong>this<\/strong><b>&nbsp;specific property<\/b> of the base won\u2019t affect the edited state, because the override is still there. But don\u2019t worry, you can always reset the property override and it&#8217;ll restore the style or content from the base state.<\/p>\n<p>What can you override in states, you ask? Almost everything &#8211; size, position, rotation, radius, color fill, border, content of the element and even interactions!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16562\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/02_-resetting-ez.gif\" alt=\"setting interactions in a product UXPins\" width=\"760\" height=\"438\"><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Out of the box animations<\/b><\/h2>\n<p>Last but not least, States provides big value for designers looking to easily create more robust animations in their prototypes. Again, this value comes from the fact that states are basically different appearances of the same element\/s.<\/p>\n<p>Here\u2019s how it works. If you have two states of the same element with a different style (position, size, color), all you have to do to get animation is to create a simple interaction to change the state of the element. Once you create the interaction between them, the magic is already there! Of course you can change the timing or easing of the animation between states.<\/p>\n<p>Remember states within states? You can even build the animation on the highest level of the nested states and it will animate <b>every<\/b> change of the nested states. Pretty cool, huh?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16558\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/09\/toggle_simple.gif\" alt=\"Toggle states simple\" width=\"1200\" height=\"582\"><\/p>\n<p>&nbsp;<\/p>\n<h2><b>What can you use States for?<\/b><\/h2>\n<ul>\n<li>Create a simple element like a button with the different states: active, hover, disabled, etc.<\/li>\n<li>Design complex patterns like a form that has an input field with different states: empty input, data provided, error state<\/li>\n<li>Components like carousels and accordion menus<\/li>\n<\/ul>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The creation of advanced designs and prototypes can be tricky these days. At some point, you&#8217;ll end up with dozens of artboards or pages that look nearly identical. As a designer, you know that these details are essential for the end product to be presented to your users. But does every small detail need<\/p>\n","protected":false},"author":145,"featured_media":16698,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,172,8,6],"tags":[239,240,241,75,238,237],"class_list":["post-16555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-product-design","category-prototyping","category-ux-design","tag-animations","tag-base-state","tag-buttons","tag-elements","tag-multistates","tag-states"],"yoast_title":"","yoast_metadesc":"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The United States of UXPin | UXPin<\/title>\n<meta name=\"description\" content=\"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The United States of UXPin\" \/>\n<meta property=\"og:description\" content=\"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-06T16:10:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-13T07:18:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/11\/Asset-1@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2194\" \/>\n\t<meta property=\"og:image:height\" content=\"1101\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Radek Taraszka\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Radek Taraszka\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/\"},\"author\":{\"name\":\"Radek Taraszka\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/651507984f851a1f3a260fa1b3b204fe\"},\"headline\":\"The United States of UXPin\",\"datePublished\":\"2018-11-06T16:10:58+00:00\",\"dateModified\":\"2020-10-13T07:18:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/\"},\"wordCount\":1580,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Asset-1@2x.png\",\"keywords\":[\"animations\",\"base state\",\"buttons\",\"elements\",\"multistates\",\"states\"],\"articleSection\":[\"Blog\",\"Product Design\",\"Prototyping\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/\",\"name\":\"The United States of UXPin | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Asset-1@2x.png\",\"datePublished\":\"2018-11-06T16:10:58+00:00\",\"dateModified\":\"2020-10-13T07:18:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/651507984f851a1f3a260fa1b3b204fe\"},\"description\":\"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Asset-1@2x.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/Asset-1@2x.png\",\"width\":2194,\"height\":1101,\"caption\":\"Asset 1@2x\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/united-states-animation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The United States of UXPin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/651507984f851a1f3a260fa1b3b204fe\",\"name\":\"Radek Taraszka\",\"description\":\"Radek is a UX Designer at UXPin.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/radek\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The United States of UXPin | UXPin","description":"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.","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:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/","og_locale":"en_US","og_type":"article","og_title":"The United States of UXPin","og_description":"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/","og_site_name":"Studio by UXPin","article_published_time":"2018-11-06T16:10:58+00:00","article_modified_time":"2020-10-13T07:18:55+00:00","og_image":[{"width":2194,"height":1101,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/11\/Asset-1@2x.png","type":"image\/png"}],"author":"Radek Taraszka","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Radek Taraszka","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/"},"author":{"name":"Radek Taraszka","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/651507984f851a1f3a260fa1b3b204fe"},"headline":"The United States of UXPin","datePublished":"2018-11-06T16:10:58+00:00","dateModified":"2020-10-13T07:18:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/"},"wordCount":1580,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/11\/Asset-1@2x.png","keywords":["animations","base state","buttons","elements","multistates","states"],"articleSection":["Blog","Product Design","Prototyping","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/","name":"The United States of UXPin | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/11\/Asset-1@2x.png","datePublished":"2018-11-06T16:10:58+00:00","dateModified":"2020-10-13T07:18:55+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/651507984f851a1f3a260fa1b3b204fe"},"description":"As a designer dealing with different states that your product might have is a real pain. Here is how UXPin adresses that issue.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/11\/Asset-1@2x.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/11\/Asset-1@2x.png","width":2194,"height":1101,"caption":"Asset 1@2x"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/united-states-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The United States of UXPin"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/651507984f851a1f3a260fa1b3b204fe","name":"Radek Taraszka","description":"Radek is a UX Designer at UXPin.","url":"https:\/\/www.uxpin.com\/studio\/author\/radek\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16555"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16555\/revisions"}],"predecessor-version":[{"id":22867,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16555\/revisions\/22867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/16698"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}