{"id":23196,"date":"2026-05-20T04:00:00","date_gmt":"2026-05-20T11:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=23196"},"modified":"2026-05-20T04:27:45","modified_gmt":"2026-05-20T11:27:45","slug":"basic-elements-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/","title":{"rendered":"Basic Design Elements and Principles of Design: A Complete Guide [2026]"},"content":{"rendered":"<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"Article\",\n      \"headline\": \"Basic Design Elements and Principles of Design: A Complete Guide [2026]\",\n      \"description\": \"Master the basic design elements \u2014 lines, shapes, color, typography \u2014 and the core principles of design including contrast, balance, hierarchy, rhythm, and white space. Practical examples for UX and UI designers.\",\n      \"author\": {\n        \"@type\": \"Organization\",\n        \"name\": \"UXPin\"\n      },\n      \"publisher\": {\n        \"@type\": \"Organization\",\n        \"name\": \"UXPin\",\n        \"url\": \"https:\/\/www.uxpin.com\"\n      },\n      \"datePublished\": \"2020-12-15\",\n      \"dateModified\": \"2026-05-20\",\n      \"mainEntityOfPage\": \"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/\"\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What are the basic elements of design?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"The basic elements of design are lines, shapes, color, and typography. Lines organize space and draw attention. Shapes create meaning through geometric and organic forms. Color evokes emotions and guides user focus. Typography communicates information through words while conveying mood through font characteristics like weight, size, and spacing.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What are the principles of design?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"The core principles of design include unity, contrast, similarity, balance, hierarchy, emphasis, rhythm, repetition, white space, and variety. These principles govern how basic design elements relate to each other and work together to create effective, coherent visual compositions.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What is the difference between design elements and design principles?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Design elements are the building blocks \u2014 the raw visual components like lines, shapes, colors, and type. Design principles are the rules that govern how those elements are arranged and related to each other within a composition. Elements are the what; principles are the how.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Why is white space important in design?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"White space (also called negative space) reduces cognitive fatigue, improves legibility, directs attention to key elements, and establishes visual hierarchy. It doesn't have to be white \u2014 it's simply the empty area around and between design elements. Effective use of white space is one of the clearest markers of professional design.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"How do design elements apply to UI and UX design?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"In UI\/UX design, elements and principles are applied through component design, layout systems, color palettes, typography scales, and interaction patterns. Design systems formalize these decisions into reusable components. Tools like UXPin let designers apply these principles while prototyping with real, interactive components \u2014 ensuring that visual design decisions translate directly to production code.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What are the F-pattern and Z-pattern reading layouts?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"The F-pattern describes how users scan text-heavy pages \u2014 reading across the top, then scanning down the left side with shorter horizontal sweeps, forming an F shape. The Z-pattern applies to pages with less text \u2014 the eye moves from top-left to top-right, diagonally to bottom-left, then across to bottom-right. Understanding these patterns helps designers place important elements where users naturally look.\"\n          }\n        }\n      ]\n    }\n  ]\n}\n<\/script><\/p>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design-1024x512.png\" alt=\"Basic design elements and principles of design \u2014 complete guide\" class=\"wp-image-23197\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<p>Good design isn&#8217;t about years of practice or thousands of hours in graphic editors. The beauty of the craft is that it&#8217;s accessible to anyone who understands its fundamental building blocks: the <strong>basic design elements<\/strong> and the <strong>principles<\/strong> that govern how they work together.<\/p>\n<p>Centuries of work with paintings, typography, and graphics have distilled a set of vital rules that guide designers to this day \u2014 from print layout to modern UI\/UX design. In this guide, we&#8217;ll explore each element and principle with practical examples, so you can create better products regardless of your experience level.<\/p>\n<p><strong>Key takeaways:<\/strong><\/p>\n<ul>\n<li>The basic design elements are <strong>lines, shapes, color, and typography<\/strong> \u2014 the raw building blocks of every visual composition.<\/li>\n<li>Design principles \u2014 unity, contrast, balance, hierarchy, rhythm, white space, and variety \u2014 govern how elements relate to each other.<\/li>\n<li>These elements and principles are timeless; they apply equally to print, web, and modern UI\/UX design.<\/li>\n<li>Mastering these fundamentals helps designers create more effective prototypes and user interfaces.<\/li>\n<\/ul>\n<p>Apply these principles in practice with UXPin \u2014 an end-to-end design tool for interactive prototyping. Test not just the visual design, but interactions, states, and user flows. <a href=\"https:\/\/www.uxpin.com\/sign-up\">Try UXPin for free<\/a>.<\/p>\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<p><a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\"><br \/>\n<button class=\"try-uxpin__button\">Try UXPin<\/button><br \/>\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<style>\n.try-uxpin-banner { margin: 40px 0px; }\n.try-uxpin__container { display: flex; max-width: 689px; height: 210px; padding: 20px; padding-left: 24px; border: 2px solid black; border-radius: 4px; align-items: center; justify-content: space-between; background-color: white; box-shadow: 10px 10px black; }\n.try-uxpin__left { width: 54%; }\n.try-uxpin__heading { font-size: 28px !important; font-weight: bold; }\n.try-uxpin__left p { margin: 10px 0px !important; color: black !important; }\n.try-uxpin__text { margin: 0 !important; font-size: 18px !important; line-height: 22px !important; }\n.try-uxpin__button { width: 135px; height: 44px; background: black; margin: 10px 0px; padding: 10px 20px; border: none; border-radius: 2px; color: white; font-size: 16px; text-align: center; }\n.try-uxpin__button:hover { cursor: pointer; }\n.try-uxpin__image { max-width: 320px !important; height: 200px; margin-right: -21px; margin-bottom: -6px; }\n@media (max-width: 760px) { .try-uxpin__container { height: auto; margin: 10px; align-items: left; } }\n@media (max-width: 500px) { .try-uxpin__container { flex-direction: column; } .try-uxpin__left { width: 100%; align-items: normal; } }\n<\/style>\n<h2 id=\"h-what-is-design\">What Is Design?<\/h2>\n<p>Before diving into elements and principles, it&#8217;s worth clarifying what design actually is. We often assume design has a decorative function \u2014 making things look pretty and appealing. But its purpose is far more pragmatic.<\/p>\n<p>Design isn&#8217;t art <em>per se<\/em>. While there&#8217;s overlap, the primary purpose of design is to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-pain-points-in-ux-design\/\">solve problems<\/a>. A design&#8217;s end goal is to find an innovative, functional solution; visual beauty is important but secondary to that goal.<\/p>\n<p>Design is the arrangement of visual elements that aims to solve a real-world problem. As designs become more complex, they evoke feelings that form experiences. Fundamentally, design helps us shape the world we live in and influences how we perceive reality \u2014 from the layout of a city to the interface of a mobile app.<\/p>\n<h2 id=\"h-basic-design-elements\">Basic Design Elements<\/h2>\n<p>Every visual composition \u2014 whether a painting, a poster, or a mobile UI \u2014 is built from four foundational elements. Understanding these building blocks is the first step toward effective design.<\/p>\n<h3 id=\"h-lines\">Lines<\/h3>\n<p>Lines are the most fundamental and versatile elements of design. They have a vast spectrum of functions: we use them to separate and organize space, outline and contour objects, emphasize certain elements, draw attention, and create movement.<\/p>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/01_3.png\" alt=\"Lines as basic design elements \u2014 examples of line types\" class=\"wp-image-23198\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/01_3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/01_3-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>Because lines are fundamentally simple, we can curve and combine them to create rich meaning through different shapes and patterns. Lines can be thin or thick, horizontal, vertical, or diagonal, curved or zigzagged, dashed or dotted \u2014 and each variation conveys different meaning and emotion.<\/p>\n<p>In UI design, lines appear everywhere: as dividers between content sections, as borders around input fields, as underlines on active navigation tabs, and as the strokes that form icons. Thoughtful line use is what separates a clean, professional interface from a cluttered one.<\/p>\n<h3 id=\"h-shapes\">Shapes<\/h3>\n<p>Everything is made of shapes which, in turn, are made of lines. We can deconstruct the visual world into a series of basic geometric and organic forms.<\/p>\n<p>Human cognition has a powerful relationship with shapes. Their effect on our psyche is partly due to our evolutionary background \u2014 some shapes instill comfort, others make us cautious. Rounder shapes like circles and ovals are generally associated with safety and harmony. Pointier shapes, on the other hand, signal danger and command attention.<\/p>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/02_3.png\" alt=\"Shapes as basic design elements \u2014 geometric forms\" class=\"wp-image-23199\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/02_3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/02_3-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>Here&#8217;s how common shapes are perceived in design:<\/p>\n<ul>\n<li><strong>Squares and rectangles<\/strong> \u2014 convey stability, reliability, and order. They&#8217;re the backbone of most UI layouts (cards, buttons, input fields).<\/li>\n<li><strong>Triangles<\/strong> \u2014 associated with power, energy, and action. Often used in play buttons, directional arrows, and warning icons.<\/li>\n<li><strong>Circles and ovals<\/strong> \u2014 associated with harmony, completeness, and continuity. Common in avatars, progress indicators, and logos.<\/li>\n<li><strong>Spirals<\/strong> \u2014 associated with growth, evolution, and natural processes.<\/li>\n<\/ul>\n<h3 id=\"h-color\">Color<\/h3>\n<p>Colors are electromagnetic radiation at different frequencies \u2014 yet they have a powerful effect on the human mind. It&#8217;s important to note that color perception is partly subjective, influenced by cultural, religious, geographical, and personal factors.<\/p>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/03_2.png\" alt=\"Color as a basic design element \u2014 warm and cool colors\" class=\"wp-image-23200\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/03_2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/03_2-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>Broad color groups affect most people in predictable ways:<\/p>\n<ul>\n<li><strong>Warm colors<\/strong> (red, yellow, orange) typically evoke emotions ranging from warmth and energy to urgency and aggression.<\/li>\n<li><strong>Cool colors<\/strong> (blue, green, purple) can instill feelings ranging from calm and trust to sadness and detachment.<\/li>\n<\/ul>\n<p>The most commonly used colors in modern digital design:<\/p>\n<ul>\n<li><strong>Blue<\/strong> \u2014 extremely popular in web design and digital interfaces. It&#8217;s the predominant color on the web&#8217;s most trafficked sites and conveys trust and reliability.<\/li>\n<li><strong>Red<\/strong> \u2014 has a clear function: pushing users toward action. This is why it&#8217;s widely used in calls to action, error states, and notifications.<\/li>\n<li><strong>Yellow<\/strong> \u2014 can be perceived as cheerful or cautionary, depending on tone and context.<\/li>\n<li><strong>Green<\/strong> \u2014 associated with nature, success, and affirmation. Widely used in success messages, confirmation buttons, and environmental branding.<\/li>\n<\/ul>\n<p>In design systems, color is formalized through <strong>design tokens<\/strong> \u2014 named color values (like <code>primary-500<\/code> or <code>error-100<\/code>) that ensure consistency across every screen and component. Tools like <a href=\"https:\/\/www.uxpin.com\/merge\">UXPin Merge<\/a> let designers work with these exact production tokens, so the colors in prototypes match the final product precisely.<\/p>\n<h3 id=\"h-typography\">Typography<\/h3>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/04_2.png\" alt=\"Typography as a basic design element \u2014 font characteristics\" class=\"wp-image-23201\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/04_2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/04_2-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\">Fonts<\/a> are multifaceted. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-typography-tips-for-designers-how-to-make-fonts-speak\/\">They communicate meaning<\/a> through words and a mood through their characteristics \u2014 size, weight, kerning, letter-spacing, and line-height.<\/p>\n<p>When we speak, we use rhythm, pitch, tone, and gestures to convey how we feel. Typography has its own set of characteristics that modulate the feelings a text evokes. We use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-perfect-ui-pairing-minimalism-and-bold-typography\/\">typographic differences<\/a> to establish visual hierarchy and distinguish between types of information in a design.<\/p>\n<p>Larger, heavier fonts are typically used for headlines. They set the tone and entice the reader with a glimpse of the content below. Given that headlines should be <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-writing-disconnect\/\">kept short<\/a>, the fonts used for them can afford more personality. Body text should be simpler and more legible.<\/p>\n<h4>Choosing the right typeface<\/h4>\n<p>Your choice of typeface should be guided by three factors: the <strong>message<\/strong>, the <strong>medium<\/strong>, and the <strong>audience<\/strong>. Start with minimal diversity and gradually introduce the smallest amount of typographic contrast necessary to guide a person through the information hierarchy.<\/p>\n<p>Excessive complexity makes designs illegible. Too little contrast makes them dull. Your goal is to find the golden mean between consistency and emphasis.<\/p>\n<h2 id=\"h-the-central-principles-of-design\">The Central Principles of Design<\/h2>\n<p>Now that we&#8217;ve covered the basic elements, let&#8217;s look at the <strong>principles<\/strong> that govern how those elements relate to each other within a composition.<\/p>\n<p>These principles serve different purposes. Contrast, repetition, and rhythm help draw attention to specific elements. Balance and variety are essential for creating designs that appeal to our senses. All of these principles are tightly interconnected \u2014 your goal as a designer is to achieve their harmonious coexistence.<\/p>\n<p>You don&#8217;t need to incorporate every principle in every design. However, applying at least a few will guide you toward a more coherent and effective end product.<\/p>\n<h3 id=\"h-unity\">Unity<\/h3>\n<p>Unity is the overarching quality that makes a design feel complete and coherent. There are two kinds: <strong>conceptual unity<\/strong> and <strong>visual unity<\/strong>.<\/p>\n<p>Conceptual unity is critical <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-wireframe\/\">during wireframing<\/a>. It&#8217;s about combining information for the user&#8217;s comfort and ensuring they can accomplish goals with minimal friction.<\/p>\n<p>Visual unity has to do with how things look. The idea is to ensure harmonious use of elements, colors, shapes, and sizes. Equally important design elements should share visual characteristics, and a unified design establishes consistency and a clear visual hierarchy.<\/p>\n<p>Design systems are, in essence, formalized unity. When your entire product uses the same component library with consistent spacing, color tokens, and typography scales, visual and conceptual unity happen by default.<\/p>\n<h3 id=\"h-contrast-and-similarity\">Contrast and Similarity<\/h3>\n<p>Designers use contrast and similarity to guide attention. <strong>Similarity<\/strong> creates relationships between elements. According to the <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/gestalt-principles\">Gestalt principles<\/a>, we tend to group things together based on their appearance \u2014 we perceive similar shapes, colors, or sizes as belonging together.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-colors-space-contrast\/\">Contrast<\/a>, on the other hand, makes things stand out. Our brains are hardwired to notice visual outliers \u2014 elements that differ from their surroundings. In a deliberate design, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/contrast-in-web-design\/\">contrast<\/a> signals importance.<\/p>\n<p>Common ways to create contrast:<\/p>\n<ul>\n<li><strong>Texture<\/strong> \u2014 rough vs. smooth surfaces<\/li>\n<li><strong>Shapes<\/strong> \u2014 organic vs. geometric, rounded vs. sharp edges<\/li>\n<li><strong>Colors<\/strong> \u2014 differences in warmth, hue, and intensity<\/li>\n<li><strong>Scale and size<\/strong> \u2014 large elements next to small ones<\/li>\n<\/ul>\n<h3 id=\"h-balance\">Balance<\/h3>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/symmetry-vs-asymmetry-in-design\/\">Balance<\/a> creates a sense of stability and composure \u2014 it just &#8220;feels right.&#8221; Designers use several types of balance: symmetrical, asymmetrical, mosaic, and radial. Each has its own subtypes and applications.<\/p>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/05_1.png\" alt=\"Balance in design \u2014 symmetrical and asymmetrical examples\" class=\"wp-image-23202\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/05_1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/05_1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<p>A lack of balance can misguide users, create disorientation, or trigger visual discomfort. An unbalanced composition creates unnecessary friction, causing information to go unnoticed.<\/p>\n<h3 id=\"h-hierarchy-and-emphasis\">Hierarchy and Emphasis<\/h3>\n<p>Hierarchy ensures users process information in the right order. Its purpose is to structure elements rationally, allowing users to reach their goals efficiently.<\/p>\n<p>Hierarchy can be established through:<\/p>\n<ul>\n<li><strong>Size<\/strong> \u2014 larger elements are noticed first and perceived as more important<\/li>\n<li><strong>Color<\/strong> \u2014 brighter or more saturated colors stand out against paler ones<\/li>\n<li><strong>Contrast<\/strong> \u2014 contrasting elements are more captivating<\/li>\n<li><strong>Alignment<\/strong> \u2014 misaligned elements draw more attention than aligned ones<\/li>\n<li><strong>Repetition<\/strong> \u2014 similar features signal that elements are related<\/li>\n<li><strong>Proximity<\/strong> \u2014 elements placed close together appear related<\/li>\n<li><strong>White space<\/strong> \u2014 isolated elements draw more attention<\/li>\n<li><strong>Texture<\/strong> \u2014 complex textures draw more attention than simple ones<\/li>\n<\/ul>\n<p>Too many accents create a chaotic, frustrating experience. Too few make a design seem dull. Effective hierarchy finds the balance between the two.<\/p>\n<h2 id=\"h-rhythm-and-flow\">Rhythm and Flow<\/h2>\n<p>Compositional flow determines how the eye moves through a design: where it looks first, where it goes next, where it pauses, and how long it stays.<\/p>\n<h3 id=\"h-interaction-layouts\">Interaction Layouts<\/h3>\n<p>Several established reading patterns help designers create coherent layouts:<\/p>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/06_1.png\" alt=\"Gutenberg diagram reading pattern\" class=\"wp-image-23203\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/06_1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/06_1-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<ul>\n<li><strong>The Gutenberg diagram<\/strong> \u2014 applies to cultures that read left to right. Reading gravity moves attention from the top-left corner toward the lower-right corner, with the other two corners (called fallow areas) receiving less attention.<\/li>\n<\/ul>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/08.png\" alt=\"F-pattern reading layout\" class=\"wp-image-23204\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/08.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/08-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<ul>\n<li><strong>The F-pattern<\/strong> \u2014 widely used for text-heavy digital interfaces. Eye movement starts at the top-left and moves right, then scans down with shorter horizontal sweeps. Because modern users skim, the lower lines vary in length, creating an F-shaped pattern.<\/li>\n<\/ul>\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/07.png\" alt=\"Z-pattern reading layout\" class=\"wp-image-23205\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/07.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/07-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n<ul>\n<li><strong>The Z-pattern<\/strong> \u2014 the eye sweeps from top-left to top-right, makes a diagonal transition to bottom-left, and finishes at bottom-right. Common in landing pages and marketing layouts where content is less dense.<\/li>\n<\/ul>\n<p>Note that these patterns apply mostly to text-heavy designs. Once you add various graphical elements, the patterns may be overridden by visual hierarchy and emphasis cues.<\/p>\n<h3 id=\"h-compositional-flow\">Compositional Flow<\/h3>\n<p>When a layout doesn&#8217;t follow the standard reading patterns above, designers use directional cues to guide users:<\/p>\n<ul>\n<li>Repetition of elements<\/li>\n<li>Rhythm and pacing<\/li>\n<li>Implied action and movement<\/li>\n<li>Diagonal and gestural lines<\/li>\n<li>Directional lines and arrows<\/li>\n<li>Perspective and depth<\/li>\n<li>Subject matter of visual elements<\/li>\n<li>Gradation (gradual transitions in color, size, or shape)<\/li>\n<\/ul>\n<h3 id=\"h-rhythm-and-repetition\">Rhythm and Repetition<\/h3>\n<p>Without repetition, there is no rhythm. Our brains are hardwired to seek patterns and similarities. In design, rhythm provides predictability and flow.<\/p>\n<p>Three types of rhythm:<\/p>\n<ul>\n<li><strong>Regular<\/strong> \u2014 elements and spacing are consistent and predictable (like items in a grid layout).<\/li>\n<li><strong>Flowing<\/strong> \u2014 similar to regular rhythm but without strict uniformity. The pattern feels organic and natural.<\/li>\n<li><strong>Progressive<\/strong> \u2014 continuous change in shape, color, or size represents progression or evolution (like steps in a progress indicator).<\/li>\n<\/ul>\n<h2 id=\"h-white-space\">White Space<\/h2>\n<p>White space isn&#8217;t necessarily white \u2014 it&#8217;s the empty area surrounding and separating design elements. It can be any color, texture, or pattern. White space is one of the most important and often underused design tools.<\/p>\n<p>It&#8217;s a vital component for enhancing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-for-scannability\/\">legibility<\/a> and reducing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/\">cognitive fatigue<\/a> and friction between the user and your design.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/free-e-book-zen-white-space-web-ui-design-balance-contrast\/\">White space<\/a> has become especially important in modern digital design as designers have moved away from the cluttered interfaces of earlier decades. Compare any early web portal&#8217;s cramped layout with Apple&#8217;s current homepage \u2014 the difference in readability, focus, and perceived quality is dramatic.<\/p>\n<h4>Why use white space?<\/h4>\n<ul>\n<li><strong>Directs attention<\/strong> \u2014 isolated elements draw the eye, helping establish visual hierarchy and guide users to key content.<\/li>\n<li><strong>Increases interaction<\/strong> \u2014 well-spaced elements are easier to notice and act on, improving conversion and usability.<\/li>\n<li><strong>Reduces cognitive load<\/strong> \u2014 generous spacing prevents visual fatigue and makes interfaces feel calmer and more professional.<\/li>\n<li><strong>Improves legibility<\/strong> \u2014 adequate spacing between lines, paragraphs, and sections makes text significantly easier to read.<\/li>\n<\/ul>\n<h2 id=\"h-variety\">Variety<\/h2>\n<p>Variety arouses visual interest and prevents designs from becoming monotonous. Designers use it to counteract excessive unity \u2014 when things are too uniform and bland, users lose engagement.<\/p>\n<p>Ways to introduce variety:<\/p>\n<ul>\n<li><strong>Lines<\/strong> \u2014 varying weight, angle, or length<\/li>\n<li><strong>Shapes<\/strong> \u2014 changing shape type (organic vs. geometric), size, color, or orientation<\/li>\n<li><strong>Colors<\/strong> \u2014 diversity in hue, value, or saturation<\/li>\n<li><strong>Values<\/strong> \u2014 varying lightness or darkness<\/li>\n<li><strong>Textures<\/strong> \u2014 mixing rough and smooth surfaces<\/li>\n<\/ul>\n<h2 id=\"h-applying-design-elements-in-prototyping\">Applying Design Elements and Principles in Prototyping<\/h2>\n<p>On the surface, design trends come and go. But the underlying elements and principles are timeless \u2014 they apply as much to a 2026 mobile app as they did to a Renaissance painting.<\/p>\n<p>The key insight is that these principles form a system. Improving variety might affect balance. Making a design too unified might make it dull. The craft lies in understanding the interplay and finding the right balance for each project.<\/p>\n<p>Modern design tools make it easier to apply these principles. With <a href=\"https:\/\/www.uxpin.com\/merge\">UXPin Merge<\/a>, designers work with real, production-grade components from libraries like <a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\">MUI<\/a> or <a href=\"https:\/\/www.uxpin.com\/examples\/shadcn-ui-library\">shadcn\/ui<\/a> that already encode many of these principles \u2014 consistent spacing, harmonious color tokens, typographic hierarchy, and balanced layouts are built into the components themselves.<\/p>\n<p>For even faster exploration, <a href=\"https:\/\/www.uxpin.com\/forge\">UXPin Forge<\/a> generates layouts from text descriptions using your production component library. Describe a layout \u2014 its structure, emphasis, and flow \u2014 and Forge produces a working prototype. Because output is constrained to your design system&#8217;s components, the fundamental design principles are maintained automatically.<\/p>\n<p>Create prototypes that are as interactive as the final product. No code required. <a href=\"https:\/\/www.uxpin.com\/sign-up\">Try UXPin for free<\/a>.<\/p>\n<h2 id=\"h-faq-design-elements-principles\">Frequently Asked Questions About Design Elements and Principles<\/h2>\n<h3>What are the basic elements of design?<\/h3>\n<p>The basic elements of design are <strong>lines, shapes, color, and typography<\/strong>. Lines organize space and draw attention. Shapes create meaning through geometric and organic forms. Color evokes emotions and guides user focus. Typography communicates information through words while conveying mood through font characteristics like weight, size, and spacing.<\/p>\n<h3>What are the principles of design?<\/h3>\n<p>The core principles of design include <strong>unity, contrast, similarity, balance, hierarchy, emphasis, rhythm, repetition, white space, and variety<\/strong>. These principles govern how basic design elements relate to each other and work together to create effective, coherent visual compositions.<\/p>\n<h3>What is the difference between design elements and design principles?<\/h3>\n<p>Design elements are the building blocks \u2014 the raw visual components like lines, shapes, colors, and type. Design principles are the rules that govern how those elements are arranged and relate to each other within a composition. Elements are the <em>what<\/em>; principles are the <em>how<\/em>.<\/p>\n<h3>Why is white space important in design?<\/h3>\n<p>White space (also called negative space) reduces cognitive fatigue, improves legibility, directs attention to key elements, and establishes visual hierarchy. It doesn&#8217;t have to be literally white \u2014 it&#8217;s simply the empty area around and between design elements. Effective use of white space is one of the clearest markers of professional, polished design.<\/p>\n<h3>How do design elements apply to UI and UX design?<\/h3>\n<p>In UI\/UX design, elements and principles are applied through component design, layout systems, color palettes, typography scales, and interaction patterns. Design systems formalize these decisions into reusable components. Tools like <a href=\"https:\/\/www.uxpin.com\/sign-up\">UXPin<\/a> let designers apply these principles while prototyping with real, interactive components \u2014 ensuring visual design decisions translate directly to production code.<\/p>\n<h3>What are the F-pattern and Z-pattern reading layouts?<\/h3>\n<p>The <strong>F-pattern<\/strong> describes how users scan text-heavy pages \u2014 reading across the top, then scanning down the left side with shorter horizontal sweeps, forming an F shape. The <strong>Z-pattern<\/strong> applies to pages with less text \u2014 the eye moves from top-left to top-right, diagonally to bottom-left, then across to bottom-right. Understanding these patterns helps designers place important elements where users naturally look.<\/p>\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>Master the basic design elements \u2014 lines, shapes, color, typography \u2014 and core design principles like contrast, balance, hierarchy, and white space. Practical guide for designers.<\/p>\n","protected":false},"author":156,"featured_media":23197,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-23196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"%%title%% %%page%% - by UXPin","yoast_metadesc":"In this article, we explore the basic design elements and principles beginner designers should be aware of.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Basic Design Elements and Principles of Design: A Complete Guide [2026] - by UXPin<\/title>\n<meta name=\"description\" content=\"In this article, we explore the basic design elements and principles beginner designers should be aware of.\" \/>\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\/basic-elements-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basic Design Elements and Principles of Design: A Complete Guide [2026]\" \/>\n<meta property=\"og:description\" content=\"In this article, we explore the basic design elements and principles beginner designers should be aware of.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-20T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-20T11:27:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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=\"17 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\\\/basic-elements-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"Basic Design Elements and Principles of Design: A Complete Guide [2026]\",\"datePublished\":\"2026-05-20T11:00:00+00:00\",\"dateModified\":\"2026-05-20T11:27:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/\"},\"wordCount\":2643,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Basic-Design-Elements-and-the-Principles-of-Design.png\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/\",\"name\":\"Basic Design Elements and Principles of Design: A Complete Guide [2026] - by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Basic-Design-Elements-and-the-Principles-of-Design.png\",\"datePublished\":\"2026-05-20T11:00:00+00:00\",\"dateModified\":\"2026-05-20T11:27:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"In this article, we explore the basic design elements and principles beginner designers should be aware of.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Basic-Design-Elements-and-the-Principles-of-Design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Basic-Design-Elements-and-the-Principles-of-Design.png\",\"width\":1200,\"height\":600,\"caption\":\"Basic Design Elements and the Principles of Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basic Design Elements and Principles of Design: A Complete Guide [2026]\"}]},{\"@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\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Basic Design Elements and Principles of Design: A Complete Guide [2026] - by UXPin","description":"In this article, we explore the basic design elements and principles beginner designers should be aware of.","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\/basic-elements-design\/","og_locale":"en_US","og_type":"article","og_title":"Basic Design Elements and Principles of Design: A Complete Guide [2026]","og_description":"In this article, we explore the basic design elements and principles beginner designers should be aware of.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/","og_site_name":"Studio by UXPin","article_published_time":"2026-05-20T11:00:00+00:00","article_modified_time":"2026-05-20T11:27:45+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"Basic Design Elements and Principles of Design: A Complete Guide [2026]","datePublished":"2026-05-20T11:00:00+00:00","dateModified":"2026-05-20T11:27:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/"},"wordCount":2643,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/","name":"Basic Design Elements and Principles of Design: A Complete Guide [2026] - by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png","datePublished":"2026-05-20T11:00:00+00:00","dateModified":"2026-05-20T11:27:45+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"In this article, we explore the basic design elements and principles beginner designers should be aware of.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Basic-Design-Elements-and-the-Principles-of-Design.png","width":1200,"height":600,"caption":"Basic Design Elements and the Principles of Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Basic Design Elements and Principles of Design: A Complete Guide [2026]"}]},{"@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\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23196","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\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=23196"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23196\/revisions"}],"predecessor-version":[{"id":59951,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23196\/revisions\/59951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/23197"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=23196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=23196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=23196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}