{"id":48,"date":"2020-03-09T17:38:49","date_gmt":"2020-03-09T16:38:49","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/03\/09\/demystifying-code-for-designers\/"},"modified":"2020-06-18T07:42:33","modified_gmt":"2020-06-18T07:42:33","slug":"demystifying-code-for-designers","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/","title":{"rendered":"Demystifying Code for Designers"},"content":{"rendered":"
\n


\n<\/figure>\n

T<\/span>he more I think about it, I spend most of my time, as part of Team Sketch2React<\/a>, demystifying code for designers. I think it\u2019s because this is exactly what Fredrik Ward<\/a> has done for me these last two years.<\/p>\n

When we first started working together code was a total mess for me. I had struggled for years and years trying to find the right angle. Something that would open up my brain to a higher level of I-don\u2019t-know-what<\/em> actually ?<\/p>\n

I started countless of online courses about HTML, CSS, React, Swift but never ever finished one of them. There was nothing hooking me up, nothing that actually got me excited about learning code.<\/p>\n

I couldn\u2019t connect the dots.<\/em><\/p>\n

Since I\u2019m a very visual learner being a designer, it needed to be a combination of design tool plus code. Lucky me then ?<\/p>\n

People who don\u2019t know me, when meeting me for the first time, actually think that I\u2019m a developer and not a designer. It\u2019s really weird to me since I don\u2019t see myself like that. I have been a designer for so long (25+ years) it\u2019s become an essential part of who I am. I guess I have evolved. ?<\/p>\n

\n
\n

I actually wrote about 5% of this, the rest is S2R\u00a0?\u2764\ufe0f<\/figcaption><\/figure>\n

Connecting the\u00a0dots<\/h3>\n

I<\/span>t\u2019s all about context. If you can see what code looks like and at the very same time look at it visually, you will \u201dget it\u201d. It\u2019s not just about seeing the structure behind, it\u2019s also about investing time to actually manually build things.<\/p>\n

I would not have learned this much about code if I was using some kind of visual-to-code-wizard that translated my layout and design into workable code automagically. Not in a million years.<\/p>\n

So by Sketch2React<\/a> forcing me to live by a certain amount of rules, I feel like I\u2019m really building something meaningful here. It\u2019s known as the IKEA effect<\/a>.<\/p>\n

That of course gets amplified since I\u2019m also 50% of Team Sketch2React and we develop design to code tools.<\/p>\n

If I get value by using my own tools I know other people will probably too. Which is amazing and one of the things that keeps me going, writing even more articles, doing even more tutorials. Lots of work but I love it.<\/p>\n

You will never, ever hear these words ever\u00a0again<\/h3>\n

\u201dNaaaah man that can\u2019t be done, it\u2019s waaaaaay to complicated\u201d<\/p><\/blockquote>\n

https:\/\/tenor.com\/N4a4.gif<\/a><\/p>\n

Okey honestly first of all, I really have to think really <\/em>hard to even remember when I heard that phrase the last time. I have been working very close to skilled & ambitious developers for a very long time, maybe it\u2019s that. Maybe I\u2019ve just been lucky over the years. Maybe I\u2019m just a big pain in the b*tt and people tend to give up and do what I suggest? That I can believe. <\/em>? ?<\/p>\n

But I know this happens and often it\u2019s not about the technical limitations but due to the fact that your dear developer has better things to do, than trying out that fancy new animation thingie you just suggested. Or that weird sticky bottom bar nav you keep, annoyingly, talking about ALL THE TIME on every single coffee break. Every single BREAK<\/em>. \u2615\ufe0f<\/p>\n

Don\u2019t get stuck in your pre-made\u00a0roles<\/h3>\n

A theory here.<\/em><\/p>\n

I think most times designers don\u2019t venture into experimenting with code because of the pre-made roles we have.<\/p>\n

\u201cI\u2019m a designer so I design stuff. We have these developers and they develop stuff.<\/em>\u201d<\/p>\n

https:\/\/tenor.com\/xvLa.gif<\/a><\/p>\n

For real? Are you really going to let that<\/em> stop you from having some fun in a project? Okey I admit, what I think is fun is of course very subjective\u2026<\/p>\n

I say this from my own experience. Just do it. People will be happy that you take things further, that you experiment a bit. Don\u2019t be corporate zombies ?\u200d\u2642\ufe0f<\/p>\n

What are you afraid of? Rejection? We all are, but it\u2019s just a part of being alive and human.<\/p>\n

But be clear about it. You\u2019re building prototypes.<\/strong> That actually can be used in production, but don\u2019t let your PM know that. Just keep that between you and your developers.<\/p>\n

The fine art of\u00a0talking<\/h3>\n

Yes dear reader, talking is something we designers are REALLY good at. That\u2019s because we\u2019re used to other people scrutinizing & critizing our work all the frakking time<\/em>. ??<\/p>\n

https:\/\/tenor.com\/ZFiy.gif<\/a><\/p>\n

Suddenly EVERYONE is an expert on color, form & function and do the UX please yes (HOW HARD CAN IT BE?!). And WHY IS IT TAKING SO MUCH TIME!!!???\u2026<\/p>\n

The developer in the team says something like \u201cit\u2019s going to undermine the performance of the website\u201d and everyone just accepts this as a fact. See it\u2019s really difficult to argue against things that you don\u2019t understand.<\/p>\n

Your team will \u2764\ufe0f\u00a0you<\/h3>\n

Here\u2019s what you need to do; build it yourself with real code and show it to your team.<\/p>\n

Chances are, they will see what you see and you\u2019ll inspire your team to take things a bit further code-wise than before. Of course you will not always have the luxury to spend a couple of days doing real code prototypes, but from time to time these windows open.<\/p>\n

Go get them tiger!<\/p>\n","protected":false},"excerpt":{"rendered":"

The more I think about it, I spend most of my time, as part of Team Sketch2React, demystifying code for designers. I think it\u2019s because this is exactly what Fredrik Ward has done for me these last two years. When we first started working together code was a total mess for me. I had struggled… Read More »Demystifying Code for Designers<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[168],"tags":[118,146,147,148,55],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-miscellaneous","tag-design-to-code","tag-designdigest","tag-designers-should-not-code","tag-should-designers-code","tag-sketch2react"],"yoast_head":"\nDemystifying Code for Designers | Sketch2React Blog<\/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:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demystifying Code for Designers - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"The more I think about it, I spend most of my time, as part of Team Sketch2React, demystifying code for designers. I think it\u2019s because this is exactly what Fredrik Ward has done for me these last two years. When we first started working together code was a total mess for me. I had struggled… Read More »Demystifying Code for Designers\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-09T16:38:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:42:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Demystifying Code for Designers\",\"datePublished\":\"2020-03-09T16:38:49+00:00\",\"dateModified\":\"2020-06-18T07:42:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\"},\"wordCount\":914,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg\",\"keywords\":[\"Design To Code\",\"Designdigest\",\"Designers Should Not Code\",\"Should Designers Code\",\"Sketch2react\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\",\"name\":\"Demystifying Code for Designers - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg\",\"datePublished\":\"2020-03-09T16:38:49+00:00\",\"dateModified\":\"2020-06-18T07:42:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demystifying Code for Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips & tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demystifying Code for Designers | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/","og_locale":"en_US","og_type":"article","og_title":"Demystifying Code for Designers - Sketch2React Blog","og_description":"The more I think about it, I spend most of my time, as part of Team Sketch2React, demystifying code for designers. I think it\u2019s because this is exactly what Fredrik Ward has done for me these last two years. When we first started working together code was a total mess for me. I had struggled… Read More »Demystifying Code for Designers","og_url":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/","og_site_name":"Sketch2React Blog","article_published_time":"2020-03-09T16:38:49+00:00","article_modified_time":"2020-06-18T07:42:33+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Demystifying Code for Designers","datePublished":"2020-03-09T16:38:49+00:00","dateModified":"2020-06-18T07:42:33+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/"},"wordCount":914,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg","keywords":["Design To Code","Designdigest","Designers Should Not Code","Should Designers Code","Sketch2react"],"articleSection":["Miscellaneous"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/","url":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/","name":"Demystifying Code for Designers - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg","datePublished":"2020-03-09T16:38:49+00:00","dateModified":"2020-06-18T07:42:33+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GFpz3-bXLxcrqFj53TsWyg.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/demystifying-code-for-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Demystifying Code for Designers"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips & tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":366,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions\/366"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}