[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"blogpost-what-is-a-design-system":72},{"footer":4,"contact_form":6,"chat_widget":11,"accolades":19,"seo_social":63},{"iso_notice":5},"Wolfpack Digital is an ISO 9001:2015, ISO 27001:2013 and ISO 14001:2015 certified company - © _YEAR_ Wolfpack Digital. All rights reserved.",{"budgets":7},[8,9,10],"Under $50.000","Between $50.000 - 200.000","Over $200.000",{"consent":12},{"greeting":13,"title":14,"body":15,"accept_label":16,"decline_label":17,"declined_message":18},"Awoo! I'm Wolfpack Digital's AI assistant. Ask me anything about our services, process, or team, and if you want a project estimate, I can point you to our AI Estimator.","Data Privacy","\u003Cp>Hi there! We would love to talk with you. Under the EU General Data Protection Regulation, we need your approval for our use of personal information (e.g. your name and email address) you may provide as we communicate:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>We'll store your personal information so that we can pick up the conversation if we talk later.\u003C\u002Fli>\n  \u003Cli>We may send you emails to follow up on our discussion here.\u003C\u002Fli>\n  \u003Cli>We may send you emails about our upcoming services and promotions.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Is this okay with you?\u003C\u002Fp>","Yes, I Accept","No, Not Now","No problem. Come back if you change your mind.",{"winnersOfList":20,"awardsList":29,"inHouseAppImages":46,"certificationsList":50},[21,25],{"alt":22,"href":23,"image":24},"European Awards","https:\u002F\u002Fwww.theeuropeanawards.eu\u002Fpremiado\u002Fwolfpack-digital-awarded-in-the-app-development-category","\u002Fimages\u002Fabout-us\u002Fwinners\u002Feuropean.svg",{"alt":26,"href":27,"image":28},"Webby Awards","https:\u002F\u002Fwinners.webbyawards.com\u002F2024\u002Fwebsites-and-mobile-sites\u002Fresponsible-technology\u002Fresponsible-ai\u002F275408\u002Fequality-ai-fair-and-unbiased-algorithms-to-eliminate-discrimination-in-machine-learning-models","\u002Fimages\u002Fabout-us\u002Fwinners\u002Fwebby.svg",[30,34,38,42],{"alt":31,"href":32,"image":33},"Clutch 1000 List Reveals Top-Rated Business Service Providers of 2023","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Fclutch-1000-fall-2023","\u002Fimages\u002Fabout-us\u002Fawards\u002Fclutch.svg",{"alt":35,"href":36,"image":37},"Clutch Recognizes the 1000 Best B2B Service Providers in its Exclusive 2019 Clutch 1000 List","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Frecognizes-1000-best-b2b-service-providers-its-exclusive-2019-1000-list","\u002Fimages\u002Fabout-us\u002Fawards\u002Fglobal.svg",{"alt":39,"href":40,"image":41},"Mobile App Daily Award","","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmobile-app-daily.svg",{"alt":43,"href":44,"image":45},"Manifest Award","https:\u002F\u002Fthemanifest.com\u002Fro\u002Fweb-development\u002Fcompanies","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmanifest.svg",[47],{"alt":48,"href":40,"image":49},"Wolfpack Labs","\u002Fimages\u002Fhomepage\u002Fawards\u002Flabs.svg",[51,55,59],{"alt":52,"href":53,"image":54},"ISO 27001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LD367","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-27001.svg",{"alt":56,"href":57,"image":58},"ISO 9001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LBDB0","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-9001.svg",{"alt":60,"href":61,"image":62},"ISO 14001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fma\u002Fissued-certificates\u002F?certID=_7690LZSGS","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-14001.svg",{"default_og_image_urls":64,"default_og_image_alt":68,"og_site_name":68,"og_locale":69,"twitter_site":70,"page_type_defaults":71},[65],{"url":66,"style":67},"\u002Fimages\u002Fsocial_share_preview.jpg","og","Wolfpack Digital","en_US","@DigitalWolfpack",{},["Reactive",73],{"title":74,"body":75,"slug":76,"featured_image_urls":77,"meta_tags":102,"reading_time":110,"title_size":111,"tag_list":112,"formatted_published_at":116,"short_description":104,"categories":117,"alt_text":119,"published_at":120,"content_updated_at":119,"formatted_content_updated_at":119,"key_takeaways":121,"faqs":122,"updated_at":123,"canonical_override":119,"no_index":124,"canonical_url":125,"publishers":126},"What is a design system, why is it important and how to create one?","\u003Ch2>What is a design system and why should I use one?\u003C\u002Fh2>\r\n\r\n\u003Cp> \u003C\u002Fp>\r\n\r\n\u003Cp>\u003Cspan style=\"color:#999999\">\u003Cem>“A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.” - Design Systems Handbook by InVision\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fp>\r\n\r\n\u003Cp> \u003C\u002Fp>\r\n\r\n\u003Cp>Design systems are generally used to bridge the gap between development and design. Whether designing for mobile applications or web applications, having a component library is going to be beneficial for both developers and designers. \u003C\u002Fp>\r\n\r\n\u003Ch2>Why is a Design System important?\u003C\u002Fh2>\r\n\r\n\u003Cul>\r\n\t\u003Cli>\r\n\t\u003Cp>\u003Cstrong>It saves you a LOT of time: \u003C\u002Fstrong>Instead of building the components as you go, you can reuse the same symbol (Sketch) or component (Figma, Adobe XD).  \u003C\u002Fp>\r\n\t\u003C\u002Fli>\r\n\t\u003Cli>\n\u003Cstrong>Consistent UX: \u003C\u002Fstrong>Components are the same everywhere and behave as intended. This keeps both your brand and user experience linear and customers will know exactly what each component or element will do (Apple would be a great example for this!)\u003C\u002Fli>\r\n\t\u003Cli>\n\u003Cstrong>High-quality and fast Development\u003C\u002Fstrong> (you thought this would be impossible, right?): code it & reuse it. Every developer knows that reusable code leads to fewer bugs. Design systems act like component libraries used in development. This is a very natural process that results in speed and higher quality code.\u003C\u002Fli>\r\n\t\u003Cli>\n\u003Cstrong>Early validation:\u003C\u002Fstrong> while creating a design system and getting it approved seems like a long and tedious process when you start, it compensates in the rest of the design process. Everything feels almost like putting up the pieces of a puzzle afterward or like building lego with ready-made components. And we all like Lego and Puzzles, right?\u003C\u002Fli>\r\n\t\u003Cli>\n\u003Cstrong>Scalability:\u003C\u002Fstrong> No matter how complex your digital product will be, nor how many customers will log-in to your solution, having out-of-the-box components as you build new features, help you scale in a clean, fast, and consistent way.\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\r\n\u003Cp>While building a Design System, takes a lot of time and iterations upfront, it is going to win in the long game for sure!\u003C\u002Fp>\r\n\r\n\u003Cp>\u003Cstrong>Here’s a practical checklist to make sure your Design System works:\u003C\u002Fstrong>\u003C\u002Fp>\r\n\r\n\u003Cul>\r\n\t\u003Cli>Keep in mind who you’re designing for: Who is going to use your product? That might influence the look and feel of your components. Beware of accessibility. If you’re designing with accessibility in mind, make sure to\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fmaterial.io\u002Fdesign\u002Fusability\u002Faccessibility.html#color-and-contrast\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">check out this guide\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color:#fa357b\">.\u003C\u002Fspan>\u003C\u002Fstrong>\n\u003C\u002Fli>\r\n\t\u003Cli>Research: ask developers what UI component libraries they use in development (\u003Ca href=\"https:\u002F\u002Fvuejs.org\u002F\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">Vue\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color:#fa357b\">, \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ftailwindui.com\u002Fcomponents\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">Tailwind UI\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"color:#fa357b\">, \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fbootstrap-vue.org\u002Fdocs\u002Fcomponents\u002Falert\" target=\"_blank\">\u003Cspan style=\"color:#fa357b\">Bootstrap\u003C\u002Fspan>\u003C\u002Fa> are some popular choices) and about their limitations.\u003C\u002Fli>\r\n\t\u003Cli>Don’t forget about SEO: setting the heading styles and consistent typefaces across your application is not only important for SEO but also your overall performance.\u003C\u002Fli>\r\n\t\u003Cli>KISS: Keep it short & simple. Don’t make 1000 alternations of a button if not necessary.\u003C\u002Fli>\r\n\t\u003Cli>Icons - they are everywhere and you should consider that right from the start: ensure you have consistent looking icons and designed for all sorts of flows and cases. Recommended sizes should follow a 2’s multiple rule (16px, 24px, 32px).\u003C\u002Fli>\r\n\t\u003Cli>Ideate, Create, Validate: get the devs in the loop early on. \u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\r\n\u003Ch2>How do we apply Design Systems at Wolfpack Digital? \u003C\u002Fh2>\r\n\r\n\u003Cp>We start by going over the wireframe to make sure we include everything we need. Almost all design systems have a base of necessary components. Here’s a short checklist:\u003C\u002Fp>\r\n\r\n\u003Cul>\r\n\t\u003Cli>Buttons\u003C\u002Fli>\r\n\t\u003Cli>Cards (make sure they are responsive by adding constraints)\u003C\u002Fli>\r\n\t\u003Cli>Tables\u003C\u002Fli>\r\n\t\u003Cli>Icons\u003C\u002Fli>\r\n\t\u003Cli>Text fields\u003C\u002Fli>\r\n\t\u003Cli>Image containers\u003C\u002Fli>\r\n\t\u003Cli>Modals\u003C\u002Fli>\r\n\u003C\u002Ful>\r\n\r\n\u003Cp>After designing the initial version, we go over our small library with the developers, and after with the Project Owner and Client, to make sure it is consistent with the branding and requirements.\u003C\u002Fp>\r\n\r\n\u003Cp>Finally, we start puzzlin’ around and do the magic. \u003C\u002Fp>\r\n\r\n\u003Cp>\u003Cimg alt=\"\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F266\u002Fcontent_wolfpack_digital_styleguide_how_to_create_design_systems_UXUI_for_app_development.png\" style=\"width: 800px; height: 542px\">\u003C\u002Fp>\r\n\r\n\u003Ch3>\u003Cstrong>Final Thoughts\u003C\u002Fstrong>\u003C\u002Fh3>\r\n\r\n\u003Cp>While Design Systems are a very powerful framework, their use can be contextual. Designing and maintaining one can be pretty challenging. \u003C\u002Fp>\r\n\r\n\u003Cp>Are they a one size fits all?\u003Cbr>\r\nNo, not really. If you are looking for aesthetics, and you’re designing a small project on a lower budget it might not be the best idea to dive deep into one. \u003C\u002Fp>\r\n\r\n\u003Cp> \u003C\u002Fp>\r\n\r\n\u003Cp>\u003Cstrong>That’s a wrap! What do you think about Design Systems? Do they fit into your workflow? \u003C\u002Fstrong>\u003C\u002Fp>\r\n\r\n\u003Cp> \u003C\u002Fp>\r\n\r\n\u003Chr>\r\n\u003Cp>\u003Cstrong>About the author:\u003C\u002Fstrong>\u003Cbr>\r\n\u003Cem>Denisa, one of the UX\u002FUI Designers at Wolfpack Digital, has a passion and a natural talent for app design and everything related to art. Call it a native talent or a result of her curiosity, but she has both analytical and creative skills that let her do the engineering around till she gets a perfect design. Denisa can replicate any design or style that you give her as an example adding her twist and style. Thanks to her drawing abilities, any idea can be turned into shapes and colors. \u003C\u002Fem>\u003C\u002Fp>\r\n","what-is-a-design-system",[78,81,84,87,90,93,96,99],{"style":79,"url":80},"640","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002F640\u002Fimage_processing20220615-4-cubuvh.webp",{"style":82,"url":83},"768","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002F768\u002Fimage_processing20220615-4-cubuvh.webp",{"style":85,"url":86},"1024","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002F1024\u002Fimage_processing20220615-4-cubuvh.webp",{"style":88,"url":89},"1366","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002F1366\u002Fimage_processing20220615-4-cubuvh.webp",{"style":91,"url":92},"1600","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002F1600\u002Fimage_processing20220615-4-cubuvh.webp",{"style":94,"url":95},"1920","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002F1920\u002Fimage_processing20220615-4-cubuvh.webp",{"style":97,"url":98},"thumb","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002Fthumb\u002Fimage_processing20220615-4-cubuvh.webp",{"style":100,"url":101},"original","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fblogpost\u002F95\u002Ffeatured_image\u002Foriginal\u002Fimage_processing20220615-4-cubuvh.webp",{"title":103,"description":104,"keywords":105,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":108,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70,"og:title":74,"twitter:title":74},"What is a design system, why is it important and how to create it?","Design systems are generally used to bridge the gap between development and design. Check out this guide on what is a design system, why is important and  go through a practical checklist to create a Design System that works.","what is a design system, why is a design system important, how to create a design system, design system how to, design system guide, design system checklist, design system, ui ux design, ui ux app development, wolfpak digital ui ux, wolfpack digital design ","contact us","send message","article","summary_large_image","4 min",32,[113,114,115],"UX\u002FUI","design","DesignSystems","Mar 10, 2021",[118],"ux-ui-design",null,"2021-03-10T12:29:51.000Z",[],[],"2022-06-16T09:01:50.238Z",false,"https:\u002F\u002Fwd-fe-stage.herokuapp.com\u002Fblogposts\u002Fwhat-is-a-design-system",[127],{"id":128,"author":129,"short_description":119,"role":130,"avatar_urls":131,"cover_urls":119,"linkedin_link":119,"instagram_link":119,"x_link":119,"meta_tags":139,"last_published_at":120,"same_as":141},11,"Denisa","UX\u002FUI Designer",[132,134,137],{"style":97,"url":133},"https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fpublisher\u002F11\u002Favatar\u002Fthumb\u002Fwolfpackdigital-uxui-design-denisa.webp",{"style":135,"url":136},"medium","https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fpublisher\u002F11\u002Favatar\u002Fmedium\u002Fwolfpackdigital-uxui-design-denisa.webp",{"style":100,"url":138},"https:\u002F\u002Fwolfpack-digital-attachments-staging.s3.eu-west-2.amazonaws.com\u002Fstore\u002Fpublisher\u002F11\u002Favatar\u002Foriginal\u002Fwolfpackdigital-uxui-design-denisa.webp",{"title":40,"description":40,"keywords":40,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":140,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70},"website",[]]