Social sharing icons<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\nHow to Apply Component-Based Design to Your Development SOWs<\/h2>\r\n\r\n\r\n\r\n The benefits of component-based design for software development are apparent, so why not<\/em> put that logic into our SOWs? Compared to the template-based approach, a component-based methodology for our SOWs is an obvious upgrade.<\/p>\r\n\r\n\r\n\r\n1. Break Down the Project into Components<\/h3>\r\n\r\n\r\n\r\n First, create a list of all the common, known components for our project. For example, all websites need navigation, search, cards, and some kind of cover or hero component.<\/p>\r\n\r\n\r\n\r\n
Next, define as many additional components that are specific to the client’s requirements. These could be things like a testimonial carousel, a comparison table, and\/or a Google reviews component. It’s OK if you’re not able to define every single component in the SOW, as this can be finalized during the technical requirements phase early in the project.<\/p>\r\n\r\n\r\n\r\n
However, be sure to specifically scope any complex, resource-intensive components as part of the components list in the SOW. Most components will be approximately the same level of effort, but some may break that mold. An appointment scheduler, a carousel with varying views depending on mobile or desktop display, and tabbed content are all examples of components that should be defined as a requirement in the SOW so they can be properly scoped by your team.<\/p>\r\n\r\n\r\n\r\n
2. Establish the Max Number of Components<\/h3>\r\n\r\n\r\n\r\n If you haven’t done many component-based design and development projects, you may be asking yourself how many components should a site have? The answer is it depends. Based on my experience at Portent, small to mid-sized sites will have 15-25 components, whereas larger to enterprise-grade sites will have 30-50 components.<\/p>\r\n\r\n\r\n\r\n
All websites will have overlapping components or components that are necessary based on the nature of what is being built. Things like navigation menus, search functionality, content cards, buttons, and maybe CTA banners are examples of heavily reused components.<\/p>\r\n\r\n\r\n\r\n
3. Define Functional Requirements<\/h3>\r\n\r\n\r\n\r\n In addition to our clearly defined number of, or range of components, any additional functionality requirements are defined as a clear list of deliverables.<\/p>\r\n\r\n\r\n\r\n
Some examples of functionality requirements that need to be defined alongside the number of components could be:<\/p>\r\n\r\n\r\n\r\n
\r\nUser dashboard<\/li>\r\n CRM integration workflow<\/li>\r\n Custom event calendar and registration system integration (API)<\/li>\r\n Google Maps location finder<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\nBenefits of Component-Based Development SOWs<\/h2>\r\n\r\n\r\n\r\n With a component-based approach for development SOWs, there is naturally more protection for your team, built-in guardrails for feature creep, and it’s more precise and organized.<\/p>\r\n\r\n\r\n\r\n
Protection \/ Safety Net For Your Team<\/h3>\r\n\r\n\r\n\r\n Component-based SOWs create a safety net because they provide a framework for creating and managing the scope of a project. By breaking a project down into components and specifically defining the max number of components, the scope of the project is clear. This builds protection into the SOW for your company for any large changes being asked for by the client once the project has started.<\/p>\r\n\r\n\r\n\r\n
Avoid Scope Creep<\/h3>\r\n\r\n\r\n\r\n Another advantage of component-based SOWs is avoiding scope creep. Scope creep is the gradual and unplanned expansion of a project’s goals and requirements beyond the original agreed-upon plan.<\/p>\r\n\r\n\r\n\r\n
With our component-based SOWs, the deliverables list is agreed upon by both parties prior to the start of the project and serves as the basis for the entire project. Once the project is underway, any changes to the agreed upon list of deliverables must be discussed, negotiated and agreed upon before proceeding. This ensures that all parties are aware of any changes to the project scope and are in agreement on how to proceed. Avoiding ambiguity avoids scope creep.<\/p>\r\n\r\n\r\n\r\n
Better Organization<\/h3>\r\n\r\n\r\n\r\n Organization and precision are a natural result of a component-based approach to development SOWs. We’re getting more detailed with our list of components which further defines the project’s requirements. With all the primary functioning elements defined in the development section of our SOW, it creates a great resource for the development team and clients to reference throughout the length of the project.<\/p>\r\n\r\n\r\n\r\n
Conclusion<\/h2>\r\n\r\n\r\n\r\n At Portent, we adapted our approach to development SOWs by implementing component-based design techniques because it just made sense from an organizational, functional, and protection basis.<\/p>\r\n\r\n\r\n\r\n
As always, be sure to heavily involve your dev team or team lead on all development-based SOWs. They should have an integral role in scoping functional requirements as well as breaking down approximately how much each component will take to develop.<\/p>\r\n\r\n\r\n\r\n
We see the integration of component-based design techniques into development-based SOWs as a step forward for all parties involved: clients, the agency, and the development team.<\/p>\r\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
Component-based scopes of work are your best line of defense when it come to scope creep. Learn how we manage web design projects at Portent.<\/p>\n","protected":false},"author":136,"featured_media":61416,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12],"tags":[],"coauthors":[],"class_list":["post-61197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-dev"],"acf":[],"yoast_head":"\n
Avoid Scope Creep in Web Design With Component-Based SOWs - Portent<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n \n\t \n\t \n\t \n","yoast_head_json":{"title":"Avoid Scope Creep in Web Design With Component-Based SOWs - Portent","description":"Component-based scopes of work are your best line of defense when it come to scope creep. Learn how we manage web design projects at Portent.","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:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm","og_locale":"en_US","og_type":"article","og_title":"Avoid Scope Creep in Web Design With Component-Based SOWs - Portent","og_description":"Component-based scopes of work are your best line of defense when it come to scope creep. Learn how we manage web design projects at Portent.","og_url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm","og_site_name":"Portent","article_publisher":"https:\/\/www.facebook.com\/portent.marketing","article_published_time":"2023-02-08T15:00:20+00:00","article_modified_time":"2024-09-05T04:40:59+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW.jpg","type":"image\/jpeg"}],"author":"Andy Schaff","twitter_card":"summary_large_image","twitter_creator":"@portent","twitter_site":"@portent","twitter_misc":{"Written by":"Andy Schaff","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#article","isPartOf":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm"},"author":{"name":"Andy Schaff","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/27fcba2a68147f5e49c85e099cb85d3f"},"headline":"Avoid Scope Creep in Web Design With Component-Based SOWs","datePublished":"2023-02-08T15:00:20+00:00","dateModified":"2024-09-05T04:40:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm"},"wordCount":1498,"commentCount":0,"publisher":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#primaryimage"},"thumbnailUrl":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW.jpg","articleSection":["Design & Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm","url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm","name":"Avoid Scope Creep in Web Design With Component-Based SOWs - Portent","isPartOf":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#primaryimage"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#primaryimage"},"thumbnailUrl":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW.jpg","datePublished":"2023-02-08T15:00:20+00:00","dateModified":"2024-09-05T04:40:59+00:00","description":"Component-based scopes of work are your best line of defense when it come to scope creep. Learn how we manage web design projects at Portent.","breadcrumb":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#primaryimage","url":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW.jpg","contentUrl":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW.jpg","width":1200,"height":628,"caption":"\"\""},{"@type":"BreadcrumbList","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/avoid-scope-creep-in-web-design-with-component-based-sows.htm#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eigene-homepage-erstellen.net\/"},{"@type":"ListItem","position":2,"name":"Avoid Scope Creep in Web Design With Component-Based SOWs"}]},{"@type":"WebSite","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#website","url":"https:\/\/www.eigene-homepage-erstellen.net\/","name":"Portent","description":"Digital Marketing Agency - Seattle, WA","publisher":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eigene-homepage-erstellen.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization","name":"Portent","url":"https:\/\/www.eigene-homepage-erstellen.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/logo\/image\/","url":"https:\/\/portent.wpenginepowered.com\/images\/2018\/08\/logo-indigo.svg","contentUrl":"https:\/\/portent.wpenginepowered.com\/images\/2018\/08\/logo-indigo.svg","width":182,"height":40,"caption":"Portent"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/portent.marketing","https:\/\/x.com\/portent","https:\/\/www.linkedin.com\/company\/portent\/"]},{"@type":"Person","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/27fcba2a68147f5e49c85e099cb85d3f","name":"Andy Schaff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/image\/ce25e35bc815a66cbed51b3ba7cccb14","url":"https:\/\/secure.gravatar.com\/avatar\/a358a8574cd50140c428fcbae648ab4f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a358a8574cd50140c428fcbae648ab4f?s=96&d=mm&r=g","caption":"Andy Schaff"},"description":"With more than a decade of experience, Andy is a highly-motivated developer who will take on any technology thrown at him. A proponent of well-formed and documented code, page speed techniques, and high attention to detail, Andy is the full-stack implementation specialist and development architect at Portent.","sameAs":["https:\/\/www.linkedin.com\/in\/andyschaff"],"url":"https:\/\/eigene-homepage-erstellen.net\/blog\/author\/aschaff"}]}},"author_meta":{"display_name":"Andy Schaff","author_link":"https:\/\/eigene-homepage-erstellen.net\/blog\/author\/aschaff"},"featured_img":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW-300x157.jpg","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2023\/01\/Featured-Image_Component-Based-SOW.jpg","tax_additional":{"categories":{"linked":["Design & Dev<\/a>"],"unlinked":["Design & Dev<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 2 years ago","modified":"Updated 2 months ago"},"absolute_dates":{"created":"Posted on February 8, 2023","modified":"Updated on September 4, 2024"},"absolute_dates_time":{"created":"Posted on February 8, 2023 7:00 am","modified":"Updated on September 4, 2024 9:40 pm"},"featured_img_caption":"","series_order":"","category_info":[{"taxonomy":"category","name":"Design & Dev","slug":"design-dev","permalink":"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev","icon":"https:\/\/eigene-homepage-erstellen.net\/wp-content\/uploads\/2021\/08\/Dev-category-icon.png","theme":"creative"}],"author_info":{"first":"Andy","last":"Schaff","url":"https:\/\/eigene-homepage-erstellen.net\/blog\/author\/aschaff"},"_links":{"self":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts\/61197"}],"collection":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/comments?post=61197"}],"version-history":[{"count":0,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts\/61197\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/media\/61416"}],"wp:attachment":[{"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/media?parent=61197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/categories?post=61197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/tags?post=61197"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/coauthors?post=61197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}