Gecko v7 Gecko v7
  • +44 (0) 131 240 3390
  • +44 (0) 131 240 3390
  • Gecko Agency
    Design
    Brand Strategy
    Web Design
    Development
    Umbraco
    Custom API Integrations
    Custom Web Development
    Virtual Website Planning
    Digital Marketing
    Search Engine Optimisation
    Paid Search Marketing
    Content Marketing
    Social Media Marketing
    Support
    Support Packages
    Blog
    Case Studies
    About Us
    Careers
    Contact
    Edinburgh

    Component Based Designs

    20th May 2019

    Component (noun): A part or element of a larger whole. Synonyms - piece, bit, constituent, element, ingredient.

    I quite like the last of those synonyms, perhaps because it sounds a little friendlier, a little less techy. The ingredients of a website could be considered as the individual pages, but really it is the individual bits and pieces that are mixed together to make up those pages.

    That’s the essence of component-based design. Thinking of a website or digital app not only in terms of individual pages but of assorted component parts that can be configured and combined in a variety of different ways depending on what you are trying to do -  present content, attract attention, facilitate purchasing or booking, etc etc.

    Component-based design is not new of course or confined to the realm of digital design. Modular philosophies have been pursued for decades in disciplines such as architecture and automotive design. Modular design basically infers different elements that share a common interface (think Lego). The modules or component parts are discrete, scalable, and reusable, leading to an enticing combination of cost savings and flexibility.

    One such example is Habitat 67 in Montreal, Canada - a system of modular housing designed in the 1960s. It comprises 354 identical prefab concrete forms, that have been arranged into different, often striking combinations.  A more modern example is Vision Urbanetic, a new Mercedes Benz self-driving concept vehicle. This could, in theory, be changed from a car into a van, simply by swapping out modular components.

    Back in the land of digital, component-based design has become popular and upfront these days - often as much an aesthetic choice as it is an underlying construction strategy. Witness the modern classic that is the ‘card’ component - employed across a wide variety of digital apps.

    Like with non-digital design, the potential benefits are attractive: creating efficient reusable parts (build once, deploy many); improving flexibility (no rigid page templates). A component-based approach also helps establish repeatable and recognisable patterns of UI.

    Here at Gecko, we find this kind of design and build philosophy is great when married with a CMS like Umbraco. We have established our own core framework of components, but continually evolve and adapt them to work for each individual client project. Our aim is to make the CMS as easy as possible, with the minimum of different components and options.

    So, how do you go about thinking and designing in components rather than pages? And what exactly is a component?

    There are a couple of great reference points. Firstly the Atomic Design methodology as explained by Brad Frost.

    This uses basic chemistry to describe the hierarchy of component-based design. At the base level, you have atoms - ‘the basic building blocks’. Atoms then can be brought together to become molecules, these can subsequently be combined to form organisms. They break from the chemistry analogy at this stage though to describe the uppermost layers of the design development (templates and pages).

    I also like this clear explanation offered by Netherlands design studio Heavyweight.

    As with Atomic Design, this walks through a process that encourages the development of a design system, rather than launching into the design of individual pages.

    At the base level of this system are the core elements that inform everything above them, e.g typefaces, colour palettes. From there you get into basic reusable elements (buttons, form inputs, headings etc). It’s when you start to combine elements that you get into more interesting and recognisable components.

    This ‘built from the ground up’ approach really helps to introduce consistency, so that separate components and the elements within components all live harmoniously side by side.

    Coming back to how we build websites at Gecko, a key philosophy for us is to design flexibility into the system. Our starting point is to understand the tasks, pains and gains of potential users. From there we can consider what range of components (or widgets as we tend to call them) we actually need. Thinking about how these components will then be used (and re-used) across a website, we build in flexible options that extend their possibilities.

    Of course, while working with components does provide tremendous flexibility it does not defer the need for a plan. Not every component will fit in every place and throwing a bunch of random components together won’t guarantee engagement. Effective web pages and web sites still need some form of hierarchy and a good communication strategy.

    - Mark

    20th May 2019 Share This:
    ...
    Author
    Mark Whitworth
    Digital Designer
    Mark is a veteran of digital design, having been in the industry since the late 1990s, back when people still 'surfed the web'. He has a keen eye for design and UX, which he has honed over years of experience working on digital projects for a variety of clients. Originally from the North, Mark now considers himself happily in exile. In his free time, Mark can be found exploring the great outdoors or reading a good book on landscape and nature.
    @Twitter
    Read more from Gecko
    Black Friday: Is Your Website Ready?
    Google's Helpful Content Update
    Serverless Computing: Definition and Benefits
    Follow Us:

    Gecko Agency (Edinburgh)

    hello@wearegecko.co.uk
    t: 0131 240 3390

    t: 0131 240 3390

    Head Office

    Orchard Brae House
    30 Queensferry Road
    Edinburgh
    EH4 2HS

    Gecko Agency Ltd | Copyright © 2025

    • |GDPR
    • |Privacy Policy
    • |Cookie Policy