{"user_id":606,"source":"https://paperform.co/blog/principles-of-design/","source_type":"link","title":"The 13 Principles of Design \u0026 How to Apply Them","description":"In this guide, Ian Loew breaks down the basic principles behind effective design and gives you the tools to make stunning creations of your own.","html":"\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\"\u003e\n\u003chtml\u003e\u003cbody\u003e\n\u003ch1 id=\"cr-title\"\u003eThe 13 Principles of Design \u0026amp; How to Apply Them\u003c/h1\u003e\n \u003cdiv id=\"cr-content\"\u003e\u003cdiv id=\"readability-page-1\" class=\"page\"\u003e\u003cdiv\u003e\n\u003cp\u003eYou can’t just flip a switch and create beautiful designs on a whim. Like learning to walk before you run, there are certain fundamentals you’ve got to learn first.\u003c/p\u003e\n\u003cp\u003eThe problem is that if you don’t have the time or inclination to take a design course, resources are pretty scarce. Sure you can rely on \u003ca href=\"https://paperform.co/blog/canva-alternatives/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eCanva templates\u003c/a\u003e, but even then you need to know how to use them properly.\u003c/p\u003e\n\u003cp\u003eThis is why we've put together this post. It’s for you if you’ve ever wondered what goes into good design\u003cem\u003e. \u003c/em\u003eYou'll find it handy whether you're a complete amateur or a budding designer—so let's get stuck in. \u003c/p\u003e\n\u003ch2 id=\"what-are-design-principles\"\u003eWhat are design principles?\u003c/h2\u003e\n\u003cp\u003eDesign principles are guidelines to follow if you want to create effective visuals, from oil paintings and blog graphics to eye-catching \u003ca href=\"https://paperform.co/blog/social-media-design/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003esocial media posts\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThink of design as carpentry and these principles as your toolbox. You can use them to help you during the design process, and unlike hammers, nails and screwdrivers, they can exist entirely inside your head.\u003c/p\u003e\n\u003cp\u003eThese tools give you a better understanding—and appreciation—of what goes into the designs we see every day. As you become acquainted with them, you’ll start to see what does and doesn’t work (and why), as well as how you can apply these principles to your own creative work.\u003c/p\u003e\n\u003ch2 id=\"what-is-good-design\"\u003eWhat is \"good design\"?\u003c/h2\u003e\n\u003cp\u003eWe’re told that piece of art is subjective. For the most part, that’s true. But if you’ve ever seen an unintelligible parking sign or a website from the early days of the web, you’ll know there’s definitely\u003cem\u003e \u003c/em\u003esuch a thing as \u003cem\u003ebad\u003c/em\u003e design.\u003c/p\u003e\n\u003cp\u003eAs Jared Spool, an expert on design and \u003ca href=\"https://paperform.co/blog/website-usability-test/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eusability\u003c/a\u003e, says, “good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” This is why good design is tricky to define.\u003c/p\u003e\n\u003cp\u003eLuckily for us, in the late 1970s, an influential designer named Dieter Rams saw this problem. In response, he asked himself what constituted good design and came up with his own list of ten principles.\u003c/p\u003e\n\u003cp\u003eLittle did he know, they would go on to inspire generations of designers, including Johnny Ive, the mastermind behind Apple’s most famous products.\u003c/p\u003e\n\u003cp\u003eRams’s principles are:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eGood design \u003cem\u003eis innovative\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003emakes a product useful\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design\u003cem\u003e is aesthetic\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003emakes a product understandable\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003eis unobtrusive\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design\u003cem\u003e is honest\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003eis long-lasting\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003eis thorough down to the last detail\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003eis environmentally friendly\u003c/em\u003e\n\u003c/li\u003e\n\u003cli\u003eGood design \u003cem\u003eis as little design as possible\u003c/em\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eYou might notice that these principles are aimed at product design. Rams worked at Braun, so products were in his wheelhouse, but these principles are easily adapted to UX, UI, or any other design context.\u003c/p\u003e\n\u003cp\u003eRams’s principles aren’t the only principles out there. Other notable design principles include \u003ca href=\"https://www.nngroup.com/articles/ten-usability-heuristics/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eNielsen’s 10 usability heuristics\u003c/a\u003e and \u003ca href=\"https://principles.design/examples/5-guiding-principles-for-experience-design\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eWhitney Hess’s five guiding principles\u003c/a\u003e for experience designers.\u003c/p\u003e\n\u003ch2 id=\"the-12-principles-of-design\"\u003eThe 12 principles of design\u003c/h2\u003e\n\u003cp\u003eThese are the building blocks graphic designers and artists use to \u003ca href=\"https://paperform.co/blog/graphic-design-tools/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eput creative works together\u003c/a\u003e; the core principles of art that make up every design, from the fine art of the Louvre to the boxes of Corn Flakes at the local grocery store.\u003c/p\u003e\n\u003ch2 id=\"1-balance\"\u003e1. Balance\u003c/h2\u003e\n\u003cp\u003eWhere objects in real life carry physical weight, elements in design carry \u003cem\u003evisual \u003c/em\u003eweight. Large elements are heavier and small elements lighter, with each element having its own \"weight\" based on how much attention they draw. \u003c/p\u003e\n\u003cdiv\u003e\n\u003cp\u003eVisual balance is about ensuring your design is equally weighted on both sides of the central point. It’s like a seesaw—too much weight on either side and the whole thing becomes unbalanced. \u003c/p\u003e\n\u003cp\u003eBy striking this balance you create visual harmony and stop your design from feeling too chaotic to the viewer. It’s one of the most important parts of visual composition, and comes in three basic forms:\u003c/p\u003e\n\u003c/div\u003e\n\u003ch3 id=\"symmetrical-balance\"\u003eSymmetrical balance\u003c/h3\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--2-.png\" alt=\"symmetrical shapes on a pink background \" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--2-.png\"\u003e\u003c/figure\u003e\u003cp\u003eSymmetrical design uses an imaginary vertical (or sometimes horizontal) line to divide a design into two halves around a central point. Elements of equal visual weight are balanced on each side of the axis to create symmetry.\u003c/p\u003e\n\u003cp\u003eThere are two variants of symmetrical balance: Reflectional symmetry, where the two halves are exact mirror images, and translational symmetry, where the same shape or elements are repeated on both sides of the design. \u003c/p\u003e\n\u003ch3 id=\"asymmetrical-balance\"\u003eAsymmetrical balance\u003c/h3\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--3-.png\" alt=\"Abstract shapes ona pink background\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--3-.png\"\u003e\u003c/figure\u003e\u003cp\u003eAn asymmetric composition is when a design uses unequal weighted elements. One side might have a visually heavy element, balanced with multiple lighter elements on the opposite side.\u003c/p\u003e\n\u003cp\u003eTo run with the seesaw example, it would be like having a 100kg weight on one side and 100 kg of feathers stacked on the other. It still achieves balance but provides a whole different experience. \u003c/p\u003e\n\u003cp\u003eAsymmetry is often more visually interesting. Where symmetrical designs can be quite static and predictable, asymmetrical balance can give designs a more dynamic feel. \u003c/p\u003e\n\u003ch3 id=\"radial-balance\"\u003eRadial balance\u003c/h3\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--5-.png\" alt=\"a stylized sun on a pink background\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--5-.png\"\u003e\u003c/figure\u003e\u003cp\u003eRadial balance is when elements “radiate” from a point in the centre of a design. Think of rays shining from the sun, petals blossoming from a rose, or a squirt of tomato sauce in the middle of a juicy meat pie.\u003c/p\u003e\n\u003cp\u003eThis form of symmetry is a way to add depth and movement to a design and works to draw attention to an object in the centre of a composition.\u003c/p\u003e\n\u003ch2 id=\"2-emphasis\"\u003e2. Emphasis\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--6-.png\" alt=\"8 white circles and one blue circle \" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--6-.png\"\u003e\u003c/figure\u003e\u003cp\u003eEmphasis is used to focus the viewer’s attention on a certain part of a composition. The effect is achieved by manipulating elements (like colour, shape and size) to make specific parts of a design stand out. \u003c/p\u003e\n\u003cp\u003eFor example, say you wanted to bring attention to a call to action on a \u003ca href=\"https://paperform.co/blog/one-page-website/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003elanding page\u003c/a\u003e. You could increase the text size and use colours that stand out from the background, emphasising the CTA and making sure visitors can’t miss it.\u003c/p\u003e\n\u003ch2 id=\"3-repetition\"\u003e3. Repetition\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--7-.png\" alt=\"Circles arrayed in a grid with a coloured pattern among them.\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--7-.png\"\u003e\u003c/figure\u003e\u003cp\u003eAs you may have already guessed, repetition refers to when an element is repeated throughout a design. It could be anything, from using a certain font colour to adding a repetitive pattern to a \u003ca href=\"https://paperform.co/blog/social-media-engagement/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003esocial media\u003c/a\u003e post. \u003c/p\u003e\n\u003cp\u003eRepetition makes designs visually exciting and cohesive. It also creates a sense of consistency by using a repeating motif that the viewer comes to expect. This makes it particularly useful when it comes to creating your distinct brand identity.\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://paperform.co/blog/rebranding-strategy/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eBrand identity\u003c/a\u003e is the visible element of your brand. The colours; design; logo. It acts to distinguish your company from the millions of others out there, so when folks see your designs they immediately \u003cem\u003eknow it’s your business.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eEvery successful business uses repetition. Why do we equate the swoosh and “just do it” with Nike? The blue can with Pepsi? Because these visuals were repeated so often that eventually they became synonymous with the brands they represent.\u003c/p\u003e\n\u003cp\u003eSo while repetition \u003cem\u003ecan \u003c/em\u003ejust help you make a sweet iPhone wallpaper, it’s a crucial tool for any company looking to build a visual identity and brand recognition.\u003c/p\u003e\n\u003ch2 id=\"4-movement\"\u003e4. Movement\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--8-.png\" alt=\"4 white circles with lines joining them \" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--8-.png\"\u003e\u003c/figure\u003e\u003cp\u003eWhen we think of movement we think of, well, things moving. A pendulum swinging. A Ferrari roaring down the freeway. But in design, it refers to the path a viewer’s eye takes when they look over a composition.\u003c/p\u003e\n\u003cp\u003eIt’s not just what you look at; it’s \u003cem\u003ethe way\u003c/em\u003e you look at it. Designers can guide this by using lines, edges, shapes and colours to create focal points and encourage certain ways of seeing.\u003c/p\u003e\n\u003cp\u003eMovement can be harnessed to distract, direct and pull the viewer’s gaze around a design. By using subtle cues (particularly with lighting and perspective) a savvy artist can control this entire process. You can use lines to create directional cues and make images feel more alive. \u003c/p\u003e\n\u003ch2 id=\"5-proportion\"\u003e5. Proportion\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--9-.png\" alt=\"A cat in proportion with a male stick figure.\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--9-.png\"\u003e\u003c/figure\u003e\u003cp\u003eProportion is the \u003cem\u003erelationship\u003c/em\u003e between two or more elements in a design, particularly the size and scale of them. When things are \"proportionate”, it means there’s a coordination between them that makes the design look aesthetically pleasing.\u003c/p\u003e\n\u003cp\u003eFor example, when you’re reading a blog post you expect headings to be larger than the body text. Or if you were looking at a realistic drawing of a tortoise and a hare, you expect the hare to be larger than the tortoise.\u003c/p\u003e\n\u003cp\u003eProportion is about finding harmony between two elements. You want to make sure things look “right”— that the elements look as if they belong together. \u003c/p\u003e\n\u003cp\u003eThis is something that comes up when \u003ca href=\"https://www.hubspot.com/products/cms/wysiwyg-editor\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003ecreating digital assets and websites online\u003c/a\u003e. It’s the bane of many an amateur designer’s existence. Here are a few tips for keeping the elements in your design in proportion:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eAssemble elements that are identical or share a function.\u003c/li\u003e\n\u003cli\u003eEstablish major and minor areas in the design to prevent monotony and boredom.\u003c/li\u003e\n\u003cli\u003eEnsure size variations are subtle (unless the objective is emphasis.)\u003c/li\u003e\n\u003cli\u003eAvoid separating the composition into halves, quarters, and thirds. \u003c/li\u003e\n\u003cli\u003eTry to keep a sense of \u003cem\u003ebalance\u003c/em\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eYou can also play with proportions in a variety of ways to emphasise elements or get a certain message across. It’s a strategy you’ll notice advertisements do often and is usually best used for more creative projects.\u003c/p\u003e\n\u003ch2 id=\"6-white-space\"\u003e6. White Space\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--10-.png\" alt=\"Comparison of good use of white space and poor use of white space\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--10-.png\"\u003e\u003c/figure\u003e\u003cp\u003eThe region \u003cem\u003ebetween\u003c/em\u003e different design elements is referred to as \"negative” or “white” space. This is part of the design that \u003cem\u003edoesn’t\u003c/em\u003e contain anything. No images, drawings, shiny colours or text. Nothing.\u003c/p\u003e\n\u003cp\u003eThe name is kind of misleading — it’s not a \"negative\" thing and it doesn’t have to be \"white\". It can be any colour: white space refers to what you don’t add; the empty parts around and within your design.\u003c/p\u003e\n\u003cp\u003eIt’s one of the fundamental building blocks of design and is just as important as any elements you \u003cem\u003edo \u003c/em\u003einclude. Think of it like a diet: what you eat matters, but what you \u003cem\u003edon’t\u003c/em\u003e eat matters just as much.\u003c/p\u003e\n\u003cp\u003e“White Space in design composition is the same as the use of silence in a musical composition. Without proportionate use of silence, music is unstructured. Similarly, without white space, design is unstructured and difficult to consume.\" — \u003ca href=\"https://www.denhartogdesign.com/blog/why-white-space-is-important#:~:text=The%20space%20may%20be%20any,two%20types%20of%20white%20space.\u0026amp;text=%E2%80%9CWhite%20Space%20in%20design%20composition,some%20may%20call%20it%20noise.\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eMark den Hartog\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eThere are two types of white space: micro and macro. \u003cem\u003eMicro\u003c/em\u003e white space is the space between small elements (like text), while \u003cem\u003emacro\u003c/em\u003e white space refers to the area between large elements or surrounding a design.\u003c/p\u003e\n\u003ch2 id=\"7-contrast\"\u003e7. Contrast\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--11-.png\" alt=\"Contrast of shape, scale, color and layout\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--11-.png\"\u003e\u003c/figure\u003e\u003cp\u003eContrast is produced when two or more visual elements in a composition are different. It can be used to create specific effects, emphasise the significance of certain elements, and add visual appeal to your designs.\u003c/p\u003e\n\u003cp\u003eDesigns that look the same are boring—by experimenting with contrasting colour hues, shapes, sizes, textures and typography, you can liven things up. Humans tend to like contrast. It’s a great way to grab attention, control the visual flow and keep folks engaged.\u003c/p\u003e\n\u003cp\u003eKeep in mind that adding too many variations can be confusing for viewers (the opposite effect you want to have.) As with most of the different elements of art, it’s about striking a balance.\u003c/p\u003e\n\u003ch2 id=\"8-hierarchy\"\u003e8. Hierarchy\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--12-.png\" alt=\"Visualisation of a page with hierarchy and a page without hierarchy \" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--12-.png\"\u003e\u003c/figure\u003e\u003cp\u003eVisual hierarchy is about organising the value of the elements within your design. By ranking information from \u003cem\u003emost important \u003c/em\u003eto \u003cem\u003eleast important, \u003c/em\u003eyou make it easier for the viewer to digest your content.\u003c/p\u003e\n\u003cp\u003eThis plays a critical role in UI and \u003ca href=\"https://paperform.co/blog/ux-design-tools/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eUX design\u003c/a\u003e. Ever noticed how most landing pages have the same layout? There’s a logo at the top, a menu at the top and then elements in descending order of importance below.\u003c/p\u003e\n\u003cp\u003eIt’s not because they copied each other's homework—there’s a certain hierarchy that designers stick to in order to draw attention to the right things in the right order (and make it pretty to look at.)\u003c/p\u003e\n\u003cp\u003eThe viewer’s eye should be drawn to the \u003cem\u003emost important element \u003c/em\u003efirst. These sit atop the throne at the top of the hierarchy, with the elements laid out below ranked in order of importance.\u003c/p\u003e\n\u003cp\u003eThere are a number of visual tricks to influence this flow, including:\u003c/p\u003e\n\u003cdiv\u003e\n\u003cp\u003e\u003cstrong\u003eSize and scale:\u003c/strong\u003e The larger an element is the more likely a viewer is to see it. By making something smaller you can reduce its importance and put the emphasis elsewhere.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eColour and contrast:\u003c/strong\u003e A splash of colour makes a big difference. Use bright colours to make certain elements or information pop.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eFonts:\u003c/strong\u003e Use different typefaces and stylisations like italics and bold to draw the eye and move text higher or lower on the hierarchy.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWhite space:\u003c/strong\u003e White space enables you to give an element breathing room and make a central element stand out.\u003c/p\u003e\n\u003c/div\u003e\n\u003ch3 id=\"patterns-of-hierarchy\"\u003ePatterns of hierarchy\u003c/h3\u003e\n\u003cp\u003ePeople read a page in the same way: from top to bottom. But we don’t just stare blankly at s page and wait for information to register, we scan it. \u003c/p\u003e\n\u003cp\u003eThe human eye tends to follow the same path during this process. For that reason, designers stick to two common patterns to make it faster to absorb information: the F-pattern and the Z-pattern.\u003c/p\u003e\n\u003cp\u003eThe F-pattern applies to pages made up mostly of text, like an online or printed article. Readers scan in the shape of an “F”—first, with the headline across the top, then down the left side of the page and to the right as they identify things they find interesting. \u003c/p\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Group-3.png\" alt=\"two webpages in google chrome\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Group-3.png\"\u003e\u003c/figure\u003e\u003cp\u003eDesigners use a Z-pattern for layouts with less text and more visuals. With this pattern, viewers scan across the top of the page and then diagonally down towards the opposite corner. They then scan the bottom in the same way as the top.\u003c/p\u003e\n\u003cp\u003eMost websites are designed in this way (including Paperform). Notice how the most important parts like the logo and navigation menu are at the top, while the secondary information like clients and chatbot is at the bottom. \u003c/p\u003e\n\u003ch2 id=\"9-rhythm\"\u003e9. Rhythm\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--13-.png\" alt=\"triangles arrayed in a rhythmic pattern\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--13-.png\"\u003e\u003c/figure\u003e\u003cp\u003eDon’t worry, you can leave your dancing shoes at home. In design, rhythm hasn’t got anything to do with the way you move your hips. It’s about giving your composition a feeling of action and movement.\u003c/p\u003e\n\u003cp\u003eDesigners create rhythm by repeating lines, shapes, colours and other elements. This makes a path for our eyes to follow, builds patterns and imbues the design with a sense of flow. There are a few different types of rhythm:\u003c/p\u003e\n\u003cdiv\u003e\n\u003cp\u003e\u003cstrong\u003eRandom rhythm:\u003c/strong\u003e Repeating elements without any regular interval.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eRegular rhythm:\u003c/strong\u003e When the elements are of a similar size and length and spread out over predictable intervals.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eFlowing rhythm:\u003c/strong\u003e Natural patterns where the intervals are organic (like a tiger’s stripes or a bunch of flowers in a garden.)\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eProgressive rhythm:\u003c/strong\u003e A gradual change or sequence of elements that change over a series of clear steps (like a colour gradient for example.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cp\u003eRather than letting the viewer’s eye settle on a focal point, rhythm encourages viewers to move their eyes across the entire piece, following the lines and forms to their natural endpoints. It’s something you see reflected across nature and works of art.\u003c/p\u003e\n\u003ch2 id=\"10-pattern\"\u003e10. Pattern\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--14-.png\" alt=\"black and white tiles on a pink background\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--14-.png\"\u003e\u003c/figure\u003e\u003cp\u003ePeople tend to get confused between repetition in patterns, which is understandable, as they both deal with repeated elements. But the similarities end there. \u003c/p\u003e\n\u003cp\u003eWhile repetition occurs when \u003cem\u003ethe same elements\u003c/em\u003e are repeated throughout a design, a pattern is composed of \u003cem\u003edifferent components \u003c/em\u003erepeated in the same way. Think of the way gift wrapping is usually made up of a few different repeated elements—that's a pattern. \u003c/p\u003e\n\u003cp\u003eYou'll also notice patterns commonly used as backgrounds on websites and in mobile applications. \u003c/p\u003e\n\u003cp\u003eAs a general rule, it's best to use colours, textures and shapes to create patterns. Try to avoid doing so with words — it tends to just give folks headaches. Despite the occasional bright colours and wacky designs, the key to creating effective patterns is simplicity.\u003c/p\u003e\n\u003ch2 id=\"11-variety\"\u003e11. Variety\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--15-.png\" alt=\"tiles on a pink background \" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--15-.png\"\u003e\u003c/figure\u003e\u003cp\u003eVariety isn’t just the spice of life—it’s the spice of design too. It’s integral not to revert to the same old elements within a design to make sure things are visually interesting for your viewers.\u003c/p\u003e\n\u003cp\u003eVariety keeps things engaging. It stops designs from being stagnant, predictable and downright boring — all things you want to avoid. By making sure elements are varied you stop designs from feeling monotonous and uninspired.\u003c/p\u003e\n\u003cp\u003eThe easiest way to do this is through juxtaposition and contrast. Place bright colours next to lighter hues, text next to images, and round shapes next to square ones. By doing so you can keep viewers engaged and your design interesting.\u003c/p\u003e\n\u003ch2 id=\"12-unity\"\u003e12. Unity\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg data-src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--16-.png\" alt=\"12 blue squares on a pink background\" width=\"880\" height=\"498\" src=\"https://img.paperform.co/fetch/f_auto,w_1500/https://s3.amazonaws.com/paperform-blog/2022/05/Untitled--16-.png\"\u003e\u003c/figure\u003e\u003cp\u003eWe've put unity last on this list for a reason—it only occurs when all the various elements within a design coexist to form a holistic experience that’s pleasing to the eye.\u003c/p\u003e\n\u003cp\u003eUnity adds order and makes a piece feel like a coherent whole, instead of a messy combination of individual parts that just so happen to exist on the same page. It's developed both visually and conceptually.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eVisual unity.\u003c/strong\u003e An extension of “harmony”, is about elements working together, like colour schemes, the use of complementary styles, and in some cases, the repetition of colours and elements to achieve consistency. An example would be using the same colours for all the buttons on a webpage to keep the design cohesive.\u003c/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eConceptual unity.\u003c/strong\u003e Is when you combine elements for the user’s convenience; it’s about blending form and function in a natural way. An example of this is how you can double-tap on \u003ca href=\"https://paperform.co/blog/10000-followers-for-instagram/\" rel=\" noopener\" target=\"_blank\" style=\"color: rgb(0, 5, 77);\"\u003eInstagram\u003c/a\u003e to “Like” an image—it reduces friction and requires less action from the user.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv\u003e\n\u003cp\u003eTo achieve unity you need to look out for three things: whether the elements you’ve used have a good reason to be there, whether they work together, and whether the message or concept you’re trying to display is communicated clearly.\u003c/p\u003e\n\u003cp\u003eBy making sure your designs unite you reduce cognitive load and ensure viewers actually understand whatever it is your design is trying to achieve. \u003c/p\u003e\n\u003c/div\u003e\n\u003ch2 id=\"put-these-design-principles-to-work\"\u003ePut these design principles to work\u003c/h2\u003e\n\u003cp\u003eHopefully, these 12 design principles can help inspire you to take your creative work to the next level.\u003c/p\u003e\n\u003cp\u003eNo matter what you’re designing—from product pages to actual products—if you take the time to learn and apply these concepts you’ll be firmly set on the path to success.\u003c/p\u003e\n\u003cp\u003eRemember, design is always evolving. Look at what other people are doing and think about how you can apply their techniques to your own work: it’s a great way to hone your design skills. \u003c/p\u003e\n\u003cp\u003eNow, all that’s left is to put your creative cap on and create your own work of art. Happy creating!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n \u003c/body\u003e\u003c/html\u003e\n","hash_id":"bG5PkNGiYmFW","author":"Ian Loew","reading_time":"16 min read","link_sharing":true,"archived":false,"favourited":false,"folder_id":3666,"tag_list":[]}
[]
The 13 Principles of Design & How to Apply Them
In this guide, Ian Loew breaks down the basic principles behind effective design and gives you the tools to make stunning creations of your own.
