{"id":52873,"date":"2024-08-02T03:00:27","date_gmt":"2024-08-02T10:00:27","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=52873"},"modified":"2024-08-02T03:01:25","modified_gmt":"2024-08-02T10:01:25","slug":"unity-in-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/","title":{"rendered":"Unity in Design \u2013 Basic Design Concepts Revisted"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design-1024x512.webp\" alt=\"unity in design\" class=\"wp-image-54013\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design-1024x512.webp 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design-600x300.webp 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design-768x384.webp 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Unity in UI design is the cohesive arrangement of different elements within a user interface to create a visually harmonious and coherent experience for the end user. It involves organizing interface components such as buttons, icons, text, images, and other graphical elements in a way that they appear to belong together and form a unified whole.<\/p>\n\n\n\n<p>This unity plays a crucial role in enhancing usability, aesthetics, and user satisfaction by creating a cohesive and well-integrated interface that communicates the intended message and facilitates user interactions.<\/p>\n\n\n\n<p>In 2024, unity still remains to be an important principle of design. The evolution of design software and tools has given designers more flexibility and capabilities to achieve unity in innovative ways. For example, advanced software features allow for more precise control over layout, typography, and color palette, making it easier to maintain unity across various platforms.<\/p>\n\n\n\n<p>Build a unified user interfaces and keep them so between design and development. UXPin is a prototyping tool that\u2019s committed to making user interfaces unified. Use its functionalities to achieve a sense of unity that\u2019s easy to replicate in code. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-unity-principle-of-design\">What is unity principle of design ?<\/h2>\n\n\n\n<p>The unity principle of design is a fundamental concept in graphic and UI design as well as art. It refers to the idea of creating visual harmony and cohesion within the web design or app design. It involves organizing elements of design in a way that they appear to belong together and form a cohesive whole.<\/p>\n\n\n\n<p>By applying the unity principle of design, designers can get a clear message across while keeping the design is visually appealing and easy to understand.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-does-unity-in-design-enhance-user-experience\">How does unity in design enhance user experience?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/color-sample-library.png\" alt=\"color sample library\" class=\"wp-image-37846\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/color-sample-library.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/12\/color-sample-library-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>A unified interface enhances the overall user experience by making it easier for users to understand and navigate the interface. When elements are cohesive and consistent, users can more intuitively interact with the interface, leading to a smoother and more enjoyable experience.<\/p>\n\n\n\n<p>Think of a webpage that doesn\u2019t follow unity as the principle of design. Its header probably contains a mixture of different fonts, sizes, and colors for the logo, navigation menu, and contact information. The logo design clashes with the rest of the page. The navigation menu items are scattered randomly, with no consistent spacing or alignment. Text blocks vary in font size, color, and alignment, making it difficult for users to follow the content flow.<\/p>\n\n\n\n<p>The website lacks a cohesive visual identity and appears haphazardly thrown together. It overwhelms users with conflicting visual elements, making it difficult to navigate and engage with the content. Users may feel disoriented and frustrated due to the lack of unity in design, ultimately leading to a negative user experience and high bounce rates.<\/p>\n\n\n\n<p>Now, imagine a web design that that effectively follows the principle of unity. The heading features a clean and elegant logo that reflects the brand&#8217;s identity, using a simple and cohesive color scheme. A minimalist navigation menu is prominently displayed, with clear and consistent typography and use of white space.<\/p>\n\n\n\n<p>The website embodies a sense of unity and coherence throughout its design, creating a tranquil and inviting user experience. The consistent use of color, typography, imagery, and layout reinforces the website&#8217;s theme and brand identity. Users feel immersed in a harmonious environment, enhancing their engagement and enjoyment of the website.<\/p>\n\n\n\n<p>This kind of unity can be achieved through visual unity and conceptual unity. Let\u2019s differentiate between the two.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conceptual-unity-vs-visual-unity\">Conceptual unity vs visual unity<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options.png\" alt=\"designops picking tools options\" class=\"wp-image-37016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/10\/designops-picking-tools-options-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Conceptual unity and visual unity are two aspects of design that play critical roles in creating cohesive and effective compositions, whether in art, graphic design, product design, or digital interfaces. Understanding the differences between these two types of unity can help designers better execute their projects according to the intended message or function.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conceptual-unity\"><strong>Conceptual Unity<\/strong><\/h3>\n\n\n\n<p>Conceptual unity refers to the coherence of the ideas behind a design. It focuses on the underlying theme or narrative that ties all elements of the work together. This type of unity is achieved when all parts of the design support a common message or concept, making the overall purpose of the design clear to the viewer.<\/p>\n\n\n\n<p><strong>Characteristics of Conceptual Unity:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Theme Consistency:<\/strong> All elements support a central theme or idea.<\/li>\n\n\n\n<li><strong>Message Cohesion:<\/strong> Every part of the design contributes to a unified message, enhancing the communication of a specific concept or story.<\/li>\n\n\n\n<li><strong>Emotional or Psychological Impact:<\/strong> The design evokes a consistent emotional response or intellectual engagement from the audience, aligned with the intended concept.<\/li>\n<\/ul>\n\n\n\n<p>For example, in a marketing campaign, conceptual unity might be achieved through consistent messaging that aligns with the brand&#8217;s values across different media and platforms, even if the visual presentation varies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-visual-unity\"><strong>Visual Unity<\/strong><\/h3>\n\n\n\n<p>Visual unity, on the other hand, refers to the visual cohesiveness of elements within a design. It involves arranging the visual components in a way that they all feel part of a whole, usually by using consistent colors, shapes, sizes, or repeating patterns. Visual unity is crucial in guiding the viewer\u2019s eye across the design and creating a sense of harmony and balance.<\/p>\n\n\n\n<p><strong>Characteristics of Visual Unity:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Repetition:<\/strong> Repeating visual elements like colors, shapes, or textures throughout the design.<\/li>\n\n\n\n<li><strong>Alignment:<\/strong> Arranging elements in a way that lines up along common axes or follows a specific grid structure.<\/li>\n\n\n\n<li><strong>Proximity:<\/strong> Grouping related items close together to emphasize their relationship.<\/li>\n\n\n\n<li><strong>Continuation:<\/strong> Creating a visual flow that leads the viewer\u2019s eye through the design in a deliberate path.<\/li>\n<\/ul>\n\n\n\n<p>Visual unity can be achieved through the consistent use of color schemes, typography, and layout structures across different pages, ensuring the site feels cohesive and navigable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-create-unified-design\">How to create unified design<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-and-development-collaboration-process-product-communication-1.png\" alt=\"design and development collaboration process product communication 1\" class=\"wp-image-32885\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-and-development-collaboration-process-product-communication-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/design-and-development-collaboration-process-product-communication-1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Creating a unified design involves a thoughtful process that combines both conceptual and visual elements to produce a cohesive result.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-fill-out-a-design-brief\">Step 1: Fill out a design brief.<\/h3>\n\n\n\n<p>Detail the purpose, goals, and target audience of your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-project-management\/\" target=\"_blank\" rel=\"noreferrer noopener\">design project<\/a>. Include any specific messages or emotions you want to convey. Then, specify any necessary <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">elements<\/a> or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/constraints-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">constraints<\/a>, such as <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/brand-consistency\/\" target=\"_blank\" rel=\"noreferrer noopener\">branding guidelines<\/a>, budget limits, or timelines. Remember to address potential challenges upfront to streamline the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-conduct-a-design-workshop\">Step 2: Conduct a design workshop.<\/h3>\n\n\n\n<p>Get all relevant <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> involved in a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-thinking-workshop\/\" target=\"_blank\" rel=\"noreferrer noopener\">design workshop<\/a>, a dedicated time to brainstorm <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-ideas\/\" target=\"_blank\" rel=\"noreferrer noopener\">ideas<\/a> and ensure that the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-beginners-guide-to-capturing-ux-requirements\/\" target=\"_blank\" rel=\"noreferrer noopener\">expectations are aligned<\/a>. Use the workshop to generate creative ideas and explore different approaches to the design. The workshop should end with a clear, agreed-upon direction for the visual and conceptual development of the project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-establish-a-visual-style\">Step 3: Establish a visual style.<\/h3>\n\n\n\n<p>Decide on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/choose-color-pallete\/\" target=\"_blank\" rel=\"noreferrer noopener\">colors<\/a>, typography, imagery, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-mood-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">overall aesthetic<\/a> that align with the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-brief\/\" target=\"_blank\" rel=\"noreferrer noopener\">design brief<\/a>. This style should visually communicate the intended message and appeal to the target audience. Then, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/style-guide-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a style guide<\/a> that will document these choices to maintain <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">consistency<\/a> throughout the design process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-gather-content\">Step 4: Gather content.<\/h3>\n\n\n\n<p>Before designing a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-mockup-the-final-layer-of-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mockup<\/a>, start with content. Content-first design will help you determine how to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/alignment-in-design-making-text-and-visuals-more-appealing\/\" target=\"_blank\" rel=\"noreferrer noopener\">create visual hierarchy<\/a> and visual interest on the webpage or app page. It will also help you decide which elements should have more visual weight than others.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-create-a-mockup\">Step 5: Create a mockup.<\/h3>\n\n\n\n<p>Create detailed mockups of your design, which may include <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototypes-wireframes-mockup-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">digital sketches or prototypes<\/a>. Refine these mockups by continuously applying design principles to enhance visual and conceptual unity. For example, use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/symmetry-vs-asymmetry-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">balance<\/a> and alignment to create a structured, aesthetically pleasing layout, arrange <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-content-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">content<\/a> to guide the viewer\u2019s attention effectively, using contrast to highlight key areas, and more.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-6-get-feedback\">Step 6: Get feedback.<\/h3>\n\n\n\n<p>Have team members and stakeholders <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/feedback-loops-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">review the mockups<\/a>, focusing on how well they meet the design brief and convey the intended message. If possible, gather feedback from potential users or members of your target audience to get insights into the effectiveness and appeal of your design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-7-hand-the-design-to-development\">Step 7: Hand the design to development.<\/h3>\n\n\n\n<p>Share with devs a prototype that contains <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-can-designers-do-to-ensure-a-smooth-design-handoff\/\" target=\"_blank\" rel=\"noreferrer noopener\">specifications<\/a> such as dimensions, behavior, and interactions. Provide comprehensive documentation to support the developers, including style guides and interaction descriptions. Maintain communication throughout the implementation phase to address any issues that may arise and ensure the design integrity is maintained.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-practice-using-unity-in-design\">Practice using unity in design<\/h2>\n\n\n\n<p>Unity in UI design is about organizing interface elements such as buttons, icons, text, and images in a cohesive manner, ultimately leading to improved usability and user satisfaction.<\/p>\n\n\n\n<p>In 2024, unity remains a vital aspect of design, with advancements in design software providing designers with more tools to achieve it creatively. For instance, advanced features in software like precise layout control and color palette management contribute to maintaining unity across various platforms.<\/p>\n\n\n\n<p>Tools like UXPin facilitate the creation of unified user interfaces by offering functionalities that streamline the design-to-development process. By leveraging such tools, designers can ensure that the unity achieved in design translates seamlessly into the final product. Create user interface designs that have a sense of unity. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Unity in UI design is the cohesive arrangement of different elements within a user interface to create a visually harmonious and coherent experience for the end user. It involves organizing interface components such as buttons, icons, text, images, and other graphical elements in a way that they appear to belong together and form a unified<\/p>\n","protected":false},"author":3,"featured_media":54013,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6],"tags":[],"class_list":["post-52873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-ux-design"],"yoast_title":"","yoast_metadesc":"Let's revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.","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>Unity in Design \u2013 Basic Design Concepts Revisted | UXPin<\/title>\n<meta name=\"description\" content=\"Let&#039;s revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.\" \/>\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\/unity-in-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Unity in Design \u2013 Basic Design Concepts Revisted\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-02T10:00:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-02T10:01:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\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\\\/unity-in-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Unity in Design \u2013 Basic Design Concepts Revisted\",\"datePublished\":\"2024-08-02T10:00:27+00:00\",\"dateModified\":\"2024-08-02T10:01:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/\"},\"wordCount\":1464,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/unity-in-design.webp\",\"articleSection\":[\"Blog\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/\",\"name\":\"Unity in Design \u2013 Basic Design Concepts Revisted | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/unity-in-design.webp\",\"datePublished\":\"2024-08-02T10:00:27+00:00\",\"dateModified\":\"2024-08-02T10:01:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Let's revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/unity-in-design.webp\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/unity-in-design.webp\",\"width\":1200,\"height\":600,\"caption\":\"unity in design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/unity-in-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Unity in Design \u2013 Basic Design Concepts Revisted\"}]},{\"@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\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Unity in Design \u2013 Basic Design Concepts Revisted | UXPin","description":"Let's revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.","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\/unity-in-design\/","og_locale":"en_US","og_type":"article","og_title":"Unity in Design \u2013 Basic Design Concepts Revisted","og_description":"Let's revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/","og_site_name":"Studio by UXPin","article_published_time":"2024-08-02T10:00:27+00:00","article_modified_time":"2024-08-02T10:01:25+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp","type":"image\/webp"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Unity in Design \u2013 Basic Design Concepts Revisted","datePublished":"2024-08-02T10:00:27+00:00","dateModified":"2024-08-02T10:01:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/"},"wordCount":1464,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp","articleSection":["Blog","UI Design","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/","name":"Unity in Design \u2013 Basic Design Concepts Revisted | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp","datePublished":"2024-08-02T10:00:27+00:00","dateModified":"2024-08-02T10:01:25+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Let's revisit basic concepts of UI design starting with unity. Find out what unity in design is and whether it is still relevant.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/unity-in-design.webp","width":1200,"height":600,"caption":"unity in design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/unity-in-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Unity in Design \u2013 Basic Design Concepts Revisted"}]},{"@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\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/52873","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=52873"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/52873\/revisions"}],"predecessor-version":[{"id":54016,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/52873\/revisions\/54016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/54013"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=52873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=52873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=52873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}