Cloud-CMS Theme & Patterns

Background

Strikingly.com is a cloud-based content management system (CMS) that allows users to create, launch, and edit a variety of professional websites as easily as a Text Document. While competitors include Wix, Weebly, and Squarespace among others, Strikingly features an extremely easy to use interface with bold themes and layouts. I designed my own custom theme during their recruitment process to amplify existing functionality and content widgets with a bold wow-factor.

Goals

• Design a new responsive layout for desktop and mobile screens
  
• As a site template, the theme should accommodate a variety of use cases and content 
  
• Retain all existing content widgets
  
• Utilize current UX library and/or behaviors wherever possible  

Inventory of Existing Themes

I compared the 19 themes to identify patterns in features, widgets, styling, and possible uses for each design.

Navigation Patterns

I made note of the various navigation bars and I realized that there are only a handful of navigation options, despite slight formatting differences.

Early Ideas - “Vivid” Theme

To truly create a new theme for Strikingly, I wanted to combine unique layout elements with a navigation bar that hasn't been widely implemented across existing themes. The name "Vivid" is inspired by the intention to highlight bold photography in the headings and "Slider" widget.

I began to sketch how my ideas could come together and which content widgets I could include.

Introducing “Vivid”

I basically took aspects of the "Coffee" and "Perspective" themes to come up with this new hybrid template. I wanted a theme with parallax scrolling without "Perspective's" blocky layout.

I've noticed Strikingly's newer templates have rich placeholder imagery and text to illustrate possible use cases, as opposed to simple pages with generic labels. I, therefore, built a template for an architecture firm which would likely want to prominently feature their projects.

Features include:

• Background images for the header area of each widget (those with a title - note plain text widget).
• Parallax scrolling for those background images.
• Taller "Title" and "Slider" widgets to really feature the background imagery.
• A new UI for the "Slider" widget, bringing the next and previous arrows alongside the content container instead of the left/right screen edge.
• Transitions between slides would fade-in as opposed to sliding in from either side (and would not have parallax scrolling).
• There'd be no fade-in effects for widget content to emphasize the parallax scrolling of each heading.

I've included the "Strikingly" branding for reference even though some features are only available with paid accounts.