First off, lets explain exactly what component driven design is.
Designing in components
Instead of designing a specific page that stays the same until you invest in further design and development, component driven design is based on designers creating individual components that, when put together, form pages of the website. These are designed with the knowledge that they can be put together in any order, housing various types of content on each page, whilst working harmoniously with one another. We usually design desktop first, then ensure that every component looks equally great on mobile and tablet, too. Designers will ensure every piece of functionality and content agreed by the team is made possible from one or multiple components.
We still design your website page by page, and you’ll still give feedback and eventually sign off each page to be developed as per the page’s design. The beauty of component driven design is how flexible it makes your website once it’s launched.
Building a page in the CMS
Component driven design makes a website easily updated by the client, as you simply select which components you want to use, and in what order, then you add whatever content is required – all in the CMS. We know your time is important, and you don’t want to be spending your days faffing around with a confusing back-end system, just to add some new content to your site. We make the process as simple as possible – allowing you to create beautiful pages in seconds.
To make it as stress-free as possible for you, and because we want to give you freedom and control over your website, we also create a Style Guide that you have constant access to. This shows you all the components, what each is called so you can correlate in the CMS, how they look, any options you have on them, and useful information. You can refer back to this whenever you need a helping hand.
This is a section of the Style Guide we created for component-based website Think Pacific.
A site we designed and developed using components was Think Pacific. Their brand style was extremely unique and they were always updating content, so they can now add new, unique pages whenever they like. We created a style guide which documents every component, so they have a list from which they can see various options of how each one can look.
Why is component driven design better than traditional methods of web design?
With this type of approach, you get far more control over your website in terms of how flexible the layout of the pages can be. For companies that rely on their website for enquiries, gaining new clients and communicating with their customers (so, most), having this level of control is extremely beneficial on many levels. Not needing a developer whenever you need a new page can cut costs hugely, and means you can get things done on your time, not everyone else’s.
If you wanted to promote an event, product, or just about anything, you’d be able to create a new landing page exactly how you wanted to with hero banners, videos, nicely laid out text pods, social media feeds, and more, even choosing a component to add to the homepage in which to promote that specific page. Link to these specially created landing pages on social media and in your marketing emails, and voila. Easy.
As for the development side of component driven design, we leverage the Flexible Content module built into the popular WordPress plugin ACF, to make all this happen. Unlike other plugins, such as Visual Composer, ACF is fast and lightweight, as only the code for the modules being created is output on the page, so there’s no extra ‘bits’ which your site doesn’t need, negating increased load times.
Component driven design as created by a client
BetterYou have a Magento site with WordPress bolted on to ensure they can easily update their rich content. They do lots of marketing and need explanatory landing pages to capture attention of their users. Here’s an example of a landing page they created entirely on their own, using components created by us. Each component was carefully considered and adhered to a tight brief set by both teams, and together, they allow BetterYou to create totally unique and tailored landing pages that help them get a great conversion rate.
Sound like something you want? Get in touch via our contact form, or give us a bell on 0113 245 8870.
