Animated Logo

© 2017 James Hellesen - New Media Design

Visualizers Banner

Visualizers

Web Development

Project Description

Visualizers are the separation of design and content. Visualizers allow the front-end developer to create chunks of websites that can be rearranged and updated with content at any time by someone with little to no web development background. In a cross functional team environment where the developers can focus on the development and the marketing wordsmiths can focus on their words, visualizers become an efficient use of resources when creating a website of any size.

My Role

As the product engineer, I used DNN Software’s Evoq CMS visualizer technology and my responsive web design background to create clean and interesting web layouts. The visualizers I created were used on DNN Software’s homepage and throughout various secondary pages. Every visualizer I created was designed to be fully responsive and look great on any size screen. I worked with the product, marketing and sales teams to create visualizers that were both visually appealing and interactive web site experiences.

Tools

HTML

CSS

JavaScript/jQuery

Sublime Text

Photoshop

Illustrator

Sketch

Launch Website
dnnsoftware.com

Case Study

Problem

DNN Software had an outdated website that didn't use the features in its Liquid Content CMS, Evoq. The site was hard to update, poorly designed and used obsolete features.

Solution

Leverage the power of Evoq Liquid Content and re-design DNN's website with new visualizers that can easily be deployed and updated by the marketing team using DNN's own Evoq CMS.

Original Image
2015 Design 2017 Redesign
Purpose
Each visualizer that's requested internally or externally has a specific purpose in mind. Whether it's a banner that features a video and several links or a static image with some text in an interesting layout or a image gallery slider. Knowing what the visualizer is going to be and the technology that makes that happen will inform some of my design decisions.
Design
While designing visualizers for DNN’s homepage, I wanted to keep a consistent design aesthetic across every visualizer. Mockups are made and reviewed internally. I chose to use Sketch for mockups because of it's unlimited artboard feature. Each visualizer has a detailed image and a thumbnail that need to be designed and fit into DNN's established product brand guidelines. Having all my visualizers in 1 place allowed me to create modular designs that are used interchangeably.
Visualizers Design
Design
While designing visualizers for DNN’s homepage, I wanted to keep a consistent design aesthetic across every visualizer. Mockups are made and reviewed internally. I chose to use Sketch for mockups because of it's unlimited artboard feature. Each visualizer has a detailed image and a thumbnail that need to be designed and fit into DNN's established product brand guidelines. Having all my visualizers in 1 place allowed me to create modular designs that are used interchangeably.
Prototype
I used HTML, CSS and JS/jQuery to produce fully responsive and interactive visualizers that look great on any screen size. Producing the code locally allows me to quickly make progress and get rapid feedback from colleagues.

I was allowed some creative freedom while creating visualizers. Some of my favorite visualizers used looping abstract animations for backgrounds and others had a built in alternating layout and would automatically update the website when new content is added and tagged correctly within the CMS.

Working as a cross functional team on the visualizers was a lot of fun. Splitting the work into silos and having great communication between silos allows new webpages, entire websites and new features to be produced swiftly. I was part of a great team who all owned their parts of the project.

Setup Content
Setting up the content in Evoq is as easy as dragging and dropping what you want. Each piece of content gets it’s own content field. Separating each piece of content is vital to keeping things easily updatable in the future.
CMS Integration
When you are dragging and dropping your content fields, Evoq is adding special hidden tokens that communicate with the visualizers associated to it. When a piece of content is updated and saved, that content information is then instantly sent to the visualizer and updated on the website. I replace the placeholder content in my local prototypes with these tokens when creating the visualizers. It’s easy as copying and pasting and replacing content with tokens.
CMS Integration
When you are dragging and dropping your content fields, Evoq is adding special hidden tokens that communicate with the visualizers associated to it. When a piece of content is updated and saved, that content information is then instantly sent to the visualizer and updated on the website. I replace the placeholder content in my local prototypes with these tokens when creating the visualizers. It’s easy as copying and pasting and replacing content with tokens.
Deployment
Once all the code and tokens are in place, the marketing team can then update and replace any content they see fit. We can both be working on the same visualizer at this point. I can be updating styles, scripts and do mobile testing while the marketing and sales teams update and add their content. Applying a visualizer to a page is selecting the visualizers and the content for it and dragging and dropping it in place on the website.

Other Projects