Website Design and Development: How They Work Together

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. This case study uses live buyer, admin and settings captures from the NBDesigner demo store to show how website design and website development work as one build, not two separate hand-offs.

Website design and website development are not interchangeable line items on a quote. Design decides whether a visitor trusts your store enough to start buying; development decides whether that purchase actually completes, prices correctly and reaches production without someone fixing it by hand. Stores that treat the two as one coordinated build, instead of a mockup handed to a developer after the fact, ship fewer broken product pages and fewer orders that need a human to untangle before they can ship.

Why does splitting design from development cost online stores sales?

The pain shows up in a handful of familiar places:

• The handoff tax. A designer ships a Figma file, a developer guesses at spacing, states and edge cases that were never specified, and the two go back and forth on revisions that neither side budgeted for.
• Pricing has nowhere to live. If a store sells configurable or personalized products (print, apparel, gifts, signage) and "design" stops at a product photo, the "development" side has no price matrix to hook into, so staff end up quoting by email instead of the store quoting itself.
• Manual proofing. Without a shared design-and-development plan for approvals, every custom order becomes a back-and-forth of attachments, and a change after approval can slip into production unnoticed.
• Redesigns that strand working code. A visual refresh that skips the people who built the checkout and data layer regularly breaks integrations nobody remembered to test.

You can put a number on the first two with your own figures: if your team spends H hours a week answering "how much would this cost" emails at a loaded hourly rate of R, that's roughly H × R × 52 a year spent doing a job a price matrix, built once as part of the same project as the product page, can do in seconds. Add to that a wider industry signal: the average cart abandonment rate across dozens of studies sits above 70% (Baymard Institute, 2025). Not all of that is a design/development seam — but a product page that promises a look the checkout can't actually price or produce is one more reason a visitor leaves before paying.

What does it look like when design and development work as one?

Example scenario: a visitor opens your store at 10pm, picks an invitation template, swaps in their own wording and colors, watches the price update as they change paper stock and quantity, adds it to the cart and pays. By morning, the order sits in your back office with a print-ready file already attached — no email exchange, no manual quote, no one re-typing the order into a second system.

Behind that same button sits the development side: an online designer that loads the right templates for that product, saves the finished artwork against the order, and hands pricing and production the data they need.

How does Cmsmart combine design and development in one build?

Six building blocks make up that architecture:

• Storefront and product pages (design) — layout, brand, copy and the call to action that starts configuration.
• Product configuration / online designer (design and development together) — Cmsmart Product Designer (NBDesigner) is the live example: the same screen that lets a buyer design is also what the backend reads to price and produce the order.
• Pricing engine and checkout (development) — printing options and a price matrix per product, size, material or quantity tier, calculated live instead of quoted by hand.
• Order and production backend (development) — a dashboard of every order with its production status, so staff manage one queue instead of a shared inbox.
• Approval and print-ready output (development) — an artwork-approval step and an automatic print-ready PDF that matches the order, so production doesn't start from a guess.
• Integrations (usually custom development) — ERP, shipping, accounting or a print-production system kept in sync without anyone re-typing an order.

One named innovation worth knowing: since version 2.17, the print-ready PDF that matches the order uses the same page geometry — including a buyer's own custom width and height — as the admin's manual "Create PDF" action, so the automatic file and the one a staff member builds by hand are no longer two different files. The same release added the approved-artwork lock, which refuses a save over an approved design instead of silently letting an edit slip past proofing.

What's the ROI of getting design and development right together?

Benefit	How it shows up in your business	KPI to track
Fewer abandoned configurations	The price a buyer sees while designing matches what they pay at checkout, because one build defined both	Cart-to-order completion rate
Less manual quoting	Staff stop emailing back and forth over price because the price matrix answers instantly	Hours per week spent on manual quotes
Fewer reprints	The approved-artwork lock stops a silent edit after sign-off from reaching production	Reprint rate per 100 orders
Faster production handoff	A print-ready PDF that matches the order is waiting before anyone opens the job	Time from "paid" to "in production"

How to set up a store where design and development work together

1. Install and activate Cmsmart Product Designer (NBDesigner) on your WooCommerce store, or scope a fully custom build with Cmsmart if you're not starting from the plugin.
2. In Settings > General, confirm print PDFs render in the cloud (on by default) so a print-ready file is generated without tying up your own server.
3. In Settings > Upload design, set the file types, maximum size and minimum DPI your print process needs for customer uploads.
4. In Settings > Output, turn on CMYK/ICC export and choose which file types (PNG, SVG, print-ready PDF) attach to the order notification.
5. Build your price matrix in Printing Options: material, size and quantity tiers that the designer calculates live as a buyer configures the product.
6. Assign the designer to a product in Product manager, defining its design area and production specs.
7. Open the product on the storefront and test the buyer path yourself: Start design, design online, Process, then confirm "Your artwork" appears on the product page and carries through to the cart.
8. Repeat that same test on a phone. A configurable product that only works at desktop width breaks for the share of visitors who are on mobile first.
9. Place a test order, then in Cmsmart > Orders open it and confirm the print-ready PDF status reads Ready — using Create PDF or Regenerate print-ready PDF if it isn't — before you treat the order as production-ready.

