Ask a Question ?
Design & Publish Websites Faster

Creating a Truly Modular Design Workflow

Website builders are often limiting and restrictive and at the end may feel like a whole set of separate tools that in someway don’t fit together perfectly. Even if the tools feel together the puzzle at the end does not add up and transitioning and layering the tool usage between one and the other doesn’t seem natural.

See on the next image how we explain a little bit of how our tools come together. Our Dots handle the styles on your page, that can be modified (all at the same time, depending on dot classification) through Our Bulk Style Editor and then, those changes will translate into a Skin you can later apply to other sites and pages, everything contained inside your site and layout.

Hierarchy

It has been our task to construct an app that erases those limiting borders and allows users to create websites that are as good as everything else you’ll find on the web through the use of tools that layer eachother, tools that fit perfectly in a puzzle and work in a modular way. Our users are noticing already.

 I’ve tried a bunch of web design tools, and this is the best one. You get amazing design and all the tools you need. I would absolutely recommend this to anyone!

Lenka Gondolova – July 12th, 2012

 

Breezi is now full of intuitive tools, apps and features (there are more to come) that ensemble a greater app all together. Each one of the pieces can be thought as a stand alone utensil but at the end all of them work together to create a broader and greater experience.

All of our app’s components are hierarchically nested, meaning each one of them has a certain importance and function to it that coexist with each other.

Seeing The Bigger Picture

Think of how the human body works. We have cells that get together to form different kind of tissues, that all together can create organs, systems and whole support structures.  For sure, they each have a certain function that can affect the other but at the end all together can work to create a bigger master piece.

On this image you see how our Skins work on layouts. Styles and modifications done through the Bulk Style Editor  then become a skin, each block containing specific styles. If that Skin gets applied to a different page, styles will apply to those pertinent blocks. Header styles to the header, body styles to bodies, etc.

Skins

This is how a Skin gets applied to different sites.

Here you can see some information about our layout configuration and you can learn how to make a skin here.

Breezi works in the same way, by managing different modules as layout elements, dots, apps, tools and features to create a bigger and broader tool that works in an amazing way.

Modularity Within Our Tools

Breezi is constructed in a way that their tools can always be divided and categorized into smaller pieces that all function together. Some of the core modules of Breezi are:

  1. Layout

  2.  Dots

  3. The Bulk Style Editor

  4. Skins

And the above mentioned are not the only parts of the whole system or editor that are connected to each other; we have Apps that are contained inside the Layout, that get modified through the use of Dots and the Bulk Style Editor, pages that contain all these elements and can be changed through Skins, Content Sets that can give you an idea on how to manage content and more.

See on the next picture how each layout component can be divided into others.

Layout

Some of our Layout elements.

Elements Are Internally Integrated

Even if all the previous components have specific functions, they are all interconnected and changing one of them affects the other . They can work in layers to create a final product.

Dots contained inside your layout can be managed through the Bulk Style Editor wich then creates a skin that can be applied to your layout on other pages.

Modules

Our Layout contains Dots that can be be managed through our Bulk Style Editor, all of them conforming Skins

Creating your web page and using our web design tool can be done in several ways, but with time and understanding all this tools can be beneficial to you in saving you time if you follow your own defined process.

Every action that you do will affect others and every tool can improve your whole design in a good way. The great thing about our app is that this is a tool that allows the design process to flow smoothly, is mistake correcting in a way that can select specific errors and bad styles and remove them, equalizes values and gives suggestions in case you are feeling blocked.

First, creating the perfect layout for your page (of course, sketching, wireframing and mock-upping come first), then adding Apps,  content and basic styles to have a glimpse on how your page will look like, styling your apps through their Dots and CMS,  then, using Skins and the Shuffler to get ideas in case you’re stuck with your design or jumped straight to the Bulk Style Editor to manage general styles and then go for the details through the use of dots.

There are two ideas that helps us understand our program’s Modularity.

Modules: Interaction & Integration

The Layout, Dots, Bulk Style Editor, Skins, Content and other features all work together inside pages and between each other to function as a whole tool.

The modules do not only interact with each other but within them there’s integration as well.  Each piece and module can be divided into smaller pieces that will integrate each other.

Styles get manages through dots and their profiles, that at the same time compose skins through the Bulk Style Editor, all of them get applied on the site layout that can get modified through the builder.  All these styles not only get applied to the layout, but also apps and content, and everything gets managed trough tools, settings and the editor at the end.

Puzzle

Elements can be categorized and they interact through each other like a puzzle.

All of our features connect through each other. The Apps are contained through the Layout and all of them get modified by Dots, the Layout can be divided into smaller areas as blocks, columns, containers and zones and all of them get modified through the Layout Builder. Each piece and module can be divided into smaller pieces that will integrate each other.

Through all this examples you can see how our application is interconnected and how every tool can be divided into small pieces that are still connected and we are sure that all the upcoming features that we are planning to release are going to take advantage and will form part of the modularity that makes it such a wonderful tool.

Let us know if you have any comments or questions and check our How To page to see some helpful tips and tricks!

Menu