
{"id":4678,"date":"2021-04-12T15:43:00","date_gmt":"2021-04-12T13:43:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/what-is-the-difference-between-a-web-developer-and-a-web-designer\/"},"modified":"2022-12-02T12:49:24","modified_gmt":"2022-12-02T11:49:24","slug":"what-is-the-difference-between-a-web-developer-and-a-web-designer","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-the-difference-between-a-web-developer-and-a-web-designer\/","title":{"rendered":"What\u2019s the Difference Between a Web Designer and a Web Developer?"},"content":{"rendered":"<p>You may have noticed that there\u2019s still a great deal of confusion surrounding the job roles <strong>web designer<\/strong> vs <strong>web developer<\/strong>.<\/p>\n<p>If you\u2019re thinking about <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/courses\/become-a-web-developer\/\">becoming a web developer<\/a>, it can be hard to know where to start.<\/p>\n<p>To help clear things up a bit, in this article I\u2019m going to show the difference between a web developer and a web designer by first defining each role, looking at the tools and resources needed for each, and tear down the personality types which suit one or the other.<\/p>\n<p>By the end of this post you should know not only the difference between web development and web design (and believe me, there are big differences!), but also which career choice is the right one for you.<\/p>\n<p>If you\u2019d like to focus on one topic in particular, simply select it from the list below and jump straight to it:<\/p>\n<ol>\n<li><a href=\"#definitions-of-a-web-developer-and-a-web-designer\">Definitions of a web developer and a web designer<\/a><\/li>\n<li><a href=\"#what-kind-of-salaries-can-web-designers-and-web-developers-expect-to-earn\">What kind of salaries can web designers and web developers expect to earn?<\/a><\/li>\n<li><a href=\"#what-tools-do-web-designers-and-web-developers-use\">What tools do web designers and web developers use?<\/a><\/li>\n<li><a href=\"#how-do-web-designers-and-web-developers-portfolios-differ\">How do web designers\u2019 and web developers\u2019 portfolios differ?<\/a><\/li>\n<li><a href=\"#do-web-developers-and-designers-need-to-be-more-right-brained-or-left-brained\">Do web developers and designers need to be more right-brained or left-brained?<\/a><\/li>\n<li><a href=\"#web-development-vs-web-design-which-career-is-for-you\">Web development or web design: Which career is for you?<\/a><\/li>\n<\/ol>\n<h2 id=\"definitions-of-a-web-developer-and-a-web-designer\">1. Definitions of a web developer and a web designer<\/h2>\n<p>A useful way of illustrating the difference between a web developer and a web designer, is framing the comparison through something we all know.<\/p>\n<p>So, I want you to imagine a web developer and a web designer getting together to build a car.<\/p>\n<p>A <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/tutorials\/web-development-for-beginners\/introduction-to-web-development\/\"><strong>web developer<\/strong><\/a> would be responsible for using various components like the engine, transmission, wheels, etc. to construct a fully-functional car that is error-free in its technical aspects.<\/p>\n<p>A\u00a0<strong>web designer<\/strong> would be responsible for the aesthetic design of the car (the comfort of the seats, the layout of the dashboard, etc.) as well as the convenience in driving and riding in the car.<\/p>\n<p>Makes sense, right?<\/p>\n<p>Just as ostriches and zebras travel together in nature to survive, web developers and designers have a symbiotic relationship in working together to create an amazing product.<\/p>\n<p>Maybe you&#8217;d like us to explain more about the differences in video form:<\/p>\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<\/style>\n<div class=\"embed-container\"><iframe src=\"https:\/\/www.youtube.com\/embed\/pYfSwri69wc\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<div style=\"display: block; height: 20px; width: 100%;\"><\/div>\n<h2 id=\"what-kind-of-salaries-can-web-designers-and-web-developers-expect-to-earn\">2. What kind of salaries can web designers and web developers expect to earn?<\/h2>\n<p>The big question: money. According to <a href=\"https:\/\/www.glassdoor.com\/Salaries\/web-developer-salary-SRCH_KO0,13.htm\" target=\"_blank\" rel=\"noopener\">Glassdoor<\/a>, the median annual pay for web developers is $89,000 (in the US, as of December 2023), while <a href=\"https:\/\/www.glassdoor.com\/Salaries\/web-designer-salary-SRCH_KO0,12.htm\" target=\"_blank\" rel=\"noopener\">the median annual pay for web designers is around $81K<\/a>.<\/p>\n<p>However, this is subject to many variables including location, experience, and skillsets. You can learn more in <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/how-much-will-i-earn-as-a-web-developer\/\">this guide to web developer salaries around the world<\/a>. Web designer salaries are also high, but it is <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/how-much-will-i-earn-as-a-ux-designer\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">broken down by various factors<\/a>.<\/p>\n<h3 id=\"a-web-developer-working-at-his-laptop-at-homeenbloguploadsweb-developer-working-from-homejpg-if-youre-a-web-developer-or-designer-you-may-well-enjoy-a-flexible-working-schedule\"><img decoding=\"async\" title=\"If you're a web developer or designer, you may well enjoy a flexible working schedule\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/web-developer-working-from-home.jpg\" alt=\"A web developer working at his laptop at home\" \/><\/h3>\n<h2 id=\"what-tools-do-web-designers-and-web-developers-use\">3. What tools do web designers and web developers use?<\/h2>\n<p>A key way of splitting the difference between a web developer and a web designer, is which tools they are using in their day-to-day jobs.<\/p>\n<h3>Web development tools<\/h3>\n<p>Web developers work with programming languages like <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/tutorials\/web-development-for-beginners\/introduction-to-html\/\">HTML<\/a>, <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/tutorials\/web-development-for-beginners\/an-introduction-to-css-and-responsive-webpages\/\">CSS<\/a>, and <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/tutorials\/web-development-for-beginners\/an-introduction-to-javascript\/\">Javascript<\/a> to create websites and web applications.<\/p>\n<p>They will also most likely utilize other languages to set up email services, user authentication, databases, and other technical aspects of websites.<\/p>\n<p>To do this, developers use <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/7-essential-tools-for-front-end-development\/\">several essential tools<\/a> like text editors, command line interface, and <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/whats-version-control-and-why-do-i-need-it\/\">version control systems<\/a> to build the technical information (the code) that will present the data.<\/p>\n<h3>Web design tools<\/h3>\n<p>Web designers are not primarily responsible for knowing how the code works<em>\u2014<\/em>but making sure it\u2019s aesthetically pleasing and user-friendly for website visitors.<\/p>\n<p>They will utilize graphics design software\u2014including products like Adobe Photoshop, Illustrator, Inkscape (an excellent alternative to Photoshop), and GIMP.<\/p>\n<p>Ultimately, they will design the layout of the website through constructing prototypes and <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/how-to-create-your-first-wireframe\/\" target=\"_blank\" rel=\"noopener\">wireframes<\/a>. Designers control the flow of information and can even be responsible for website analytics.<\/p>\n<p><img decoding=\"async\" title=\"Both web design and web development offer opportunities to work in tech and startup environments\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/web-designer-working-with-post-it-notes.jpg\" alt=\"A web designer working on a glass wall with post-it notes\" \/><\/p>\n<h2 id=\"how-do-web-designers-and-web-developers-portfolios-differ\">4. How do web designers\u2019 and web developers\u2019 portfolios differ?<\/h2>\n<p><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/ux-design-portfolio-tips\/\">A portfolio is very important<\/a>\u2014whether you\u2019re a developer or designer. Unlike that disclaimer you see on your stock investments, past performance is a pretty good indicator of future performance.<\/p>\n<p>A good developer and designer will showcase their skillsets and experience for future employers and clients, but may make use of different services to do this.<\/p>\n<h3>Web developer portfolios<\/h3>\n<p>Developers will <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-do-developers-use-github-for-heres-why-its-vital\/\">primarily rely on GitHub<\/a> to display their awesome repositories of coding work. It\u2019ll demonstrate how well the developer can refactor and abstract their code to be elegant and readable to other developers.<\/p>\n<p>There&#8221;s also a <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/web-developer-portfolio\/\">huge variety of other developer portfolio websites<\/a> out there.<\/p>\n<p>Cloud-based website-hosting services like <strong>AWS<\/strong> (Amazon Web Services) and <strong>Heroku.com<\/strong> can be used at times to display static websites and web applications that developers have created.<\/p>\n<h3>Web design portfolios<\/h3>\n<p>Designers have their own options to show off their ingenuity through websites like <strong>Behance.com<\/strong> and <strong>Dribble.com<\/strong>. These websites offer the ability to present designers\u2019 expertise in color schemes, graphic design ability, and creativity. To give you more of an idea, we&#8217;ve collected <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/ux-portfolio-examples-inspiration\/\">nine eye-catching UX design portfolios<\/a> for you to peruse.<\/p>\n<p>Even more important than utilizing these resources is creating a <strong>personal portfolio site<\/strong> that you can showcase your work. By creating a personalized website, you have control over how your information is presented and received, without inviting the interference that comes up at times by hosting your content on a third-party website.<\/p>\n<p>Nevertheless, don\u2019t neglect these other resources and make sure they are utilized in some capacity.<\/p>\n<p><img decoding=\"async\" title=\"Both web developers and web designers require creative skills\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/web-designer-working-on-designs.jpg\" alt=\"A web designer working on some of her designs and smiling\" \/><\/p>\n<h2 id=\"do-web-developers-and-designers-need-to-be-more-right-brained-or-left-brained\">5. Do web developers and designers need to be more \u201cright-brained\u201d or \u201cleft-brained\u201d?<\/h2>\n<p>When looking at the difference between a web developer and a web designer, the \u201cright-brained\u201d (imaginative) vs \u201cleft-brained\u201d (logical) comparison is occasionally made.<\/p>\n<p>It is said that people who think more linearly and logically are left-brain dominant and will enjoy and be more comfortable with web development, while people who enjoy creativity and possess an artistic nature are right-brain dominant and will flourish in web design.<\/p>\n<p>However, there have been studies done that show people don\u2019t have a dominant part of their brain<em>\u2014<\/em>as Neil deGrasse Tyson put it:<\/p>\n<blockquote><p>\u201cDon\u2019t call me left brained, right brained. Call me human.\u201d<\/p><\/blockquote>\n<p>Don\u2019t think you\u2019re predisposed to do better in one area than another<em>\u2014<\/em>an artist can be as proficient at web development as a mathematician can be as creatively skilled at web design. This segues excellently into my final point.<\/p>\n<h2 id=\"web-development-vs-web-design-which-career-is-for-you\">6. Web development vs. web design: which career is for you?<\/h2>\n<p>Referring back to my example of a symbiotic relationship, an ostrich cannot become a zebra, as much as a zebra can become an ostrich. The ostrich must rely on the zebra\u2019s hearing as much as the zebra must rely on the ostrich\u2019s eyesight.<\/p>\n<p>However, you\u2019re in luck, as a web developer can be a web designer as much as a designer can choose to be a developer.<\/p>\n<p>In the real world, you\u2019ll find both career choices can possibly require you to have adequate knowledge and a functional aptitude of the other realm. <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/how-to-get-your-first-web-developer-job-the-ultimate-guide-for-junior-developers\/\">Successful developers<\/a> will know how to use color schemes and <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/beginners-guide-to-typography\/\">typography<\/a> in <a href=\"https:\/\/www.invisionapp.com\/inside-design\/how-to-wireframe\/\" rel=\"noopener\">creating wireframes and layouts<\/a>, generating the template from which to build the elements with code.<\/p>\n<p>Successful designers will understand basic HTML, CSS, and <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/how-long-does-it-take-to-learn-javascript\/\" target=\"_blank\" rel=\"noopener\">Javascript<\/a> techniques to understand the technical limitations of their creative layouts and user experience specifications.<\/p>\n<p>If you want to read more about how web developers and designers can work hand-in-hand on a project, then why not hear all about it from the ostrich and zebra&#8217;s mouths? We interviewed <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/magazine\/alumni-spotlight-travel-website\/\" target=\"_blank\" rel=\"noopener\">CareerFoundry development and design graduates Bruno and Nim<\/a> about their experience working redesigning a travel website for their very first client.<\/p>\n<h2>7. Final thoughts<\/h2>\n<p>I must admit, I went down <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/become-a-web-developer\/\">the web development route<\/a> with CareerFoundry and it was an amazing experience that laid a solid foundation for me.<\/p>\n<p>I built a portfolio website and an e-commerce site from scratch\u2014I didn\u2019t know anything about coding or web development before I started. I enjoyed their course structure, community of mentors and students, and experience so much that I am also looking to go through their web design program.<\/p>\n<p>However, I wasn\u2019t paid to recommend CareerFoundry and this isn\u2019t an endorsement hiding in the disguise of an article for their program\u2014I strongly recommend doing your own research before making a decision.<\/p>\n<p>Just remember, you don\u2019t have to choose to be an ostrich or zebra. You can be both\u2014an \u201costribra\u201d or a \u201czebrich.\u201d You choose.<\/p>\n<p>Interested in becoming a web developer? Build your very first site from scratch in just five tutorials with this <strong><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/tutorials\/web-development-for-beginners\/\">Coding for Beginners Course<\/a>.\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wondering what the difference is between web design and web development? Well, who better to ask than a real-life web developer? Eric explains the different tools, skills and salaries of the two professions.<\/p>\n","protected":false},"author":9,"featured_media":580,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-4678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=4678"}],"version-history":[{"count":2,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4678\/revisions"}],"predecessor-version":[{"id":30686,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/4678\/revisions\/30686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/580"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=4678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=4678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=4678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}