{"id":23196,"date":"2024-03-28T14:12:51","date_gmt":"2024-03-28T21:12:51","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=23196"},"modified":"2024-03-28T14:13:36","modified_gmt":"2024-03-28T21:13:36","slug":"basic-elements-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/","title":{"rendered":"Basic Design Elements and the Principles of Design"},"content":{"rendered":"\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 the Principles of Design\" 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\n\n\n<p>Good design isn\u2019t about many years of practice and thousands of hours spent in graphic editor tools. The beauty of this craft is that it\u2019s accessible to all, given that they have a surface level understanding of its principles and the basic design elements.<\/p>\n\n\n\n<p>Luckily, hundreds of years of work with paintings and graphics have provided us with a series of vital rules that guide designers to this day.&nbsp;<\/p>\n\n\n\n<p>In today\u2019s article, we\u2019ll take a closer look at these rules, along with the building blocks of design that will help you create great products with little effort or experience.<\/p>\n\n\n\n<p>Create advanced prototypes that can be quickly translated into code. Try UXPin, an end-to-end prototyping tool for interactive design that helps you test not only the looks, but interactions too. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try it 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<h2 class=\"wp-block-heading\" id=\"h-what-is-design\">What is Design?&nbsp;<\/h2>\n\n\n\n<p>An essential first step on the journey towards good design is understanding what it is at its core. We often mistakenly believe that it has a decorative function \u2014 it\u2019s meant to make things pretty and appealing. However, its spirit is much more pragmatic.&nbsp;<\/p>\n\n\n\n<p>Design isn\u2019t art <em>per se<\/em>. Some designers go as far as to insist that there\u2019s pretty much no overlap between the two. While there\u2019s a lot to debate in this viewpoint, one thing is for sure \u2014 the purpose of design is to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-pain-points-in-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">solve problems<\/a>. Furthermore, it can often be done to the detriment of beauty.&nbsp;<\/p>\n\n\n\n<p>A design&#8217;s end goal is to find an innovative solution; this solution&#8217;s prettification is a secondary matter.&nbsp;<\/p>\n\n\n\n<p>Therefore, it\u2019s safe to say that 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, it helps us shape the world we live in and impact the way we perceive reality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-basic-design-elements\">Basic Design Elements<\/h2>\n\n\n\n<p>Before we dive into the central principles of design, let\u2019s explore its basic elements.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lines\">Lines<\/h3>\n\n\n\n<p>Lines are the most seamless and most powerful elements of design. They have a vast spectrum of functions and purposes. We use them to separate and organize space, outline and contour objects, emphasize certain elements, draw attention, and so forth.&nbsp;<\/p>\n\n\n\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=\"01 3\" 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\n\n\n<p>It\u2019s interesting how such a simple element can yield such a strong effect on our attention and have such a complex meaning in the modern visual grammar.&nbsp;<\/p>\n\n\n\n<p>More importantly, we can curve and combine them to create rich meaning through different shapes and patterns due to how fundamentally simple lines are.&nbsp;<\/p>\n\n\n\n<p>Lines can be thin and thick, horizontal, vertical, and diagonal, curved and zigzagged, dashed, and dotted \u2014 all of them can be used to convey meaning and shape experiences.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/ZFQNWzMPyLo_frjmhCEuW-b4jlt2i-YrlnX6Qo3u0p3iMxE5b7mGQKNUHv8MWh8h1O2FNjve_GsfywWtn8du6wM2hNvkWzpvpCfX-wHFiqJOhRjii0wJesGStm_sRnNuv-SaNOcJ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.pexels.com\/photo\/abstract-architect-architectural-design-art-323645\/\">https:\/\/www.pexels.com\/photo\/abstract-architect-architectural-design-art-323645\/<\/a>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-shapes\">Shapes<\/h3>\n\n\n\n<p>Everything is made of shapes which, in turn, are made of lines. We can deconstruct the world we live in into a series of basic geometric and natural forms.&nbsp;<\/p>\n\n\n\n<p>Human cognition is odd. In our daily lives, we tend to forget that shapes surround us. Too often we fail to notice how they influence us too. Their effect on our psyche is partly due to <a href=\"https:\/\/www.researchgate.net\/publication\/257623827_Simple_geometric_shapes_are_implicitly_associated_with_affective_value\">our evolutionary upbringing<\/a> \u2014 some shapes instill comfort, others make us cautious.&nbsp;<\/p>\n\n\n\n<p>Rounder shapes like circles and ovals are generally associated with safety and children \u2014 throughout evolution, few round things could harm us.&nbsp;<\/p>\n\n\n\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=\"02 3\" 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\n\n\n<p>On the other hand, pointier shapes make us think of danger. Throughout the early days of human evolution, they\u2019ve forced us to direct our attention towards them.&nbsp;<\/p>\n\n\n\n<p>A few million years forward, we\u2019ve started using various shapes in typography and art. Human perception has fine-tuned the meaning of every kind of shape in part. Here\u2019s a rough overview of a few of them.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Squares and rectangles<\/strong> \u2014 they make us think of stability and safety. They\u2019re balanced and mathematically sound;<\/li>\n\n\n\n<li><strong>Triangles<\/strong> \u2014 often associated with power and energy. They often make us think of action, tension, and even aggression;<\/li>\n\n\n\n<li><strong>Circles and ovals<\/strong> \u2014 typically associated with harmony, life, and permanence;<\/li>\n\n\n\n<li><strong>Spirals<\/strong> \u2014 associated with nature, birth, evolution, and growth;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-color\">Color<\/h3>\n\n\n\n<p>Colors are equally mysterious. At their core, they\u2019re nothing but electromagnetic radiation at different frequencies, yet they still have a very powerful effect on the human mind.&nbsp;<\/p>\n\n\n\n<p>At the same time, it\u2019s important to underline that there\u2019s a lot of subjectivity to color perception. Our opinion on a certain color can be affected by various cultural, religious, geographical, and professional factors, along with plain personal preference.&nbsp;&nbsp;<\/p>\n\n\n\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=\"03 2\" 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\n\n\n<p>Fortunately, we can outline how certain color groups affect the majority of people.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Warm colors (red, yellow, orange) typically instill a series of emotions ranging from calm and warmth to aggression and anger;<\/li>\n\n\n\n<li>Cool colors (blue, green, purple) can instill a range of feelings ranging from calm to sadness;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Plus, every color in part has its connotation and can evoke a complex spectrum of emotions. The most commonly used colors in modern design are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Blue<\/strong> \u2014 it\u2019s extremely popular in web design and digital interfaces in general. It\u2019s the predominant color on the web\u2019s most trafficked websites. It\u2019s twice as popular as yellow and red;<\/li>\n\n\n\n<li><strong>Red<\/strong> \u2014 while not as popular as blue, red has a very clear function \u2014 push us towards action. This is precisely why it\u2019s <a href=\"https:\/\/cxl.com\/blog\/which-color-converts-the-best\/\">among the most used<\/a> colors in calls to action on the internet;<\/li>\n\n\n\n<li><strong>Yellow<\/strong> \u2014 can be perceived as cheerful and pessimistic, depending on the tone and hue;<\/li>\n\n\n\n<li><strong>Green<\/strong> \u2014 mostly associated with nature and fertility. However, it can also be associated with money and greed;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-typography\">Typography<\/h3>\n\n\n\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=\"04 2\" 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\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fonts<\/a> are multifaceted. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-typography-tips-for-designers-how-to-make-fonts-speak\/\" target=\"_blank\" rel=\"noreferrer noopener\">They communicate meaning<\/a> through words and a mood through its characteristics.\u00a0<\/p>\n\n\n\n<p>When it comes to spoken language, we typically use a variety of factors to convey how we feel \u2014 rhythm, pitch, tone, gestures, and so forth. Typography also has a diverse set of characteristics that modulate the feelings that a text can evoke&nbsp; \u2014 size, weight, kerning, position, and so forth.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/OZ7Xe6JRVvdaLbUtMFjDBezZ9i5tD1n1cM6mJinYFJrQHyGuIJm50qmf7cdEkewlQ5cDDpNxPzrdQhE33483bjFZH05uSgdJrwg-RUuiilIuofT_ufEZK254MgqR8kttDjTOAyWh\" alt=\"\"\/><\/figure>\n\n\n\n<p>Due to how long we\u2019ve been exposed to different typefaces, we\u2019ve formed individual impressions about fonts. Some convey seriousness; others feel silly and unpresumptuous.&nbsp;<\/p>\n\n\n\n<p>We use <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-perfect-ui-pairing-minimalism-and-bold-typography\/\" target=\"_blank\" rel=\"noreferrer noopener\">typographic differences<\/a> to establish a visual hierarchy and outline the differences between kinds of information in design. \u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/76LcXYce4PpfOkWCAdcLR9o_KzO0xhMrIJtEbq4tK992w1z297Pv50TjyPICebVOeIlQ09jl9_LKK6nma_6IN3u87CLfBKkdTenqtzErvxWOdh22BBkq5ELfXiitICsq83T-E-pF\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>Source: <a href=\"https:\/\/www.typewolf.com\/site-of-the-day\/medium-2020\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.typewolf.com\/site-of-the-day\/medium-2020<\/a>\u00a0<\/p>\n\n\n\n<p>Larger, heavier fonts are often used for headlines. They set the tone for the text that will follow below. They aim to entice the reader by offering them a short glimpse of what they\u2019re about to read.&nbsp;<\/p>\n\n\n\n<p>Given that it\u2019s common to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-writing-disconnect\/\" target=\"_blank\" rel=\"noreferrer noopener\">keep headlines short<\/a>, the fonts used for them will sometimes have more ornaments. Body text is meant to be slightly simpler to ensure legibility.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-rightness-and-wrongness-of-a-type\"><strong>The rightness and wrongness of a type<\/strong><\/h3>\n\n\n\n<p>There\u2019s a myriad of things that you should consider when choosing the right font for your design.&nbsp;<\/p>\n\n\n\n<p>Fundamentally, your choice should be guided by the message, the medium, and the audience you\u2019re writing for.&nbsp;<\/p>\n\n\n\n<p>Start with minimal diversity and gradually introduce the smallest amount of typographic contrasts necessary to guide a person through the classes of the information displayed.&nbsp;<\/p>\n\n\n\n<p>Excessive complexity and lack of expressivity can make your design bland, unappealing, and illegible.&nbsp;<\/p>\n\n\n\n<p>Bear in mind that your goal is to create unity through design. You\u2019re on a mission to find the golden mean \u2014 the path between consistency and emphasis.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-central-principles-of-design\">The Central Principles of Design<\/h2>\n\n\n\n<p>Now that we\u2019ve gone through the basic design elements, we need to look at the principles that shape their relationship in a medium.&nbsp;<\/p>\n\n\n\n<p>These principles differ based on their purpose and function. Things like contrast, repetition, and rhythm will help certain elements and components draw a person\u2019s attention to them. Balance and variety are essential when it comes to creating designs that appeal to our senses.<\/p>\n\n\n\n<p>More importantly, it\u2019s essential to point out that all of these principles are tightly related to one another. Your goal as a designer is to achieve their harmonious coexistence.&nbsp;<\/p>\n\n\n\n<p>It\u2019s important to underline that you shouldn\u2019t necessarily include all the principles in a design. However, using at least a few will guide you towards a more coherent and cohesive end-product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-unity\">Unity<\/h3>\n\n\n\n<p>Unity is a quality that a designer achieves once the product is finished. It\u2019s important to point out that there are two kinds of unity \u2014 conceptual and visual.&nbsp;<\/p>\n\n\n\n<p>The former is extremely important <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-wireframe\/\" target=\"_blank\" rel=\"noreferrer noopener\">during wireframing<\/a>. Conceptual unity is all about combining information for the user\u2019s comfort and ensuring that they have to perform as little interactions while going from point A to point B.\u00a0<\/p>\n\n\n\n<p>The latter has to do with how things look. The idea behind it is to ensure the harmonious use of elements, colors, shapes, sizes, and so forth. Equally important design elements should have the same size or color and <em>vice versa<\/em>. A unified design allows to establish consistency and a clear visual hierarchy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-contrast-and-similarity\">Contrast and similarity<\/h3>\n\n\n\n<p>Designers use these two principles to guide a person\u2019s attention. Similarity is a powerful tool that allows us to create relationships between elements. Let\u2019s take a quick look at a famous example of the similarity principle <a href=\"https:\/\/www.nngroup.com\/articles\/gestalt-similarity\/\" target=\"_blank\" rel=\"noreferrer noopener\">visualized by the Nielsen Norman Group<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/AeHZj1tfrdmORoliUL9ti8tnfQABdr-iPNM4fjQC7KJuo4E8YJOBukRA4x6ij-ThrnBZnMyFaV_8VBEAjLy5rwIi1XUKihwW2VXp5FGLQBUGJ0aWb2vajjis1HEjqlIrjKNrQ4wJ\" alt=\"\" style=\"width:348px;height:258px\"\/><\/figure>\n\n\n\n<p>According to the <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/gestalt-principles\" target=\"_blank\" rel=\"noreferrer noopener\">Gestalt principles in design<\/a>, we tend to group things together based on their appearance. That is why people typically perceive the above image as four columns rather than three rows. We unify the sequences of triangles and circles in their own groups.\u00a0<\/p>\n\n\n\n<p>As a designer, you can use this principle to signify relationships between objects based on their shared features.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-colors-space-contrast\/\" target=\"_blank\" rel=\"noreferrer noopener\">We generally use contrast<\/a> to make things stand out. Our brains are hardwired to observe things that are out of place. These visual or structural outliers pique our interest and draw our attention.\u00a0<\/p>\n\n\n\n<p>Given that designs are created by people, we can immediately conclude that an existing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/contrast-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">contrast<\/a> is there for a reason.\u00a0<\/p>\n\n\n\n<p>There are lots of basic ways you can create contrast. Here are a few of them:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texture<\/strong> \u2014 rough and smooth;<\/li>\n\n\n\n<li><strong>Shapes<\/strong> \u2014 organic and geometric, rounded and sharp edges;<\/li>\n\n\n\n<li><strong>Colors<\/strong> \u2014 difference in warmth, hue, and intensity;<\/li>\n\n\n\n<li><strong>Scale and size<\/strong> \u2014 large and small objects;&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-balance\">Balance<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/symmetry-vs-asymmetry-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Balance<\/a> triggers a certain kind of satisfaction in us. It just \u201cfeels right.\u201d It creates a sense of stability and composure. However, balance isn\u2019t just one thing. There are a few kinds of balance that designers make use of \u2014 symmetrical, asymmetrical, mosaic, and radial. Each of them has a variety of subtypes.\u00a0<\/p>\n\n\n\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=\"05 1\" 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\n\n\n<p>A lack of balance can cause multiple issues \u2014 it can misguide the user, causing them to feel disoriented or trigger a sense of visual discomfort. Therefore, a visually unbalanced composition will inevitably create unnecessary friction between the user and the medium.&nbsp;<\/p>\n\n\n\n<p>As a result, a poorly balanced design will cause a scattered interaction with the product, causing some of the information to go unnoticed.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hierarchy-and-emphasis\">Hierarchy and emphasis<\/h3>\n\n\n\n<p>The main idea behind hierarchy is to ensure that a person follows a right order while processing the information in a design. Its purpose is to make sure that the elements presented in a medium are structured rationally, allowing the person to reach their final goal.&nbsp;<\/p>\n\n\n\n<p>Hierarchy can be established by using a variety of visual parameters. Here are a few of them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Size<\/strong>&nbsp;\u2014 larger things are typically easier to notice. Therefore, they are considered more important;<\/li>\n\n\n\n<li><strong>Color<\/strong>&nbsp;\u2014 things that have a brighter color stand out compared to the paler ones;<\/li>\n\n\n\n<li><strong>Contrast<\/strong>&nbsp;\u2014 contrasting colors are more captivating;<\/li>\n\n\n\n<li><strong>Alignment<\/strong>&nbsp;\u2014 misaligned elements are more eye-catching than the ones that are in order;<\/li>\n\n\n\n<li><strong>Repetition<\/strong>&nbsp;\u2014 similar element features may indicate that they are related;<\/li>\n\n\n\n<li><strong>Proximity<\/strong>&nbsp;\u2014 things that are placed close to one another typically seem related;<\/li>\n\n\n\n<li><strong>White space<\/strong>&nbsp;\u2014 the more isolated elements are, the more attention they draw;<\/li>\n\n\n\n<li><strong>Texture<\/strong>&nbsp;\u2014 complex textures typically draw more attention than the simpler ones;<\/li>\n<\/ul>\n\n\n\n<p>A series of objects that lack prioritization will have too many accents. As a result, this can cause a rippled perception of the design. This chaotic quality feels irritating and frustrating. On the other hand, a lack of clearly emphasized elements may cause a design to seem dull and unappealing.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-rhythm-and-flow\">Rhythm and flow<\/h2>\n\n\n\n<p>Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaction-layouts\"><strong>Interaction layouts<\/strong><\/h3>\n\n\n\n<p>To ensure that your design has a coherent flow, it\u2019s essential to look into a couple of traditional layouts.<\/p>\n\n\n\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=\"06 1\" 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\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Gutenberg diagram <\/strong>\u2014 This layout is used applicable to cultures that read left to right. According to this pattern, reading gravity moves our attention from the top-left corner of a plain towards the lower-right corner. As a result, the other two corners get considerably less attention \u2014 they\u2019re called fallow areas.&nbsp;<\/li>\n<\/ul>\n\n\n\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=\"08\" 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\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The F-pattern<\/strong> \u2014 widely used in design for digital interfaces. Here, the eye movement starts at the top and moves from left to right. Then it moves onto the next line of text and continues its rightward movement. However, because modern users tend to skim over text, the lower lines vary in length, creating an F-shaped pattern.&nbsp;<\/li>\n<\/ul>\n\n\n\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=\"07\" 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\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Z-pattern<\/strong> \u2014 The logic behind this layout is that our eyes move in a Z-shaped pattern when exploring a visual medium. We sweep from left to right on the upper side of the plain, then make a diagonal transition to the bottom-left side, and finish by moving to the lower-right side.<\/li>\n<\/ul>\n\n\n\n<p>However, these principles apply mostly to text-heavy designs. Once you start adding various graphical elements, the relevance of these patterns will gradually wither away.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-compositional-flow\"><strong>Compositional flow<\/strong><\/h3>\n\n\n\n<p>In order to guide our users in a scenario that isn\u2019t covered by the layouts above, we need to make use of a variety of directional cues to guide our users. Here are a few of them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Repetition of elements<\/li>\n\n\n\n<li>Rhythm<\/li>\n\n\n\n<li>Implied action<\/li>\n\n\n\n<li>Diagonal lines<\/li>\n\n\n\n<li>Gestural lines<\/li>\n\n\n\n<li>Directional lines<\/li>\n\n\n\n<li>Perspective<\/li>\n\n\n\n<li>Subject matter of elements<\/li>\n\n\n\n<li>Gradation<\/li>\n<\/ul>\n\n\n\n<p>These objects can be used to imply direction and guide a user\u2019s movement.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-rhythm-and-repetition\"><strong>Rhythm and repetition<\/strong><\/h3>\n\n\n\n<p>Without repetition, there is no rhythm. Our brains are hardwired to seek patterns and similarities in our surroundings. In design, we can also use alteration and gradation to trigger pattern-like thinking.&nbsp;<\/p>\n\n\n\n<p>There are three general kinds of rhythm:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Regular<\/strong> \u2014 occurs when the size of the elements or the size of the space between them is predictable.<\/li>\n\n\n\n<li><strong>Flowing<\/strong> \u2014 this rhythm is similar to the regular one yet does not imply an even size or distance between elements. Instead, it has to do with patterns we consider organic, similar to the patterns you\u2019d see on a tiger.<\/li>\n\n\n\n<li><strong>Progressive<\/strong> \u2014 occurs when an action&#8217;s progress is represented through continuous change in shape, color, etc.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-white-space\">White space<\/h2>\n\n\n\n<p>White space isn\u2019t necessarily white; it can be of any color, texture, and so forth. Simply put, it\u2019s the area that surrounds one or more elements of your design.&nbsp;<\/p>\n\n\n\n<p>It\u2019s a vital component for enhancing your text&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-for-scannability\/\" target=\"_blank\" rel=\"noreferrer noopener\">legibility<\/a> and reducing <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/\" target=\"_blank\" rel=\"noreferrer noopener\">cognitive fatigue<\/a> and friction between the beholder and your design.\u00a0<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/free-e-book-zen-white-space-web-ui-design-balance-contrast\/\" target=\"_blank\" rel=\"noreferrer noopener\">White space<\/a> has become especially relevant in the last 15 years, as designers started moving away from extremely crammed and disorienting interfaces.\u00a0<\/p>\n\n\n\n<p>Please take a look at Arngren, an old version of a Norwegian classified site that immediately throws us back into the &#8217;90s (not in a good way). It\u2019s a perfect example of a near-total lack of white space. Take a second to think about how it makes you feel:<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/wbfKHZvneK0H3D0HlGBk2zPkXeB1UsEc5zJmNbyXpTsgr-fIq_wlzkQ3yV8eXFRX43dii7eIkAP3S6Av6JUZox2LLn-qEQREa2uv2H3nxyGB10EECfzBzgVHIBfyhDoA5Mo4_PYQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now, compare it to Apple\u2019s 2020 homepage:<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/f6Qu77uH3d1ZTLIx2hGsSPKlV-eJQMQ3tmNrCFIVX3f58Fxci892YtrjA2QXCdvm1_CKG_hviz2pFkcrNAPynI8VyqYr5AJ9XW83XXyaChXebsCvamAJGR5otZAQASbZJkiOrXOz\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-why-use-white-space\"><strong>Why use white space?<\/strong><\/h3>\n\n\n\n<p>The effective use of white space has a wide array of benefits. First off, it <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/hero-image-banners\/\" target=\"_blank\" rel=\"noreferrer noopener\">directs a person\u2019s attention<\/a> towards a specific object. It\u2019s another way of establishing a visual hierarchy. It allows us to guide a person through a design and direct their attention to its most essential elements.\u00a0<\/p>\n\n\n\n<p>Secondly, it increases the chances that a person will interact with it. At the end of the day, that\u2019s why we design things \u2014 we want people to use them to solve important problems.&nbsp;<\/p>\n\n\n\n<p>Thirdly, a lack of white space can take its toll on the eyes and brain. Let&#8217;s go back to Arngren and Apple for a second \u2014 imagine you\u2019re looking for something on the first site; a microwave oven, for instance. Try to be mindful of how complicated this task appears. Furthermore, pay attention to how tiring this experience is to the eye.&nbsp;<\/p>\n\n\n\n<p>Last but not least, white space ensures legibility. By not cramming your text in a tiny area, you\u2019ll make it significantly more accessible for people to read it.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s an example of text that has very little white space:<br><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/FrlAVa7PXdwoodm3k-iwVJKJeAdPll6Zab-UxJV_ash5zXjfiDpCr6YtBmx3UcXnUgdqhsYPck_f-_4ChbE2eWskgb-HaAnOedR1iS_drF2Dn7oKuMLegERVh_sE7_s-Xn_QB6KH\" width=\"500\" height=\"211.29214800464177\"><\/p>\n\n\n\n<p>And an example of text that has plenty of it:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/21GUUFwtyPQtHWylsmS6WlrzkQtj73M7ULG12RAE3kLtcDY2rZRwc74Gk1WgR9hIIZK39g7tQYx9a2YGtLO_JhO4VbqBMlaDULespuKYiZI6LcxKYnnXZb3uXWD-9K9U5gL6pz_T\" alt=\"\" style=\"width:477px;height:285px\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-variety\">Variety<\/h2>\n\n\n\n<p>Variety is a vital part of design that aims to arouse visual interest. Designers typically use it to counteract excessive unity \u2014 when things are too monotonous and bland. An uninteresting design will often fail to communicate which elements are more important and deserve a person\u2019s attention.<\/p>\n\n\n\n<p>There are many ways we can use variety to liven things up:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lines<\/strong> \u2014&nbsp;varying weight, angle, or length<\/li>\n\n\n\n<li><strong>Shapes<\/strong> \u2014&nbsp;changing up the kind of shape (i.e., amorphous or geometric) as well as the size, color, orientation, texture, etc.<\/li>\n\n\n\n<li><strong>Colors<\/strong> \u2014&nbsp;using diversity in the hue, value, or saturation<\/li>\n\n\n\n<li><strong>Values<\/strong> \u2014&nbsp;varying the lightness or darkness<\/li>\n\n\n\n<li><strong>Textures<\/strong> \u2014 is it rough or is it smooth?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-use-principles-of-design-in-prototyping\">Use Principles of Design in Prototyping<\/h2>\n\n\n\n<p>On the surface, design is in continuous change \u2014 it never stays the same. However, its principles and elements are timeless.&nbsp;<\/p>\n\n\n\n<p>More importantly, it\u2019s a good idea to think of them as parts of a large system. Improving on variety might harm balance. Making a design too unified, might cause it to seem dull and unappealing.&nbsp;&nbsp;<\/p>\n\n\n\n<p>One thing is for sure \u2014 by continuously taking them into account, you\u2019ll be able to create well-thought-out designs, whether you\u2019re a beginner or a pro.<\/p>\n\n\n\n<p>Create prototypes that are as interactive as the end-product. No code required. Use UXPin and dive into the world of advanced prototyping. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try 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>Good design isn\u2019t about many years of practice and thousands of hours spent in graphic editor tools. The beauty of this craft is that it\u2019s accessible to all, given that they have a surface level understanding of its principles and the basic design elements. Luckily, hundreds of years of work with paintings and graphics have<\/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.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Basic Design Elements and the Principles of Design - 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 the Principles of Design\" \/>\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=\"2024-03-28T21:12:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-28T21:13:36+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 the Principles of Design\",\"datePublished\":\"2024-03-28T21:12:51+00:00\",\"dateModified\":\"2024-03-28T21:13:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/basic-elements-design\\\/\"},\"wordCount\":3055,\"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 the Principles of Design - 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\":\"2024-03-28T21:12:51+00:00\",\"dateModified\":\"2024-03-28T21:13:36+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 the Principles of Design\"}]},{\"@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 the Principles of Design - 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 the Principles of Design","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":"2024-03-28T21:12:51+00:00","article_modified_time":"2024-03-28T21:13:36+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 the Principles of Design","datePublished":"2024-03-28T21:12:51+00:00","dateModified":"2024-03-28T21:13:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/basic-elements-design\/"},"wordCount":3055,"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 the Principles of Design - 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":"2024-03-28T21:12:51+00:00","dateModified":"2024-03-28T21:13:36+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 the Principles of Design"}]},{"@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":52627,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23196\/revisions\/52627"}],"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}]}}