Breezi Blog

Dear Intrigued Person,

This may be the first time you’re hearing about Breezi, so let me explain a bit about who we are and what we’ve been working on.

Today, we’re releasing the Designbot as part of our website builder platform, which you may have used in the past.

So what does Designbot do? 

Designbot makes design iteration, and getting to a design that you love, much faster. It also makes the process enjoyable, by simply showing you results and letting you say what you like and don’t like. Designbot then takes that input and generates more designs based on your feedback.

For small business owners with small budgets and no time, Designbot can help you go through hundreds of iterations and get a great looking unique website up in a minutes. In the past, small businesses have been limited to rigid cookie-cutter templates, or hiring a professional designer, but Designbot now lets you have a fully custom designed site quickly and easily.

For creatives, it allows you to start from a point that is closer to what you want to end up with. After picking your design, you enter the Breezi editor, and have very powerful customization options, so you can make the more finite adjustments that you need to accomplish your vision.

The Thinking Behind Designbot

I’d like to now explain why we built Designbot, and what we’ve accomplished to date.

A while ago, we thought it would be interesting to build a guided design experience while creating a website. A tool to help take your inputs and guide them. An example would be If you want to change the size of your font, for example, let us suggest that you also change the line height.

A pretty simple idea at heart around the belief that all good design is based on math. More specifically, designs of web pages that contain information.

Design has been based on math since its birth.

While I don’t have enough data to prove it, my belief is that most digital designers don’t think that design is based on math. They do, but they don’t. Since they are the creators, most people don’t really believe that what happens in a designer’s mind could be done with a machine.

At best, most digital designers believe that math is just a validation technique. It’s a post-production thought. In some forms of art, that may be true. That the raw material is there, and math is just a testing technique to get a better composition or balance things out.

In web design, however, math can have a larger influence.

It can define the core concepts and really reshape the raw material (content and core structure). It can be part of the core process of design. Math can be treated as a first class citizen from the beginning. In some cases, it could even reshape the core structure.

You may have come across math’s influence on typography, balance, white space, composition, colors, etc. You were probably intrigued, but that’s it. It’s nice, you get it…but it leaves out the magic.

Our thesis was that this “magic” was a solvable problem. And that, as humans, we are very good at recognizing lots of patterns, are able to be influenced by those patterns, and then remix and implement them in our own creations.

All we needed to do was replicate this process in our algorithm, which turned out to be easier said than done.

After almost two years, the Designbot is a first stab at solving this immense challenge, with the following limitations:

• It’s restricted to simple web pages
• It’s limited to a certain library of images and content
• It’s for a set number of use cases only to start out

It’s by no means anywhere close to what a professional web designer can accomplish, because of the limitations we have on resources and time. However, we have laid all of the underlying technology to be able to accomplish this in the journey ahead.

Our Most Notable Accomplishments

• We built the world’s first color scheme generation platform. It can take any given color and produce beautiful schemes that can actually be applied to an entire page (not just backgrounds and text). Color scheme generation that is agnostic of the page’s content and layout is extremely different than coming up with a general color scheme.
• We designed a very powerful layout generation platform, which can manipulate and create new layouts on the fly.
• All the designs generated are then brought into Breezi, and can be fully edited with an incredible amount of flexibility and control.
• A design can be produced in less than 2 seconds.
• The designs are all generated on the fly.
• Background imagery served within our designs are processed on the fly.
• The designs produced from the engine are beautiful, and offer tremendous variety.
• We have a large library of apps that can be manipulated in terms of content, settings, form, and design on the fly.
• All the designs are fully responsive, and are also backed by a device optimization platform, which can optimize functionality such as navigation menus and galleries for your particular device.

I think those are pretty impressive accomplishments.

However, our algorithm also has a very long way to go. Our goal with this release is not to say, “Hey, we’ve replaced the designer.” It’s to say that we’ve taken a stab at a very hard problem, and feel that we have fairly good results.

We truly hope that it has value to people that could never afford professional design services.

On a separate note, we’re bringing back the free plan for Breezi sites. Read more about that here.

Thanks so much for reading.

With much respect,
Navid + Team

Dear Breezi User,

We’ve brought back the free plan.

You’ll now be able to fully create and publish your site for free.

