{"id":19278,"date":"2014-11-27T06:00:40","date_gmt":"2014-11-27T14:00:40","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=19278"},"modified":"2024-03-29T04:32:47","modified_gmt":"2024-03-29T11:32:47","slug":"can-good-design-be-asymmetrical","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical","title":{"rendered":"Can Good Design Be Asymmetrical?"},"content":{"rendered":"<p>Today&acirc;&euro;&trade;s world bombards people with content. In order to make a new site or ad stand out among the others, it must bring a little something extra to the table. Most websites utilize symmetry to their advantage, but creators forget that asymmetry can be just as effective. Symmetrical design has become commonplace, so asymmetry can be an eye-popping way to garner extra attention.<p>Unfortunately, asymmetry can be a difficult concept to master, leading many designers to dismiss it altogether. When designers shed their misconceptions and give it a chance, they expand their horizons and create more memorable content.<\/p><h2><span class=\"ez-toc-section\" id=\"Learn_Web_Design_Series\"><\/span>Learn Web Design Series<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\nWelcome back to our series on learning to be a web designer. Remember from last time that we&#8217;re not talking about code, like HTML and CSS, but the foundational principles of design. Simple lessons that will improve your ability to create an aesthetically pleasing end product for your clients. Here are a couple of other posts in this series:\n<\/p><ul>\n<li><a href=\"http:\/\/crtv.mk\/ebNN\">3 Common Misconceptions About Design<\/a><\/li>\n<li><a href=\"http:\/\/crtv.mk\/qe5r\">Simpler is Better<\/a><\/li>\n<li><a href=\"http:\/\/crtv.mk\/smcM\">How Repetition Leads to Rhythm<\/a><\/li>\n<\/ul><h2><span class=\"ez-toc-section\" id=\"Using_White_Space\"><\/span>Using White Space<span class=\"ez-toc-section-end\"><\/span><\/h2><p>One common misconception about white space is that it has to be white. It can be any color, so it is more accurately referred to as negative space. Any space in a design that is not occupied by the subject(s) of the image qualifies as negative space. Many creators feel the need to cover this space in order to make an image complete.<\/p><p>In reality, the completeness of a piece has nothing to do with the amount of content on each side. The blank space on one side can balance the content on the other. When used correctly, this tactic makes a big impact. This method intrigues people because they are not accustomed to seeing it. Unfortunately, creating a balanced asymmetrical piece is not as simple as it sounds.<\/p><h2><span class=\"ez-toc-section\" id=\"Creating_Asymmetrical_Balance\"><\/span>Creating Asymmetrical Balance<span class=\"ez-toc-section-end\"><\/span><\/h2><h3><span class=\"ez-toc-section\" id=\"Common_Practices\"><\/span>Common Practices<span class=\"ez-toc-section-end\"><\/span><\/h3><p>The terms &acirc;&euro;&oelig;asymmetrical&acirc;&euro; and &acirc;&euro;&oelig;off-balance&acirc;&euro; are not interchangeable. Designs that lack symmetry are still capable of balance. Most asymmetrical designs use text to fill in the blank areas, like in <a href=\"https:\/\/creativemarket.com\/angiemakeswebsites\/81921-Mary-Kate-Feminine-Wordpress-Theme\/screenshots\/#screenshot1\">this example<\/a>. The theme uses a text block on the right to balance out the image on the left. This is a well-executed design, but designers should remember that white space is not wasted space, and it doesn&acirc;&euro;&trade;t always need to be covered up.<\/p><br><h3><span class=\"ez-toc-section\" id=\"Blank_Not_Boring\"><\/span>Blank, Not Boring<span class=\"ez-toc-section-end\"><\/span><\/h3><p>When utilizing blank space, designers must not forget the importance of balance. The amount of white space appropriate for a page is entirely dependent upon the size of the subject. <a href=\"https:\/\/creativemarket.com\/tienvooracht\/44682-Grand-clean-AJAX-portfolio\/screenshots\/#screenshot1\">This theme<\/a> from Creative Market demonstrates how proper asymmetrical balance can automatically bring the viewer&acirc;&euro;&trade;s eye to the focal point. Since human eyes usually migrate to the left of the page first, this design emphasizes the text. The page looks clean and well-organized despite the fact that it is asymmetrical.<\/p><br><h3><span class=\"ez-toc-section\" id=\"Asymmetry_and_Minimalism\"><\/span>Asymmetry and Minimalism<span class=\"ez-toc-section-end\"><\/span><\/h3><p>One example of a company that uses white space to produce balance is Apple. With Apple banners, the white space is actually white because it complements the color of the products. Apple chooses a minimalist approach that has proven successful for the company. In a world where flashy advertisements constantly vie for viewer attention, Apple&acirc;&euro;&trade;s simple approach is refreshing to the eye.<\/p><img decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043036\/assymetrical-designs-1.png.webp\" alt=\"assymetrical-designs\" width=\"680\" class=\"alignnone size-full wp-image-14943\"><h2><span class=\"ez-toc-section\" id=\"Effects_That_Asymmetry_Can_Produce\"><\/span>Effects That Asymmetry Can Produce<span class=\"ez-toc-section-end\"><\/span><\/h2><p>The second a designer adds asymmetry to his creative arsenal, he becomes a more versatile designer. Throwing symmetry to the wind can communicate many different ideas. Some of the most notable include:<\/p><h3><span class=\"ez-toc-section\" id=\"Serenity\"><\/span>Serenity<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nNicely balanced designs with a lot of white space, like <a href=\"http:\/\/www.studioairport.nl\/en\">the STUDIO Airport website<\/a>, give viewers the impression of elegance and quality.\n<img decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043039\/assymetrical-designs-2.jpg.webp\" alt=\"assymetrical-designs\" width=\"680\" class=\"alignnone size-full wp-image-14943\">\n<\/p><h3><span class=\"ez-toc-section\" id=\"Chaos\"><\/span>Chaos<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nIf the design calls for something a little edgier, feel free to harness the off-kilter effect that asymmetry produces when the balance is slightly shifted.\n<img decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043043\/assymetrical-designs-3.jpg.webp\" alt=\"assymetrical-designs\" width=\"680\" class=\"alignnone size-full wp-image-14943\">\n<\/p><h3><span class=\"ez-toc-section\" id=\"Motion\"><\/span>Motion<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nAsymmetry can be used to make motion-centered photo like the one below seem more life-like.\n<img decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043047\/assymetrical-designs-4.jpg.webp\" alt=\"assymetrical-designs\" width=\"680\" class=\"alignnone size-full wp-image-14943\">\n<\/p><h2><span class=\"ez-toc-section\" id=\"Why_Bother\"><\/span>Why Bother?<span class=\"ez-toc-section-end\"><\/span><\/h2><p>Asymmetry is an unapologetic way to bring the focal point of your piece to attention. It can intensify a design or simply show users something different. This powerful design concept may be difficult to master, but it makes your work more memorable for your audience. Viewers are sure to appreciate this much-needed deviation from the norm.<\/p><hr><em>Header image created using <a href=\"http:\/\/crtv.mk\/qnNj\">neourban hipster office desktop<\/a> by <a href=\"https:\/\/creativemarket.com\/markusspiske\">RaumRot<\/a>.<\/em><hr><\/p>    <figure id=\"card-81921-505695576\" class=\"product-card full no-pinit\" data-product-id=\"81921\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"505695576\"><\/figure>\n        <figure id=\"card-44682-1797221885\" class=\"product-card full no-pinit\" data-product-id=\"44682\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"1797221885\"><\/figure>\n    \n","protected":false},"excerpt":{"rendered":"<p>Today&acirc;&euro;&trade;s world bombards people with content. In order to make a new site or ad stand out among the others, it must bring a little something extra to the table. Most websites utilize symmetry to their advantage, but creators forget that asymmetry can be just as effective. Symmetrical design has become commonplace, so asymmetry can [&hellip;]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[],"topics":[],"class_list":["post-19278","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Can Good Design Be Asymmetrical? - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Can Good Design Be Asymmetrical?\" \/>\n<meta property=\"og:description\" content=\"Today&acirc;&euro;&trade;s world bombards people with content. In order to make a new site or ad stand out among the others, it must bring a little\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-27T14:00:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-29T11:32:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043036\/assymetrical-designs-1.png.webp\" \/>\n<meta name=\"author\" content=\"Creative Market\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creative Market\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical\",\"name\":\"Can Good Design Be Asymmetrical? - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/11\\\/29043036\\\/assymetrical-designs-1.png.webp\",\"datePublished\":\"2014-11-27T14:00:40+00:00\",\"dateModified\":\"2024-03-29T11:32:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d6927fab89f28e3dd8f6bb7b36219d66\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/11\\\/29043036\\\/assymetrical-designs-1.png.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/11\\\/29043036\\\/assymetrical-designs-1.png.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/can-good-design-be-asymmetrical#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Can Good Design Be Asymmetrical?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Can Good Design Be Asymmetrical? - Creative Market Blog","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:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical","og_locale":"en_US","og_type":"article","og_title":"Can Good Design Be Asymmetrical?","og_description":"Today&acirc;&euro;&trade;s world bombards people with content. In order to make a new site or ad stand out among the others, it must bring a little","og_url":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-11-27T14:00:40+00:00","article_modified_time":"2024-03-29T11:32:47+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043036\/assymetrical-designs-1.png.webp","type":"","width":"","height":""}],"author":"Creative Market","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Creative Market","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical","url":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical","name":"Can Good Design Be Asymmetrical? - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043036\/assymetrical-designs-1.png.webp","datePublished":"2014-11-27T14:00:40+00:00","dateModified":"2024-03-29T11:32:47+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d6927fab89f28e3dd8f6bb7b36219d66"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043036\/assymetrical-designs-1.png.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/11\/29043036\/assymetrical-designs-1.png.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/can-good-design-be-asymmetrical#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Can Good Design Be Asymmetrical?"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/19278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=19278"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/19278\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=19278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=19278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=19278"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=19278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}