{"id":9334,"date":"2019-01-25T16:11:04","date_gmt":"2019-01-25T15:11:04","guid":{"rendered":"https:\/\/uxstudioteam.com\/?p=9334"},"modified":"2022-09-06T16:08:46","modified_gmt":"2022-09-06T15:08:46","slug":"visual-elements","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/","title":{"rendered":"Visual Elements In UI Design: 5 Tips On How To Use Them"},"content":{"rendered":"<p><span>What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow the ultimate design rules? The answer: Yes, but you have to know how to spot the recurring visual UI elements they consist of!<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9345\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/Examples-for-Great-UX-1-720x540.jpg\" alt=\"Visual elements on a mobile app\" width=\"720\" height=\"540\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/Examples-for-Great-UX-1-720x540.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/Examples-for-Great-UX-1-768x576.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/Examples-for-Great-UX-1.jpg 800w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><!--more--><\/p>\n<p><span>In this post you will learn about:<\/span><\/p>\n<ul>\n<li><span>The five main visual elements<\/span><\/li>\n<li><span>How to recognize them (with examples)<\/span><\/li>\n<li><span>Five tips on how to use them in practice<\/span><\/li>\n<\/ul>\n<h2><span>What are visual elements in UI?<\/span><\/h2>\n<p><span>Visual elements (elements of art, even) form the fundamental building blocks of any type of visual communication such as line, shape, color, texture, and pattern. Just like words in a language, they have a limited meaning alone, but you can tell countless stories as soon as you start combining them. <\/span><\/p>\n<p><span>Studying good visual systems resembles learning a new language. In order to understand them, you need to examine them piece by piece until you find their most basic elements. This is how designers at our <a href=\"https:\/\/uxstudioteam.com\/\">UX company<\/a> work within their projects. Let\u2019s look at each of them and some examples!<\/span><\/p>\n<h2><span>Line: The visual guidance<\/span><\/h2>\n<p><span>Unlike in mathematics, lines in design can have width and depth as well. Actually, this visual element makes up the most versatile of them all, since it can suggest many other shapes, patterns and textures. <\/span><\/p>\n<p><span>We can use lines to guide our eyes towards something or divide things from each other. It can even suggest totally abstract ideas such as time (long or short) or rhythm (straight or wavy).<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9341\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-1-720x382.png\" alt=\"Visual elements: line example\" width=\"720\" height=\"382\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-1-720x382.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-1-768x407.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-1-1024x543.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image5-1.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>In this example, horizontal lines separate the main parts of the article from each other but also create rhythm when scrolling down the page. (source: misplaced.design)<\/p>\n<h2><span>Shapes: The illusion of space<\/span><\/h2>\n<p><span>Shapes consist of one or more lines but they stand out of their environment due to their defined boundaries. They can step out of the two-dimensional world to create the illusion of space and depth. <\/span><\/p>\n<p><span>The current era of minimalism makes sticking to 2D more common. However, every time you put a drop shadow on a CTA button, you create this illusion! <\/span><\/p>\n<p><span>Geometric and organic shapes offer a different way of grouping. Geometry means order and predictability, great in UX. On the other hand, organic forms appear more natural and human to our eyes.<\/span><\/p>\n<figure id=\"attachment_9337\" aria-describedby=\"caption-attachment-9337\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9337\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-1-720x450.png\" alt=\"Visual elements: illusion of space example\" width=\"720\" height=\"450\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-1-720x450.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-1-768x480.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-1-1024x640.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image1-1.png 1680w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9337\" class=\"wp-caption-text\">Source: conference.awwwards<\/figcaption><\/figure>\n<p><span>I love how a subtle change can make simple shapes like a rectangle interesting. In the example above, the angle of the images differ from that of the red rectangles around them. In turn, this creates an interesting tension between the two. <\/span><\/p>\n<p><span>The placement and size differences between the three objects make the composition dynamic and help create a hierarchy.<\/span><\/p>\n<h2><span>Colors: The main triggers of emotion<\/span><\/h2>\n<p><span>Of course, this element cannot exist on its own, either. Colors need a platform to exist. Keep in mind that different colors trigger not necessarily positive or negative, just <\/span><i><span>different<\/span><\/i><span> kinds of emotions. <\/span><\/p>\n<p><span>Think of neutrals (black, white, grays), warm colors (reds) which stimulate more, and cool colors (blues) which sooner calm us down. To make things more complicated, colors don\u2019t just mean things on their own. They also interact with each other.<\/span><\/p>\n<p><span>How you combine colors can enhance your website\u2019s message. The monochromatic, analogous, complementary and triadic comprise the four basic color schemes. I advise you to use\u00a0<a href=\"https:\/\/www.canva.com\/colors\/color-wheel\/\" target=\"_blank\" rel=\"noopener\">Canva&#8217;s Color Wheel<\/a> to help you choose the right color combinations.<\/span><\/p>\n<h3><span>Monochromatic colors<\/span><\/h3>\n<p><span>A monochromatic scheme uses one main color with all of its shades from white to black. People often use it on minimalistic websites which emphasize the content itself. E-commerce fashion brands usually provide good examples.<\/span><\/p>\n<h3><span>Analogous colors<\/span><\/h3>\n<p><span>Analogous colors lie next to each other on the color wheel. In the example below, Forest uses different shades of greens and blues to create a harmonious look. We often find this scheme in nature (think of an actual forest), which explains its visual appeal.<\/span><\/p>\n<figure id=\"attachment_9342\" aria-describedby=\"caption-attachment-9342\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9342\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-1-720x355.png\" alt=\"Visual elements: Analogus colors example\" width=\"720\" height=\"355\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-1-720x355.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-1-768x379.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-1-1024x505.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image6-1.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9342\" class=\"wp-caption-text\">Source: forestadmin<\/figcaption><\/figure>\n<h3><span>Complementary colors<\/span><\/h3>\n<p><span>Complementary colors lie opposite each other on the color wheel. These pairs make each other stronger \u2013 one looks more vivid next to its pair. Here, the yellow CTA button looks extremely bright compared to the dark purple background. The bold white paragraphs help make this contrast even more striking. Love it or hate it, these color combos scream for attention.<\/span><\/p>\n<figure id=\"attachment_9338\" aria-describedby=\"caption-attachment-9338\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9338\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-1-720x379.png\" alt=\"Visual elements: complementary colors example\" width=\"720\" height=\"379\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-1-720x379.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-1-768x404.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-1-1024x539.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image2-1.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9338\" class=\"wp-caption-text\">Source: flixxo<\/figcaption><\/figure>\n<h3><span>Triadic colors<\/span><\/h3>\n<p><span>Triadic schemes use three main colors which perfectly balance each other. They form an <\/span><span>equilateral triangle on the color wheel.<\/span><span> A safe choice for websites with a large audience, it gives a calm, harmonious look without surprises. Slack uses this scheme with its purple-yellow-green palette. Everything balances here and the elements don\u2019t overpower each other.<\/span><\/p>\n<figure id=\"attachment_9340\" aria-describedby=\"caption-attachment-9340\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9340\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image4-720x388.png\" alt=\"Visual elements: triadic colors example\" width=\"720\" height=\"388\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image4-720x388.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image4-768x414.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image4-1024x552.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image4.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9340\" class=\"wp-caption-text\">Source: Slack<\/figcaption><\/figure>\n<p><span>Textures: Mimicking the real world<\/span><\/p>\n<p><span>Since design website locks us into 2D space, we can only mimic real-life textures. Visual texture gives the illusion of texture on a two-dimensional surface. We can only perceive it with our eyes, not our hands.<\/span><\/p>\n<figure id=\"attachment_9343\" aria-describedby=\"caption-attachment-9343\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9343\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-1-720x381.png\" alt=\"Visual elements: mimicking the real world example\" width=\"720\" height=\"381\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-1-720x381.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-1-768x406.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-1-1024x541.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image7-1.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9343\" class=\"wp-caption-text\">Source: chiran-omoire<\/figcaption><\/figure>\n<p><span>We can employ pictures as powerful tools for displaying textures. In this example, the rough grey teapot and tea leaves set an interesting contrast to the delicate white cup in the foreground. The strong symmetry of the picture guides our eye to the middle, where our perfect cup of green tea awaits us.<\/span><\/p>\n<h2><span>UI patterns: The power of repetition<\/span><\/h2>\n<p><span>Repeating a motif (or texture) on a surface creates a pattern. They can look natural or man-made, organic or geometric, repeating or random.<\/span><\/p>\n<figure id=\"attachment_9339\" aria-describedby=\"caption-attachment-9339\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-9339\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image3-1-720x383.png\" alt=\"Visual elements: Patterns example\" width=\"720\" height=\"383\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image3-1-720x383.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image3-1-768x408.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image3-1-1024x544.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/image3-1.png 1999w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-9339\" class=\"wp-caption-text\">Source: intercom<\/figcaption><\/figure>\n<p><span>Intercom uses bright and colorful patterns on top of each other to create a playful and friendly tone of voice. These patterns have a handmade feel, just like if someone had started to doodle with crayons. However, notice that the page\u2019s main color remains white, making sure that the content remains the main focus.<\/span><\/p>\n<p><span>I hope these examples help you become more mindful of visual elements when you stumble upon a cool website! <\/span><\/p>\n<h2><span>5 tips on using UI elements\u00a0<\/span><\/h2>\n<h3><span>1. Stick to the brand guidelines and the tone of voice<\/span><\/h3>\n<p><span>Different industries determine how you can use visuals. We base our judgment of a site\u2019s credibility on a few seconds of scanning the home page. Would you trust a law firm which used crazy textures and pink illustrations on their website? <\/span><\/p>\n<p><span>You would have concerns. Of course, you can innovate, but you have to position your brand the same category as your competitors. Visuals should always respect the company\u2019s industry and its values.<\/span><\/p>\n<h3><span>2. Always think in systems<\/span><\/h3>\n<p><span>Visual consistency holds the key since it helps your users navigate through your site and remember your brand. It also indicates quality. If you have actually taken the time to consider the small details on your website, it means you probably offer a well-designed product as well. Consistency also means that in the face of endless combinations of visual elements, you should choose them selectively. <\/span><\/p>\n<p><span>If you use an outlined icon set, stick with it. Use two or three main colors and their shades. And no, a new landing page doesn\u2019t necessarily provide a good reason to introduce a third. These things may look trifling, but they add up.<\/span><\/p>\n<h3><span>3. Make sure that content comes first<\/span><\/h3>\n<p><span>Visuals help communicate the brand message better. Don\u2019t use them just to pretty up your site (even though it comes as a cool benefit, one that will make sure that visitors will stay on your site to actually read your content). While you can tell something in writing, an illustration can show it, especially a complex idea. <\/span><\/p>\n<p><span>Visuals can give a deeper understanding of your product, express a feeling of your brand\u2019s personality and help communicate your tone of voice. But users still need to find what they are looking for. Give people value with your content. Written content and visuals both have their place, but one cannot function well without the other.<\/span><\/p>\n<h3><span>4. Respect negative space<\/span><\/h3>\n<p><span>We call the area between the elements of a design negative or white space. Don\u2019t let the word \u201cwhite\u201d trick you; make it any color your heart desires. But keep one thing in mind: White space does not mean wasted space. People are always hurrying and want to find things as fast as possible. <\/span><\/p>\n<p><span>Cram every bit of info about your product into one page and nothing will stand out. Guide the visitor&#8217;s eye to the most important information you want them to understand and eliminate any disturbing factors. Negative space can help you here: It allows tired eyes to rest a bit while the brain processes the new information.<\/span><\/p>\n<h3><span>5. Experiment<\/span><\/h3>\n<p><span>Visual elements can prove very versatile, and visualizing something can have multiple good solutions. Don\u2019t shy away from trying out more than one solution, just make sure to test which one performs better. It could wind up a small thing like a landing page, or also how you position your brand. <a href=\"https:\/\/wepik.com\/\">Customize, experiment with visuals<\/a> until you find the ones that work best for your company&#8217;s image.<\/span><\/p>\n<p><span>Slack gives us a very recent example. <\/span><span>Their new logo shocked the design community all around the world. I don\u2019t want to debate the issue, but just mention that Slack got a new website design as well. They replaced the very illustrative, fun and, well, young one. The new one uses many more pictures of actual people and workplaces and concentrates on case studies and bigger businesses. <\/span><\/p>\n<p><span>But plenty of things stayed the same: colors, the friendly tone of voice, the simple navigation system, the focus on people working together. Slack is experimenting with growing up. \ud83d\ude42<\/span><\/p>\n<p><span>I hope this little post helped you understand visual elements better. If you have a great example for any of the topics mentioned, feel free to comment on it below! I would love to see your favorites as well! <\/span><\/p>\n<h2>Want to know more about UX and UI?<\/h2>\n<p><span>Need help with a well-defined, UX-related problem, with business implications? Let us run a <a href=\"https:\/\/uxstudioteam.com\/design-sprint\/\">design sprint<\/a> for you!<\/span><\/p>\n<p><span>We also have additional reading for you, an actual hardcover <\/span><a href=\"https:\/\/uxstudioteam.com\/product-design-book\/\"><span>Product Design book<\/span><\/a><span> as well! And we ship it worldwide!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow the ultimate design rules? The answer: Yes, but you have to know how to spot the recurring visual UI elements they consist of!<\/p>\n","protected":false},"author":64,"featured_media":9347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[25,26],"tags":[88,138],"table_tags":[],"coauthors":[139],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Elements: 5 Tips To Make Your Website More Visually Appealing<\/title>\n<meta name=\"description\" content=\"What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow design rules? We show you which visual elements to look out for.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Elements: 5 Tips To Make Your Website More Visually Appealing\" \/>\n<meta property=\"og:description\" content=\"What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow design rules? We show you which visual elements to look out for.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-25T15:11:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-06T15:08:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/social-cover-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Zs\u00f3fia Pasztern\u00e1k\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zs\u00f3fia Pasztern\u00e1k\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/\"},\"author\":{\"name\":\"Zs\u00f3fia Pasztern\u00e1k\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0\"},\"headline\":\"Visual Elements In UI Design: 5 Tips On How To Use Them\",\"datePublished\":\"2019-01-25T15:11:04+00:00\",\"dateModified\":\"2022-09-06T15:08:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/\"},\"wordCount\":1706,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"keywords\":[\"UI\",\"visual elements\"],\"articleSection\":[\"Mobile UX\",\"Web App UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/\",\"name\":\"UI Elements: 5 Tips To Make Your Website More Visually Appealing\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2019-01-25T15:11:04+00:00\",\"dateModified\":\"2022-09-06T15:08:46+00:00\",\"description\":\"What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow design rules? We show you which visual elements to look out for.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Elements In UI Design: 5 Tips On How To Use Them\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0\",\"name\":\"Zs\u00f3fia Pasztern\u00e1k\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/d6dec6522fdb625915afc9513a9893b4\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g\",\"caption\":\"Zs\u00f3fia Pasztern\u00e1k\"},\"description\":\"I'm a UX\/UI designer who is passionate about visual communication. I also love greyhounds and pizza.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Elements: 5 Tips To Make Your Website More Visually Appealing","description":"What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow design rules? We show you which visual elements to look out for.","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:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/","og_locale":"en_US","og_type":"article","og_title":"UI Elements: 5 Tips To Make Your Website More Visually Appealing","og_description":"What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow design rules? We show you which visual elements to look out for.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2019-01-25T15:11:04+00:00","article_modified_time":"2022-09-06T15:08:46+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2019\/01\/social-cover-1.jpg","type":"image\/jpeg"}],"author":"Zs\u00f3fia Pasztern\u00e1k","twitter_card":"summary_large_image","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Zs\u00f3fia Pasztern\u00e1k","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/"},"author":{"name":"Zs\u00f3fia Pasztern\u00e1k","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0"},"headline":"Visual Elements In UI Design: 5 Tips On How To Use Them","datePublished":"2019-01-25T15:11:04+00:00","dateModified":"2022-09-06T15:08:46+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/"},"wordCount":1706,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"keywords":["UI","visual elements"],"articleSection":["Mobile UX","Web App UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/visual-elements\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/","name":"UI Elements: 5 Tips To Make Your Website More Visually Appealing","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2019-01-25T15:11:04+00:00","dateModified":"2022-09-06T15:08:46+00:00","description":"What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow design rules? We show you which visual elements to look out for.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/visual-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"Visual Elements In UI Design: 5 Tips On How To Use Them"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/07638b4243fdca4f3b6102ed4331daa0","name":"Zs\u00f3fia Pasztern\u00e1k","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/d6dec6522fdb625915afc9513a9893b4","url":"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0617e211b5d5653fd78c2058e6732203?s=96&d=retro&r=g","caption":"Zs\u00f3fia Pasztern\u00e1k"},"description":"I'm a UX\/UI designer who is passionate about visual communication. I also love greyhounds and pizza."}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/9334"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=9334"}],"version-history":[{"count":17,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/9334\/revisions"}],"predecessor-version":[{"id":14767,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/9334\/revisions\/14767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/9347"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=9334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=9334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=9334"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=9334"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=9334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}