The following features are reserved for Breezi Pro plan users

• Your own domain
• Removal of Breezi badge
• Creating more than 2 pages
• Removing Breezi favicon
• Using FTP sync option
• Bulk style propagation
• Use of dot profiles

We hope that this change allows many more people to enjoy Breezi’s powerful capabilities.

Many people have asked about this feature and I’m glad to tell you that our Device Optimizer is back!

For those who do not know what Device Optimizer is, basically it is a feature that will optimize your site to make it work properly on different devices, changing part of the behavior of the apps in order to get a better user experience when you’re surfing your site using a mobile device.

In this case we will focus on the Navigation and Image Gallery apps. If we talk about Navigation app, I can tell you that now the entries are correctly aligned and if you have any sub-menus you will be able to access them just by pressing the parent link and a pop up bubble will appear with all of the sub-links so you can select any of them. Here are a couple of screenshot about the Navigation app:

Navigation app before and after Device Optimizer

In regards to the Image Gallery app, now you can swipe your finger to navigate through the images, this way we got rid of the pagination arrows and now you can take full advantage for your smartphone’s capabilities. This is how the app looks:

Image Gallery app before and after Device Optimizer

In order to activate this feature, please go to your site and click on the “More” tab, then click on the Device Optimizer option. The device optimizer modal will appear on the screen, once it happens just click on the check-box and save. After that, you will have to click on the Publish Changes button and you’ll be ready to go.

Let us know if you have any comments or questions.

Warmest regards,

Yesterday we took over the homepage of breezi.com to announce the release of our upcoming design engine.

It’s a huge step for Breezi because we will start to do most of your work in terms of actually “designing” your site. That is arguably most of the work that anyone does when creating their site besides content.

What do we mean by “design engine”?

We’ve created something that can take your inputs in terms of color, use case, imagery and be able to generate millions of design results on the fly. That’s what we mean by design engine.

I won’t tell you exactly how we’re going about this problem but what I can tell you is that if you have good taste but don’t know how to design, you will love it.

We’re excited

Well, it’s the world’s first attempt at a design engine. Never before have you been able to give a machine some basic hints and get hundreds of results that match your taste. You’ll be able to drill down or stay broad. And of course, any design comes with all the super powerful editing features of Breezi. That means that you can keep it just like that or edit every single part.

Some history

When we set out to build Breezi, the idea was to created a guided design experience. That meant that we wanted to help you design without requiring you to know the fundamentals of design. Here an example: when you change your font size, your line height would change along with it or when you change your text color, we’d check for legibility.

Those were just parts of it but the larger idea was to connect all of those decisions so you could make incremental choices yourself and end up with something that looked unique but didn’t require you to understand the fundamental math behind design.

So that was the dream. It turned out that you need a lot of standardization under the hood to be able to do something like we dreamed of. That took a long time. Breezi took 2 years to develop, was released in a super premature beta in 2012 and finally came out of beta in october of 2012. In the past few months we were able to finally start dreaming up how to help guide the user on how to design.

This is what this new release is about.

When will it be released?

Monday, the 29th of April.

What does this mean for current users?

Nothing inside of the editor will change. So you guys have nothing to worry about.

Beta

Our design engine’s design possibilities will increase with time so be patient with us as we perfect this beast. This doesn’t mean that we’re going to release something half-baked. Just that we think 30 billion possibilities is good enough for beta. We want to see how you like this to know if we’re really providing you value or not. Your feedback is very important to us.

————————————————————————————————————————————————

You can signup to get notified on our homepage. We’ll put up a video previewing the design engine on Wednesday the 24th.

As a personal note, I’d truly appreciate it if you do like what we do, tell everyone you know about it.
Thank you so much,
Navid

As you know we’re constantly releasing new apps and features and now, we are really excited to announce that our new Form Builder has arrived!

With this new app you will be able to create your own custom forms in a matter of seconds. We have integrated Jotform which is one of the best form builders on the market and now you can generate your custom form without leaving your website, how amazing is that!

Do not waste your time and access your site so you can try the Form Builder app.

Did I mention that this is a free app? Go ahead and enjoy!

All the best,

Please see below. Hopefully it will answer all your questions.

