Sitecore components

Sitecore components
15th March 2016

Simplify website design with Sitecore components

How does Sitecore’s architecture influence your design choices?

Sitecore’s object-based architecture lets us design and build enterprise websites using Sitecore components. Rather than designing for page types, we have a component-based approach that encourages our designers to think holistically. This is often referred to as a Pattern Library.

Kagool design with a ‘mobile first’ approach using representative content. This framework is built to manage components. Where appropriate, we use a specific grid system and responsive layouts.

What is a Sitecore Component?

A Sitecore component is a single piece of data sourced content that can be added to a Sitecore page. The Sitecore Experience Editor is designed to let you build up a page using Sitecore components. To help editors maintain consistency these components can have set rules as to where they can and can’t appear on the page.

The beauty of this is that components can be reused across the site, on multiple pages.

It’s also easy to swap out the components of a page for more personalised, contextual content. Which components you present to a visitor can be personalised based on their current activity. Or by their previous engagements stored in the Sitecore Experience Database. Plus marketers can easily use A/B testing or Multi-variate testing.

Things to consider when using Sitecore components

Our responsive design is driven by content and guided by device interactions.

So you have to ask yourself:

  • How do I make sure these components are always used correctly?
  • Can this component be reused across other areas of the site?
  • What if it’s dropped into a wider column?
  • How else can this component be used?
  • How can I remain visually consistent if a number of different components are needed?
  • How do I support new designers and developers coming in and make sure they use the information correctly?

The answer? Simple, you need a Pattern Library.

What is a Pattern Library?

A pattern library is not a style guide. A Pattern Library covers the whole experience of digital branding. Some of the most successful and globally recognised brands have a Pattern Library. And for good reason.

The BBC call their Pattern Library, ‘Global Experience Language (GEL)’. They use this to maintain a consistent brand perception across multiple websites. This type of approach is essential for big businesses. Especially those with lots of websites under the same brand.

This method helps you recognise the repeated elements and patterns while guiding you to a holistic approach. This helps designers and developers work together. Our collaborative approach produces great Sitecore websites.

Documenting the visual style of your brand and maintaining a consistent identity is essential. Over time many team members will collaborate on a project so documentation enables designers and developers to ensure consistency. This is a shared language across Kagool. Whether the touchpoint is digital or not, your Pattern Library will apply.

How we approach design using Sitecore components

We use Sitecore components to simplify the entire design process. Sitecore’s object-based architecture lends itself to this approach.

A snapshot of our design approach:

  • Firstly, we identify the requirements. Each page is broken down, identifying the components and grouping similar elements that can be used across multiple pages
  • We then determine the page types
  • We place these components on a wireframe within our framework and start evolving the design
  • We start working on our Pattern Library by applying visual design to each component and creating guidelines for every outcome
  • Finally, we rebuild our page types using the component based designs and see it come to life

Our component-based approach gives designers (and our customers) flexibility and consistency. Our designers always think holistically. They consider how each of the Sitecore components will support the full digital experience.

Sitecore is perfect for this kind of approach. Which is one of the many reasons it’s an extremely effective platform for developers, designers and editors. The Sitecore content management system gives power to editors and marketers, without the need for technical know-how. And there are plenty more reasons to love Sitecore design features. It’s adaptive, device responsive and very easy to personalise.

How can Kagool help you?

As a leading UK Sitecore Platinum Partner, we know a thing or two about Sitecore. We work exclusively in Sitecore. So our UX, UI and Visual designers are always working on getting the best from the platform. And they’re a pretty talented bunch!

We’ve come up with plenty of ways to make Sitecore projects simpler and more successful. Along with designing using Sitecore components, we’ve got a unique approach to building with Sitecore.

For more on how we use Sitecore components for simpler website design, drop us a line. If you’re new to Sitecore, we’d be happy to give you a free Sitecore demo or talk to you about Sitecore pricing.