DOT & BO CMS ZONES

As part of the Dot & Bo site relaunch, we were building our own Content Management System to more efficiently create content for our site via a page builder. The page builder allowed the user to select pre-defined zones, or widgets, to build the layout of their page. Those included media zones, text zones, content zones (where you could select what page you wanted to pull info from to populate the information in the zone) and product zones. All of these different zones would open up a lot of possibilities in the daily content generation aspect of the business.

Below you will find my designs for some of the zones mentioned. Most zones have the ability to toggle on or off the border and I've included both desktop and mobile designs.

 

content zones

 

single large - vertical & horizontal - desktop & mobile

hor-large-DESKTOP.jpg
vert-large-1-DESKTOP.jpg
 
hor-large-MOBILE.jpg
 
 
vert-large-1-MOBILE.jpg
 
 

two across - VERTICAL & HORIZONTAL - DESKTOP & MOBILE

vert-small-2-DESKTOP.jpg
 
hor-large-1-MOBILE.jpg
 
vert-small-2-MOBILE.jpg
 

three across - VERTICAL & HORIZONTAL - DESKTOP & MOBILE

hor-small-3-DESKTOP.jpg
 
hor-small-3-MOBILE.jpg
 
vert-small-3-MOBILE.jpg
 
 

SINGLE small - VERTICAL & HORIZONTAL - DESKTOP & MOBILE

hor-small-DESKTOP.jpg
vert-small-1-DESKTOP.jpg
 
hor-small-MOBILE.jpg
 
 
vert-small-1-MOBILE.jpg
 

product zones

 

blend - product & content - DESKTOP & MOBILE

blend-2-DESKTOP.jpg
 
blend-1-MOBILE.jpg
 

SINGLE LARGE product - DESKTOP & MOBILE

merch-1-DESKTOP.jpg
 
merch-1-MOBILE.jpg
 

product carousel - DESKTOP & MOBILE

merch-car-DESKTOP.jpg
 

five collage grid - DESKTOP & MOBILE

merch-col-DESKTOP.jpg
merch-col-MOBILE.jpg