{"id":4954,"date":"2020-05-07T07:19:55","date_gmt":"2020-05-07T07:19:55","guid":{"rendered":"https:\/\/www.techuz.com\/blog\/?p=4954"},"modified":"2024-03-26T09:40:29","modified_gmt":"2024-03-26T09:40:29","slug":"key-principles-of-design","status":"publish","type":"post","link":"https:\/\/www.techuz.com\/blog\/key-principles-of-design\/","title":{"rendered":"Key Principles of Design \u2014 The Foundation for Creating Appealing &#038; Functional Web Designs"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">There are two kinds of websites out there. First ones \u2014 bland, dull, some trying hard to stand out with ostentatious colours, typefaces and images.\u00a0<\/span><span style=\"font-weight: 400;\">But they end up\u00a0<\/span><span style=\"font-weight: 400;\">confusing, muddled and ugly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And then there is another breed of websites where everything is in harmony; your eyes smoothly flow from one piece of information to another, every element in proportion, everything in balance, everything in rhythm. <\/span><span style=\"font-weight: 400;\">These websites \u2014 <\/span><span style=\"font-weight: 400;\">stunning,\u00a0 jaw-dropping, a web design masterpiece.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And it&#8217;s not just good looks. They are functional and effortlessly serve the purpose.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So what separates the former ones form the latter \u2014 the sloppy and clumsy from aesthetic web UIs with clear information architecture, enhanced usability, interaction and experience?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, it&#8217;s the basics.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The latter ones get their basics right.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They are built adhering to the primary principles of design. The set of rules accumulated from varied disciplines \u2014 mathematics, psychology, behavioural science \u2014 that provide the foundation for appealing visuals and a balance of form and function.\u00a0\u00a0<\/span><span style=\"font-size: 1rem;\">And in this article, we&#8217;re going to understand that. We&#8217;ll discuss the following principles of design.<\/span><\/p>\n<ul>\n<li><a href=\"#one\">Contrast &#8211; Shows Relative Importance<\/a><\/li>\n<li><a href=\"#two\">Balance &#8211; Ensues Balance in Design<\/a><\/li>\n<li><a href=\"#three\">Emphasis &#8211; Makes Key Element Stand Out<\/a><\/li>\n<li><a href=\"#four\">Repetition &#8211; Brings Consistency<\/a><\/li>\n<li><a href=\"#five\">Variety &#8211; Breaks Monotony<\/a><\/li>\n<li><a href=\"#six\">Visual Hierarchy &#8211; Arranges Information<\/a><\/li>\n<li><a href=\"#seven\">White Space &#8211; Creates Breathing Space<\/a><\/li>\n<li><a href=\"#eight\">Rhythm &#8211; Guides the User&#8217;s Eyes<\/a><\/li>\n<li><a href=\"#nine\">Proportion &#8211;\u00a0Scales Different Elements\u00a0<\/a><\/li>\n<\/ul>\n<p>By the end of this article, you&#8217;ll understand these nine principles. And not only that, you&#8217;ll collect enough information to apply it to your next project and make it stand out.<br \/>\nSounds like a plan? Let&#8217;s dive in.<\/p>\n<div class=\"highlited-sec\">\n<h3><span>We answer all these <strong><i>questions and more<\/i><\/strong> in this blog:<\/span><\/h3>\n<ul>\n<li><a href=\"#section0\">Key Principles of Designs<\/a><\/li>\n<li><a href=\"#section1\">Wrapping Up<\/a><\/li>\n<\/ul>\n<\/div>\n<h2><strong>Key Principles of Designs<\/strong><\/h2>\n<h3 id=\"one\"><strong>1. Contrast<\/strong><\/h3>\n<p>\u201cCan we make this thing more&#8230;umm&#8230;<em>pop up<\/em>?\u201d<\/p>\n<p>You know what clients mean when they say that? <em>It&#8217;s contrast.<\/em><\/p>\n<p>Contrast is the difference in visual elements that makes one object over other more distinguishable \u2014 the object in the front over the one in background.<\/p>\n<p>Designers use this design principle to make the important element stand out. It&#8217;s just like presenting a diamond on a velvet cloth.<\/p>\n<p>Contrast is a great tool to draw user&#8217;s attention, communicate a clear message and establish hierarchies of the elements.<\/p>\n<p>Generally while discussing contrast in design, it&#8217;s the colour contrast that comes to our mind. For example, black text on a white background is what we call contrast. But it\u2019s not just the colours, there are a number of ways you can implement contrast in your design such as size, space and fonts.\u00a0 Here take a look.<\/p>\n<h4><span><strong>Colour Contrast<\/strong><\/span><\/h4>\n<p>This is the most common way of using contrast \u2014\u00a0 colours from different segments of the colour wheel. However, make sure the contrasting colours you use really makes the relative visual difference, as not all contrasting colours are good at it.\u00a0 Workaround with different colours and you can always use a <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"nofollow noopener\">contrast checker tool<\/a>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5030\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Color-Contrast-1.jpg\" alt=\"Principles of design_Color Contrast\" width=\"1280\" height=\"601\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Color-Contrast-1.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Color-Contrast-1-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Color-Contrast-1-768x361.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Color-Contrast-1-1024x481.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Color-Contrast-1-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p style=\"text-align: center;\"><span>(Good contrast vs bad contrast)<\/span><\/p>\n<h4><span><strong>Size Contrast<\/strong><\/span><\/h4>\n<p>Bigger elements stand out, they take more space and are discovered by the user first.\u00a0 By varying the size of the elements you can decide which elements will be highlighted. It\u2019s a very effective and easy way to create a dynamic. Use different size for the element on the page to create contrast and drama in the design.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5028\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-2.jpg\" alt=\"Principles of Design_Size Contrast\" width=\"1280\" height=\"601\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-2.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-2-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-2-768x361.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-2-1024x481.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-2-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p><br><\/br><h4><span><strong>Space Contrast<\/strong><\/span><\/h4>\n<p>Using negative space is another smart way to create contrast. Add some negative space around the important element to make it stand out and draw the user&#8217;s attention. Google\u2019s homepage is a classic example of space contrast.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5023\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-1.jpg\" alt=\"Principles of design_Space Contrast\" width=\"1280\" height=\"601\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-1.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-1-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-1-768x361.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-1-1024x481.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Space-Contrast-1-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<h4><span><strong>Fonts Contrast<\/strong><\/span><\/h4>\n<p>Fonts can be used to emphasize certain text. You can draw the user\u2019s attention to the content that has more significance by using different fonts or typefaces. This is an effective way to draw the reader&#8217;s attention to important messages on your website. However, avoid using too many different fonts as this dilutes the main message and its uniqueness.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5014\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Fonts-Contrast.jpg\" alt=\"\" width=\"1280\" height=\"601\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Fonts-Contrast.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Fonts-Contrast-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Fonts-Contrast-768x361.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Fonts-Contrast-1024x481.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Fonts-Contrast-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p><br><\/br><h3 id=\"two\"><strong>2. Balance<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5011\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Balance.jpg\" alt=\"\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Balance.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Balance-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Balance-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Balance-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Balance-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>Just like any physical object, the elements on your web page \u2014 shapes, patterns, colours, typefaces, images, etc. have weight.\u00a0 And by proper distribution of these elements, you can balance the visual weight to create harmony, cohesion and richer user experience.<\/p>\n<p>There are two ways to do this \u2014 symmetrical balance and asymmetric balance.<\/p>\n<p>While generally balance and symmetry are related to each other \u2014 there\u2019s a misconception that both are the same. They are different. In fact,\u00a0 symmetric and asymmetric are the tools to achieve balance and equilibrium in the design. Let\u2019s understand these two balances.<\/p>\n<p><span style=\"color: #333333;\"><strong>Symmetric balance<\/strong> is the equal distribution of weights of an element around a centre or across the axis.<\/span><\/p>\n<p>\u201cEqual distribution\u201d is the way to achieve balance here. Humans are bilateral creatures that prefer symmetry. So when our eyes see the elements of equal weights our mind feels complete.<\/p>\n<p>While asymmetry is on the other side of the spectrum.<\/p>\n<p><span style=\"color: #333333;\"><strong>Asymmetry balance<\/strong> is a composition of elements with unequal weights.<\/span><\/p>\n<p>Although there is no symmetry here, there is an equilibrium in design and it breaks the monotony to make things interesting. This also is a great tool to put more emphasis and dominance on certain elements of the screen. When applied in the right way, this design principle can guide the user\u2019s eyes to the focal point you want.<\/p><br><\/br><h3 id=\"three\"><strong>3. Emphasis<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5013\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Emphasis.jpg\" alt=\"\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Emphasis.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Emphasis-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Emphasis-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Emphasis-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Emphasis-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>Emphasis in design aims to draw the user\u2019s attention to certain information or elements on the page. This could be anything \u2014 the product image, a call to action button, a headline of the website or the testimonials. It depends on what you want to accomplish on the web page.<\/p>\n<p>To put it simply, emphasis creates a focal point to grab the user\u2019s attention to certain objects.<\/p>\n<p>Now, to apply emphasis to your design you need to understand the concept of the\u00a0<em>dominant<\/em>\u00a0and <em>subordinate<\/em> element.<\/p>\n<p><strong>Dominant element<\/strong> is the main message you want to communicate to the user \u2014 the main element that the user should draw their attention to. And <strong>subordinate<\/strong> <strong>elements<\/strong> should guide the user to the dominant element or somewhat capture the attention but not should eclipse the dominant. Once you understand your dominant and subordinate elements you can use colour, shape, size, proximity, similarity, isolation, etc. to create emphasis.<\/p><br><\/br><h3 id=\"four\"><strong>4. Repetition<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5024\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Repetition.jpg\" alt=\"Principles of design_Repetition\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Repetition.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Repetition-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Repetition-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Repetition-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Repetition-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>Repetition is simply using the same or similar design elements throughout the pages of the website. It is used to create consistency, reinforce an idea, create cohesiveness in design and overall better user experience.<\/p>\n<p>The reason why this principle works effectively is that we have a tendency to find expected patterns. The more your users encounter the repeated patterns, the more they internalize it and the more comfortable they get using the interface.<\/p>\n<p>So while designing your web UI consider repeating the following elements in your web design:<\/p>\n<ul>\n<li><span>Header<\/span><\/li>\n<li><span>Footer<\/span><\/li>\n<li><span>Navigation<\/span><\/li>\n<li><span>Fonts<\/span><\/li>\n<li><span>Typography<\/span><\/li>\n<li><span>Colour<\/span><\/li>\n<li><span>Shapes<\/span><\/li>\n<li><span>Textures<\/span><\/li>\n<li><span>Patterns<\/span><\/li>\n<li><span>Graphics<\/span><\/li>\n<li><span>Image style and placement<\/span><\/li>\n<\/ul>\n<div class=\"suggested-read\">Suggested Read:\u00a0<a href=\"https:\/\/www.techuz.com\/blog\/how-to-boost-conversion-rate-with-web-design\/\" target=\"_blank\" rel=\"noopener\">How to Boost Conversion Rate with Web Design?<\/a><\/div><br><\/br><p>And remember, if you are looking to mix-up the elements to avoid the monotony of repetition, never alter the basic elements such as website navigation, header footer, call to actions \u2014 as it may end up confusing the visitor.<\/p><br><\/br><h3 id=\"five\"><strong>5. Variety<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5025\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Variety.jpg\" alt=\"Principles of design_Variety\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Variety.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Variety-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Variety-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Variety-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Variety-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>While repetition is one of the principles of design that brings unity, variety, on the other hand, breaks repetition to avoid monotony.<\/p>\n<p>Variety can be used in different ways \u2014 through typography, colour, size, images, shapes, etc. It\u2019s essential to understand that the variety created without a goal or to enhance the user experience and aesthetics is pointless. An example of good variety is using different typefaces and weights for headings and text paragraph \u2014 however, at the same time, you need to repeat the same variety in different pages and sections across the website.<\/p><br><\/br><h3 id=\"six\"><strong>6. Visual Hierarchy<\/strong><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5020\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Visual-Hierarchy.jpg\" alt=\"\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Visual-Hierarchy.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Visual-Hierarchy-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Visual-Hierarchy-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Visual-Hierarchy-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Visual-Hierarchy-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>Hierarchy focuses on how well the content can be processed by the users on the website. You create a flow of content on the page by creating hierarchy in the layout.<\/p>\n<p>Visual hierarchy is often compared to the journalistic way of writing \u2014 <em>the inverted pyramid<\/em> method where you arrange the information as per the importance of the message.<\/p>\n<p>Similarly, when using visual hierarchy in design, you arrange the visual elements in different levels to create a sense of order, prioritization and visual cues \u2014 and to distinguish elements of the higher, low or same weight.<\/p>\n<p>These visual cues that help you present the information clearly also allow the users to immediately understand what\u2019s in for them. For example, when a user lands on the page they can immediately recognize with the banner text and image if this is what they were looking for.<\/p>\n<p>The common tools of the trade for creating visual hierarchy are size, fonts, colour and negative space.<\/p><br><\/br><h3 id=\"seven\"><strong>7. White Space<\/strong><\/h3>\n<p>A web page stuffed with elements and objects all over the space can make things difficult to understand and read.\u00a0 It doesn&#8217;t give the user&#8217;s eye a room to breathe or focus on one element. The worst part \u2014 it leaves the users baffled and they may bounce off the page. That\u2019s where white space comes to rescue.<\/p>\n<p>White space \u2014 also known as the negative space \u2014 is the fundamental building block of good design. To define it simply, it is the empty space between the individual and different design elements. It primarily gives a breathing space between the content which makes the<span style=\"font-size: 1rem;\">\u00a0information legible and digestible to the users. <\/span><\/p>\n<p><span style=\"font-size: 1rem;\">While other principles of the design on the list deal with adding something \u2014 this design theory is all about removing the elements. There are two distinct types of white space used in web pages \u2014 macro and micro.<\/span><\/p>\n<h4><span><strong>Macro White Space<\/strong><\/span><\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5026\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Macro-White-space.jpg\" alt=\"Principles of Design_Macro White space\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Macro-White-space.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Macro-White-space-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Macro-White-space-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Macro-White-space-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Macro-White-space-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>Macro white space is the overall white space in the design layout. This is the white space seen in the left and right side of the layout, between different sections or different design elements. Macro white space is easier to notice and defines the overall bigger picture of the design.<\/p>\n<h4><span><strong>Micro White Space<\/strong><\/span><\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5027\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/White-space-1.jpg\" alt=\"Principles of Design_Micro White space\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/White-space-1.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/White-space-1-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/White-space-1-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/White-space-1-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/White-space-1-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<p>Micro white space is the empty area between the small and individual elements such as lines, paragraphs, letter spacing, height, etc. Although this white space may seem relatively smaller, it plays an important role in improving content legibility.<\/p>\n<p>Often clients may see white space as a waste of the screen space \u2014 and would consider adding more information and elements but that would only hurt the elegance of the design and user experience. Here, check the advantages that white space on the page can bring to the design.<\/p>\n<p><span><strong>Better content legibility<\/strong><\/span><\/p>\n<p>As discussed, micro white space impacts the readability of the content and thus the user spends more time on the page and has a direct impact on the experience.<\/p>\n<p><span><strong>Highlights key elements<\/strong><\/span><\/p>\n<p>Key elements on the page where you want users to draw attention are highlighted with negative space. It builds a focal point and the user\u2019s attention can be drawn to a specific element or message on the page.<\/p>\n<p><span><strong>Clean and minimal look<\/strong><\/span><\/p>\n<p><em>Less is more<\/em> \u2014 that&#8217;s what this design principle deals with. Smart utilization of white space helps you achieve a clean, elegant and minimalist web design.<\/p>\n<p><span><strong>Separates the elements<\/strong><\/span><\/p>\n<p>White space acts as a separator that divides the distinct elements to improve the visual layout. This helps communicate different ideas and information effectively within the page composition.<\/p><br><\/br><h3 id=\"eight\"><strong>8. Rhythm<\/strong><\/h3>\n<p>Just like music, rhythm can be created in design too. You can create a composition of your website where the user will follow along just like musical rhythm. And this can be achieved by repeating the pattern, layout and elements in the design<\/p>\n<p>Rhythm or movement in design results in setting the mood of the web interface and enhancing the look and feel of the web page. There are five basic types of visual rhythm you can create in design: Regular, random, alternating, progressive and flowing rhythm.<\/p>\n<p>Regular rhythm is simply a repetition of elements at a regular interval and at the same spacing in the design. While random is the opposite of it \u2014 there is no predictable pattern. An alternating rhythm is similar to the regular rhythm but just with more complexity. Progressive, on the other hand, uses patterns and scales to create change over time \u2014 a gradual progressive change in design or size of the element that creates a rhythm.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5017\" src=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Rhythm.jpg\" alt=\"\" width=\"1280\" height=\"600\" srcset=\"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Rhythm.jpg 1280w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Rhythm-300x141.jpg 300w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Rhythm-768x360.jpg 768w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Rhythm-1024x480.jpg 1024w, https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Rhythm-460x216.jpg 460w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/p>\n<h3 id=\"nine\"><strong>9. Proportion<\/strong><\/h3>\n<p>Proportion has a long history way back to ancient Greece where sculptors used this principle to chisel masterpiece out of marbles. Even Egyptian artists used <a href=\"http:\/\/blog.stephens.edu\/arh101glossary\/?glossary=canon-of-proportions\" target=\"_blank\" rel=\"nofollow noopener\">canon of proportions<\/a> to determine the perfect proportion of elements in their art.<\/p>\n<p>Today, proportion is one of the most important principles of designs defining the scale of different design elements for balanced and harmonious web design.\u00a0 And this harmony and balance are what makes the design visually pleasing. Apart from that, it is a great tool to achieve consistency, rhythm, make certain elements stand out, drive attention, implement visual hierarchy and even evoke emotions.<\/p><br><\/br><h2><strong>Wrapping Up<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Understanding and implementing these principles of design can notably improve your designs. Practice them, try which works for your project and understand how incorporating them in the design can help enhance the visuals and user experience. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Treat these principles as a set of tools under your belt. The techniques to influence the user&#8217;s perspective, grab their attention, communicate a clear message or structure the information \u2014 just like grabbing the users by the hand and leading them to the places you want them to go.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are two kinds of websites out there. First ones \u2014 bland, dull, some trying hard to stand out with ostentatious colours, typefaces and images.\u00a0But they end up\u00a0confusing, muddled and ugly.\u00a0 And then there is another breed of websites where everything is in harmony; your eyes smoothly flow from one piece of information to another, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.techuz.com\/blog\/key-principles-of-design\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Key Principles of Design \u2014 The Foundation for Creating Appealing &#038; Functional Web Designs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":5015,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,13,5],"tags":[261,262,264,263,265],"better_featured_image":{"id":5015,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1280,"height":600,"file":"2020\/05\/Key-Principles-of-Design_04-05-20.jpg","sizes":{"thumbnail":{"file":"Key-Principles-of-Design_04-05-20-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-150x150.jpg"},"medium":{"file":"Key-Principles-of-Design_04-05-20-300x141.jpg","width":300,"height":141,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-300x141.jpg"},"medium_large":{"file":"Key-Principles-of-Design_04-05-20-768x360.jpg","width":768,"height":360,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-768x360.jpg"},"large":{"file":"Key-Principles-of-Design_04-05-20-1024x480.jpg","width":1024,"height":480,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-1024x480.jpg"},"blog_list":{"file":"Key-Principles-of-Design_04-05-20-460x216.jpg","width":460,"height":216,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-460x216.jpg"},"alm-thumbnail":{"file":"Key-Principles-of-Design_04-05-20-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-150x150.jpg"},"twentyseventeen-thumbnail-avatar":{"file":"Key-Principles-of-Design_04-05-20-100x100.jpg","width":100,"height":100,"mime-type":"image\/jpeg","source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20-100x100.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":4954,"source_url":"https:\/\/www.techuz.com\/blog\/wp-content\/uploads\/2020\/05\/Key-Principles-of-Design_04-05-20.jpg"},"_links":{"self":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts\/4954"}],"collection":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/comments?post=4954"}],"version-history":[{"count":99,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts\/4954\/revisions"}],"predecessor-version":[{"id":7422,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/posts\/4954\/revisions\/7422"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/media?parent=4954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/categories?post=4954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techuz.com\/blog\/wp-json\/wp\/v2\/tags?post=4954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}