Slices vs Templates

Tomislav Mihić
The holy grail of UI design and development for years has been producing modular elements that can be reused indefinitely after initial inception. It is pretty standard that certain elements are reused across projects like buttons, inputs, tabs and other, but correctly positioning them on a page requires certain knowledge in both design and development. For this reason, reusable sections are being defined, so let’s take a look at both templates and slices.

Templates

Templates are designs of full pages that have editable content and imagery. Page templates have been a regular go-to for web developers to showcase a unique design with a versatile purpose. With a page template, you can pick the type of content a page should have, structure a layout, and then populate with the provided copy and media. 

Pros

  • Enables a more unique flow of the page
  • Content can feel more connected

Cons

  • Depending on the approach some pieces of the page might be difficult to reuse
  • Slower development time of new pages
But what if you removed the constrain of a defined page layout, and gave users the option to make each page unique, all while keeping the simple copy editing feature? This is the idea behind slice templates.

Slices

Slices are modular components that can fit any type of content, they always span the width of the browser and are stacked vertically one after the other. What page templates do for the whole page, slices do for horizontal blocks: they have a defined type of content with a defined layout.  A single slice can be used on multiple pages, which in turn significantly speeds up development time.
Users can enter allotted copy and choose settings specific to slices like colors, varying backgrounds, spacings, image placement, ordering and other parameters. This allows the same slice to appear on multiple pages while still looking unique and fresh.
Today, page builders are becoming increasingly popular with more tech-savy clients and larger sites. They use slices as a more flexible design approach for pages. Maintaining the overall design can become difficult in some cases, as it can deviate from industry standards if adjusted improperly. It is important to not deviate too far from UX standards while also following best practices for maximum content. 

Pros

  • Drastically improve development time
  • Easier to create new pages
  • Easier to maintain

Cons

  • If implemented improperly on a new page it can ruin the flow of the page
  • If adjusted improperly it can deviate from internal and industry standards
Whether selecting templates or slices – there is no perfect solution, as each approach needs to be fitted to clients’ needs and capabilities; however utilizing slices to build new pages provides greater flexibility and increases turnaround for new pages. 
Engage, deploy, accelerate, and innovate with us.