There’s some exciting news to share! We’ve released one of the 1st integrations with our Shuffler engine, which lets small business owners import their Yelp listing information into a beautifully designed website on Breezi. This is the 1st prototype, so please take a moment and check it out.

How it Works

Shuffler goes to your Yelp listing page, grabs all of the pertinent content, and inserts the content into one our templates. Then our design shuffler produces a variety of design combinations using our partial skins, and generates a preview screenshot of each, so you can choose from a range of awesome designs with your own content preloaded from your Yelp listing!

What Happens Next

You can then choose one of the designs, all of your information will be transfered into your new site, and you’ll be able to edit and customize it as much as you’d like!

Check it out!

This guide will walk you through the usage of the site creation process and how to get the signup form up and running on your own hosting. If you would like to just use our hosted iframe version you can check out the Embed Breezi Signup Form in your Affiliate Site tutorial.

NOTE: For web hosts interested in using the following method to resell Breezi directly to customers within your hosting package(s), we’ll just need to add your server IP(s) so your customers’ sites are flagged as paid. Please email us with questions and for more information: navid@breezi.com

Prerequisites:

• Basic knowledge in HTML/CSS, Javascript and PHP
• Your server must be running at least PHP Version 5.3.15
• Make sure you have cURL installed on your server.
• You should have your Affiliate Id ready. if not you can get it from here.

If you would like to check if your server has cURL installed you can create a phpinfo file and search for libcurl:

<?php

// Show all information, defaults to INFO_ALL
phpinfo();

?>

Make sure you remove this file from your server after testing it.

Signup Form Configurations:

Please open ‘index.php‘ located in the code sample folder and find the following hidden input:

<input type="hidden" id="a_aid" name="a_aid" value="{{AFFILIATE ID}}">

Replace ‘{{AFFILIATE ID}}‘ with your affiliate id.

Download Package

Change Log

• Version 1.0.0 (released 2013-01-14).
  Initial Working API.

Would you like to allow your website visitors to create Breezi sites from your own host?

if you would like to use our advanced API to fully host the form in your own host please checkout Breezi advanced site creation API tutorial.

NOTE: We also offer an advanced site creation API. For web hosts interested in using the following method to resell Breezi directly to customers within your hosting package(s), we’ll just need to add your server IP(s) so your customers’ sites are flagged as paid. Please email us with questions and for more information: navid@breezi.com

iFrame:

First you will need to signup in our affiliate program: http://breezi.com/affiliates/affiliates/signup.php#SignupForm once you complete the signup form you will receive an email with your affiliate ID.

Then copy and paste the following HTML code in the area you want to display the Signup form:

<iframe style="width: 100%; height: 495px; overflow: hidden;" src="http://breezi.com/API/dev/modal/?a_aid=97d69bb4" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Don’t forget to replace the affiliate id in this example with your proper affiliate ID

Preview or Download

Modal Window

Require HTML/CSS Experience

You can use any jquery plugin or twitter bootstrap to open the signup form in a modal. In our modal example, we will be using Twitter Bootstrap Modal.

<!-- Button to trigger modal -->
 <a class="btn btn-large btn-primary" href="#signUp" data-toggle="modal">Sign up today</a>
<!-- Modal -->
 <div id="signUp" class="modal hide fade"><iframe style="width: 100%; height: 495px; overflow: hidden;" src="http://breezi.com/API/dev/modal/?a_aid=97d69bb4" frameborder="0" scrolling="no" width="320" height="240"></iframe></div>

Preview or Download

I’m so super excited to announce that we finally have content mode. Content mode might look familiar to you if you’ve ever used any other CMS. So why is this special? Because you now have a CHOICE between having a visual editing workflow or more CMS like which gives you the full flexibility to edit how you would like. When we first focused on building a visual editor, I did a lot of research on what others have gone through and read what they had to say about visual editors and how that leads to creating all kinds of content formatting issues.

What we think is that you shouldn’t have to choose between one or another. That sometimes you want to edit visually and other times you want to edit with more of a CMS view.

This is also great news for when you want to hand your site over to a client or a user that shouldn’t be touching styles. You can have them just go into content mode and edit from there.

Lastly, you’ll notice that there is a “pages” dropdown which allows you to edit the apps from other pages right there.

I hope you’ll enjoy it.

Click it on your shelf and you’ll get the option!