What can Cmsmart build beyond standard design and development?

Common extensions we scope as custom development, each starting from a real business reason:

• Headless or decoupled storefronts. A brand outgrowing what a theme can render gets a separate frontend that still talks to WooCommerce and the designer underneath — Cmsmart builds the integration layer.
• ERP / MIS and print-API sync. When orders need to reach a production system or accounting platform without anyone re-keying them, Cmsmart builds the connector and the retry/monitoring around it.
• Custom B2B quoting and approval flows. Tiered accounts, purchase-order approval chains and negotiated pricing beyond a standard price matrix — built around how your sales team actually works.
• Gang-sheet and DTF production tooling. Shops running gang-sheet or direct-to-film production get a layout builder scoped to that workflow; it isn't part of the standard designer.
• 3D previews. Car wraps, packaging mockups and interactive product views, built as a custom layer on top of the standard product page.

The delivery approach is the same for all of them: discovery, solution design, build in sprints, QA, launch, then ongoing support — the same model behind Cmsmart's published ecommerce project case studies. New stores often start with Cmsmart's store setup and preset installation service before adding custom features.

Scope my design and development project

Why work with Cmsmart for your website design and development?

• A Netbase JSC division, building ecommerce stores and custom features since 2012.
• 6,300+ client projects and 4,600+ projects delivered, with 1,800+ live stores running today across 80+ countries.
• 500+ custom development projects beyond off-the-shelf setups.
• Rated 4.2 on Trustpilot (404 reviews).

One recent Trustpilot review, from a web developer client who has run the plugin for three years: "It is wonderful to see their commitment to continuous development, with new features being added frequently to keep the software current and highly capable. […] the level of support is outstanding." — Web Developer, Trustpilot.

Browse related builds on Cmsmart Projects, or see our web-to-print solutions and Cmsmart Product Designer plugin page for the tool behind the captures in this guide.

Related reading: Top eCommerce Web Design Companies and Best Ecommerce Web Development Services.

Frequently asked questions about website design and development

What's the actual difference between website design and website development?

Design covers the look, layout and user experience of a site — what a visitor sees and how they move through it. Development covers the code that makes it function: checkout, pricing logic, databases and integrations. Most online stores need both, and the two work best when planned as one project rather than two separate hires.

Do I need both design and development, or can I start with just one?

A simple catalog site can launch with design-led templates and light configuration. The moment you sell configurable or personalized products — where price, layout or production depend on what a buyer chooses — you need development work behind the design, even if it's a plugin like Cmsmart Product Designer rather than a build from scratch.

How long does a combined design-and-development project take?

It depends on scope: a store built around Cmsmart Product Designer with a standard price matrix is a much shorter project than a custom quoting system or a headless storefront. Cmsmart scopes timelines during discovery, before any build work starts.

Can Cmsmart redesign or extend an existing WooCommerce store instead of building from scratch?

Yes. Many Cmsmart projects start from an existing WooCommerce store and add or rebuild the design and development pieces that are missing — a configurable product experience, a price matrix, or an integration — without discarding what already works.

Does the Cmsmart Product Designer plugin replace the need for custom development?

It covers the online designer, price matrix, approval step and print-ready output out of the box. Anything beyond that — ERP sync, custom quoting rules, 3D previews, gang-sheet production tools — is scoped as custom development on top of it, never claimed as something the standard plugin already does.

Can Cmsmart connect our store to our ERP or print production system?

Yes, as custom development. Cmsmart builds the integration layer between WooCommerce, the designer and your ERP, MIS or print-production system so orders and status sync without manual re-entry.

Ready to build design and development as one project? Scope a store where the look, the pricing and the production file all come from the same build.

Get my design and development quote or see Cmsmart Product Designer for the plugin behind the captures in this guide.

What should a brief for a combined design and development project include?

Include your goals, products and pricing rules, the pages you need, the systems the store must connect to and examples of sites you like. Add who approves design and who tests functions. A brief that covers both sides lets designers and developers plan the same store from the start.

How do you test a store before launch when design and development are done together?

Place real test orders on desktop and mobile, check that prices, taxes and shipping match the design, and confirm each order reaches the back office with the right data. Fix layout and logic issues in the same pass so neither team has to rework the other's changes.

What is ecommerce website development?

Ecommerce website development builds the working parts of an online store: the product catalogue and options, pricing rules, cart and checkout, payments, shipping and tax, customer accounts, order data and links to other systems such as an ERP. It turns the approved design into a store that takes real orders. Cmsmart offers ecommerce website development on WooCommerce, quoted per project.

Can an online store be built with Material Design?

Yes. Material Design is a design system from Google with rules for layout, colour, type and components, and a store's buttons, forms and product cards can follow it. Adapt it to your brand rather than copying the default look, and test the checkout on real phones, because a familiar pattern only helps when buyers still find prices and actions quickly.