{"id":657,"date":"2022-03-28T06:00:03","date_gmt":"2022-03-28T06:00:03","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=657"},"modified":"2022-03-11T14:46:52","modified_gmt":"2022-03-11T14:46:52","slug":"fundamentals-of-web-design","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/","title":{"rendered":"Fundamentals of Web Design"},"content":{"rendered":"<figure id=\"attachment_658\" aria-describedby=\"caption-attachment-658\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-658\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/12\/web-design-fundamentals-300x199.jpg\" alt=\"web design fundamentals\" width=\"900\" height=\"596\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/12\/web-design-fundamentals-300x199.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/12\/web-design-fundamentals-768x508.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/12\/web-design-fundamentals-1024x678.jpg 1024w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/12\/web-design-fundamentals.jpg 1200w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-658\" class=\"wp-caption-text\"><center><a href=\"https:\/\/www.flickr.com\/photos\/luc\/7314722180\" target=\"_blank\"><span style=\"font-size: small;\">Luc Legay \/ Flickr<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\" target=\"_blank\"><span style=\"font-size: small;\">CC BY-SA 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\/fundamentals-of-web-design\/#Things_You_Need_to_Know_BEFORE_You_Build_a_Website\" >Things You Need to Know BEFORE You Build a Website<\/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\/fundamentals-of-web-design\/#Simplicity\" >Simplicity<\/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\/fundamentals-of-web-design\/#Reduce_the_clutter\" >Reduce the clutter<\/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\/fundamentals-of-web-design\/#Avoid_horizontal_scrollbars_at_all_costs\" >Avoid horizontal scrollbars at all costs<\/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\/fundamentals-of-web-design\/#Whats_the_purpose_of_your_site\" >What\u2019s the purpose of your site?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#Uniform_appearance_%E2%80%93_consistency\" >Uniform appearance \u2013 consistency<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#Homepage_links\" >Homepage links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#Site_IDs_Taglines_%E2%80%93_know_how_to_use_them\" >Site ID\u2019s &amp; Taglines &#8211; know how to use them<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#Everything_needs_a_purpose\" >Everything needs a purpose<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#Functionality_design_vs_usability\" >Functionality: design vs. usability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#View_your_site_with_a_critical_eye\" >View your site with a critical eye<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/#USER_TESTING\" >USER TESTING<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Things_You_Need_to_Know_BEFORE_You_Build_a_Website\"><\/span>Things You Need to Know BEFORE You Build a Website<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><strong>There are things that you need to know before you begin to build a website<\/strong> \u2013 things that will determine the success (or lack thereof) of your site. There are quite a few \u201crules\u201d that have been drilled into my head, and those \u201crules\u201d and design basics are what I will be filling you in on, in no particular order, as truthfully, they are equally important.<\/p>\n<p style=\"text-align: justify;\"><strong>Failure to follow just one of these guidelines may not kill your business, but I can guarantee you that some users will be so annoyed by your site that they will leave and never return<\/strong> \u2013 and of course, they\u2019ll tell their friends how \u201cpainful\u201d it was for them to try to find their way around your site.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Simplicity\"><\/span>Simplicity<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">As cool as you think a dozen graphics or a big Flash presentation on your homepage look, most people hate it! <strong>Simple designs load faster, have more clarity in content and are easier to navigate.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Reduce_the_clutter\"><\/span>Reduce the clutter<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">You may think that putting more information on one page makes it easier for your users (the people who will be visiting your site) to find the info they\u2019re looking for all in one place \u2013 FALSE! <strong>In the world of web design, less is more!<\/strong> A lot of content on a page will do nothing more than confuse or annoy the user.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Avoid_horizontal_scrollbars_at_all_costs\"><\/span>Avoid horizontal scrollbars at all costs<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Numerous user testing has revealed that <strong>we HATE to scroll horizontally<\/strong>. Vertical scrolling is to be expected, but you need to size your page so that in a typical sized browser window, a user doesn\u2019t have to scroll horizontally.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Whats_the_purpose_of_your_site\"><\/span>What\u2019s the purpose of your site?<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<blockquote><p>Why do you want users to navigate to your site? What are you trying to achieve?<\/p><\/blockquote>\n<p style=\"text-align: justify;\">The purpose of your site should be very apparent from the homepage. Users shouldn\u2019t have to view your homepage and go \u201cHmm\u2026I wonder what this site is for?\u201d \u2013 it should be clear from page one. <strong>If people aren\u2019t sure what purpose your site serves, they\u2019re not likely to return<\/strong>.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Uniform_appearance_%E2%80%93_consistency\"><\/span>Uniform appearance \u2013 consistency<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Every page of your website should essentially look the same. Of course, every page is not going to be exactly identical, but the <strong>overall design should remain consistent throughout the site.<\/strong><\/p>\n<p style=\"text-align: justify;\">For example, if your homepage has a blue background and the navigation bar on the left, <strong>your remaining pages should NOT have a bright green background with the navigation bar on the right<\/strong>. It\u2019s inconsistent and confuses users thinking \u201dAm I still on the same site?\u201d<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Homepage_links\"><\/span>Homepage links<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">EVERY page of your site (excluding the homepage, of course) should have a link back to the homepage. <strong>This gives the user a place to \u201cstart over\u201d if they get lost<\/strong>, and it lets them know that if they click on the wrong link, they\u2019re only one click away from familiar territory.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Site_IDs_Taglines_%E2%80%93_know_how_to_use_them\"><\/span>Site ID\u2019s &amp; Taglines &#8211; know how to use them<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Your Site ID is typically your logo<\/strong>, which most commonly should be found on the top of the page (many users like Site ID\u2019s that are located in the upper left corner), and your Site ID should also remain consistent throughout each page of the site \u2013 and it\u2019s good practice to make your Site ID link back to your homepage.<\/p>\n<p style=\"text-align: justify;\">What\u2019s a tagline and why do I need one? <strong>A tagline is one sentence<\/strong> (many designers place this under the logo\/Site ID on the homepage \u2013 consistency of the tagline throughout the site is not necessary) <strong>that clearly defines your purpose or mission<\/strong> \u2013 sort of a company slogan.<\/p>\n<p style=\"text-align: justify;\"><strong>The tagline just gives a little insight into what the site is about<\/strong>. For example, suppose a website\u2019s tagline is \u201cThe People\u2019s Media Company.\u201d Many taglines are copy written, so keep this in mind if you see a good one you\u2019d like to \u201cborrow.\u201d<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Everything_needs_a_purpose\"><\/span>Everything needs a purpose<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Having a successful site isn\u2019t just about attractive visual elements \u2013 it\u2019s about <strong>communicating the purpose.<\/strong> With that being said, EVERY element needs to have a purpose. If you have a plumbing site, you don\u2019t need a picture of a tree \u2013 the tree serves no purpose \u2013 stick to visuals that are related to plumbing, but not so many that you clutter the site.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Functionality_design_vs_usability\"><\/span>Functionality: design vs. usability<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Yes, it IS possible to have a site with a good design that is also very usable, but you have to be reasonable to achieve this. If there\u2019s a cool animation that you\u2019d like to use on your site, but it seems to \u201cconfuse\u201d the scene, opt for usability instead of design. <strong>Remember, you want your site to be \u201cpretty,\u201d but more importantly, you want it to be usable.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"View_your_site_with_a_critical_eye\"><\/span>View your site with a critical eye<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Remember that <strong>not everyone is a web designer, and not everyone surfs the web with ease like you do<\/strong>. Never make assumptions \u2013 \u201cWell, I know how to do that so I\u2019m sure everyone else will too.\u201d<\/p>\n<p style=\"text-align: justify;\">Depending on the type of site, you may have a very diverse audience. You may have experienced web users or elderly folks who just learned how to send an email viewing your site. <strong>You need to accommodate for all types of users \u2013 including impaired users.<\/strong><\/p>\n<p style=\"text-align: justify;\"><strong>You also need to preview your site in multiple browsers<\/strong> \u2013 each browser is configured a little differently, therefore, the same page may appear slightly different in each browser.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"USER_TESTING\"><\/span>USER TESTING<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">An old saying in web design is \u201cCode a little, test a little.\u201d In other words, <strong>in the process of building your site, you should design a little and then test it out on a couple of folks<\/strong> (preferably from your target audience).<\/p>\n<p style=\"text-align: justify;\"><strong>Why?<\/strong> Let\u2019s say you\u2019re designing a 100-page site. You just finished it and you\u2019re ready for user testing with potential members of your target audience. You use 10 people to test your site design, and 7 out of those 10 people have an extremely difficult time navigating around your site, understanding the purpose, etc. You\u2019re now out of all those hours you put into designing the site because you didn\u2019t test earlier during the design process, you must now redesign the site and hope for a better outcome.<\/p>\n<p style=\"text-align: justify;\">Had you conducted a small user test 10 or 15 pages of the site, you would have known that your navigation system didn\u2019t work for members of your target audience. <strong>ALWAYS conduct user testing, even if you can only afford to test it with 2 people.<\/strong><\/p>\n<p style=\"text-align: justify;\">These are important guidelines to remember when designing a website. Think of how you feel when you go to a site that\u2019s horribly confusing, or whose navigation is inconsistent or doesn\u2019t take you where you want to go. You hate it, right? <strong>Keep that in mind throughout your design process, and remember to test frequently.<\/strong> Your test subjects will let you know what needs to be fixed before your site goes live.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Things You Need to Know BEFORE You Build a Website There are things that you need to know before you begin to build a website \u2013 things that will determine the success (or lack thereof) of your site. There are quite a few \u201crules\u201d that have been drilled into my head, and those \u201crules\u201d and &#8230; <a title=\"Fundamentals of Web Design\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/fundamentals-of-web-design\/\" aria-label=\"Read more about Fundamentals of Web Design\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":658,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,1],"tags":[71,333],"class_list":["post-657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-web-development","tag-web-design","tag-web-design-fundamentals"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/657","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=657"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/657\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/658"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}