{"id":4480,"date":"2016-11-10T21:44:36","date_gmt":"2016-11-10T21:44:36","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4480"},"modified":"2016-11-11T16:45:00","modified_gmt":"2016-11-11T16:45:00","slug":"craftsmanship-design-and-code","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/","title":{"rendered":"Craftsmanship, design, and code"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A while back I received the following question from someone on Twitter:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u2026 If you don\u2019t mind, I wanted to ask you a specific question thats been bothering me for a long time. There are front-end developers and there are UI\/UX designers. As I understand it, UI\/UX designers come up with how things should look and front-end developers implement their vision. What if I can design and code? What if I want to conceive experiences and implement them? Is it true that most companies don\u2019t encourage that? What would you suggest?<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When I read that message, dozens of articles I\u2019d read in the past came to mind. If you search Google, you\u2019ll see that there are tons of articles on the topic of whether designers should learn to code or whether developers should learn to design. All these articles embody different sides of the argument.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Each one of those articles make valid points. However, a recurrent theme among many of these articles is <em>how can a person optimize their skill set to be hired at a company.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This kind of perspective encourages developers and designers to hone their skills, not for themselves, but for companies. And that brings me to my main point:<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"> focus on what you enjoy doing and make it part of your craft.<\/strong><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Focus on what you enjoy doing and make it part of your craft.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Craft means\u2026 To make a product with care, skill, and ingenuity.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Be a craftsman.<\/strong> A craftsman is someone who sees what they do as a science and an art. They create products with passion, pride, and care. And they are constantly searching for ways to improve their craft. Their key metric is forward progress over time.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">An example of a craftsman is Nobuo Okano, a Japanese master craftsman who spent the last 30 years perfecting the art of restoring books.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/jau8ylOySJk\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Regardless of whether he\u2019s restoring a hundred or a thousand page book, Nobuo goes page by page unfolding creases with a tweezer and flattening the paper with an iron.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">He painstakingly glues loose pages onto new sheets and trims them down to fit the books. It\u2019s clear from his attention to detail that Nobuo has deep respect for his craft.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another example of a craftsman is Antonio Stradivari, universally recognized as one of the most famous violin makers in the world.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Stradivarius violins are known for their tone, responsiveness, elegance of design, and precision.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Violin.jpeg\" alt=\"violin\" width=\"1200\" height=\"800\" class=\"aligncenter size-full wp-image-4481\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Violin.jpeg 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Violin-600x400.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Violin-768x512.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The violins were made with utmost respect and care. From the wood used to the design of the violin body, Stradivari paid attention to every small detail. Stradivari progressed so far in his craft that scientists even <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.springer.com\/about+springer\/media\/springer+select?SGWID=0-11001-6-1427646-0\" target=\"_blank\">today<\/a> are still making discoveries about his process.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Designers and developers can also be craftsmen<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you look at designers like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Paul_Rand\" target=\"_blank\">Paul Rand<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.apple.com\/pr\/bios\/jonathan-ive.html\" target=\"_blank\">Johnny Ive<\/a> and developers like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/brendaneich.com\/\" target=\"_blank\">Brendan Eich<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.paulirish.com\/\" target=\"_blank\">Paul Irish<\/a>, they all treat designing and coding as part of their craft. Their secret sauce is that they\u2019re constantly exploring their domain and looking for ways to leave their mark.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Progress is the metric of success for craftsman. Paul Rand, a renown American graphics designer, began as a part timer at a design syndicate that supplied graphics to various magazines and newspapers.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Progress is the metric of success for craftsman.\"<\/p><\/span><\/blockquote>\n<div id=\"attachment_4482\" style=\"width: 2010px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4482\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Early-Paul-Rand.png\" alt=\"early-paul-rand\" width=\"2000\" height=\"1224\" class=\"size-full wp-image-4482\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Early-Paul-Rand.png 2000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Early-Paul-Rand-600x367.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Early-Paul-Rand-768x470.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Early-Paul-Rand-1500x918.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><p id=\"caption-attachment-4482\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Paul_Rand#\/media\/File:P_rand_ex.jpg\">Early advertisement design by Paul Rand<\/a>.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Years later, Paul Rand would help pioneer an era of design lead businesses. He went on to design the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/stocklogos.com\/topic\/paul-rands-logos\" target=\"_blank\">logos of companies<\/a> like IBM, UPS, and ABC.<\/p>\n<div id=\"attachment_4483\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4483\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Paul-Rand-IBM-Logo.jpeg\" alt=\"paul-rand-ibm-logo\" width=\"1600\" height=\"900\" class=\"size-full wp-image-4483\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Paul-Rand-IBM-Logo.jpeg 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Paul-Rand-IBM-Logo-600x338.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Paul-Rand-IBM-Logo-768x432.jpeg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Paul-Rand-IBM-Logo-1500x844.jpeg 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><p id=\"caption-attachment-4483\" class=\"wp-caption-text\">Paul Rand designed the logo for IBM. This was a variation for a marketing campaign.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another example is Johnny Ive. He started off designing products like microwaves, ovens, and toothbrushes. Below is a sketch of a power drill found in his early work. Today Ives is the Chief Design Officer at Apple and is responsible for the industrial design of Apple products like the Macbook, iPod, and iPhone.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Sketch-of-power-drill.jpeg\" alt=\"sketch-of-power-drill\" width=\"1199\" height=\"806\" class=\"aligncenter size-full wp-image-4484\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Sketch-of-power-drill.jpeg 1199w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Sketch-of-power-drill-600x403.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Sketch-of-power-drill-768x516.jpeg 768w\" sizes=\"auto, (max-width: 1199px) 100vw, 1199px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designers and developers who treat what they do as part of their craft, work to improve over time but most importantly, they improve for <em>themselves<\/em>.<\/strong><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The only good measure of progress is where you are today versus where you were a year ago.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I see a lot of people, constantly looking over their shoulders and comparing themselves to their peers. Often times, those who perceive themselves as behind, panic. And those who feel ahead, become complacent. The only good measure of progress is where you are today versus where you were a year ago. Everyone defines and owns their craft. It\u2019s impossible to make a one-to-one comparison between two people. Also, seeing how much you changed and improved over time can serve as a huge source of inspiration.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Everyone defines and owns their craft.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">So here is my advice for designers and developers who want to improve their craft<\/h2>\n<div id=\"attachment_4485\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4485\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Be-a-craftsman.png\" alt=\"be-a-craftsman\" width=\"800\" height=\"555\" class=\"size-full wp-image-4485\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Be-a-craftsman.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Be-a-craftsman-600x416.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Be-a-craftsman-768x533.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-4485\" class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.flickr.com\/photos\/adavey\/5075599607\/in\/photolist-8JvLW4-7Wgz4s-8HTTPt-qJFjeU-4ukoo1-aERVFq-qLpThC-aDhkq3-4Xzsnq-5h5BfS-npuRaU-odNTkT-pc5baf-pXN7V1-qRz9Wb-f8B8ZE-6s9b9c-5jQUf-dcEK1H-qUDjDr-riVbre-Gz1AjM-hvA7Js-5h12SE-h1SegV-njnMrc-qU1Qai-cxLeof-iWGVge-a57mG6-kn1YtM-kn13qt-6Uqbwu-fbUW3N-eewENC-r3gmU4-mE459b-h1R8My-fwVgr1-h1Riis-NLMuA-h1RvKQ-pWMd3n-s23a8m-qUqCP1-KPD8d-qCCXMQ-qCm2wP-f8B8oL-i25MKx\">Be a craftsman and improve your craft.<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As designers and developers, we can always improve the work that we do.<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Even if it\u2019s not part of your craft, learn more about your counterpart. If you\u2019re a designer, learn more about development. It will help you understand the practical limitations that developers face. If you\u2019re a developer, learn more about design. It will help you better empathize with the people who use your products.<\/li>\n<li>Read more good code. You\u2019ll pick up good habits and internalize design patterns that will be useful as you architect your own code.<\/li>\n<li>Look at more designs. The more inspiration you look at the more diverse your designs will be.<\/li>\n<li>Take care of your code. If you\u2019re working with many other developers, write more unit tests. Unit tests help others understand what your code does and how it should work.<\/li>\n<li>Study more design systems. It\u2019s important to understand how design is applied to products.<\/li>\n<li>Write less code. Spend more time thinking about what you want to achieve and how. Avoid verbose code with unnecessary logic.<\/li>\n<li>Spend more time analyzing the impact of your designs before going back to the drawing board for the next iteration. Use quantitative analysis like user interviews and qualitative analysis like instrumentation to understand how people are using your product.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The list goes on forever. However there is a common theme among all of the bullet points: <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">care about your work.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whether you are a designer, developer, or both, treat what you do as part of your craft. Become so damn good that people can\u2019t ignore you.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.freecodecamp.com\/craftsmanship-design-and-code-6d93eba3e7fe#.swfbroaaq\" target=\"_blank\">Jonathan's Medium profile<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A while back I received the following question from someone on Twitter: \u2026 If you don\u2019t mind, I wanted to ask you a specific question thats been bothering me for a long time. There are front-end developers and there are UI\/UX designers. As I understand it, UI\/UX designers come up with how things should look and front-end developers implement their&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":22,"featured_media":4489,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"An analysis of craftsmanship in different artists, designers and coders. Jonathan shares his advice on how to own your own craft in what you do.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Craftsmanship, Design, and Code - Define and Own Your Craft\" \/>\n<meta property=\"og:description\" content=\"An analysis of craftsmanship in different artists, designers and coders. Jonathan shares his advice on how to own your own craft in what you do.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-10T21:44:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-11T16:45:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/craft.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/craft.png\",\"width\":1600,\"height\":800,\"caption\":\"craft\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/\",\"name\":\"Craftsmanship, Design, and Code - Define and Own Your Craft\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#primaryimage\"},\"datePublished\":\"2016-11-10T21:44:36+00:00\",\"dateModified\":\"2016-11-11T16:45:00+00:00\",\"description\":\"An analysis of craftsmanship in different artists, designers and coders. Jonathan shares his advice on how to own your own craft in what you do.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\"},\"headline\":\"Craftsmanship, design, and code\",\"datePublished\":\"2016-11-10T21:44:36+00:00\",\"dateModified\":\"2016-11-11T16:45:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/craftsmanship-design-and-code\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\",\"name\":\"Jonathan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4d601181a5f57aac710c98e229d6a88d13ef8a8916903d5fb633c7283bbcc14b?s=96&d=mm&r=g\",\"caption\":\"Jonathan\"},\"description\":\"Bringing design thinking to engineering, closing the gap between the qualitative and quantitive. Follow me on Twitter or follow my writing on Medium.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=4480"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/4489"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=4480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=4480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=4480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}