{"id":2043,"date":"2022-06-13T20:00:14","date_gmt":"2022-06-13T18:00:14","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=2043"},"modified":"2022-06-14T17:48:02","modified_gmt":"2022-06-14T15:48:02","slug":"why-you-should-build-html-prototypes","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/","title":{"rendered":"Why you should build HTML prototypes"},"content":{"rendered":"\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\" style=\"padding-bottom: 0px;\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">We get it. You don\u2019t have so much time sweating your day-to-day job as a hardworking designer, with whatever suffix or prefix you prefer. Let\u2019s play pretend here and say that you actually, for once, have enough time on your hands to build something that is more than opening up another tab inside your design app.<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Marcode - App Builder Plugin for Sketch - Preview 3\" width=\"1200\" height=\"900\" src=\"https:\/\/www.youtube.com\/embed\/ZfyM-_kR4jA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<h2>Foremost, why do I need an HTML prototype?<\/h2>\r\n<p class=\"\">Before doing anything, it\u2019s always a great idea to ask \u201dwhy the frakk do I even need to do this?\u201d\u2026 I always ask that question myself.<\/p>\r\n<p class=\"\">Top of mind, here are a few examples when I go down the HTML way:<\/p>\r\n<h2>Figma, Sketch, or anything else just don\u2019t make the cut<\/h2>\r\n<p class=\"\">All great design tools out there have prototyping functionality. Sometimes though, depending on what you are designing, they do not make the cut.<\/p>\r\n<figure id=\"attachment_2042\" aria-describedby=\"caption-attachment-2042\" style=\"width: 1935px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2042 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch.png\" alt=\"Ouch that had to hurt\" width=\"1935\" height=\"1220\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch.png 1935w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-300x189.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-1024x646.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-768x484.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-1536x968.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-250x158.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-550x347.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-800x504.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-285x180.png 285w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-476x300.png 476w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/figma-ouch-793x500.png 793w\" sizes=\"auto, (max-width: 1935px) 100vw, 1935px\" \/><\/a><figcaption id=\"caption-attachment-2042\" class=\"wp-caption-text\">Ouch that had to hurt<\/figcaption><\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\">Online instability is a fact<\/h2>\r\n<p class=\"\">Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026&nbsp;<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Marcode \u2013 Share HTML Safely\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/sc2QLU6nS6c?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<h2>Don\u2019t even get me started on security<\/h2>\r\n<p class=\"\">If you work within banking, health, government, military or just a place that regards its company secrets, well, you are, again, in the hands of powers you just can\u2019t control. With <a href=\"https:\/\/marketplace.sketch2react.io\/product-tag\/marcode-for-mac-and-windows\/\" target=\"_blank\" rel=\"noopener\">Marcode<\/a>, you get a nicely wrapped HTML project folder that&#8217;s <a href=\"https:\/\/sketch2react.io\/blog\/keep-it-safe-share-locally\/\" target=\"_blank\" rel=\"noopener\">absurdly easy to distribute<\/a>.&nbsp;<\/p>\r\n<p class=\"\">You have 100% control of when, how and where you share and distribute your prototype.&nbsp;<\/p>\r\n<h2 class=\"\">HTML is universal<\/h2>\r\n<p class=\"\">If you work with teams that build websites, hybrid apps or just about anything else that actually uses HTML code, you will do yourself and your team a great favor.<\/p>\r\n<p class=\"\">Not only are you communicating to your developers that you care about code. You actually deliver code. Not everything of course, but just by showing them that you are interested in the very foundation of what your team is building, well, that can\u2019t be bad, right?<\/p>\r\n<p class=\"\">Over the odd 15 years that I have been working solely with design and development, I have not once come upon one single developer who has said \u201dJuan, I really don\u2019t like that you are so interested in code\u201d\u2026<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2001 size-full\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4.png\" alt=\"\" width=\"2425\" height=\"1365\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4.png 2425w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-300x169.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-1024x576.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-768x432.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-1536x865.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-2048x1153.png 2048w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-250x141.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-550x310.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-800x450.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-320x180.png 320w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-533x300.png 533w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/05\/LunacyMarcodeWindows4-888x500.png 888w\" sizes=\"auto, (max-width: 2425px) 100vw, 2425px\" \/><\/a><\/p>\r\n<h2>Design with code constraints<\/h2>\r\n<p class=\"\">Every single designer out there that has some kind of real-world experience will agree that if you know the limits of the materials you build with, you will excel once taking design decisions.<\/p>\r\n<p class=\"\">It\u2019s like being a landscape architect without the proper knowledge of the limits the building blocks of whatever you are designing has. That\u2019s why every single good architectural school has classes covering everything one might need when working in the real world.<\/p>\r\n<p class=\"\">Design schools should focus less on team building activities and more on giving the students at least an introduction to code. All that team building nonsense is something that you anyway get forced down your throat when you start working.<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Marcode \u2013 From Sketch to Xcode Part 4 Teaser\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/tlVgVnHWNTI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<h2>It\u2019s so much fun!<\/h2>\r\n<p class=\"\">Once you start building HTML prototypes, you realize a couple of things:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>HTML is very flexible, you can get away with anything really<\/li>\r\n<li>CSS is mighty fun and makes total sense for designers<\/li>\r\n<li>You can build real iOS and Android apps with our exported HTML<\/li>\r\n<\/ul>\r\n<figure id=\"attachment_1891\" aria-describedby=\"caption-attachment-1891\" style=\"width: 1935px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1891\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1.png\" alt=\"\" width=\"1935\" height=\"1220\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1.png 1935w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-300x189.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-1024x646.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-768x484.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-1536x968.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-250x158.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-550x347.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-800x504.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-285x180.png 285w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-476x300.png 476w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/04\/Showcase-UI-App-Prototype-1-793x500.png 793w\" sizes=\"auto, (max-width: 1935px) 100vw, 1935px\" \/><\/a><figcaption id=\"caption-attachment-1891\" class=\"wp-caption-text\">This began its life as a Figma Community file. We used Convertify.<\/figcaption><\/figure>\r\n<h2 class=\"\">Best thing, you don\u2019t need to learn code actually<\/h2>\r\n<p class=\"\">Here\u2019s the best part. Marcode autogenerates all the relevant HTML, CSS and Javascript for you.<\/p>\r\n<p class=\"\">You already are a <strong>master of visual goodness<\/strong>, and the steps going out to real code are fewer than you might think. Best of all, you do <strong>everything inside either Sketch or Icons8 Lunacy<\/strong>. How about that?<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Marcode - App Builder Plugin for Sketch - Preview Bonanza Part 3000\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/EusPgR-al_Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<h2 class=\"\">Sketcher&#8217;s rejoice<\/h2>\r\n<p class=\"\">If you are using Sketch as your main design tool, you are in for a ride. After 4+ years, we have finally a plugin that actually does all the marking up for you. See even if Marcode is just a few months old, it uses the same <a href=\"https:\/\/code.sketch2react.io\/how-our-markup-works\/\" target=\"_blank\" rel=\"noopener\">Atomic CSS Markup Language<\/a> we have been using in Sketch2React from the very beginning, early 2018.<\/p>\r\n<p class=\"\">Our spanking new Sketch plugin <a href=\"https:\/\/marketplace.sketch2react.io\/product\/app-builder-plugin-for-sketch\/\" target=\"_blank\" rel=\"noopener\">App Builder<\/a> is free, works like magic with Marcode and we will make sure it does the same with future versions of Sketch2React.<\/p>\r\n<p class=\"\">It has never been easier.<\/p>\r\n<h2 class=\"\">Marcode is affordable<\/h2>\r\n<p class=\"\">You don&#8217;t need to be Einstein to realize that we are, if not already, in economic recession.&nbsp;Worldwide inflation, prices going up, salaries not so much. Without naming the competition, since you probably already have a perfect clue, paying <strong>once for software<\/strong> is something not many companies offer. Period.<\/p>\r\n<p class=\"\">That\u2019s why I always, more than happily, push other tools, that do what we do. <a href=\"https:\/\/www.keyshapeapp.com\/\" target=\"_blank\" rel=\"noopener\">Keyshape app<\/a> is one.<\/p>\r\n<p class=\"\">It has gotten to a point where you, in your designer role, will need to step up your game to be relevant and keep your job. It\u2019s clear as a sunny day to me, if you offer more than your competition, you will get more work. On the other hand, this should always be your default mindset.<\/p>\r\n<p class=\"\">Go and learn something new now!<\/p>\r\n<p class=\"\">&nbsp;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"tmpl-contact-11 boldgrid-section dynamic-gridblock\">\r\n<div class=\"container-fluid\">\r\n<div class=\"row has-hover-bg hover-bg-29\" style=\"padding-top: 25px; padding-bottom: 35px; border-radius: 16px; background-color: #fddd03;\" data-hover-bg-class=\"hover-bg-29\" data-hover-bg-color=\"#bbdefb\">\r\n<div class=\"col-md-2 col-sm-1 col-xs-12 col-lg-2\"><\/div>\r\n<div class=\"col-md-5 col-sm-7 col-xs-12 col-lg-5\" style=\"padding: 16px 0px;\">\r\n<h4 class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/047-vinyl.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2099 alignleft\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/047-vinyl.gif\" alt=\"\" width=\"54\" height=\"54\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/047-vinyl.gif 54w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/047-vinyl-48x48.gif 48w\" sizes=\"auto, (max-width: 54px) 100vw, 54px\" \/><\/a><\/h4>\r\n<h4 class=\"\">Did you like this article?<\/h4>\r\n<p class=\"\">We love creating them and would really appreciate a small donation to keep them coming year after year after\u2026<\/p>\r\n<\/div>\r\n<div class=\"col-md-5 col-sm-4 col-xs-12 align-column-center col-lg-5\" style=\"padding: 1em;\">\r\n<div class=\"\">\r\n<p class=\"wow headShake\" style=\"font-weight: 600; width: auto;\" data-wow-duration=\"1s\" data-wow-delay=\"1s\" data-font-weight=\"600\"><a class=\"btn btn-large btn-rounded btn-uppercase btn-color-5\" href=\"https:\/\/paypal.me\/Sketch2ReactAB?country.x=SE&amp;locale.x=sv_SE\" target=\"_blank\" rel=\"noopener\">SUPPORT US<\/a><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>We get it. You don\u2019t have so much time sweating your day-to-day job as a hardworking designer, with whatever suffix or prefix you prefer. Let\u2019s play pretend here and say that you actually, for once, have enough time on your hands to build something that is more than opening up another tab inside your design&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Why you should build HTML prototypes<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":2094,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":70,"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":[166],"tags":[188,6,207,187,36,18,94],"class_list":["post-2043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-android","tag-html","tag-icons8-lunacy","tag-ios","tag-prototypes","tag-sketch-app","tag-sketch-plugin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why you should build HTML prototypes | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026\u00a0\" \/>\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\/why-you-should-build-html-prototypes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why you should build HTML prototypes - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-13T18:00:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-14T15:48:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/why-you-should-build-html-prototypes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Why you should build HTML prototypes\",\"datePublished\":\"2022-06-13T18:00:14+00:00\",\"dateModified\":\"2022-06-14T15:48:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\"},\"wordCount\":956,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png\",\"keywords\":[\"Android\",\"HTML\",\"Icons8 Lunacy\",\"iOS\",\"Prototypes\",\"Sketch App\",\"Sketch Plugin\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\",\"name\":\"Why you should build HTML prototypes - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png\",\"datePublished\":\"2022-06-13T18:00:14+00:00\",\"dateModified\":\"2022-06-14T15:48:02+00:00\",\"description\":\"Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026\u00a0\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why you should build HTML prototypes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; 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":"Why you should build HTML prototypes | Sketch2React Blog","description":"Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026\u00a0","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\/why-you-should-build-html-prototypes\/","og_locale":"en_US","og_type":"article","og_title":"Why you should build HTML prototypes - Sketch2React Blog","og_description":"Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026\u00a0","og_url":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/","og_site_name":"Sketch2React Blog","article_published_time":"2022-06-13T18:00:14+00:00","article_modified_time":"2022-06-14T15:48:02+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png","type":"image\/png"}],"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\/why-you-should-build-html-prototypes\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Why you should build HTML prototypes","datePublished":"2022-06-13T18:00:14+00:00","dateModified":"2022-06-14T15:48:02+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/"},"wordCount":956,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png","keywords":["Android","HTML","Icons8 Lunacy","iOS","Prototypes","Sketch App","Sketch Plugin"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/","url":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/","name":"Why you should build HTML prototypes - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png","datePublished":"2022-06-13T18:00:14+00:00","dateModified":"2022-06-14T15:48:02+00:00","description":"Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it\u2019s actually a great idea to have your entire design team be in the hands of the Internet Gods\u2026\u00a0","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/06\/html-rules.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/why-you-should-build-html-prototypes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Why you should build HTML prototypes"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; 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\/2043","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=2043"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2043\/revisions"}],"predecessor-version":[{"id":2109,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/2043\/revisions\/2109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/2094"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=2043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=2043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=2043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}