Sagar Patil

jawe

A website builder for everybody.

challenge Design and build a website builder that allows people to build websites rapidly without knowing any code.

role Defining product vision and strategy, UX, project planning and all front and back end coding.

Jawe - A visual website builder

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 original BAR toolbar that I built and deployed for clients
The original BAR toolbar that I built and deployed for clients

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.

The backend for LMC Architects that uses BAR to allows them to customize the layout and formatting of the site.

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.

Live testing features page Menu window with the style guide and settings
Menu to edit buttons and button styles Menu to edit buttons and button styles
List of typographic styles List of typographic styles
Editing a typographic style Editing a typographic style

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.

Choice of templates that can be added to the page
Choice of templates that can be added to the page

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.

Content editor using Quill.js
Layout of the content editor and how option selection works.

Features

Inline content editing

Edit text by clicking on it. Once you're done, you can view the result by clicking outside. This allows users to view changes instantly, rather than having to edit content within a modal window.

Customizable templates

No more inflexible page templates. With template blocks, you can combine multiple different templates, in any order to create unique pages. You can always reorder your templates by dragging and dropping them into the desired position. Combine templates together to create new templates and save them to your library of custom templates.

Save and share templates between projects, even retaining content if required. Build a library of components that you commonly use across projects.

Layouts set to an adjustable grid

The content editor allows users to add and edit their content, change the style and formatting, add links and media and even buttons to the page. Based on the popular Quill.js library, the content editor can be customized to allow additional plugins, such as the button creator, to be added.

Add and edit any type of content

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.

Build any type of platform

Jawe allows you to pick and choose the UI elements that you want on your web page or site. By organizing the UI into blocks and templates, users can choose what to build a blog, website, scratch pad or even an online store. When starting a new project, you can select a template to get started with the type of platform you are building.

Get started with pre-built templates for startups, stores and portfolios.