It's been a while since my last update, so I thought I’d share what I’ve been up to. In this case a little experiment with AI — building a soccer betting game for the World Cup using AI tools and comparing them a bit. In this case I used hermes agent, bolt.new and in the beginning a guided ai-assisted process.

Please note, that this is a personal experience and not deeply tested in different scenarios.

The Experiment Begins: Hermes agent vs. Bolt.new vs. Me

I assume my spontaneous experiment started as I wanted to challenge hermes agent a bit and so I ended up performing a little experiment, being curious to see how well it could handle programming tasks. The whole idea was to put Hermes’s “agenting” skills side by side with bolt.new and how I usually work, which is typing out code, collecting feedback, and merging inputs one step at a time.

I have to admit, at first Hermes blew me away with its incredible speed and first results. Honestly, I don’t recall which free model I used at the time, but it felt like rapid prototyping on steroids.

So my "traditional" process of a guided dialogue with a chat felt far too slow. Also the first results on bolt.new felt like a "oh no, could end up in a rabbit hole loop, cause my instructions maybe sucked".

After my first 20 minutes on AI steroids, I decided to stop the guided process and focus on the two tools. I also made my input dialogues on bolt.new way better and checked out what hermes was doing... it’s something you’ll notice with AI agents... they do a ton of stuff by themselves, so you need to sift through what they really did. Currently, speaking about June 2026, I wouldn't say everything is trustworthy and I wouldn't allow any of the agents out there to access my files and to things I always wanted to do; such as organizing my digitalized CD collection and improving the tagging.

By refining my inputs on bolt.new, I have to assume that the UI-skills of bolt.new impressed me and it was more tricky to rework on that one with hermes. As agents perfom a lot by themselves, a lack of control, moved me more and more towards bolt.new.

Finding My Rhythm with Bolt.new

The more I worked with bolt.new, the more the results improved. What stood out was how bolt.new handled interface patterns — it came with solid, working UI components right away. Hermes agent didn’t quite deliver on this front, but that might have been my fault for not instructing it to use something like Material Design or any other standard UI kit.

So how long did it really take to get a basic prototype running across these tools? In this multi-setup experiment, no more than one or two hours. If I’d focused on just one platform and spent some time practicing, I’m confident it could be done in about 45 minutes. That’s insane speed for putting something real together. But don’t get me wrong — bug fixing takes a lot of patience.

What’s Under the Hood?

