{"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=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\">With so many no-code <a class=\"underline hover:no-underline\" href=\"https:\/\/shuffle.dev\/\">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=\"wp-block-paragraph 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=\"wp-block-paragraph 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=\"wp-block-heading mb-6 text-3xl font-bold\">Understanding the UX Design Process<\/h2>\n\n\n\n<p class=\"wp-block-paragraph 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 class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/\">design thinking process<\/a> to identify user problems and ideate solutions.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\">There are five stages of the design thinking process:<\/p>\n\n\n\n<ol class=\"wp-block-list 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=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\">The primary goal of design thinking is to get designers into a <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/stages-design-thinking-process\/#h-what-is-human-centered-design\">human-centered mindset<\/a> to empathize with users and build a digital product that meets their needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading mb-6 text-3xl font-bold\">Conducting Research<\/h2>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-list 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=\"wp-block-heading mb-6 text-2xl font-bold\">Why is Research Important?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\">You can use the same <a class=\"underline hover:no-underline\" href=\"https:\/\/shuffle.dev\/bootstrap\">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=\"wp-block-heading mb-6 text-3xl font-bold\">UI Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\">People often mistakenly use the terms interchangeably, but there is a clear <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-vs-ui-differences\/\">difference between UI vs. UX design<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list 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 class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\">microinteractions<\/a>.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-paragraph 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=\"wp-block-paragraph 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=\"wp-block-heading mb-6 text-2xl font-bold\">Be Consistent<\/h3>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\"><a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\">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=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\">Consistency extends to your copywriting, icon set, layouts, and other visual elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading mb-6 text-2xl font-bold\">Keep it Simple<\/h3>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\">Minimalist UI design doesn&#8217;t only look good; it plays a vital role in <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-psychology-for-ux-design\/\">design psychology and reducing cognitive load<\/a>\u2013the mental effort required to process and learn information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-paragraph 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=\"wp-block-paragraph 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 wp-block-heading mb-6 text-2xl font-bold\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"251\" src=\"https:\/\/lh6.googleusercontent.com\/X-oYhjeoZWgsKsZLucCkwL63CrcPAEeawkftqinqvUG_oIzyMzpgMBf4Eq1Cm907dxIH1bDSlEFbpMdCBSCVXW5J4qjS55f8wjQBtqyuuQ3ZR3j3SiqtyUSClEt7ECGsx2KWfP4h\"><\/h3>\n\n\n\n<h3 class=\"wp-block-heading mb-6 text-2xl font-bold\">Responsive Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\">A <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\">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=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\">Following a mobile-first design strategy helps you prioritize the most important content while keeping UIs minimalist and uncluttered. <a class=\"underline hover:no-underline\" href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/responsive-design\">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=\"wp-block-heading mb-6 text-2xl font-bold\">Accessibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\"><a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-apps\/\">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 class=\"underline hover:no-underline\" href=\"https:\/\/color.a11y.com\/?wc3\">color contrast tool<\/a> to ensure your content is accessible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\">We recommend reading <a class=\"underline hover:no-underline\" href=\"https:\/\/uxmovement.com\/buttons\/the-myths-of-color-contrast-accessibility\/\">The Myths of Color Contrast Accessibility<\/a> as a primer for Web Content Accessibility Guidelines (<a class=\"underline hover:no-underline\" href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">WCAG<\/a>) to avoid common mistakes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-heading mb-6 text-2xl font-bold\"><img loading=\"lazy\" decoding=\"async\" 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=\"wp-block-paragraph mb-6 leading-loose\"><a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-right-ui-design-patterns\/\">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=\"wp-block-paragraph 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=\"wp-block-heading mb-6 text-3xl font-bold\">Prototyping &amp; Testing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph mb-6 leading-loose\"><a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/create-product-prototype\/\">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=\"wp-block-paragraph 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 class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/\">design tool<\/a> is quicker and easier than editing code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading mb-6 text-3xl font-bold\">Image-Based vs. Code-Based Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\"><a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-based-approach-design\/\">Code-based design tools<\/a> like <a class=\"underline hover:no-underline\" href=\"https:\/\/shuffle.dev\/\">Shuffle<\/a> or <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/\">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=\"wp-block-paragraph mb-6 leading-loose\">Code-based design tools also enhance collaboration between designers and developers, especially during the <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/better-design-handoff\/\">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 loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/92LsoBjkNSVePUUNbrkl7pfJOXlEvj-Iv_nzN1DKlblQOVoagFvmbgsah1V_F28bSeeh1xto0fYOI7MHZ97bX9T34INRJg-DFqchke4-3FE9piqOKWU71eoqNvMDLC4_0Bs3aRVO\" width=\"624\" height=\"417\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading mb-6 text-3xl font-bold\">Designing With Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph 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=\"wp-block-paragraph mb-6 leading-loose\">Design tools like <a class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/merge\">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 class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\">Storybook<\/a> for other front-end technologies like Vue, HTML, Web Components, Angular, Ember, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph 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 class=\"underline hover:no-underline\" href=\"https:\/\/www.uxpin.com\/docs\/merge\/creating-a-library\/\">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=\"wp-block-paragraph 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=\"wp-block-paragraph 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":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-1664","post","type-post","status-publish","format-standard","hentry","category-learning"],"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\/dec649714f6b27e09a5f1187588928713c5b8016d2dfa89f114e411df1e82e80?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dec649714f6b27e09a5f1187588928713c5b8016d2dfa89f114e411df1e82e80?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\/dec649714f6b27e09a5f1187588928713c5b8016d2dfa89f114e411df1e82e80?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dec649714f6b27e09a5f1187588928713c5b8016d2dfa89f114e411df1e82e80?s=96&d=mm&r=g","caption":"UXPin"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/1664","targetHints":{"allow":["GET"]}}],"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}]}}