I wanted a drag-and-drop visual web editor that would help me build websites by combining commonly used UI templates from previous projects. I also wanted to manage all client projects from a single interface and provide clients with access to a backend to manage their website.

Opportunities

Problems i faced with popular tools such as Wordpress, WebFlow and Medium include:

• Wordpress, arguably the most widely used website builder, only provides full page templates i.e, the entire page is a template and you can only change the content. I wanted to use a combination of block level templates, that would allow me to use multiple layouts within a single page.
• Customizing templates requires editing the codebase.
• Lack of inline editing options making content editing cumbersome.
• As site builders add more features, they get more complex in usability and interfaces.

Goals and Research

After a decade of designing and building websites for clients, Niraj Patil and I are collaborating to build a tool that helps designers and business owners publish professional websites without learning code or requiring a developer.

I wanted to build a tool that allowed me to design and publish high quality, professional websites quickly, using drag-and-drop templates without having to rewrite code blocks for each new client. By giving clients access to a backend, they would not only be able to create and edit content but also be able to create new templates to edit the layout and designs of their website.

Learning from past work

I had previously built a custom CMS solution called BAR for LMC Architects, as they wanted to manage their own content with the option to customize layouts for their projects. The CMS was a simple floating toolbar from which users could select templates to add to a project. A template was a UI unit that could be dragged to the screen and reordered to structure the document. Styling of the content followed the rules defined in the CSS.

The CMS was limited though, and did not allow users to add media using URLs, link video, add new sections and page and more. The system was tied closely to the clients requirements and hence needed to be reconfigured and redeployed for each client. Clients were also restricted by what they could change. Having to make a design change or expanding the capabilities required the client to get in touch with me each time. This was an inconvenience to the client and myself.

Architecture

Jawe provides enough flexibility to allow users to use the same templates in the same order and still create unique pages. Jawe is built around 3 main components:

Style guide

In order to make websites seem more consistent and improve usability, a style guide is required. The style guide defines the rules that determine how users can use colors, fonts and UI elements on a website.

Templates and UI

Building pages with customizable blocks - each block is a self contained unit with it’s own properties. Children of the block also have their own properties. All templates are responsive by default. Only the content and styling needs to be modified.

Content editor

The content editor uses the popular Quill.js library to provide editing, formatting, linking and adding media by default. The plugin can be extended to allow adding buttons, tweets and other rich media within the content. The content editor only provides formatting options available in the style guide.