Best Practices for Designing & Integrating a User Interface for Your Custom CMS

p>One of the most liberating benefits of building a custom CMS is the ability to either design your own custom user interface and experience (known as UI/UX) or, at the very least, choose the best UI/UX for your system from the many libraries available off the shelf.

Most people who opt for an off-the-shelf CMS have zero input into how their admin panel works. They settle for whatever the platform has already designed and perhaps have some minor ability to change the performance of tools or customize some other aspects of their workflows.

Those who have undertaken developing a custom CMS, on the other hand, know how important their user interface is, and have taken advantage of the opportunity to custom design the system.

In many ways, the cost-saving efficiencies of a CMS platform happen on the back end where content is produced, organized, and distributed. Front-end users can rarely tell what CMS you are using (unless the system limits or “templatizes” the front-end experience), so any efficiencies on the front-end typically won’t affect overhead or production budgets. But a properly designed administrative and production panel can result in massive time savings and therefore have a budgetary impact. Indeed, it’s been said that most large media companies are now producing their own CMS systems simply to drive efficiency in production.

The purpose of this post is to address the two main options custom CMS clients have available to them: the utilization of an off-the-shelf UI/UX theme and the design of a custom skin.

(It should be noted that customers of our custom CMS solutions have a third option as well, which is our base theme that we designed in house. Every NPG customer has all three options available to them.)

Option 1: Off-the-Shelf Theme

For anyone who has been regularly reading our blog posts, this may seem like a weird thing for us to say. For the most part, we are against the usage of third-party software when it can be avoided. However, we make an exception for admin panels when the libraries are of a high quality and the cost savings for the customer are substantial.

Just like many CMS platforms have third-party front-end themes available, there are many admin panel themes available for use by back-end developers. These themes are built upon a variety of technologies such as AngularJS, React, or Bootstrap and allow developers to quickly build out administrative portals without being bogged down in user interface design.

The process is quite easy. After choosing a theme that meets the standards that we require, developers or UI experts can wireframe the panel pages utilizing the widgets and design elements the theme makes available. Then, the developers can simply piece together the parts and begin integration (more on that later).

This option works particularly well for clients who are seeking a quick development cycle, as the back-end part of the project won’t undergo a design phase, which can take a lot of time to complete properly. Instead of a typical design-revise-approve process, the opportunity exists to either wireframe or begin development and lay out the admin screens on the fly.

Customers who are undergoing an agile software development approach can benefit greatly from this methodology, as you can have a working admin portal within days as opposed to many weeks. However, much like anything else taken off the shelf, the theme will never truly be yours and future customizations or updates can create problems if not considered carefully from day one.

Option 2: Custom Designed UI/UX

Being able to custom design your CMS’s UI/UX is a major benefit of building your own system, but it’s also the most time-consuming and, in turn, the most expensive approach.

As we mentioned earlier, many organizations opt for a custom user interface because there are massive problems with their existing content production, organization, or distribution methodologies. Enhancing and optimizing their processes can result in significant time savings, which translates to cost savings as well. Other customers benefit from a streamlined production process that can speed up content development timeframes, thus increasing their overall output at the same workforce scale. And some customers simply want to or are required to have their admin panels match overall company branding or style guides.

The process for custom designing a user interface is similar to designing a front-end website in that the steps you take are linear and iterative. Like any other design project, we approach a custom back-end UI/UX by first doing an in-depth discovery, understanding use cases and user types, and then beginning with an initial set of layouts. From there, clients can choose the direction that best fits their eye and requirements, resulting in an initial style guide.

From this point, there are two pathways forward. One is to design a “theme” or an overall set of reusable components for the user interface. This will lead to a deliverable much like the themes you see available off the shelf, only these were designed to your specifications. This approach is great if you plan on future development of the platform without design assistance—developers can take the premade components and simply build out from there, much like a theme. The second way to proceed is to design each screen as needed on an interface-by-interface or tool-by-tool basis.

Which direction you should take depends on your needs and what your future requirements will be. Building a full theme is the most expensive and time-consuming option. However, in the future, you will be able to avoid further UI/UX and front-end coding as you build on top of your platform, as all of those elements will have been pre-developed for you.

Designing screen by screen is faster, but future changes or new functionalities may require additional UI/UX design work or front-end development, in addition to any back-end development the new functionality requires.

Wireframing: Always Recommended

If you use a theme off the shelf or choose to design your own theme of reusable components, wireframing is an essential next step in the process. Laying out the position and function of elements as a wireframe makes it easy to understand how your application will work.

Wireframing can be done two ways if you have utilized a theme or designed and built your own.

First, you can sketch out simple wireframes using prototyping tools or fully design them using graphic design tools.

This method is fast, easy, and allows you to understand the layout without involving developers. However, this also makes it hard to truly understand from a visual perspective how everything will work together.

The solution to that problem is the second option: prototyping the elements of the theme via some simple front-end development. Assuming the theme passed our litmus test and was modular enough to allow for easily prototyping in HTML and other front-end technologies, laying out the elements in this way should be relatively easy, though will be more time-consuming and therefore have a higher budget requirement than a simplistic wireframe.

No matter what direction you choose, wireframing is essential in that it saves time for the back-end developers during integration. The most expensive mistake that can be made is developing the back end and integrating it with a theme, only to change that connection later. A comprehensive wireframing process avoids that mess and keeps the project moving forward instead of backwards or worse, in circles!

Integration

The final step in developing a user interface for your CMS is actually integrating it into your platform. Without going into too much detail about the actual development process, I will illustrate some of development approaches we are utilizing today when performing this task.

Contemporary admin panels are at a crossroads in terms of development methodology. The advent of technologies such as React and AngularJS are changing how teams integrate web applications to back-end frameworks and databases.

In the past, most web applications worked via coding frameworks that connected directly to a database to send and receive data. Today, these new libraries are utilizing API connectivity to power their functionality instead. What this means is that back-end development is now as much focused on building an API, and front-end developers are spending more time transmitting data to and from the APIs to make these admin panels work.

But what are the actual, functional differences between the two?

From the user perspective and from a business standpoint, the new technologies are much more focused on fluid user experiences within the admin panel. The old methodology required many page loads, and only limited data being sent into pages without requiring a new page load. The new technology, on the other hand, allows most data to be sent to and from the central infrastructure with fewer page loads, allowing the user flow to be much smoother—very similar, in fact, to mobile app experiences.

Truth be told, there is no one right way to integrate your admin panel. The new methodologies are taking more time to develop (on average) than the old approach. This is partially because there are more moving parts that developers have to focus on, which in turn takes more time. And in the development world, time equals money.

Another reason is that this technology is still new and emerging. Developers will find more and more ways to work faster as time moves on. What is right for your application depends on your requirements and your specific use cases—two topics that should always be focused on heavily during your pre-project discovery.

Conclusion

The heart of a custom CMS is the user experience. It’s the largest determining factor in building a custom CMS in the first place, and it’s the single screen that, ideally, all of your employees will be using.

Understanding your options for this essential component of your digital business will enable you to make the right decision when planning your custom CMS project. Hopefully, this overview of the process will enable you to have some clarity as you decide on a direction for your CMS!