{"id":1387,"date":"2023-02-06T10:59:41","date_gmt":"2023-02-06T10:59:41","guid":{"rendered":"http:\/\/360elearning.com\/blog\/?p=1387"},"modified":"2023-02-06T11:03:16","modified_gmt":"2023-02-06T11:03:16","slug":"visual-design-mistakes","status":"publish","type":"post","link":"https:\/\/360elearning.com\/blog\/visual-design-mistakes\/","title":{"rendered":"Visual Design Mistakes"},"content":{"rendered":"<p>In this Blog, you will learn about the most common visual design mistakes when creating eLearning. This can make your work look less professional and can make it hard for your audience to engage with your content.<\/p>\n<p><strong>1) Inconsistency<\/strong><\/p>\n<p><strong>Fonts<\/strong> &#8211; Most common type of inconsistency is the different font families within a single project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1388\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/1-300x76.jpg\" alt=\"\" width=\"636\" height=\"161\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/1-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/1-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/1-1024x261.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/1.jpg 1430w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/p>\n<p><strong>Stroke<\/strong> &#8211; Stroke is the outline of a shape. Varying stroke size will make project look inconsistent.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1389\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/2-300x76.jpg\" alt=\"\" width=\"671\" height=\"170\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/2-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/2-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/2-1024x260.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/2.jpg 1430w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/p>\n<p><strong>Colors <\/strong>\u2013 Keep colors consistent. Use black and white, and a single color that <strong>POPS<\/strong> for your buttons. Only add additional colors when trying to incorporate brand colors into the project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1390\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/3-300x76.jpg\" alt=\"\" width=\"659\" height=\"167\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/3-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/3-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/3-1024x260.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/3.jpg 1430w\" sizes=\"auto, (max-width: 659px) 100vw, 659px\" \/><\/p>\n<p><strong>Illustrations<\/strong> \u2013 Illustrations can be in different styles. Use illustrations that are consistent in style for example, art style should be similar, characters that look similar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1391\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/4-300x76.jpg\" alt=\"\" width=\"714\" height=\"181\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/4-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/4-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/4-1024x260.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/4.jpg 1430w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/p>\n<p><strong>Layouts <\/strong>\u2013 Keep layouts consistent for each type of slide (one questions slide, one content slide, etc.). Only introduce variation when it\u2019s communicating something important (Can be applied to all the topics discussed)<\/p>\n<p>&nbsp;<\/p>\n<p><strong>2) Non-Standard buttons<\/strong><\/p>\n<p>With the buttons use either very subtle rounding or full rounding. Either fill or stroke\u2026 not both<\/p>\n<p><strong>\u00a0<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1392\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/5-300x76.jpg\" alt=\"\" width=\"746\" height=\"189\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/5-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/5-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/5-1024x260.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/5.jpg 1430w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><\/p>\n<p><strong>3) Lack of alignment<\/strong><\/p>\n<p>If you are getting started with instructional designing then use strong left alignment.<\/p>\n<p><strong>\u00a0<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1393\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/6-300x76.jpg\" alt=\"\" width=\"711\" height=\"180\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/6-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/6-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/6-1024x261.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/6.jpg 1430w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/><\/p>\n<p><strong>4) Unintentional color choice<\/strong><\/p>\n<p>Colors means different things. for example, if you look at red color you will probably know that this information is incorrect or it\u2019s a warning and when you see green you will know it means correct or success. You have to be very careful when using these colors. Use grey color to represent disabled or locked.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1394\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/7-300x76.jpg\" alt=\"\" width=\"718\" height=\"182\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/7-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/7-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/7-1024x260.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/7.jpg 1430w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><\/p>\n<p><strong>5) Insufficient spacing<\/strong><\/p>\n<p>When designing whether it\u2019s eLearning, website or an app, spacing is very important. Always give your elements room to breathe or padding (a term commonly used in web designing).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1395\" src=\"http:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/8-300x76.jpg\" alt=\"\" width=\"789\" height=\"200\" srcset=\"https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/8-300x76.jpg 300w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/8-768x195.jpg 768w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/8-1024x260.jpg 1024w, https:\/\/360elearning.com\/blog\/wp-content\/uploads\/2023\/02\/8.jpg 1430w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this Blog, you will learn about the most common visual design mistakes when creating eLearning. This can make your work look less professional and can make it hard for&#8230;<\/p>\n<p><a class='more-link' href='https:\/\/360elearning.com\/blog\/visual-design-mistakes\/'>Read More <span class='screen-reader-text'>Visual Design Mistakes<\/span><\/a><\/p>","protected":false},"author":6,"featured_media":1398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beginners-guide","excerpt"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts\/1387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/comments?post=1387"}],"version-history":[{"count":4,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts\/1387\/revisions"}],"predecessor-version":[{"id":1397,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/posts\/1387\/revisions\/1397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/media\/1398"}],"wp:attachment":[{"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/media?parent=1387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/categories?post=1387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/360elearning.com\/blog\/wp-json\/wp\/v2\/tags?post=1387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}