{"id":554,"date":"2022-03-18T04:50:51","date_gmt":"2022-03-18T04:50:51","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=554"},"modified":"2022-03-25T12:49:39","modified_gmt":"2022-03-25T12:49:39","slug":"back-to-basics-web-design-tips-the-importance-of-visual-effects","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/","title":{"rendered":"Back to Basics: Web Design Tips &#8211; the Importance of Visual Effects"},"content":{"rendered":"<figure id=\"attachment_555\" aria-describedby=\"caption-attachment-555\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-555\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-2-300x225.jpg\" alt=\"web design tips\" width=\"900\" height=\"675\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-2-300x225.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-2-768x576.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-2-1024x768.jpg 1024w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/web-design-tips-2.jpg 1200w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-555\" class=\"wp-caption-text\"><center><a href=\"https:\/\/www.flickr.com\/photos\/31954002@N08\/14804632142\" target=\"_blank\"><span style=\"font-size: small;\">David Michalczuk \/ Flickr<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\" target=\"_blank\"><span style=\"font-size: small;\">CC BY 2.0<\/span><\/a><\/center><\/figcaption><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/#It_Pays_to_Pay_Attention_to_Design\" >It Pays to Pay Attention to Design<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/#Basic_Design_Principles\" >Basic Design Principles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/#Basic_Design_Tips_for_Graphics\" >Basic Design Tips for Graphics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/#Web_Design_Tips_for_Presenting_Information\" >Web Design Tips for Presenting Information<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/#Web_Design_Tips_for_Navigation_Tools\" >Web Design Tips for Navigation Tools<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"It_Pays_to_Pay_Attention_to_Design\"><\/span>It Pays to Pay Attention to Design<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\">Is it just me, or is web design a major pain in the posterior? Don\u2019t get me wrong; I love web design to death. I\u2019m self-taught; however. I\u2019ve been fooling around with different versions of Dreamweaver for some ten years now, and I\u2019ve come to a conclusion that\u2026well, we\u2019ve already determined what that is: <strong>Web design, although rewarding in the end, can be a major source of pain and frustration\u2013especially if you go about it all wrong!<\/strong><\/p>\n<p style=\"text-align: justify;\"><strong>In my effort to help, I have devised a simple facts sheet below\u2013a little something you can print out and keep nearby when terror strikes!<\/strong><\/p>\n<p style=\"text-align: justify;\">First, allow me just to say, as technically challenging as web design can be, <strong>please, please, please do NOT forget the importance of visual aspects<\/strong>. There\u2019s a saying in the culinary world (not that it has anything to do with web design, but bare with me), \u201cYou eat with your eyes, first,\u201d which means, your eyes take stuff in way before any of your other senses kick in.<\/p>\n<p style=\"text-align: justify;\">The same holds true for websites: <strong>the more aesthetically pleasing a site, the greater the chances your visitors will stay for longer periods of time<\/strong>, and better yet, come back for more. Must love those repeat visitors!<\/p>\n<p style=\"text-align: justify;\">And it doesn\u2019t even matter WHAT you\u2019re presenting as long as it looks good. Well, at first anyway. But, there has to be that first\u2013as in <strong>impressions\u2013the first ones matter the most<\/strong>. They set the foundation, so to speak.<\/p>\n<p style=\"text-align: justify;\">People tend to gravitate toward visually appealing websites mainly because, in my humble opinion, they\u2019re more trusting of the webmaster. It\u2019s almost as if they think a competent web designer is all-around skilled and knowledgeable of his website\u2019s topic. It\u2019s Psych 101 all over again. So, let that be a lesson to you: <strong>it pays to pay attention to the design element of your site.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Basic_Design_Principles\"><\/span>Basic Design Principles<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">When you\u2019re creating your web page(s), <strong>you need to think like a designer: visually.<\/strong> To attract viewer attention and hold it (it\u2019s all about attention span!), you must design your website with a good balance of text to graphics, and <strong>good web designers follow these design principles:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>Design your web page\u2019s interface to fit inside the first 800 x 600 pixels so that the relevant content is easily visible when the page first loads. Why? Because people crave instant gratification! They want to see what your site\u2019s about the moment your page loads, and most importantly, they\u2019re too lazy to scroll horizontally! (It\u2019s enough they have to scroll vertically!)<\/li>\n<li>Balance your web page\u2019s layout by implementing no more than three focal points: a good rule of thumb is to use the \u201cbig, medium, small\u201d strategy. \u201cBig\u201d is the big element(s) on the page, like images; \u201cmedium\u201d is the medium element(s) on the page, for instance, a body of text; and finally, \u201csmall\u201d is the small element(s) such as the top navigation bar, or menu bar.<\/li>\n<li>Depending greatly on the font itself, try to avoid using font small than 10 points. A good rule of thumb here is using fonts that the general mass of computers has, such as Arial, sans-serif, Times New Roman, and Verdana, among various others.<\/li>\n<\/ul>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Basic_Design_Tips_for_Graphics\"><\/span>Basic Design Tips for Graphics<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">When you\u2019re creating your website, don\u2019t overlook the graphics because they play a ginormous part of web design! You seriously need to <strong>get educated on the standards and formats for different types of web graphics<\/strong> before plugging any old images into your page(s)! Using the wrong types of web graphics can mean the difference between a website that gets noticed and one that visitors surpass.<\/p>\n<p style=\"text-align: justify;\"><strong>Follow these simple pointers to make sure your visual elements are pleasing to the eye:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>Make sure all your web graphics (images) are optimally saved for the internet.<\/li>\n<li>Be sure to save images that have a mix of text, flat-colored graphics, and photos as adaptive palette GIF files.<\/li>\n<li>If you have purely photographic images (i.e., ones without any text whatsoever), be sure to save them in JPEG (JPG) file format.<\/li>\n<li>Remember always to display anti-aliased graphics in the right background color; otherwise, you see a weird halo around them.<\/li>\n<\/ul>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Web_Design_Tips_for_Presenting_Information\"><\/span>Web Design Tips for Presenting Information<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Even if all you\u2019re presenting is pure information, think visually while you\u2019re building your website. <strong>Showing your information logically and taking strides to make it visually appealing is the basis of good web page design.<\/strong><\/p>\n<p style=\"text-align: justify;\"><strong>Below are a few tips and tricks that will help keep your visitors\u2019 eyes from wandering<\/strong>. This is where those strong organizational skills you\u2019ve been boasting about on your resume come into play!<\/p>\n<ul style=\"text-align: justify;\">\n<li>Organize and group navigation into primary, secondary, and tertiary sets, each containing no more than five to seven items.<\/li>\n<li>Outline your site\u2019s categories and create no more than three levels, or channels, if you will: Main idea, topic, and subtopic.<\/li>\n<li>Here\u2019s a term many of you Maya users can appreciate: wireframes. (Boy, one thing leads to another, I tell you!) Build wireframes for each unique page layout on your site. Wireframes are a diagram view of your page layout and interaction. And, if you\u2019re an architect, consider these wireframes your blueprints.<\/li>\n<\/ul>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Web_Design_Tips_for_Navigation_Tools\"><\/span>Web Design Tips for Navigation Tools<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">It\u2019s even a good rule of thumb to take visuals into consideration when creating a navigation system for your web pages. <strong>Navigation is what takes your visitors from page to page within your website<\/strong>. Your best bet is to make those navigation tools visually stimulating as well as functional. And remember, nobody likes to \u201ctalk\u201d to empty-headed blondes. (I can say that because I knew a lot of blondes! Blonde, I should say; however far from empty-headed!)<\/p>\n<p style=\"text-align: justify;\">So, <strong>take care to point your links in the right direction<\/strong>, so to speak. After a while of clicking on dead links, your visitors will get bored with even the most visually appealing website and *gasp* leave.<\/p>\n<p style=\"text-align: justify;\"><strong>Follow these steps to creating visually appealing navigation:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>Differentiate the visual design of non-clickable and clickable elements; which is to say, don\u2019t use the same graphic as a button on one page and a headline on another. That can be very confusing to your visitors. Besides, it\u2019s the lazy way out.<\/li>\n<li>Use visual feedback, such as a color change, to enhance interaction and usability. A color change can be applied to both image links and textual links with Javascript (behaviors).<\/li>\n<li>Always place navigation in the same place on the page and don\u2019t change its appearance. It makes for effortless navigation. The last thing your visitors want to do is work hard to find their way around your website. They gave at the office; enough is enough!<\/li>\n<li>If you have vague-looking icons, it\u2019s always a safe bet to label them. Images alone are not always clear, and visitors might not understand their function on your site.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><strong>Follow these simple tips and guidelines, and you\u2019ll have a well organized and visually pleasing website up and running in no time!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It Pays to Pay Attention to Design Is it just me, or is web design a major pain in the posterior? Don\u2019t get me wrong; I love web design to death. I\u2019m self-taught; however. I\u2019ve been fooling around with different versions of Dreamweaver for some ten years now, and I\u2019ve come to a conclusion that\u2026well, &#8230; <a title=\"Back to Basics: Web Design Tips &#8211; the Importance of Visual Effects\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/back-to-basics-web-design-tips-the-importance-of-visual-effects\/\" aria-label=\"Read more about Back to Basics: Web Design Tips &#8211; the Importance of Visual Effects\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":555,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,1],"tags":[264,71,229],"class_list":["post-554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-web-development","tag-visual-effects","tag-web-design","tag-web-design-tips"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/comments?post=554"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/554\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/555"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}