The aim was to create a single page template that is flexible enough to be able to host a wide variety of content types. It should be skin-able, responsive, easy to manage and everything should be re-usable.
Modular layout
By defining a set of layout modules I was able to provide editors with a tool they could use to pick-n-mix content modules, arrange them in any order and easily manage all types of content.
Colourways
The designer did a great job of creating a layout that uses just a few colours in different ways to create a palette that feels unique.
The editor can select the colours to use in each page and the layout responds accordingly, giving the editor great control over look-and-feel but without allowing them the opting to create something that doesn’t fit well with the designer’s original vision.
Nothing is bespoke
Any new functionality that needs to be added to a page should be built in a re-usable way, so that any other pages built using this template may make use of it in the future. By sticking strictly to this motto of multi-use it helps keep maintain a common UX and visual language as well as focussing editorial planning to maximise the tools available.
Flexbox
One module in particular allows editors to create columns of images, videos, text, ads and feature content. I use CSS flexbox layouts to create a grid view that responds beautifully and gives an almost unlimited choice of layouts for editorial content,
Available modules
There are currently more than 10 modules including:
- Hero
- Carousel
- Tile grid
- Banners
- Ad units
- Highlights
- Voting
- Menu
- Videos
- Flex columns
