{"id":84,"date":"2022-01-20T23:18:49","date_gmt":"2022-01-20T23:18:49","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/?p=84"},"modified":"2022-03-02T05:56:54","modified_gmt":"2022-03-02T05:56:54","slug":"dont-chase-your-tail-learn-design-basics","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/","title":{"rendered":"Don’t Chase Your Tail – Learn Design Basics"},"content":{"rendered":"
\n

\"\"<\/p>\n<\/blockquote>\n

Endless Bad Design Iterations<\/h2>\n

Pretty much how I would describe my frontend web development until recently. In more detail the process would go like:<\/p>\n

    \n
  1. \n
    1. Get excited about building \r\nsome website.\r\n2. Choose a tech stack & \r\nget started.\r\n3. Build site structure & \r\nstart styling the home page.\r\n4. Keep styling until I'm \r\nhappy with how it looks.\r\n5. Never become happy - \r\nCHASE MY TAIL - get nowhere.<\/pre>\n
    Does this happen to you?\u00a0My issue was that I was unwilling to make bad sites, but that is all I kept doing\u2026soul crushing.<\/p>\n
    <\/li>\n<\/ol>\n
    Salvation From a Youtube Video \ud83d\ude4f<\/h2>\n
    No I am not preaching (although I do know Jesus lol). My favorite web dev’ YouTuber, Brad Traversy, hosted a web designer in a video teaching\u00a0web design basics for developers<\/a>. I knew the guy was speaking my language when he used used a Javascript function to teach design.<\/p>\n
    goodDesign(color_contrast<\/strong>, \r\nwhite_space<\/strong>, scale<\/strong>, \r\nvisual_hierarchy<\/strong>,typography<\/strong>) {\r\n}<\/pre>\n
    Just applying these principles helped me make way better looking sites. Best of all though, I finally got my tail. I am going to go over these principles in the following paragraphs, but I won’t get my feelings hurt if you just go watch the video. It’s pretty great.<\/p>\n
    color_contrast<\/h3>\n
    The purpose of a website is to communicate information right? So why make your text barely visible. This is obvious, but it is soooo easy to mess this up. So, let’s be decent humans: put light text against dark backgrounds and dark text against light backgrounds.<\/p>\n
    white_space<\/h3>\n
    Do you like feeling like you are crammed in an elevator (pre-covid) with max occupancy? No… yea I don’t either. When you don’t allow for space between elements on a page, this is how your make a site user feel. Notice on this post, I make sure to properly use headings so there is consistent space throughout the post. The effect is my post is more readable. To make my final point, just look at this\u00a0site<\/a>. Take a deep breath before you go there, though.<\/p>\n
    scale<\/h3>\n
    Does the size of the element make sense? Is it too big or small? If it is, it’s just gonna look bad. You kinda have to eyeball this one. One thing that helps is thinking about the size of an object in relation to other objects (I think that is the definition of scale \ud83e\udd23). Is the button bigger than the text asking you to press it?<\/p>\n
    visual_hierarchy<\/h3>\n
    Back to the point of a website’s purpose. Yes, it’s all about communicating info, but some information is just more important. Here is an unnecessary example to demonstrate my point.<\/p>\n
    Someone walks into a room and only stays for 10 seconds. You are there and you are selling paper to them (at or near Dunder Mifflin). With such little time, you need to be precise with the information you give them. You can’t go on a tirade about Bears. Beats. Battlestar Galactica. No, you’d probably mention a discount.<\/p>\n
    <\/p><\/blockquote>\n
    Visual hierarchy is all about using the size of elements to communicate importance. That doesn’t mean just making the important things huge. You make some elements smaller TO HELP EMPHASIZE OTHERS \ud83d\udc40. If a user is going to only see three things on the site, encourage them to see the stuff you want by being precise with sizing.<\/p>\n
    typography<\/h3>\n
    Some fonts just look good. Design is concerned about making things look good, and if you have read this far, it’s fair to say you care about design (and making things look good). The tips I learned were to avoid overused fonts like Times New Roman, sticking closer to Sans-serif, and to be consistent with font types.<\/p>\n
    Yay, we done.<\/h2>\n
    In conclusion, you can do it. I made some pretty laughable sites before learning these principles but I have gotten pretty decent at design now. And, I really only internalized three of the principles I went over – white space, visual hierarchy, and scale. Take care.<\/p>\n
    – The Coding Hotdog<\/p>\n","protected":false},"excerpt":{"rendered":"
    Endless Bad Design Iterations Pretty much how I would describe my frontend web development until recently. In more detail the process would go like: 1. Get excited about building some website. 2. Choose a tech stack & get started. 3. Build site structure & start styling the home page. 4. Keep styling until I’m happy … <\/p>\n
    Continue reading “Don’t Chase Your Tail – Learn Design Basics”<\/span><\/a><\/p>\n","protected":false},"author":12018,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-84","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nDon't Chase Your Tail - Learn Design Basics - Coding Hotdog<\/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:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Don't Chase Your Tail - Learn Design Basics - Coding Hotdog\" \/>\n<meta property=\"og:description\" content=\"Endless Bad Design Iterations Pretty much how I would describe my frontend web development until recently. In more detail the process would go like: 1. Get excited about building some website. 2. Choose a tech stack & get started. 3. Build site structure & start styling the home page. 4. Keep styling until I'm happy … Continue reading "Don’t Chase Your Tail – Learn Design Basics"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"Coding Hotdog\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-20T23:18:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-02T05:56:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg\" \/>\n<meta name=\"author\" content=\"Scott Bax\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott Bax\" \/>\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\":\"Article\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\"},\"author\":{\"name\":\"Scott Bax\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/person\/c87708c348696a5217714e7c9cf1f6d0\"},\"headline\":\"Don’t Chase Your Tail – Learn Design Basics\",\"datePublished\":\"2022-01-20T23:18:49+00:00\",\"dateModified\":\"2022-03-02T05:56:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\"},\"wordCount\":633,\"publisher\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#organization\"},\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\",\"url\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\",\"name\":\"Don't Chase Your Tail - Learn Design Basics - Coding Hotdog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg\",\"datePublished\":\"2022-01-20T23:18:49+00:00\",\"dateModified\":\"2022-03-02T05:56:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage\",\"url\":\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg\",\"contentUrl\":\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Don’t Chase Your Tail – Learn Design Basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#website\",\"url\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/\",\"name\":\"Coding Hotdog\",\"description\":\"Woof, it's hot out there.. come relax and read tech.\",\"publisher\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#organization\",\"name\":\"Coding Hotdog\",\"url\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/iStock-1170183630-1.jpg\",\"contentUrl\":\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/iStock-1170183630-1.jpg\",\"width\":1732,\"height\":1732,\"caption\":\"Coding Hotdog\"},\"image\":{\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/person\/c87708c348696a5217714e7c9cf1f6d0\",\"name\":\"Scott Bax\",\"url\":\"https:\/\/blogs.oregonstate.edu\/codinghotdog\/author\/baxs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Don't Chase Your Tail - Learn Design Basics - Coding Hotdog","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:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/","og_locale":"en_US","og_type":"article","og_title":"Don't Chase Your Tail - Learn Design Basics - Coding Hotdog","og_description":"Endless Bad Design Iterations Pretty much how I would describe my frontend web development until recently. In more detail the process would go like: 1. Get excited about building some website. 2. Choose a tech stack & get started. 3. Build site structure & start styling the home page. 4. Keep styling until I'm happy … Continue reading \"Don’t Chase Your Tail – Learn Design Basics\"","og_url":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/","og_site_name":"Coding Hotdog","article_published_time":"2022-01-20T23:18:49+00:00","article_modified_time":"2022-03-02T05:56:54+00:00","og_image":[{"url":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg","type":"","width":"","height":""}],"author":"Scott Bax","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Scott Bax","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#article","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/"},"author":{"name":"Scott Bax","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/person\/c87708c348696a5217714e7c9cf1f6d0"},"headline":"Don’t Chase Your Tail – Learn Design Basics","datePublished":"2022-01-20T23:18:49+00:00","dateModified":"2022-03-02T05:56:54+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/"},"wordCount":633,"publisher":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#organization"},"image":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/","url":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/","name":"Don't Chase Your Tail - Learn Design Basics - Coding Hotdog","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage"},"image":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg","datePublished":"2022-01-20T23:18:49+00:00","dateModified":"2022-03-02T05:56:54+00:00","breadcrumb":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#primaryimage","url":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg","contentUrl":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/charles-deluvio-bYXP-ITv4_s-unsplash-828x1024.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/2022\/01\/20\/dont-chase-your-tail-learn-design-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/"},{"@type":"ListItem","position":2,"name":"Don’t Chase Your Tail – Learn Design Basics"}]},{"@type":"WebSite","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#website","url":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/","name":"Coding Hotdog","description":"Woof, it's hot out there.. come relax and read tech.","publisher":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#organization","name":"Coding Hotdog","url":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/logo\/image\/","url":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/iStock-1170183630-1.jpg","contentUrl":"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5176\/files\/2022\/01\/iStock-1170183630-1.jpg","width":1732,"height":1732,"caption":"Coding Hotdog"},"image":{"@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/#\/schema\/person\/c87708c348696a5217714e7c9cf1f6d0","name":"Scott Bax","url":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/author\/baxs\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/users\/12018"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":18,"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/posts\/84\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/codinghotdog\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}