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.
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.
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:
The Bulk Style Editor
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.
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.
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.
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!