{"id":1664,"date":"2022-02-24T10:11:37","date_gmt":"2022-02-24T10:11:37","guid":{"rendered":"https:\/\/shuffle.dev\/blog\/?p=1664"},"modified":"2022-02-24T18:31:32","modified_gmt":"2022-02-24T18:31:32","slug":"design-in-development-all-you-need-to-know","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/","title":{"rendered":"Design in development \u2013 all you need to know"},"content":{"rendered":"\n<p class=\"mb-6 leading-loose\"><em>Read the guest post by UXPin \u2013 a code-based prototyping software and find out more about a design process, so you can finally understand designers with whom you work.<\/em><\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">With so many no-code <a href=\"https:\/\/shuffle.dev\/\" class=\"text-brand-blue underline hover:no-underline\">drag-and-drop website builders<\/a>, anyone can design a beautiful website, but does that make you a designer? While these builders make web design more accessible, understanding fundamental design principles can enhance your design and development skills.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Many people mistake design as the process of making a website look good. While there is some truth in this, designers do a lot of work before they even start designing a website, application, game, or other digital product.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Here are 10 things every front-end developer must know to design better experiences for their users.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/3AA5D4kzvgnGHYLrJ_nINv_Yrft-UfcOZJnzTF5xINjkWt3PxJL6tAlLuucXlCFQBXzvu__wVIDGi6v1xtdtVskB51bCXPJY5M1ot0oflcpb4z9PK_MBEDr_n0pfYUxMq2WA6hW5\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Understanding the UX Design Process<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">User experience (UX) design is the process of designing a website or digital product that aligns with the people who will use it. UX designers follow a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/\" class=\"text-brand-blue underline hover:no-underline\">design thinking process<\/a> to identify user problems and ideate solutions.&nbsp;<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">There are five stages of the design thinking process:<\/p>\n\n\n\n<ol class=\"list-decimal mb-4\"><li class=\"mb-2 ml-8\"><strong>Empathize:<\/strong> Discover what your users need<\/li><li class=\"mb-2 ml-8\"><strong>Define:<\/strong> Determine the problem you want to solve<\/li><li class=\"mb-2 ml-8\"><strong>Ideate:<\/strong> Develop possible solutions to users&#8217; problems<\/li><li class=\"mb-2 ml-8\"><strong>Prototype:<\/strong> Create prototypes<\/li><li class=\"mb-2 ml-8\"><strong>Test:<\/strong> Test your prototypes with users &amp; stakeholders<\/li><\/ol>\n\n\n\n<p class=\"mb-6 leading-loose\">Designers use these five stages more like principles rather than a sequential, step-by-step process. For example, designers might create a quick prototype while trying to visualize and <em>define<\/em> the problem.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">The primary goal of design thinking is to get designers into a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/#h-what-is-human-centered-design\" class=\"text-brand-blue underline hover:no-underline\">human-centered mindset<\/a> to empathize with users and build a digital product that meets their needs.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Conducting Research<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">UX designers spend a lot of time researching before they start designing. Typical research includes:<\/p>\n\n\n\n<ul class=\"list-disc mb-4\"><li class=\"mb-2 ml-8\"><strong>User research:<\/strong> Understanding your customers, their pain points, habits, key demographics, how they use your product, and more<\/li><li class=\"mb-2 ml-8\"><strong>Market research:<\/strong> Understanding your product or website&#8217;s industry or niche\u2013for example, fitness, cooking, or finance<\/li><li class=\"mb-2 ml-8\"><strong>Competitor research:<\/strong> Learning who your competitors are, their product, what they offer, their pricing, what customers love and hate, and more<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter mt-8 mb-8\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/inRTnH6z8Vq9Fou4dnPKQu_O0FOF5TrQ6rv-TcuUnL4xoL7RQ8QDOPtRSe0qwyiX_k_rpcX5KkyMVinOFibGp8ex9U7R0pLNIgBcREPJQu8-FWBN1uPtigfQDetI6qoixR9u6Qi_\" alt=\"\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">Why is Research Important?<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\">Research is crucial for the design process because it determines what features your product or website needs, who you&#8217;re designing for, and how to build it. These details are essential because design and messaging impacts user demographics differently.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">For example, a website selling men&#8217;s business shoes appeals to a completely different market and demographic than girl&#8217;s sneakers. Both websites sell shoes, but the design, messaging, user experience, and possibly payment methods will be completely different.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">You can use the same <a href=\"https:\/\/shuffle.dev\/bootstrap\" class=\"text-brand-blue underline hover:no-underline\">Bootstrap template<\/a> to design your website in Shuffle, but if you don&#8217;t edit it to align with your target audience, you&#8217;re designing for nobody. <strong><em>Always<\/em><\/strong> conduct research before you start designing your product or website.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">UI Design<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">People often mistakenly use the terms interchangeably, but there is a clear <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-vs-ui-differences\/\" class=\"text-brand-blue underline hover:no-underline\">difference between UI vs. UX design<\/a>.<\/p>\n\n\n\n<ul class=\"list-disc mb-4\"><li class=\"mb-2 ml-8\"><strong>UX design:<\/strong> Encompasses everything to do with the user experience. How do people feel and react when using a digital product or website.<\/li><li class=\"mb-2 ml-8\"><strong>UI design:<\/strong> Focuses on the interface&#8217;s visual elements like buttons, color, icons, typography, images, and other content. UI design also includes interactivity like animations and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" class=\"text-brand-blue underline hover:no-underline\">microinteractions<\/a>.<\/li><\/ul>\n\n\n\n<p class=\"mb-6 leading-loose\">Both designers apply the same UX design methods and principles. A UI designer is simply a specialist UX designer.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">The beauty of a website builder is that a professional UI design has already done most of the work for you. <em>But this doesn&#8217;t mean you can&#8217;t make mistakes!<\/em><\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Here are some UI design tips to ensure you create beautiful web pages without compromising the user experience.<\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">Be Consistent<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" class=\"text-brand-blue underline hover:no-underline\">Design consistency<\/a> is one of the most important UX principles. Inconsistencies can create confusion, introduce usability issues, and even adversely affect your brand.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">For example, when you decide on a color palette, stick to those colors and how you use them. If you make one CTA red, they must all be red (including text links) so that users can quickly identify where to click.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Consistency extends to your copywriting, icon set, layouts, and other visual elements.<\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">Keep it Simple<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\">Minimalist UI design doesn&#8217;t only look good; it plays a vital role in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\" class=\"text-brand-blue underline hover:no-underline\">design psychology and reducing cognitive load<\/a>\u2013the mental effort required to process and learn information.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Website builders are fantastic because they give you UI templates that include a range of elements and components for any number of possibilities.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">If you&#8217;re using one of these templates, always be ruthless in removing the elements and components you won&#8217;t use. For example, if you&#8217;re building a portfolio or corporate website, you don&#8217;t need search functionality or user login in the main navigation.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Always try to reduce content, copywriting, and UI elements to give users <strong><em>ONLY<\/em><\/strong> what they need to complete a task\u2013taking us back to the importance of research. Who are your users? What do they need to complete a task?<\/p>\n\n\n\n<h3 class=\"has-text-align-center\" class=\"mb-6 text-2xl font-bold\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"251\" src=\"https:\/\/lh6.googleusercontent.com\/X-oYhjeoZWgsKsZLucCkwL63CrcPAEeawkftqinqvUG_oIzyMzpgMBf4Eq1Cm907dxIH1bDSlEFbpMdCBSCVXW5J4qjS55f8wjQBtqyuuQ3ZR3j3SiqtyUSClEt7ECGsx2KWfP4h\"><\/h3>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">Responsive Design<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\">A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" class=\"text-brand-blue underline hover:no-underline\">mobile-first<\/a> approach is critical for modern responsive website design. Mobile-first also helps with other UI principles like minimalist UIs and consistency.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Website builders automatically generate responsive layouts, but you should optimize these as much as possible. For example, ensure that CTAs and other critical content appear above the fold.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Following a mobile-first design strategy helps you prioritize the most important content while keeping UIs minimalist and uncluttered. <a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/responsive-design\" class=\"text-brand-blue underline hover:no-underline\">Google also prioritizes mobile-friendly content<\/a> for mobile search results, so responsive design is great for SEO.<\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\">Accessibility<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-apps\/\" class=\"text-brand-blue underline hover:no-underline\">Accessibility<\/a> is another crucial factor UX\/UI designers must consider. The most significant of which is contrast and color. Before committing to color combinations, always use a <a href=\"https:\/\/color.a11y.com\/?wc3\" class=\"text-brand-blue underline hover:no-underline\">color contrast tool<\/a> to ensure your content is accessible.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">We recommend reading <a href=\"https:\/\/uxmovement.com\/buttons\/the-myths-of-color-contrast-accessibility\/\" class=\"text-brand-blue underline hover:no-underline\">The Myths of Color Contrast Accessibility<\/a> as a primer for Web Content Accessibility Guidelines (<a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" class=\"text-brand-blue underline hover:no-underline\">WCAG<\/a>) to avoid common mistakes.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Accessibility also includes typography and font size. Always preview your content on multiple devices, including mobile, desktop, and tablet, to ensure text is clear and legible.<\/p>\n\n\n\n<h3 class=\"mb-6 text-2xl font-bold\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/i9PYMw-9pZqSqsJJqvdvvXhN67UrQPXtsi7_dNIO3aP3Hl5d1yIWG0JuwhVGcN5vUFonWDB9m5jXRNsqlWfUrUPOfINDLiX-rUlsfyShleNi6_n9VMFLVOYkF_g-tRYTTg16eFM0\" width=\"624\" height=\"417\">UI Patterns<\/h3>\n\n\n\n<p class=\"mb-6 leading-loose\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/\" class=\"text-brand-blue underline hover:no-underline\">UI patterns<\/a> are standardized design components designers use to solve usability issues\u2013like breadcrumbs for navigation or pagination for displaying multiple results.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Designers use these patterns because they have proven to solve usability issues the best, and they&#8217;re familiar to users, making it easy to learn and navigate your design.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Prototyping &amp; Testing<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/create-product-prototype\/\" class=\"text-brand-blue underline hover:no-underline\">Prototyping and testing<\/a> is an opportunity for UX designers to validate their ideas and identify potential design issues\u2013like are CTAs obvious? Or, do users have problems with the checkout process?<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Prototypes are also great for presenting design ideas to clients and stakeholders before you commit to developing the website. Editing prototypes in a <a href=\"https:\/\/www.uxpin.com\/\" class=\"text-brand-blue underline hover:no-underline\">design tool<\/a> is quicker and easier than editing code.<\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Image-Based vs. Code-Based Design<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">Image-based design tools like Figma, Adobe XD, and Sketch render vector graphics. These image-based tools are challenging for devs because they have to recreate designs in code.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Image-based prototypes offer little help because they lack fidelity and functionality. Designers have to explain each interaction so that engineers understand what they must build. Unfortunately, this often leads to design drift, rework, and friction between design and development.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/\" class=\"text-brand-blue underline hover:no-underline\">Code-based design tools<\/a> like <a href=\"https:\/\/shuffle.dev\/\" class=\"text-brand-blue underline hover:no-underline\">Shuffle<\/a> or <a href=\"https:\/\/www.uxpin.com\/\" class=\"text-brand-blue underline hover:no-underline\">UXPin<\/a> make design far more accessible for developers. Instead of designing from scratch, they can drag and drop components to build layouts. Because these tools render code, developers can simply copy\/paste to their preferred IDE to develop the website or application much faster.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Code-based design tools also enhance collaboration between designers and developers, especially during the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\" class=\"text-brand-blue underline hover:no-underline\">design handoff<\/a>. Instead of handing developers a stack of images with notations, designers deliver code-based high-fidelity prototypes that look and function like the final product. These tools also render HTML, CSS, and Javascript, providing developers with the foundation to start development.<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/92LsoBjkNSVePUUNbrkl7pfJOXlEvj-Iv_nzN1DKlblQOVoagFvmbgsah1V_F28bSeeh1xto0fYOI7MHZ97bX9T34INRJg-DFqchke4-3FE9piqOKWU71eoqNvMDLC4_0Bs3aRVO\" width=\"624\" height=\"417\"><\/p>\n\n\n\n<h2 class=\"mb-6 text-3xl font-bold\">Designing With Code<\/h2>\n\n\n\n<p class=\"mb-6 leading-loose\">You&#8217;ve designed your initial website or web application using Shuffle, developed it using your preferred front-end framework, and now you&#8217;re ready to scale.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Design tools like <a href=\"https:\/\/www.uxpin.com\/merge\" class=\"text-brand-blue underline hover:no-underline\">UXPin Merge<\/a> allow front-end developers to design and prototype using production-ready code components. You can use Merge&#8217;s Git integration to sync React components to UXPin&#8217;s design editor or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" class=\"text-brand-blue underline hover:no-underline\">Storybook<\/a> for other front-end technologies like Vue, HTML, Web Components, Angular, Ember, and more.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">All you need to do is separate your Shuffle design into individual elements and components to create a design system. <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/creating-a-library\/\" class=\"text-brand-blue underline hover:no-underline\">Follow UXPin&#8217;s instructions for creating a component library<\/a>, request access to Merge, and you&#8217;re ready to start designing with fully functioning code components.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">Once you&#8217;ve completed your new UIs, copy any changes made to the component&#8217;s props (or Args if you&#8217;re using Storybook) and start developing the new pages or features. Whenever you make changes to the elements in your repository, Merge automatically updates the design system in UXPin&#8217;s editor.<\/p>\n\n\n\n<p class=\"mb-6 leading-loose\">This single source of truth benefits designers and developers because they use the same design system components\u2013eliminating design drift and minimizing the back and forth communication during handoffs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Read the guest post by UXPin \u2013 a code-based prototyping software and find out more about a design process, so you can finally understand designers with whom you work. With so many no-code drag-and-drop website builders, anyone can design a beautiful website, but does that make you a designer? While these builders make web design [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design in development \u2013 all you need to know | Shuffle<\/title>\n<meta name=\"description\" content=\"Learn to connect design with development. Here are 10 things every frontend developer must know to design better experiences for their users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design in development \u2013 all you need to know | Shuffle\" \/>\n<meta property=\"og:description\" content=\"Learn to connect design with development. Here are 10 things every frontend developer must know to design better experiences for their users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-24T10:11:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T18:31:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/02\/open-graph-uxpin.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"301\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/82fdbf0a1a688ee76b7cac669de4472d\"},\"headline\":\"Design in development \u2013 all you need to know\",\"datePublished\":\"2022-02-24T10:11:37+00:00\",\"dateModified\":\"2022-02-24T18:31:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\"},\"wordCount\":1487,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Learning\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\",\"name\":\"Design in development \u2013 all you need to know | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2022-02-24T10:11:37+00:00\",\"dateModified\":\"2022-02-24T18:31:32+00:00\",\"description\":\"Learn to connect design with development. Here are 10 things every frontend developer must know to design better experiences for their users.\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design in development \u2013 all you need to know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/82fdbf0a1a688ee76b7cac669de4472d\",\"name\":\"UXPin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/272c4a0d6b391294582ec6e8b9b47bf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/272c4a0d6b391294582ec6e8b9b47bf5?s=96&d=mm&r=g\",\"caption\":\"UXPin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design in development \u2013 all you need to know | Shuffle","description":"Learn to connect design with development. Here are 10 things every frontend developer must know to design better experiences for their users.","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:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/","og_locale":"en_US","og_type":"article","og_title":"Design in development \u2013 all you need to know | Shuffle","og_description":"Learn to connect design with development. Here are 10 things every frontend developer must know to design better experiences for their users.","og_url":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2022-02-24T10:11:37+00:00","article_modified_time":"2022-02-24T18:31:32+00:00","og_image":[{"width":750,"height":301,"url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2022\/02\/open-graph-uxpin.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/"},"author":{"name":"UXPin","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/82fdbf0a1a688ee76b7cac669de4472d"},"headline":"Design in development \u2013 all you need to know","datePublished":"2022-02-24T10:11:37+00:00","dateModified":"2022-02-24T18:31:32+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/"},"wordCount":1487,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Learning"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/","url":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/","name":"Design in development \u2013 all you need to know | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2022-02-24T10:11:37+00:00","dateModified":"2022-02-24T18:31:32+00:00","description":"Learn to connect design with development. Here are 10 things every frontend developer must know to design better experiences for their users.","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2022\/02\/design-in-development-all-you-need-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Design in development \u2013 all you need to know"}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/82fdbf0a1a688ee76b7cac669de4472d","name":"UXPin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/272c4a0d6b391294582ec6e8b9b47bf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/272c4a0d6b391294582ec6e8b9b47bf5?s=96&d=mm&r=g","caption":"UXPin"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1664"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=1664"}],"version-history":[{"count":2,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1664\/revisions"}],"predecessor-version":[{"id":1668,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1664\/revisions\/1668"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=1664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=1664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=1664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}