From Design to CQ-fied site

Here’s a scenario for you…

Your mission should you chose to accept is to build a CQ site in four weeks and all you have is a series of design comps”

Sounds fun eh? Well it actually happens in most projects that I’ve been in. You see in most cases clients decide to build a new site in the following order:

1. Client buys CQ/WEM.

2. Client hires design firm to design the new site.

3. Client hire us to implement the site based on the design comps.

So where/how do you start? (That’s usually the question that clients ask us on the first day of the engagement).

Before I go technical here, there’s ALWAYS one thing that should come first regardless of the project: Business first.

So understand what the project is all about, why CQ/WEM was purchased and what is its driving purpose. Project success are measured not by the elegance of the design nor the complexity of the code, but rather meeting (and exceeding!) the expectations.

Once that is clear then it’s a matter of following few simple rules in the “comps-to-components” translation. (Note, it would be easier to follow the instructions below with samples. Unfortunately most samples that I have are client sensitive data, and it’s hard to find samples online).

1. Identify the templates – Design comps always have some sort of pattern. Even though most designs are quite open-ended and not CMS-optimized (i.e. Most design firms don’t under the concept of re-usability, hence pages are usually designed as pretty as possible without any further thought how it would be translated to code), there is a pattern. Page design usually have a footer and a header and a variation of content in the middle. Whether there’s a left, right or top navigation, there is a pattern.

In most cases, there will always be a “Home Page Template” and a “Default Page Template” (i.e. templates that is used to design internal pages). A Default Page Template can usually be broken down to multiple other templates. It all depend whether you want to create: content templates (templates are used to make it easier/faster for authors to create content without adding any other component), generic templates (templates are open-ended and can add components), or a mix of both. The key here is you want it to be simple and it make sense for authors to use it.

2. Identify the components – This is the most difficult thing in deciding what is a component and what is not based on the comps. It’s easy to take a look and see the structure of the design. There’s a footer there, a header here, a navigation on the side, and so on and so forth. However, the key here is figuring and answering a few things: How will the user insert/edit the content? How will the content be stored? Where does it come from? What is its behavior? As you notice, the theme here is: content. Content is king in the world of CMS. Identifying components should always answer these questions.

However, despite all of these… keep the design simple. Do not complicate the component and make it do too many things at once. You should always think of it as a simple method that does one thing and one thing only. In some cases, you have to make it complex but try to keep it at a minimum.

That’s basically it! Pretty straightforward and simple right? Heh… But as always, practice makes perfect. Enjoy cq-fying those designs!

Additional Notes:

  • Keep in mind that most site designer have no clue how CMS works in general. So if you had to pick, a good component/template design is better than following the design comp.
  • Design comps are just guidelines. At the end of the day  a CQ designer/architect has the final say on how it should look and what make sense in terms of maintaining the code and making it flexible for future changes.
  • Make sure to study the OOTB components/templates that comes with CQ. They’re the best guidelines out there. It’s ships with the product for a reason.
  • Finally… If all else fails you can always blame the designer. 🙂




Comments are closed.