{"id":576,"date":"2022-03-29T19:33:23","date_gmt":"2022-03-29T19:33:23","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=576"},"modified":"2022-03-24T00:32:55","modified_gmt":"2022-03-24T00:32:55","slug":"web-design-101-thinking-like-a-web-designer","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/web-design-101-thinking-like-a-web-designer\/","title":{"rendered":"Web Design 101: Thinking Like a Web Designer"},"content":{"rendered":"<figure id=\"attachment_577\" aria-describedby=\"caption-attachment-577\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-577\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/thinking-like-a-web-designer-300x212.jpg\" alt=\"think like a web designer\" width=\"900\" height=\"635\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/thinking-like-a-web-designer-300x212.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/thinking-like-a-web-designer-768x542.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/thinking-like-a-web-designer-1024x723.jpg 1024w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/thinking-like-a-web-designer.jpg 1200w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-577\" class=\"wp-caption-text\"><center><a href=\"https:\/\/pixabay.com\/en\/woman-girl-balloon-thought-bubble-1172718\/\" target=\"_blank\"><span style=\"font-size: small;\">geralt \/ Pixabay<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/deed.en\" target=\"_blank\"><span style=\"font-size: small;\">CC0 1.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\/web-design-101-thinking-like-a-web-designer\/#Think_like_a_Web_Designer_Beginners_Guide\" >Think like a Web Designer: Beginner&#8217;s Guide<\/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\/web-design-101-thinking-like-a-web-designer\/#Introduction\" >Introduction<\/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\/web-design-101-thinking-like-a-web-designer\/#Thinking_Like_a_Web_Designer\" >Thinking Like a Web Designer<\/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\/web-design-101-thinking-like-a-web-designer\/#The_%E2%80%9CThinking_Like_a_Web_Designer%E2%80%9D_Exercise\" >The \u201cThinking Like a Web Designer\u201d Exercise<\/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\/web-design-101-thinking-like-a-web-designer\/#What_to_look_for_in_these_answers\" >What to look for in these answers<\/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\/web-design-101-thinking-like-a-web-designer\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Think_like_a_Web_Designer_Beginners_Guide\"><\/span>Think like a Web Designer: Beginner&#8217;s Guide<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">There are a variety of ways to go about starting to design a website. Teachers and mentors either in school, via articles or those you know that are web designers, can teach you \u201ctheir way\u201d or their proposed \u201cbest way\u201d of going about just that; however, <strong>the \u201cbest way\u201d is the way that is good for you<\/strong>. But, to find that way, you must first begin to think like a web designer!<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Thinking_Like_a_Web_Designer\"><\/span>Thinking Like a Web Designer<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Thinking like a web designer is a vital part of the design process<\/strong>. It is what will help guide you through the course of creating a website and, inevitably, producing a successful and effective website! You can think of it in the process of steps.<\/p>\n<p style=\"text-align: justify;\"><strong>The first step to designing a website is gathering information, the second step is research, the third step is planning.<\/strong><\/p>\n<p style=\"text-align: justify;\">Unfortunately, <strong>most of us want to start at the \u201cplanning\u201d step. Don\u2019t!<\/strong> Before you start planning what colors to use or where to put your navigation, you first must know as many intricate details you can of what your website is.<\/p>\n<p style=\"text-align: justify;\"><strong>With this being said, I can give you a few helpful questions to ask yourself before starting to design a website to start your \u201cgathering information\u201d process:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>Who is this site for? What kind of person\/business are they?<\/li>\n<li>What is this person\u2019s\/business\u2019 need for a website?<\/li>\n<li>What is their goal for the site?<\/li>\n<li>Are they trying to sell a product or a service? If so, what?<\/li>\n<li>How do they want to appear to their clients and competitors?<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">You also could think about it <strong>like unlocking levels to a video game<\/strong>. Once you answer one question, it will lead you to another question you can answer.<\/p>\n<p style=\"text-align: justify;\"><strong>The more in-depth you go, the better idea of what type of website you need to create<\/strong> as well as things such as what colors you could use will become apparent to you.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"The_%E2%80%9CThinking_Like_a_Web_Designer%E2%80%9D_Exercise\"><\/span>The \u201cThinking Like a Web Designer\u201d Exercise<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">For the purpose of this exercise, let\u2019s say our client is a small business owner named <strong>Shirley that owns a small jewelry shop<\/strong>. She doesn\u2019t have a pre-existing website and gives you a funny look when you ask if she has a \u201cbrand,\u201d but to our avail, she does have a logo!<\/p>\n<p style=\"text-align: justify;\"><strong>So, before we continue, let\u2019s answer the questions above for our small business owner, \u201cShirley.\u201d<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>\u201cShirley,\u201d owner of \u201cJewelry Shoppe,\u201d a small business on the main street in downtown.<\/li>\n<li>To promote the location, information and products her business has to offer.<\/li>\n<li>To draw in more customers and allow her products to be viewed online to a wider array of people.<\/li>\n<li>Yes, she is trying to sell rings, necklaces, and pendants.<\/li>\n<li>She wants the website to be classy.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">So, knowing these things, sit here and <strong>ponder for a moment<\/strong>: what is this information telling you about what type of website she needs? Are you getting any pictures of what this site could look like? What about the kind of information you\u2019re going to have to put onto the website?<\/p>\n<p style=\"text-align: justify;\">What you might be sitting here grasping at is the <strong>\u201cclassy\u201d website part. Stop!<\/strong> There is a lot more information found here in these answers that you can use.<\/p>\n<p style=\"text-align: justify;\">If you\u2019re sitting here saying: \u201cThanks, Shirley. That\u2019s all a bunch of general information that doesn\u2019t help me at all. I still have no idea where to go with this website!\u201d, now is the time to<strong> start teaching your brain to read and think like a designer<\/strong>!<\/p>\n<p style=\"text-align: justify;\"><strong>This information we have here, now, actually gives us insight on a few things that this website will be and helps open the doors to our next questions! I\u2019ll list a few bits of information we have gotten by answering those questions:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>Shirley is a small business owner. In a general sense, you can then <strong>deduce how much designing is going to need to be done here<\/strong>. Because it\u2019s a small business, she probably won\u2019t care to have the ability to allow website visitors to buy her products online; she\u2019ll probably just tell you it\u2019s okay to list her phone number so they can call in for more information.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px; text-align: justify;\">She\u2019ll also probably only <strong>want a few of her products listed instead of listing every single product on her shelf.<\/strong> This means you won\u2019t have to do much extra designing; instead, you\u2019ll probably only have to design a home page and an informational layout, and even those two layouts won\u2019t have much of a difference to them.<\/p>\n<p style=\"padding-left: 30px; text-align: justify;\">It also means, if you\u2019re coding this website as well, you\u2019ll only have to worry about coding around 3 \u2013 7 pages.<\/p>\n<ul style=\"text-align: justify;\">\n<li>By answering question number two, <strong>you know some of the contents that need to be on the website<\/strong>, such as her business address, phone number, a \u201cgeneral information\u201d paragraph about her and her business and a list of her products.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px; text-align: justify;\">This is an example of \u201c<strong>unlocking levels<\/strong>\u201d, because after deciding this, you need to decide what pages you need to have to place this information on.<\/p>\n<ul style=\"text-align: justify;\">\n<li>Deducing that Shirley wants a \u201cclassy\u201d website can be done in a few different ways; however, first and foremost, you should <strong>always ask the client what they want!<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 30px; text-align: justify;\">If they say \u201cI don\u2019t know,\u201d or ask \u201cWhat do you think is best,\u201d which often they will, taking a look at their products and the location and layout of their business are very helpful! For example, what kind of rings or necklaces is Shirley selling? Are they Celtic or wedding rings?<\/p>\n<p style=\"padding-left: 30px; text-align: justify;\"><strong>Knowing what type of website she wants or would best suit her, if deduced by her products and qualities of her establishment, is what will lead to the research step.<\/strong><\/p>\n<p style=\"text-align: justify;\"><em>(<strong>Note:<\/strong> You may have noticed there were quite a few<strong> \u201cprobably\u2018s&#8221;<\/strong> listed here. If you know about a client before your first meeting with them, then this is when you should start asking yourself these questions.<\/em><\/p>\n<p style=\"text-align: justify;\"><em>If you already know she\u2019s a small business owner before the first consultant meeting, you can deduce those things from that general bit of information.<\/em><\/p>\n<p style=\"text-align: justify;\"><em>Of course, when you speak with her about the website is when you should get the concrete information on those \u201c<strong>probabilities<\/strong>.\u201d)<\/em><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"What_to_look_for_in_these_answers\"><\/span>What to look for in these answers<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">It is important to <strong>determine \u201chow much\u201d designing you\u2019re going to need to do<\/strong>. That is because your client or the company you are working for is going to want a set time on when they can see some progress.<\/p>\n<p style=\"text-align: justify;\">When designing a website, <strong>time yourself on exactly how long it takes you<\/strong>. You\u2019ll need to do this a few times to get a \u201cgeneral\u201d idea of how long it might take. <strong>Always give yourself a few extra days in the estimated time you give them.<\/strong><\/p>\n<p style=\"text-align: justify;\"><strong>If you \u201cget done early\u201d it will look better on you<\/strong>, not to mention, you never know when something is going to come up that takes time away from designing the website, that you hadn\u2019t planned for!<\/p>\n<p style=\"text-align: justify;\">Determining what information needs to be on a site will help you determine how much \u201creal estate space\u201d you need for all of the information. <strong>That, in essence, \u201cunlocks\u201d many other questions you need to ask yourself:<\/strong><\/p>\n<ul style=\"text-align: justify;\">\n<li>\u201cWhat information is important enough to put on the home page?\u201d<\/li>\n<li>\u201cWhat is the best way to divide this information up on the home page? Horizontally or vertically?\u201d<\/li>\n<li>\u201cShould this information have a supporting image on the home page or the additional pages?\u201d<\/li>\n<li>\u201cDo I need separate pages dedicated to this information or can it be placed all on one page?\u201d<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Finally, knowing Shirley wants a <strong>\u201cclassy\u201d<\/strong> website helps in deciding what \u201cstyle\u201d or \u201ctheme\u201d to go for. If you\u2019re still having a hard time in determining what exactly a \u201cclassy jewelry website\u201d would be, that\u2019s okay! <strong>That would be one of the things that bring us to our research step.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Gathering information on your project website\u2019s brand, needs, and the information that has to be found somewhere on this site is one of the most crucial steps in design. <strong>Those five key questions are a good starting point for finding this information and then building on it<\/strong>; however, they are not the only questions you can ask!<\/p>\n<p style=\"text-align: justify;\"><strong>As you progress, you will find your own issues and build and \u201cunlock\u201d other matters through those, as well.<\/strong><\/p>\n<p style=\"text-align: justify;\">Try going back to those five questions and doing another exercise on a different hypothetical company. What would be a hard company or individual for you to design for? Before you move onto the \u201cresearch\u201d article,<strong> concoct some of your own questions you could ask yourself to get the information you need to start designing a website!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Think like a Web Designer: Beginner&#8217;s Guide Introduction There are a variety of ways to go about starting to design a website. Teachers and mentors either in school, via articles or those you know that are web designers, can teach you \u201ctheir way\u201d or their proposed \u201cbest way\u201d of going about just that; however, the &#8230; <a title=\"Web Design 101: Thinking Like a Web Designer\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/web-design-101-thinking-like-a-web-designer\/\" aria-label=\"Read more about Web Design 101: Thinking Like a Web Designer\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":577,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,1],"tags":[71,279,213],"class_list":["post-576","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-web-development","tag-web-design","tag-web-design-101","tag-web-designer"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/576","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=576"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/576\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/577"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}