<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=683797551780598&amp;ev=PageView&amp;noscript=1">

.

Tim Delhaes
tim@inboundlabs.co

is a new approach for building websites on top of modern content management systems such as the Hubspot COS.

Pattern Driven Design makes the definition, design and coding of websites not only faster and more cost-effective, but more importantly, creates sites that are easier to change and extend.

It increases business agility.

Traditional Web Design

  • Page #1
    1. Define content and wireframe
    2. Create original artwork/design
    3. Code it in HTML/CSS/JS
  • Pros
    1. Original design/identity
    2. Simple steps
    3. Requires simple web development skills
  • Page #2 to (n)
    1. Define content and wireframe
    2. Create original artwork/design
    3. Code it in HTML/CSS/JS
  • Cons
    1. Definition, design, code for every page
    2. No code re-use

Template Based Design

  • Page #1
    1. Select a template
    2. Adjust the design
    3. Adjust HTML/CSS/JS
    4. Force content into page
  • Pros
    1. Might save time
  • Page #2 to (n)
    1. Clone page
    2. Force content into page
  • Cons
    1. Never "original"
    2. Forced "narrative"
    3. Always looks like a template

Introducing

A few fundamental ideas

  1. Take full advantage of code-free design tools
  2. aximize reuse of code and components
  3. Establish common language for all participants

Pattern Driven Design: How it works

  • Design

    Start the same way as traditional web design

  • Implement

    Build pages, layouts, patterns, and code base

  • Reuse

    Reassamble patterns
    into pages

High Impact Scenarios

  • Building websites that continuously grow more products, more services, more offers. The more that is built, the higher the degree of reuse of patterns and code. As a result, ROI increases.

    Building Prototypes and Minimum Viable Products: if built correctly from the start, the investment is only insignificantly higher than traditional web design. However, it allows an MVP/Prototype to extend to a full-blown site without a complete remake.

    Using Growth Driven Design: Pattern Driven Design is an enabler of iterative or "Growth Driven Design." Without a good foundation (or "Launch Pad"), GDD is doomed to fail or prohibitively expensive.

    Pattern Driven Design is no good fit when...
    • ... building a website that consists of a single page only
    • ... a modern content management system is not available
    • ... there are no foreseen changes or additions to the website

  • Common requirements

    To implement a Pattern Driven Design approach, your team requires the following skills common to traditional web design:

    • Definition of conversion-centric narratives
    • Effective copywriting
    • Wireframing and information architecture
    • Web design skills
    • Coding HTML/JS/CSS

    Special requirements

    To implement a Pattern Driven Design approach, your team requires the following specific skills:

    • Deep understanding of the specific WCM
    • Writing reusable software and required tools
    • Experience with PDD of all team members

Pattern Driven Design in the Hubspot COS

  • Hubspot supports PDD with a set of unique features

    1. The "Design Manager" that allows you to define new layouts with drag & drop
    2. The ability to create pages with dynamic content modules using "Flexible Columns"
    3. The possibility to declare and code "Custom Modules"
    4. The ability to reuse individual modules, as well as a collection of modules, using "Global Groups" and "Global Modules"

    Key to a successful PDD implementation in Hubspot

    1. Defining the best pattern type (CM, GM, GG, etc.) for any given UI element
    2. Producing well-organized CSS/JS files with clear nomenclature
    3. Making consultants, designers, and developers understand the PDD approach, terminology, and best practices
  • Hubspot COS Anatomy

email me! tim@inboundlabs.co

Or click on any of the links to learn about InboundLabs: Our customers, our company,
our team, our services and our lab.

Visit Inboundlabs.co instead