Bolt.new went for a setup using node.js, typescript, vite, supabase, it also applied ESLint as their quality assurance. Hermes agent (I didn't brief on technology) used SQLite and Python (FastAPI). To get the matches and scores, hermes chose OpenLigaDB-API. For hermes I researched some data-sources myself (supported by an AI-Chat). My choice was football-data.org, which provides live soccer data. So far I am happy with that solution.

Trust Takes Time: Testing Is Everything

Even with a working prototype, I couldn’t offer this betting game to clients after the first release, or at least I wouldn't have done so.

Why? Because trust wasn’t there. Being experienced in testing for more than 20 years, I know that development always needs careful testing. As AI is not a person you can build trust with over the years and identify potential weaknesses, it requires testing from the ground up.

There were too many small errors — wrong games showing up, incorrect pairings, logic flaws in scoring, and confusion over when bets could or couldn’t be placed. Testing needs definitely much more time than creating the basic prototype itself. Testing is the core of the iteration process and kind of the new key to-do, as we don't speak about 2 hours here.

Maybe this could have been a good task for an agent though, developing the app on the one end, and letting an agent perform testing tasks on the other end. But still, with this long time testing stuff, I would say, quality assurance is a core and in the future far more important.

After several days of running the game during the World Cup, I now feel confident that it works properly — at least 90% right, which is decent enough if you think in Pareto terms.

Interfaces and Infrastructure: The Other Side of the Coin

For me, modifying the interface was actually the easiest part, probably thanks to my frontend experience. It feels good now. So here you see some shots of my version. I created a own visual language based on my core branding colors, included some branding, including own font and some other small tweaks I liked 🙂

For the images I used nano-banana and a style reference I modified before myself.

Another challenge was running everything on my own server. This added a steep learning curve because I ran into unrelated server issues like dynamic DNS problems and other typical “server stuff.” But hey, this is part of our time: with some basic understanding, you can build a lot yourself without falling down endless AI chat rabbit holes. And finally, I am happy about a working version 🙂

Some of my features – test the app yourself

If you want, you could look at the game yourself and give it a test (in both ways, report a bug here and feel free to participate, though it is quite late now – please be aware that the website is only available during daytimes in Munich, as I am following a low-tech approach which means at night the server is not running at all):
Due to data-policy restriction, you need to contact me to get access to the app and the appropriate link. Thank you.

Here are my features:

• Dashboard
  • including fast access to next game
  • your championship tipp, including own scoring mechanism
  • next matches overview
  • latest results, including scoring
• Ability to bet on final round (including updates, when you change scoring or live results modify the pairings)
• maybe some other tweaks I can't recall

What I Take Away from This

• It feels great to create something tangible — to prototype fast and surprise yourself with what’s possible.
• But here’s the big caveat: testing is more important than ever. After 20+ years working with developers, I know that any solution needs deep and detailed testing. And mostly those ticketings and stuff are a pain in the bud.
• Now, with AI-generated code or interfaces in the mix, testing routines have to be even more precise.
• Concepts such as spec-driven AI Development (such as BMAD, spec-kit or OpenSpec) combined with overall strategies for effectively using AI are necessary for a continuously improving iterative process.
• I would even go further and say, that finally testing and quality assurance in combination with modifing the result became far more important. For me it always felt like a pain in the but in the past, if people tested and then report issues to development with tickets... there has never been a good system to really fix things before and it also felt like rabbit holes, reporting an issue, getting a resolved by the developer, reporting a connected issue again, and so on... now, testing could fix the issues in a better way, as it feels more direct and being part of the process if being the tester (in this case recommended with a basic development skillset) is being able to change the result directly.

As the semester ended, I had to reflect a lot on how to restructure this year's courses.

While researching educational offerings in design, I noticed several exciting offerings I want to share with you. Here's my article on educational discounts to help you in design education.

It is very easy to adapt a complete digital design agency setup for educational purposes. Nowadays Adobe Creative Suites isn't the only tool to help students process their tasks. Despite my affinity for AI tools, I won't talk about those for now, as they are too novel for many educators to incorporate them into their classes.

In my case, I'm talking about the tools most digital or brand creatives use to work with clients.

One would look for miro or mural as the tools used to do digital workshops. For UI design, one might also consider Figma and Sketch. Or you might search for more specialized tools such as autodesk offerings, UX research tools or even access to contemporary building tools, such as webflow or marvel.

And believe it or not, most of these offerings are free for educators. Of course those are also free for students, but to fill a course with life, the educator has to care for the contents within the overall curriculum.

I was quite impressed and thankful for all the offerings, so I wanted to share some recommendations with you. Note: this is not sponsored content, but my personal choice and experience. None of the tools are incorporated by me for future classes yet. It's a collection of options to test.

Miro Educational Program / Mural for education

The Miro Educational Program seems quite extensive. There is a great deal of scalability with 100 Team members. Teachers Training webinars and special forums should also be of assistance to inexperienced teachers.

Though I didn’t test it, there’s also an educational program from Mural called Mural for Education. Their offering sounds similar. So if you are already a Mural user, opt for Mural.

If you don't know mural or miro yet, both are incredibly powerful tools to do online workshops, brainstorming sessions, or work together in general. Some even use it during their daily stand-ups. Both tools help you get rid of post-it pollution. In teaching, it is great to learn about students' expectations, show them mappings, and share group work in projects. I am personally not a fan of digital brainstorming. The non-digital approach seems better to me. All whiteboard tools help to prioritize and share thoughts, but for collection I trust talking and writing, depending on the method being used.

Figma and sketch for education

Figma is known by most designers already. The fun part about figmas educational offering is the additional ability to use FigJam, the whiteboard solution by Figma. After doing the registration you are eligible to use figma for 2 years with functionalities similar to the professional account and FigJam on top.

Sketch is the predecessor UI tool before Figma became the most popular tool (while Adobe XD always being around too, also having some advantages such as native lottie support). Finally, as of March 2023, Sketch also offers a free educational account.

As all those mentioned tools battle each other, it's quite difficult for me to give a clear recommendation, which tool to choose. If you are used to Adobe, Adobe XD could also be a fine solution, but currently Figma and Sketch are the benchmarks. So for me the use of variable fonts is a must as teaching the use of fonts includes the use of variable fonts. For those purposes Figma or Sketch are better.

The main disadvantage to know about Figma is that you need to be online. Traveling by train and trying to work in Figma (or also Miro as mentioned before) sucks if there's no proper network coverage.

Webflow

While doing my research I imagined some courses I did on Interaction Design, Interface Design alongside a project to develop at the end of the sessions. The former curriculums included teaching programming languages such as PHP.

Background in teaching interaction design and doing projects

At that time most implementations needed to be done via WordPress as a free solution as all other attempts to get free educational access to a Content Management System were unsuccessful. WordPress is not an ideal solution. However, the question is, does it really make sense to tell students how to create their own theme, play around with PHP files and do some surface stuff? Most likely, if they want to create their own website and develop it further to learn more about themselves.

Regarding the overall curriculum students mainly learn classical disciplines and during bachelor studies most students find more fun with typography or graphical design. When it comes to interactive disciplines, the learning curve is steeper for the same reason that there are also tools to learn, languages to learn,... and the theoretical knowledge of usability and interaction principles tends to get lost on the way.

Why not simply provide students with a tool that does what WordPress combined with some advanced site builder does? Et voila, there's an excellent offering from Webflow to accomplish that.

Webflow educational discount

Okay, someone might ask, why not wix or squarespace which might be both easier to handle than webflow? Without comparing the tools in detail, there's a simple fact: Webflow is completely free as of March 2023. Others offer discounts. Of course webflow is a crazy tool with many capabilities, but I prefer a certain degree of complexity for educational purposes. I would recommend Canva for graphical purposes, as they also have free options for students... but no. Students need to learn something using those tools. It's kind of a playful experience to learn CSS, more about HTML, interactivity, responsiveness and so on. I guess webflow could be an excellent tool for teaching web development.

Honestly I got a bit nervous while checking out, as I registered 20 seats for testing purposes for now (which is the approximate number of students) and I saw quite a large amount to pay, which finally got eliminated by a discount code. Looking forward to testing it in class.

Other resources for educational discounts in design disciplines for free

These resources above reflect the typical setup for a digital design agency and allow flexibility. Below are a few additional links that may be helpful for 3D on the production side or extended research tools for user science as well.

UX research educational ressources

Condens and UXPressia are both free offerings, which I have not yet evaluated. Some of the functionalities could also be done with one of the whiteboard solutions mentioned above, and Condes offers some advanced documentation functionality.

3D

Speaking about 3D, I would mostly recommend Blender to get started. Many students who use Cinema 4D, Maya or 3D Studio Max would say, "Waaa blender", because its interface isn't as polished. So autodesk, the company behind Maya and 3D studio max, also offers a great free option (for one year).

Other educational offerings to be aware of

Being released in September 2022, the team behind breakdance page builder aims to be a competitor for Elementor, Divi, Brix, Zion and other visual site builders on the market. The other site builder from Soflyy on the market is oxygen builder that aims for more advanced users.

While logging in to my oxygen builder account, I noticed the notification to be able to activate the 1 year breakdance license for free.

What a great surprise! Everyone who has an active oxygen builder license, log in to your account and claim your 1 year for free to get started with breakdance builder!

After claiming the license, I thought it would be a good idea to extend my review on sitebuilders and do another quick rebuild of my site to check the speed of the builder and share my impressions building a site I built in Elementor, Zion, WordPress core, oxygen (and bricks).

So here we go.

After setting up another subdomain for my test and installing WordPress, I activated the plugin. I directly took a new beta version to see the latest features. My current installation is “breakdance-v1.1-beta.2-1” so version 1.1 is the second beta release.

My basic strategy for testing the page builder

• First impressions after installation and setup
• Build header first and check out if animated SVGs work and how to handle the menu on desktop and mobile
• Quickly do a rough footer, check if a jump to top is available.
• Applying global settings
• Import blog posts and style basic styles. Try to get variable fonts working
• Rebuild Homepage, do a loop, custom style buttons, integrate p5.js
• Optimize details, responsive check up, do performance testings
• Final short summary

The first impressions of breakdance builder

Once you've installed the plugin, you can choose to either stick with a traditional WordPress theme or go with the recommended option of having no theme. If you are familiar with Oxygen Builder – you know the path without a WordPress theme already.

I went for the recommended option and ended up on a very boring Plugin Home screen. Hopefully, the team focuses on more features for now, but a home screen could be way better. At least you find links to support, video tutorials (from YouTube), the community (a Facebook group) and documentation.

I have to admit that it feels like a beta product at first glance. Also, if you click the other options from the left menu options, it will lead you to “empty” spaces.

Choosing to add a template will bring you a dialog to create a default page type or a custom one. Although the dialogues for header and footer seem familiar to more advanced WordPress users, it doesn’t feel like an entry tool.

Finally, on the settings page, I find a lot of things I like. There are known options from oxygen builder to eliminate some bloat from WordPress. There are useful tools to import and export settings or to exchange the URL.

Hitting the global styles button, it’s the first time I encounter the “launch breakdance” button. Sure, if we speak about a page builder, similar to Elementor, zion, bricks, divi and all others, this button will be part of every page or post. Also breakdance follows this path.

Launching the global settings will bring me to this site:

Clicking through all the options on the right brings me more advanced global settings that are nested in more layers. Time to share my first impression.

First impressions:

Running through the available backend options, I was alerted. The typical path to set up new sites starts with setting up single elements, such as header, footer, global styles and so forth. Currently, the builder on the backend site feels unfinished; hopefully, I will discover some other magic.

Without checking out any video we start the way, it would feel “right” for me.

Building the header in breakdance editor

Via the backend editor, i go for the header menu and add a new header. In the settings you could choose were to display the header. The dialogue feels good, and it’s easy to set it up.

After some basic settings, we end up in the editor. Finally, there’s a plus button in the middle of the screen and some add element on the left to work “in” the editor.

As I know there’s a header builder in oxygen, I search for header in the search bar to see what kind of modules are available. Et voilà there is a header builder.

No idea what it’s doing, I go for the straightforward path to use it. For putting in my Logo I first search for a site image or site logo, but there’s no module like that. You might know from other builders or configuring some theme, that there’s a place for the site logo.

I didn’t find it via the editor now; in my case no trouble, but I need to keep it in mind, as the favicon might need to be added manually.

By default, WordPress disables SVG, so an SVG plugin could be used, or some editors allow the option within their settings. For breakdance I didn’t find an option. In my case, I don’t worry, as I embed my animated SVG via the code block directly:

By changing the width to full, the header isn’t limited to the site width anymore.

The basic padding seems fine for me, for now. For the next task I need to search a bit, as there’s no site-title module. But assuming it is nested within a text link and advanced fields, I find the right option for me.

Also, adding the menu is straightforward. From the modules I select a Menu builder and I end up with a prebuilt menu.

Being used to builders, I opened the menu to the right, the structure panel. A structure panel helps to focus and get an idea about the nesting of the elements.

As I want to change the order of the elements, I select the parent element to click through the layout properties. I was looking for some modification to change the default setting “space-between” and the default alignment, but ended up without a finding.

While doing so I noticed, I had some wrong thinking about my logo and text-link placement, as the image wasn’t linked yet. Thus, a link-wrapper is available, i could rearrange the elements via drag and drop on the structure panel on the right.

For the moment, my header is ok. Further styling for global typography and some spacings on the menu to the right could be done later.

Overall impression of building a header:

Great straightforward process. The nested menu seems interesting. Link wrappers are great and inserting dynamic data (such as the link for the website) is good.

For the expected annual price of breakdance builder I guess all these options are a requirement. Working in the editor feels good. I haven't had any issues about orientation or user guidance.

Building the footer in breakdance editor

Adding a footer follows the same logic as the header. We first define our criteria for where to display, and then we start in the empty editor.

Our desired result looks like the site footer:

Reopening the editor will reset your display settings. In my case, I had to reopen the structure panel again to have it present. Regarding the desired outcome, I give columns a try now. but first, I want to integrate the horizontal ruler (black line). As there’s no direct option, I keep it with a custom code block and the entry of <hr> for now. I style it later, or find a better way to do it later.

Then I created the basic structure. In my case, I have 3 rows, some of them nested with columns:

For the link lists I used WordPress Menus for my other sites. For breakdance I try to follow the same path.

Unfortunately, I can’t find a quick way to change the appearance of the menu. Also integrating the date (via custom code for the year), I notice that he won’t render a blank space. I need to use &nbsp; to get an empty space between my text element and the code:

A great benefit from my current beta installation is a "jump to top module". Uploading your own SVGs is possible via the dialogue. It’s also great to create new icon sets on the fly. There’s no need to upload your complete icomoon or other icon set, but you could grow your set step by step.

All additional styling and the pages menu need to wait a little bit (as there are no pages in my instance yet). For now, I am fine.

Overall impression of building a footer:

Smooth, fast-forward. I like the icon uploading and ability to create sets on the fly. I didn’t like visual options around the menus so far. All in all it feels intuitive and not too tricky. Also, custom attributes in terms of accessibility (and now Google web vitals) are possible.

In terms of the code output, I didn’t find a quick option to use the <footer> tag for the footer section. Hopefully I just missed it.

Applying global settings

Opening the global settings color palette starts with a little riddle for me. “Brand”, text, headings, links, and background are the first fields. Honestly, I have never encountered a field “brand” before. What should it be? A brand has more than one color.

Filling the fields with some random values doesn’t help me either, so I stick with fields I could handle better. To set the colors, input your values and enable the hover color option beside the field description. You could also create a color set first, see my picture on the right. I prefer global colors once and then using the values again.

To this point, I had no error in the editor or anything to argue about. The builder is fast and reliable!

For the Typography section I did a quick test on my big headline font and my body font. My target: Test if Google fonts are used without notifying me. (This is an issue in Europe, as they are forbidden in terms of GDPR).

The other interesting settings are the container width and the default spacing of sections. In my point of view the settings are too limited; I didn’t see any settings on the breakpoints, for example, or on other default spacing such as columns.

Looking at the code, I see an alert… Google fonts are used, without having the option to upload them or any other customization:

As I am alerted now, I check the other tool settings within the backend to get an idea, how to assign another font. I also deactivate my used fonts.

Unfortunately, I didn’t find an answer and quickly googled for a solution. Lucky me discovered another issue with the current interface…

Only if you access the builder via a page, post, header, or footer, you get more options under the "..." option. Accessing the global settings via the backend doesn't offer the option.

Note: I didn’t check if it’s a bug related to my beta, but I reported it, and hopefully you won’t get lost like me 🙂

With these options available, I also found the way to change breakpoints. I still wonder why it is placed here and not in the global settings, as well as the options on custom fonts. The upload of fonts is limited and still made for "normal" fonts. For my variable fonts, this can't be a solution.

Overall impression on global settings:

In general, one could say, that the global settings are better configurable by accessing them from a page, post or header/footer.

The UI is not finished yet, and the settings feel a bit limited and nested. I wasn’t too happy about it, but at least a quick fix was possible.

Styling a blog post

For styling a blog post, we first need to assign a blog template. Via the backend I select the template and “single post” as all blog posts need the same template.

In my case, the “post content” module displays the inner contents. For styling the post title, I use the CSS Tool within the global settings… and get disappointed. Unfortunately, the settings get overwritten in the code, by other default CSS settings.

You end up trying the default settings, in my case the h1 via the module options, which gives you instant results. Also, a clamp function is possible via the dialogue, but unfortunately variable font settings, such as “font-variation-settings” are not possible this way.

For now, we leave it and focus on structuring the page. Unfortunately, all the font settings need to be redone via CSS if you want to work with variable fonts.

While generating the content structure, you notice that some elements are not there, such as post categories. Also, the default module for “post excerpt” seems to be strange, as you can’t set the tag of the excerpt (such as h3). Luckily most of the time there are more ways to do something, so in my case I select a headline, tagged as h3 and add a dynamic field with the information of the excerpt.

Overall impression of styling blog posts:

Basic settings for styling blog posts are there. For a paid solution at a similar price range as Elementor, there’s still a big gap in terms of flexibility. Categories are missing, and sometimes it’s tricky to get the desired result out of the available option set. More flexibility in terms of nesting dynamic elements would help a lot.

Rebuilding the homepage with p5.js integration, loops and other tricky elements

So far, this little review, including the documentation, took me some hours. The homepage will get tricky I guess; and fine-tuning could get a big pain in the ass. As seen in my little summaries at the end of each part, I feel that still too many things are missing to work on non-standard websites.

The builder itself is intuitive and fast. Much more comfortable than Oxygen builder. The nesting of many sub dialogues isn’t my preferred way of stacking UI elements. I don’t like many mini-pop ups with dub dialogues.

Ok, homepage, here we go. After structuring some of the content elements, I use the JS code, as I did it in my oxygen build… and yes, it is working instantly. All the necessary options, to use custom IDs, to work with code directly, are there. And… no error logs in the console! That’s great!

Here’s a quick wrap up: I used the global CSS to assign the style attributes to the new IDs. Within the builder there’s an assigned element for the JavaScript output canvas. There’s the code for loading the external script (p5.js) and the internal script for rendering the visual result.

Though the performance of the builder is great, it is not possible to see the code executed in the backend.

Nesting a <span> element in a rich text block is also possible. CSS styles could also be assigned within a module – in my case to create the waving hand animation:

Continuing the path to rebuilding the site, I encountered my typical issues with rebuilding the Link behavior and styles. I couldn't find a way to handle pseudo classes like ::before directly in the builder, and encountered some initial CSS errors in the application.

As I know these buttons are quite tricky, I continue towards the post-list. In the words of breakdance I select the option for post loop builder. Not knowing if it will lead me to my target, I give it a try.

Inserting a post loop element, you see, that a global block is needed. For creating a global block, change back to the backend section of breakdance and create a new block.

Generating the basic layout structure was very easy. Resizing the columns was working great. Maybe you know the issue from Elementor, resizing one column, leads to losing the size of another and so forth. Also, creating nested elements (Post title, combined with the permalink) was easy.

Only tiny details, such as a moving arrow via mouse-over, weren’t possible via the builder. But overall, the creation of the loop was easy. It has great other options available, such as transforming posts to a slider, or to change responsive behavior and many more to be discovered.

Creating the link and hover effect of the text could be easily done with CSS. The preview within the builder comes in handy. It would be helpful if one would be able to make the left UI column wider, so more of a code could be displayed.

As our quick build of the homepage already reached a good level, I already have the time to fix some details. So, first, with some more knowledge about the handling of the editor, I changed the footer again and removed my <hr> to replace it with a boarder.

Switching to edit the footer or header is also possible from the pages. While exploring the footer again, I noticed another great feature. “modified”, a tiny little option at the bottom left, displaying all the things I modified within an element. That’s great!

While checking the footer, I came across the option to assign the footer tag. It would be great if it could be set as a default when creating a footer template.

Finally, I also found a little bug. I already struggled to find the best way to delete assigned color values as it’s not intuitive with a simple “delete” option. Somehow, I managed to delete the border color for my footer section, but it still shows in the frontend rendering of the site and in the code.

I managed to reset the bug by copying the style over the structure panel on the right; I created an empty new section, right-clicked to copy and selected the buggy one and chose the right-click-option, paste design.

A “fallback” option for reset styles would be great; didn’t find it. I also got no idea what the settings icons next to the modify option at the bottom left could be used for.

Overall impression of building a homepage with p5.JS integration and a loop element:

After around 3 hours of playing around with breakdance, I could say that breakdance has some charming elements. The modified option, the option to add Icon sets step by step and the smooth loading and performance. One also discovers new beauties round some corners, such as the conditional options.

Unfortunately, I didn’t find an option like to display menu items as a list. The Menu builder in general is great, but for all options for a header menu.

I like the charm of WordPress Menus being administrated at one point and wanted to display the result at another spot. Guess a list option is a must, even for a menu builder… who says my menu needs to be horizontally?

I also mentioned a bug I encountered and some other small flaws in the UI. But still, it is a Product in development at an early stage. Sometimes one already notices the depth of the development team coming from an oxygen background.

In general, I like the editor in terms of UX much more than the Zion builder. But still, Zion builder had other great things, I missed here, such as working with pseudo-elements in a better way.

It's worth noting that the editor doesn't support certain options, like using position: absolute or z-index. It's often better to code styles instead of using rulers and fields in an editor to achieve an effect.

So far breakdance is an interesting choice. In terms of overall functionality, Zion, bricks and Elementor still feel superior; In terms of the UI I think it is better than Zion and Oxygen. My feeling is, that it could be a great choice for bootstrapped sites, as most follow the same behaviors. For individual sites, oxygen is still the best one as you could modify most stuff.

Performance of breakdance compared to zion builder and oxygen builder

Finally, it is about speed… How fast is breakdance? As mentioned, the editor is great. Faster than Elementor and oxygen. I guess the duel about performance is in all disciplines a matter about Zion builder and breakdance page builder. A more in-depth test on builder speeds can be found in my other article: WordPress Builder review – Elementor, Zion, Oxygen or Core?

In my case, I would say, both compete in a similar league. My measurement isn’t the best, as this time I used another of my servers to place the subdomain; so, some tests gave me bad results, cause of the server. Another aspect is, that the site is not fully built.

Checking the mobile results on https://pagespeed.web.dev/, it seems like we're talking about outstanding performance on par with Zion Builder.

Here you find my test-site: https://breakdance.mannilito.com/

Please use the following user: preview and as password use: ShowMe

As mentioned, this result is an indicator. The reaction time of my server, where my breakdance install is, is slower but also some details are missing on the page.

Without further evaluation I would estimate that Zion and Breakdance will compete for the fastest Builder out there.

Final summary:

Could around 4-5 hours of testing a software be enough for a final review? No. But it's enough to share first impressions and potential.

My downside: The price tag.

Maybe I am too critical of products at an early stage. All new builders, including bricks, zion and breakdance have their own beauty and I hope breakdance will also develop further. The current yearly pricing is too much for what it is actually capable of. Bricks at a price tag for 249 $ for a lifetime license or zion are currently cheaper in the long range.

My outlook: great foundation to build on.

The foundation of breakdance is great, and I strongly hope they will push the product (without forgetting oxygen builder) to be worth a target price of 350 € a year for unlimited sites. The true aim of breakdance is to be used on many sites, maybe even within one brands world, as there are great features to copy styles from A to B.

If I will have a suitable project, I will share more experiences with breakdance, hopefully with a newer product release. For now, I would recommend everyone to give it a try. There's a 60 day money-back guarantee.

Site Builder tests by myself:

WordPress Builder review – Elementor, Zion, Oxygen or Core?

2022 is the year of text to image generators so far. With a crazy hunt for new tools starting in summer. Following some GANs of 2021, such as VQGAN and others, I mentioned in my article “Speaking computer language – welcome AI Art", the hunt for the next generation of text-to-image generation started in April when OpenAI introduced the magic of DALL·E 2.

During the year I shared articles around the topic of AI tools for image generation and if you had asked me in January, I wouldn't have expected such a development. I tested midjourney and DALL·E 2 and shared my thoughts on different ways to utilize AI tools. There's also Google launching more and more new tools on the market, one of the latest is DreamBooth, something that could be added to the workflows of the broadly available text-to-image tools, but that's another story.

While finishing my review on midjourney and DALL·E 2, I noticed the official launch of Stable Diffusion. Then I struggled, as Stable Diffusion is different from all the other tools before: it’s Open Source. Being Open Source, it is a creativity machine on its own, as it is possible to connect it to other tools as well. My core question was… where to start to share my thoughts? Explaining prompt guides as for midjourney or DALL·E 2?

In my following article I wanted to give a broad overview of the current status quo as of September 2022. Ways to use Stable Diffusion and share possibilities of open source software happening currently.

What a good artist understands is that nothing comes from nowhere. All creative work builds on what came before. Nothing is completely original.

from Steal Like an Artist: 10 Things Nobody Told You About Being Creative.

Stable Diffusion – what is it?

Stable Diffusion is a model that can create digital images from text or use text prompts to guide image-to-image translations. It will be released on August 22, 2022.Looking at the research paper you will notice that some names you might have come across in former publications on GANs will show up again, so all people being mentioned in the research paper of VQGAN are mentioned: Patrick Esser, Dominik Lorenz and Robin Rombach.

Understanding the heritage can help comprehend the rapid development of VQGAN in just one year. The progress has been extraordinary.

Currently, all main competitors (DALL·E 2, midjourney and Stable diffusion) rely on the principle of diffusion to create their images, so-called latent diffusion models. If you want to get a deeper understanding, I recommend a good written article from Louis Bouchard or watch his video:

Looking at results with VQGAN and Clip, see my older article and results from one year later, give you an idea about the speed of development. We face many competitors and an impressive research speed. I assume the next challenge is render speed while generating the images and optimizing the diffusion models. In the meantime, the world is allowed to unleash its full potential by connecting more libraries together to Stable Diffusion.

I really recommend trying some of the text-prompts yourself. Generating images on your computer can be difficult. The process involves using language prompts and the speed of image generation tells you how complex it is. On my MacBook (with m1) it’s running ok, but I am not sure on which PC builds you could run it.

Playing with the software, you'll observe cases the current implementations struggle with - one of the harder ones is stigmatizing the world around us. No wonder if the models are trained by common images of the web. The most common pictures on the web are pictures more beautiful than reality.

Watch "Stable Diffusion - What, Why, How?" by Edan Meyer, a one-hour instructional video on creating diffusion videos. It's presented greatly and a great resource to get started with Stable Diffusion.

If you want a shorter version of Stable Diffusion, look at the 2-minute paper.

Stable Diffusion – Quickstart via dreamstudio, collab, huggingface

If you had a look at midjourney or DALL·E 2 before, you experienced simple text-to-image prompts to create your artworks. Being Open Source opens a variety of inputs for Stable Diffusion. I try to give you an overview (with a raise in complexity and flexibility).

Dreamstudio.ai

Dreamstudio is the easy access to Stable Diffusion and the answer to popular midjourney or DALL·E 2. To get started, you need to login. Also, the prompt guide is only available when logged in.

The main difference to midjourney (using discord) and DALL·E 2 (basically relying on the text prompt) is the interface you get provided. Besides a text prompt you also get some rulers to modify the settings. Though the wording being used is still geeky, it is progress to the simple text inputs from the other main rivals. By the way, there also used to be an official discord bot, but they shut it down.

The payment model for dreamstudio feels more complicated than for midjourney or DALL·E 2. You also get free credits to get started but the amount of cost varies with your settings; here’s their explanation:

At default settings, it’s one credit per image. Depending on the image resolution & step count you choose, this can go as low as 0.2 credits per image or as high as 28.2 credits per image. Here is a detailed chart for explanation:

If you need some extra guidance on the photo editor, watch the video from their FAQs: Getting Started With DreamStudio Website Beta, Part Five: Inpainting/Outpainting.

In the FAQs you will find a lot of other helpful sources to get started.

All in all, it’s cool to have a maintained/managed tool showing the potential of Stable Diffusion and easily experiment. If you like what you see, you could continue to pay or switch to Open Source.

As you have seen, the tool also has some limitations at the moment: the size of the images is limited to 1024x1024 (midjourney allows 2048x2048). The size is directly connected to the render speed.

But no worries about the size: one of the biggest sins in photo editing is also a relic of the past. Upscaling pictures is now possible with the help of other AI image upscaling tools. There are so many tools nowadays, maybe you find some inspiration in my other article “How AI Assistants Can Help You with Text and Art”.

You can also look for GIT repositories to size the images. One I could recommend is this txt2imghd. There's also a version on replicate.com.

Stable Diffusion on Huggingface.co

You must have come across hugging face if you got into text to image before. I shared some stuff from hugging face before, such as Dalle-mini, a free Dalle alternative from earlier this year. I really recommend anyone being interested in the topic of AI and machine learning, to visit hugging face every now and then. Under “spaces” you will find apps you could directly test as web-apps. And you notice (sorted by likes) that there’s also an app for Stable Diffusion.

In fact, there are more apps using Stable Diffusion to transform images. The one on the left is the simple text to image prompt and the right one could be used for modifying pictures as well. Feel free to try one of the two here:

Here are some of the outputs being generated in the tool:

And the fun part: It’s for free! There’s no limitation in terms of credits and it’s a perfect playground to get used to how text-to-image prompts work in general. As mentioned before when explaining midjourney or Dalle-2, I recommend reading through some text prompts… or as the magic of open source already unfolds, use sites like lexica.art and look at the eye candy and copy prompts.

As an alternative to lexica.art, you could also try arthub.ai.

Now I almost forgot to quickly explain what diffuse the rest could do for you… it’s kind of the beautifier of your paintings. Draw like in MS Paint and add a text prompt, about what your line drawing might be. In my case presented with an owl (owl got very popular in all this process of text-to-image generation) – the transformation of kid paintings is also quite fun 😉

Stable Diffusion on Google Colab

Google Colab is another resource you need to know when it comes to working with Python in the context of machine learning. Google Colab makes data science, deep learning, neural networks, and machine learning accessible to individual researchers who cannot afford expensive computing infrastructure.

Edan Meyer explains how to use google colab with his own modified colab notebook in his great video “Stable Diffusion – What, Why, How?”. He is explaining the whole process to create images, similar images or even videos. A deeper understanding of how using the code works help to unleash the full creative potential.

In very simple words, you open a colab notebook and follow from top to bottom. On the left you find some little play icons to execute. After executing one after another, there might be some text prompts or variable to modify to lead you to your result.

Local Apps and other Web GUIs for Stable Diffusion

Since we have the first open-source release, it feels the market is exploding. I saw downloadable apps to come and go within 2 weeks, so it’s hard to give you a list of all the options there are. Also, there's no guarantee they are still working. Many people are fascinated by these tools. Some want to make money quickly, others want to share, and everyone wants to keep improving the technology.

So, I start with another Web GUI for Stable Diffusion called peacasso:

And here’s a desktop app to run Stable Diffusion for the mac (m1,m2) called DiffusionBee:

Feel free to share more cool apps, sources in the comments. As of Mid September 2022 there were so many tools, it is hard to keep an overview.

Replicate is another interesting cloud API I wanted to give a try. If you use the tools you will notice, rendering takes time. Using a cloud API for rendering can improve energy efficiency and reduce your carbon footprint, while also decreasing rendering times.

Explore the offerings of recplicate.com, there’s a clean Stable Diffusion install as well as other interesting tools to help you to optimize your images or get a desired effect.

Stable Diffusion – local installation on MAC M1

Finally, some thoughts and links on installing Stable Diffusion locally on your computer. I personally only installed it on an M1 Macbook. With the advantage of the RAM being able to be shared.

There's a tutorial on options to work with Stable Diffusion locally I discovered while finishing the article, but it seems to be the official one (I didn't test it though as I didn't want to break my running version); the tutorial is from AssemblyAI itself: "How to run stable diffusion locally to generate images".

When I tested my local install, I basically followed along with another introduction from replicate.com: "Run Stable Diffusion on your M1 Mac's GPU".

In addition to the instructions, some extra tips, as I also had some trouble while installing. First, check for the correct Python version. You need 3.10, which could be downloaded and installed from python.org.

If you have trouble to switch the python version, there could be many reasons (I couldn't probably name). I used a version control, as options there were ASDF and pyenv. I decided on pyenv and followed the instructions and had no further issues to switch the version.

Another hint I could share with you... watch your folders. Always execute the prompts from the correct folder and be prepared to wait a little for your prompts to be executed.

Here are some renderings on sculptures from my local tests:

Stable Diffusion – local installation on PC

It took me a little while to test the PC installation, but I guess this guide here is quite good and straightforward:

AUTOMATIC1111's SD-WebUI (Windows)

Following the guide you have similar steps as on mac, but it is simpler in the execution as there are more installers to run. Finally you have a webGUI to get going.

Please note, that you need a GPU with at least 6 GB of VRAM. 10 GB or more on a NVIDIA GPU with CUDA is highly recommended to allow larger image sizes. A business card, such as the RTX A series is preferred as the energy consumption compared to the value is much better. Maybe the upcoming NVIDIA generation will bring even more value.

On the tutorial site you also get some other guides (I didn't test):

Stable Diffusion – other installs

• Stable Diffusion in TensorFlow / Keras

Creativity unleashed with Stable Diffusion

To get an idea about the full potential I collected some random examples from the past month. There are so many exciting opportunities. People create comics, movies or just play around.

Kali Yuga models

Kali Yuga provides some cool custom-trained models for Stable Diffusion. Here are some shots taken from Twitter:

You might have guessed it, there are also notebooks on google colab around to work with them. An alternative would be jupyter notebooks, but to keep it simpler, we stay with google colab.

• Notebook for #textilediffusion.
• Notebook for #Pulp-Sci-Fi-Diffusion
• Notebook for #lithography-diffusion
• Notebook for #watercolor-diffusion
• Notebook for #pixel-art-diffusion

Those notebooks are quite easy to handle. I used the #textilediffusion, to generate this sample piece here:

Click the images to jump to the examples. Due to data policy, I don't embed external sources.

Stable Diffusion and Music:

Stable Diffusion and 3D

Here's the GitHub Source for the Stable Diffusion blender texture generator.

Another link, that is connected to Unreal and midjourney is the generation of textures.

Stable Diffusion and Image Tools

Stable Diffusion Photoshop Plugin

There are also options for text-to-image in Canva and GIMP already and Nightcafé and artbreeder seem to have changed their models towards stable diffusion as well (you might remember that earlier this year they both used some GAN+CLIP solution, as mentioned in my article).

Stable Diffusion to generate color palettes from text descriptions

Other sources to mix with Stable Diffusion or to watch in general:

• Get3D: A Generative Model of High Quality 3D Textured Shapes Learned from Images
• OpenAI Whisper
• Google DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation (GitHub implementation for Stable Diffusion and Google DreamBooth and another Stable Diffusion Implementation with DreamBooth)

Final thoughts on Stable Diffusion AI – image jockeys on random turntables.

I love it. Going for the open-source path is so great to unleash new instruments of inspiration and with lucky punches, even to create art. Art is expressive and the artworks being created might get expressive. For me it's an enhancement of our daily practices being creative. I also don't think anyone must be afraid of losing jobs. For precise tasks it is still tricky to work with the tools.

The models are only as good as the inputs; handling the inputs is not the easiest practice and as generating the images takes some time… in terms of client work, the way using any generator might not be the fastest option to choose. As always, I assume clients want to negotiate cost as they think everything is going easier now. But currently the image generation at a professional level is still not precise enough. But the tools are already there to help. Google Dreambooth for example could help a lot to bring consistency into image series.

Looking at the development speed I assume the topic about precision will be a matter of the next years, as well as the topic about speed and custom training sets. I am also worried a bit about the footprint being generated from all the image generations (including all the learning upfront). In hugging face there's a note on the Stable Diffusion model card itself: 11250 kg CO2 eq for the learning (calculated with the machine learning emissions calculator).

The development in text-to-image is far from its boarders yet. But it's so impressive to see the speed of the community to adopt these technologies.

Currently the tools help to discover creativity to finally create a mix of outputs we have seen before. In the future I am sure we can use the techniques to do whole mood boards for clients and in some cases even final graphics or artworks for them.

The only art I’ll ever study is stuff that I can steal from.

David Bowie

Like the evolution of web bandwidth, I think we need some more speed in terms of image generation to open new options and create beautiful human-centered-artworks as one day maybe images could be generated in real time based on likings of visitors. I also assume, at the moment we reached a certain grade of automated artworks, more and more people will enjoy discovering real artworks with their hands again and value of the real original artworks will raise.

In general we shouldn't trust media without a critical perspective, especially when we see images. History showed us that people will abuse technology. So I hope for people to find value in real in-person events after Covid pandemic again. Digital could and will be a lot of fake.

The use of some kind of style transfers on Smartphones is very likely by next year. Dynamic Video generation is also on its way (see make-a-video from meta ai), so we have text-to-video generation and music, VR worlds and games are also around the corner, as Midjourney founder David Holz said. Due to open-source development, I won't say it takes 10 years. And also Google Colab and other services to run the software will change their business models to profit from this boom.

Advertising or Branding will also be affected. It will be an exciting journey in the next two or three years. Osmosis pretends to have some of the features that could be interesting for an early stage. Just imagine adding a target group to the prompt, an industry or a segment. For Learning there are many galleries out there, such as dribble, FWA and many more 🙂 it will be fun to see where this journey goes! (Saying this not being in an international network agency anymore).

As mentioned many times, the development speed is incredible. The current hot tool is google dreambooth (connected to Stable diffusion). Every month there might be another unexpected cool tool to pop up. Maybe even photoshop integrated the tools for their next release.

For me, design turned more into managing design over the years but still design is functional, and art is expressive. Currently it feels easier to create automated expressiveness in fantasy worlds, but nonetheless I also use AI tools during the creative process. The results of machine learning give you a condensed view of common thoughts. So, I often used the prompts to check for color ranges of certain clients, compared it, what google says and easily created something one could call the "wisdom of the net" result.

Our traces on the net and our databases of artists created the look we could mix now. We are the image jockeys of generations that are already there. Unfortunately there's still a lot of randomness in the result to utilize it more professionally.

So long, enjoy and go out and play to discover the fun playing with those great tools!

Recommended readings

1. Understand latent diffusion models
2. Get a full introduction to Stable Diffusion

Maybe you remember my article speaking computer language – welcome AI art, speaking about the new role of text prompts and different image AI assistants. I focused on a general overview on GANs, DALL-E and DALL-E Mini, as an access to DALL-E 2 wasn’t available yet for me. Also, Google Imagen being mentioned in the article has no free option yet… but with only one and a half month passing since my last article, Google also introduced another tool, called Parti, a tool being said to produce the best results of any AI art generators so far and Stable Diffusion is also there to launch its service soon.

In this article I want to share my first hands on experience with Midjourney and DALL-E 2 with you. With midjourney moving to open beta and starting their v3 image generation algorithm on the 25th of July, another player pushed to the market… and I guess one or two days later, finally my invite for DALL-E 2 arrived.

At that day I was happy at first, but when I noticed another day later, that another E-Mail I used for signing for DALL-E 2 only a few months ago, despite the first one, being used for application far more than half a year ago, I was a bit disappointed. I thought it’s all connected to their new pricing model and the beta start of midjourney and I got disappointed a bit. The exclusiveness was gone and “mass-market” arrived.

In general the market on AI Art bots seems to push a lot. So for example DALL-E mini, the free tool I mentioned in my other article, is now called craiyon. There are also other tools Worth being mentioned in the context of AI art tools, such as Latitude Voyage (of course in beta) or Apples GAUDI, a prompt tool for indoor 3D scenes.

Luckily I heard the U.S. Copyright office said A.I. Art can't be copyrighted, so I hope no war will heat up this exiting market in the near future. So far I only know that there are patents on algorithms being used. Hopefully the market will show even more diversity in the future.

Midjourney beta – first impressions

Let us first look at our new player. Midjourney. The first impression of midjourney is being geekier and less serious than DALL-E 2. It’s a more playful entrance to a world everyone could test right away. After joining the beta, you will be redirected to Discord, no waiting list, no exclusive clubbing.

Before we investigate discord, a quick explanation of who Midjourney is. Midjourney is an independent research lab exploring new mediums of thought and expanding the imaginative powers of the human species.

IN 10 YEARS, YOU’LL BE ABLE TO BUY AN XBOX WITH A GIANT AI PROCESSOR, AND ALL THE GAMES ARE DREAMS.

David Holz in an Interview with the verge

David Holz, the founder of midjourney, did some other geeky, funny things in the past. He used to be co-founder of leap motion, a great exploration of the power of gestures. Midjourney is a small company right now with around 10 people working there.

Exploring the background of midjourney and all their way, how they speak to their audience, in other words their tonality feels great to me. It has the explorative spirit and playfulness I always try to teach students to get started in digital.

Signing up for a free account, you get 25 credits, these can be used to generate images within the discord channel. For anyone being interested, it is even possible to run midjourney on ones own discord server.

After that, you’ll have to pay — either $10 or $30 a month. The pricing is connected to the number of images you want and the privacy you expect. And if you are a huge company with more than 1 billion revenue a year, you get the corporate membership for 600 US dollar a year.

So how does it work?

If you never used discord before, see it as a chat tool, kind of a slack for the masses, with a non-business focus.

So, in the channel you will find all the information there are in general, on announcements, updates and so on. If feels like you as beta tester are part of the team, and even the boss is there, and you could influence the development process. After all, that’s what a beta program is about.

In terms of my professional perspective being more experienced with product and user testing, this is a great way for that kind of product, as the product itself is being used in the same environment.

So here are the steps to create images:

1. Look for a newbies Channel and enter it (in the picture you see newbies-29, newbies-59 and newbies-89)
2. If you have a picture in mind, about what you want to see, start typing “/imagine”, followed by whatever you want to see.
3. Within 60 seconds you should see 4 images.
4. With the 4 images being generated, you could upscale the image or create variations. Therefore, there are U1 to U4 (für upscaling) and V1 to V4 (for version) below the images being generated. Upscaling means that the images scale up to around 1664x1664 Pixels
5. Save the result, click on the generated image (to enlarge) and with the right mouse button being pressed, select save image to your local computer.
6. Finally, you could also ask the bot to send the results to your Direct messages, by reacting with the envelope emoji.

This is enough to create visual beauty.

If you need inspiration, look in midjourney ressource list, there are great links:

The artist visual style encyclopedia – if the style is part of your text prompt it will take effect – such as cyberpunk city, by Franz Marc:

There’s also a prompt builder to guide your inputs and see which variables are available:

And a collection on  “prompt styles and weights”.

All in all, the learning curve, if you are used to discord and used a text prompt before is very flat. Only if you are new to discord and text prompts, you need more orientation.

After all I could say, I loved it. I love the playfulness of the whole app, the results and all the “social” aspects, seeing what all others are building, getting notifications about own results and the whole way it is being setup. It is great fun to try and the documentation is very helpful.

DALL-E 2 beta – first impressions

With the magic of the new and little frustration about the almost open invites, I waited to test my DALL-E 2 invites after I tested midjourney.

As mentioned, entering DALL-E app is a completely different experience. It is you and the text prompt, not the hectic news stream and the dynamics you experience in midjourney. Based on the interface/overall app decision, one could say, that DALL-E 2 wants you to reflect about what you type, while midjourney is a competing social feed, about who creates the coolest results.

The cost system at DALL-E 2 is based on credits. You get 50 credits for the first month for free and 15 credits every month after. With only 15$ you could buy additional credit packs worth 115 credits, which equals around 460 images. OpenAI allows commercial use of DALL-E images. Compared to the image stock market, the costs of the images will be fairly low, but one must be award that you have to get used to the text prompts and the corresponding structure of the input.

That being said let’s try to get a result for our cyberpunk city, by Franz Marc.

In the case of DALL-E, I couldn’t find a quick hands on, official documentation; so, I tried the sentence as following: A cyberpunk city in the style of Franz Marc, as the example being shown by DALL-E on their homepage also used the "in the style of" syntax.

My result on that one was quite… disappointing. I don’t know why DALL-E missed the style of Franz Marc that much:

To investigate further, I needed a prompt guide for DALL-E 2. Googling for some help, you find

1. The DALL-E 2 prompt book – my recommended choice
2. OpenAI DALL-E 2 prompt guide

Going through the prompt options, you notice, that there are more parameters than on midjourney. Lightning, Camera position/angles, genres, usage contexts and many more.

So, I gave it another try, changing the prompt a bit leading to a much better result in terms of the style:

Unfortunately, my tries with real artists didn’t work out so good with DALL-E 2 at the start, so I had another try…

My result from midjourney:

And the same prompt from DALL-E 2:

Getting used to the prompt dialogue on DALL-E increases the results a lot:

Using the right prompts is the essential part to get the best results. If your prompt is done right, it seems DALL-E is more precise, though midjourney is so much fun to use.

For DALL-E there's even a paid service being launched called promptbase to help you with using the right prompts:

If you want to discover more, I recommend searching the web yourself. On twitter I found some comparisons, having a similar impression I do:

Resume

Is it possible to do a final resume on the tools? I guess no. On the one hand I am not experienced enough with both tools, on the other hand I think both tools are great and give us a glimpse into the future. The documentation on midjourney and the entry barrier is lower, so to get started, I would recommend midjourney in any case. The more you are aiming for precise results (as an alternative to stock images), the more it feels DALL-E 2 is the way to go.

Will be exiting what the next two month offer in terms of AI generation tools. 2022 is very exiting so far in terms of AI art generators and it will be exiting to see what's next.

What's next? Update mid August – dreamstudio arrived

As mentioned, the speed new, similar offerings are popping up on the market is impressive. It seems, AI in combination with images is going mainstream. Another tool to check out is dreamstudio. Access is quite easy as well and the results are also impressive. Also the editor looks promising, see my screenshot below. After my family holiday I might try a daily use check of all those great tools.

Recommended readings

1. The AI that creates any picture you want, explained – The process behind DALL-E 2 (and others) explained
2. What AI means for human artists – great collection about views from the artists/designer perspective
3. Making AI Art with Midjourney – great article with examples and explanations
4. The Creativity of Text-based Generative Art – paper on text-based generative art
5. The trouble with DALL-E – Five thoughts on the use of artificial intelligence to accelerate the digital art market
6. My follow up article on Stable Diffusion: Stable Diffusion celebrates new forms of creativity

After getting myself into building a WordPress 6 FSE Theme and all the pain I experienced (getting used to the JSON, some bugs in the beta version and the troubles about embedding p5.JS or variable fonts), I thought, ok… maybe I am too critical, so now let’s face the challenge and rebuild my homepage in Oxygen Builder and Zion Builder and compare all of those.

My targets:

• Check the “speed” after setting up the basic structure and functionality of the homepage
• Share impression of the builder as of July 2022
• Finally make a decision to switch to another builder or core for this website

To do so, I used some subdomains (to be transparent, also to my visitors) and rebuild my site in those tools. I must admit I didn’t fully rebuild it always the same way. As being said often, to get the look of a 80% finished product I would rebuild the stuff in around a day or faster, depending on real life interruptions; to get to the 100% it would take much much longer, as the tricky parts are in the background.

For all solutions, I didn’t evaluate on the indieweb compatibility or investigated further, why my FWA plugin wasn’t working with the other solutions. But regarding the JS load intended by my homepage sample and Fonts being used, all should be the same. Same applies for the content itself. So in terms of the speed ranking, we should be almost “fair”.

The competitors – WordPress Site builders

Oxygen Builder

Oxygen builder is here for quite a while and kind of the fastest page builder (in terms of the output quality) for WordPress for many years. The user base is strong, and you will find many tutorials, also for tricky parts. Regarding my special cases variable fonts or p5.js I didn’t find proper ones to directly match my tasks, but embedding JS isn’t an issue in builders anyway. On the font issue there’s a way via a code snippet from Matthias Altmann to integrate own fonts (also variable ones), but I ended up embedding it directly via CSS.

Also, Questions about how to use the repeater or how to set aria-labels for accessibility could be fixed after a little investigation.

All in all, you won’t get lost too much building a site in Oxygen (at least if you have a intermediate understanding of CSS and HTML Structure). As there’s still a lifetime license it could be an attractive option to being used, though the team is also building on a new builder, called breakdance that targets a more “elementor” like target group.

During my process with Oxygen, I uncovered one strange issue: I really destroyed my site (destroyed the template connection and couldn’t restore it). I handed it over to support and they reacted in a good timeframe of around a day. They did a duplicate of the site on one of their sandbox and couldn’t reproduce the issue unfortunately and gave it back to me as it should be a hosting issue.

Honestly, I didn’t double check if it’s really about hosting or not. I got an own idea how to fix it (by deleting some content element), but I lost some trust in the overall stability of the software. I never had such an issue with WordPress Core or Elementor builder ever before. Elementor has some strange bugs, if you have larger Websites with a lot of added functionality, such as custom post types or toolset, WPML and so on, there I also experienced some “lost” of the templates, but nonetheless, we speak about a complexity mostly caused by many plugins and stuff. In the elementor case, you mostly resave the templates and you are done and everything is fine again.

As Oxygen has a great feature of copying the JSON code for each block, you could easily transfer the data somewhere else. I would say the way Oxygen implemented it is a typical Oxygen way, they show you the code directly. Other builders, such as Elementor or Zion could also copy the JSON from elsewhere, but there you export a file and import the file. What you like most, depends on the situation, I guess. To “store” some backups of designs/layouts, the file way is better, to be fast, the copy paste is better.

My final conclusion on Oxygen?

I like it. It’s kind of a webflow for WordPress, but I like it more than webflow. It has a lot of developer friendly functionalities and the more you can develop yourself, the better you could handle the tool. As it’s around for some time, you find good help, mainly from developers. In my point of view, it’s better to have more advanced tutorials around. You find core functions mostly at the tutorials of the publisher themself. The real interesting things are the tricky ones.

I am not sure though if I would use it for larger scale client sites were we speak about 500 plus pages throughout more languages. It really depends on the task and the requirements. But in any case, it is worth a look.

Elementor Builder

I won’t write much on elementor builder. The site here is at that moment build in elmentor. As I rebuild the site in many other builders, without fixing some issues on indieweb and fwa, it might be possible to change to another builder or a hybrid solution.

Elementor is one of the most popular builders. In terms of ease of use I would say it is unmatched to all rivals (also beaver, divi, bricks,…). As it is a personal thing, I would say, try the free version and compare it for example with the free zion builder version. You could also try bricks in a sandbox or oxygen. Honestly, those are all I would recommend comparing.

Being popular leads to a lot of help and tutorials and a lot of third party support (that could be the decision maker on a client project). But it also leads to a lot of criticism of course, so there are also a lot of elementor haters. Being objective, there is some kind of bloat in the code and the html being generated from the builder, but one must admit, it also depends on the way you build a site. I am sure you could mess up your site with every builder. Honestly, I can’t say I build my sites in the best, most efficient way (in terms of loading times) in Oxygen or Zion; in elementor I could say, I did it in a quite efficient manner.

I guess I don’t need a conclusion on elementor here. I still like it and it’s a great tool. In terms of development speed (from scratch, because I am not that prebuild type of guy), I would still say, that the speed to create a new site is unmatched. But if your client’s objective is the fullblown SEO Speed stack, i wouldn’t recommend Elementor.

And even more important: Use Elementor only as a page builder for setting the templates, doing special pages, popups, and stuff, but don’t use it for News articles, Blog posts or similar text heavy content. Speaking of Stories, it depends, what you aim for. If you want more interactivity in the stories or you aim for some “scrolly-telling” (a advertising buzz word being used in Germany), elementor could be great. But for text-heavy pages, I would recommend using WordPress core!

Zion Builder

Zion builder is a new contender on the market. Like bricks, another new rival to close the gap between Oxygen builder and Elementor builder. By the way, I also tested bricks and thought about making a version with bricks, but I stopped quickly again. Working with too many builders and getting used to their own building syntax, could be a huge time waster. Comparing the sandbox version of Zion and bricks, I went for Zion. There are also some charts on the web on some comparison about the “bloat” or weight of builders and Zion seemed to be the star of the rankings.

Zion builder is being said one of the fastest WordPress Page builders. In terms of opening the builder itself I would say yes, it is the fastest. In terms of the “export” of the code, we will see in the comparison. The thing with a new product is, that it is mostly unfinished. So we see some interesting ideas, using a wireframe view (good for all divi builder lovers) for example and a builder interface that is focused on the elements you want to add to the page.

In my point of view the interface misses the main point of using a builder at the moment. A simple way to describe this impression is, that you can’t see the available elements at first. Most other builder use the left column to display the elements selection. In Zion they try to do it all via the main view (or you could also add them via the tree view, a feature I use for all builders I am not experienced yet, a lot). But instead of putting the options for the elements first, the opener always starts with layouts, followed by a nested tab elements and library.

In terms of my understanding of what a builder is mainly intended, for building sites quickly (with elements), the elements should be priority. As this builder strongly relies on the column structure and the layouts I understand their need to get users used to this way of building, but putting the library at the same hierarchy level, and even worse, giving it an extensive big window and having only a tiny window for the elements themself feels absolutely wrong.

But I wouldn’t say it’s an old-school interface. For me currently they didn’t separate “expert” mode and “beginners” mode good enough why both parties could get annoyed.

Regarding expert functionalities, one must get used to the structure, especially if you look at the menu and all the single elements you could influence via own selectors. So, getting used to their naming convention is essential. Unfortunately for Zion, I couldn’t fix the issue about accessibility. In Oxygen accessibility is also not a “core” functionality, but you could do some workarounds by using the function to “add attribute” and assign aria-labels, titles, and stuff.

In Zion, I got no idea what this element even does. They have an element called “custom attributes” and I thought, yeah, let’s use it for aria-labels and things like this on the mobile menu, which didn’t have any labelling. But unfortunately, there seems to be a bug as I could use it for other elements, but not for the Menu trigger button. At least, also my try to get feedback from support (on a far easier issue). My support experience with Zion was shocking. My answer to one request was complete non-sense and the other one on custom attributes wasn't answered for two weeks, after that they asked for screenshots or login.

Hopefully you don’t think I hate it… no. Zion has a lot of potential but as mentioned, it is a new contestant on the market. Maybe even a niche market to get a content creator for it. This is really the issue at the moment, they have only very basic tutorials (in terms of time, I didn’t watch them) and mostly the documentation couldn’t help me with “my” issues.

What is quite great about Zion is, that they still connect to WordPress Themes. As mentioned above, I create my posts in WordPress core within a template from the builder. Having the option to use pre-build themes, at first, I was super lazy and just used my finished WordPress 6 Core Theme i created in my tutorial to get started with Zion.

I got an interesting effect as I could see, where the theme got overwritten by Zion. What I didn’t like is that they overwrite button settings, though one is not able in the backend to define the appearance of the buttons in global settings. One can define font families (also custom fonts), custom icons, colors. Spacings, Buttons, link behavior, headline styles and others seemed to be hidden from me.

Regarding themes I only did a quick check on the performance, therefore I used one naked FSE 6 theme I created with a builder (and added my base colors), I used the “Zero” Theme and tried with the current standard WordPress theme. There wasn’t a clear result to recommend any solutions. For one reason I will mention in my resume, I would go with the Zero theme, as it has enabled menus.

My conclusion on Zion?

It’s a up and down. A product with potential. I would say the basic setup is great. The loading of the builder the base set of functionalities and some general strategic decisions are good.

What it really lacks is some more precise usability. Think of more precise naming. Why do you call one element “theme builder” and within the theme builder you speak of templates while the same word is being used within the builder under templates (v3.2.0).. Be precise. The theme builder feels completely mismatched in terms of the UI at the moment… also the functionality is strange. I really could name many many more issues here, but this connects to my professional background teaching user science for many years.

Speaking from another professional experience, helping clients to develop products, the ZION teams seem to be a bit to feature driven at the moment. A little clean up and concise improvement would help to create more follower or even a user base creating content for them.

A lacking user base is the main issue for ZION now. They need content creators for their product! But still, currently it might be an option for me for my personal blog as I like the integration of themes and as you will see in my scores, it seems to be the fastest one!

WordPress 6 Core Full Site Editing

One might discuss, if we could speak about a builder, when we name WordPress 6 core. I, would call it a builder, as it has building functionalities and similar to the other mentioned builders, you finally could generate your own theme without writing code.

I had my experiences in my tutorial here, my three-part series on how to build a theme there. For client purposes, I would say… If a product calls itself beta (most building features), you shouldn’t use it or at least think about using a beta product. And that’s really my summary on WordPress 6 – great capabilities, regarding ease of use, a lot of room for improvement, but nonetheless, an interesting approach I will use.

As I have also written. For writing blog posts, I will always favor core. Don’t go with a builder here, except you need a storytelling format. So WordPress Core should always be on the agenda. There are even things in WordPress 6 I would love to see in the builders. The Theme.json, as ugly as it is to get used to their syntax, I like it as you could write at the core and define global settings with "words".

For Oxygen there are also JSON ways that are kind of hacky (but possible), for Zion, there’s theme support, but their global styles are kind of too basic to compare... and most stuff is nested in the builder itself (same applies to Elementor – migrating an Elementor site could lead to a loss of all global styles you set in the editor, if you don't know how to work around – one file one could edit and modify is great, as no one news a workaround).

Zion Builder vs Oxygen Builder vs WP Core (6) vs Elementor in terms of speed

This is maybe a chapter many are looking for.

First, don’t take the results to serious. See them as an indicator! Doing the same test on the same test site again could lead in a result +-5; those tests are not precise! Also, my sites are not 100% the same. Still my original elementor site has most features on the backend side, such as working indieweb support and working FWA support.

Also regarding final tuning of the speed, I am sure, there will be some variety as some cache tool might work better with one solution, one with the other. So all sites used the plugin WP Fastest Cache and have almost the same plugins loaded in the backend (except the builders of course). Please also note, my server is not support http/2 which decreases my score anyway.

Lighthouse

Lighthouse tests are an early indicator and mainly interesting regarding all the tips they provide.

My baseline (Elementor Site) on desktop:

And now the challengers… ok, I post only Oxygen and Zion here, as both had 100 (WP-core interestingly only 99)… and none of the builders accepted the FWA plugin to work out of the box.

Looking at mobile, it gets more interesting:

I assume looking at the data here, we could say there’s a winner: Zion builder. (As I have written before, unfortunately with some accessibility issue) – and to be honest, the lighthouse test in the browser is not the most accurate, but the tendency was towards Zion.

Gift of speed

To stick with mobile data, we go with the test of gift of speed and select a server in the Netherlands and mobile (Me and my hosting provider are located in Germany).

Surprisingly our next winner is WordPress Core, though the numbers throughout the stats are strange (Speed index is more related to the hosting environment).

GTmetrix

For GTmetrix it was strange that WP-Core had a worse ranking than elementor, but regarding the stats we have our winner: Zion.

Pingdom

And again, for the pingdom test, also had a winning indicator: Zion.

Double check for an article page/post

As in the perfect world, most traffic is on the article pages, I double check with some article page examples. Here I would say all other solutions than elementor are winners (though I wrote the posts in Core!):

Resume on speed

I wouldn’t do a ranking 1 to place 4. Therefore, my evaluation isn’t as precise as it should be to speak about scientific. Having a p5.js element in the background that is randomly created, it could also influence the rankings.

Surprisingly the differences aren’t that huge and if we want to have ranking, the result from pagespeed.web.dev on mobile is maybe the best indicator to have an idea about our result:

As you might guess, elementor builder is the lowest ranked and Zion builder the highest. The difference between Oxy and Core is not big, but WP-Core misses some animation features, so Oxygen would be in my ranking before core.

All in all, my site type mainly consists of my fonts and my p5.js script. They create the biggest footprint of my site. All the other rest is some stuff from plugins and from the builder, so we speak about little room to shine.

After the results I am also a bit surprised that my theory I pointed out in my article on digital sustainability, that the effort in the creation of a product must also be included, got proven a lot. My most sustainable footprint will still be an elementor solution, if I need to build something from scratch.

Now that I almost rebuild my Site in all builders I stay with my theory and will switch my used solutions. I switch to Oxygen Builder. See more about my decision at the end of the article.

There are great features in Oxygen… to create blocks in Oxygen and release in core or go the Zion way with a more core template. For speed junkies, there’s a lot of testing needed to squeeze out every percentage.

On the sustainable side, there’s not so much difference, see my website carbon results; On that one my homepage had 0.10 g on Zion and WP Core.

Resume overall

I guess the speed discussion is mostly exaggerated. If you know how to use a tool, you could squeeze out its limits. And sure, there are faster and slower options to go for. Interestingly WP Core 6 got amazingly fast, and I didn’t deactivate any bloat from them manually yet. Same applies for Oxygen or Zion, maybe both have some more squeezing options to go. But we are speaking of only few percent.

In general, the development in WordPress Core changed a lot. I think it is not essentially needed anymore to work with a builder. Builders need the integration to the core as they are faster and more intuitive.

My favorite in terms of having most potential options at the moment is Oxygen builder. I really want to test their integration with Gutenberg and combine Core and Builder. The other one is Zion builder. The speed advantage they have is a great start. If they fix their UI, some accessibility issues and maybe find an integration towards Gutenberg as well, they could be definite choice, if there wouldn't be other, more important things to consider.

Currently they are not my choice. They really need that push for content creators instead of feature, feature, feature. Go for UI and content creators to establish a wider base. Having more users gets more third-party support and slowly you could get the followers like Oxygen.

All tools have downsides. If you yourself know you want a fast site and optimize the design decisions and the code, you are doing the right job anyway.

I personally ran into some trouble now because I was undecided for some time. Regarding WordPress 6 it is maybe too early to judge, same applies for Zion; both have great potential, but it’s not sure where it will lead.

Regarding Client projects the choice depends on the task. The bigger the task will be, the more likely an Elementor solution will be as third parties could be the decision makers. Or it's Oxygen as it has a solide support. Zion is out, as their support quality (for my two issues) was horrible.

Many integrations, even for Oxygen Builder still fail; so, for example I also experienced some error messages with Jetpack and some caching errors. The other thing is the new WordPress Core that might bring more trouble to the builders.

My test sites

As being said, I rebuilt the sites in different systems. To give you full transparency, I share the links with you. Please note: While writing the article down, I switched my live environment from Elementor builder to Oxygen builder. But I did a "backup" of my Elementor page (without some CDN supports), so it might be slower as in my testings. As mentioned, if you know how to squeeze, the differences won't be too big.

• My WordPress 6 Core Test-Site
• My Elementor Backup
• My Oxygen Test Site
• My Zion Builder Test Site

• Please use the following credentials to look at the sites:
• User: preview
• Pw: ShowMe

All mentioned pages were created in July 2022, the WordPress Core Page earlier as a result of my articles on building a FSE Theme in WordPress. Feel free to send a comment, if a page might get broken, or you are absolutely not amused about my results 🙂

I also did a post on breakdance builder, see "breakdance builder – first impressions". You could also access the test site here with the same mentioned credentials: https://breakdance.mannilito.com/

3rd party support or general support

I assume most people will be lost if they go for Zion Builder and a new WordPress 6 install with the full FSE standard theme being activated …. if you want to create a Menu, you will be lost as the Zion builder is referring to the WordPress Option that used to be under appearance before; everyone who tried WordPress 6 Core and even the new standard theme, knows there’s no menu button anymore. Annoying… but you won’t believe what the support of Zion answered me on my question on how to create Menus in Zion (for FSE themes without an activated option for Menus) … they said it’s a hosting issue… that’s really the worst answer you could get.

How inexperienced this person must be? As my answer to the person was direct, the disaster is still ongoing. I send screenshots of twenty-two being activated with no menu button showing, of another theme being activated, menu button showing; and I still only want an answer if there's an alternative way in Zion to create menus... shockingly, now he wants access to the backend of my page 🙂 The other issue wasn't even answered yet and it's an issue being asked more than a week ago.

I was completely shocked about this kind of support… of course I only switched my theme to a theme with menu support to be able to edit menus; but can’t this dude say we are developing a solution or something? Really, this was my showstopper on Zion; if at a simple question every intermediate WordPress fellow should know a workaround, I get a feedback, contact your hosting provider, I could rate their support quality the worst grade. Cause going the “hosting provider” way is a time waster and all the money one saves paying a low fee for the editor, will be quickly spent with much more than 5 meaningless hours of working and life time.

To play save, use one of the major builders

One great thing about elementor, though paying yearly license fees, in more than 6 years using the product on at least 30 client projects, there were only few real issues and there was never a black hole of support. It is a solid product one must never forget. If you are new and you want to play save with WordPress and builders, go for a major builder with a huge base for now. Go for elementor or divi.

To explore, use a coder friendly builder

If you are more experienced and can already imagine a quick solution for the menu issue on Zion I mentioned, explore the advanced editors. There’s so much magic to be uncovered and even WordPress Core brings its own beauty now. My personal decision was Oxygen Builder and I keep my license for Zion to support them. Hopefully, they get better support.