There is a big battle brewing between WordPress’s fast evolving  Gutenberg SiteBuilder and the  top WordPress Pagebuilders. But the battle extends to 3rd party WebBuilder tools like SquareSpace, Wix, Weebly. And just for good measure, add in the JavaScript IDEs like free Mobirise and premium Bootstrap Studio.

The battle ground is DIY, “No Programming Required” layout and design of Web pages. This has become extremely popular as ease of design has reached more clients who need a new or rejuvenated Web Presence.

All of these tools deliver some measure of WYSIWYG-What You See Is What You Get  web page design. Because of the fierce competition for leadership in Web Page Design and Development,  the tools are improving at a rapid pace. This means that  that even newbies to Web Development can create working websites designs with a professional look and feel with minimal assistance.

TheOpensourcery has covered this evolving competition with stories for example on Gutenberg vs the PageBuilders and some of the JavaScript IDEs. However,   there are already some tools available that are way ahead of the PageBuilder and WebBuilder pack.  There are Web UI Design tools like  Xara Web Designer that has had drag drop and auto resizing of design objects for some years. Or  Hero Scene  capabilities  using ThemePunch’s Slider Revolution which allows users to orchestrate Hero full page designs with  multiple layers appearing and disappearing in dramatic fashion. Finally among the WebBuilders, Wix WebBuilder with its with its drag and drop, groupable and resizable objects plus ADI interface is pushing the UI State of the Art..

UI Future Directions Available Now

True Drag & Drop Design with Graphic Enhancements using Xara Web Designer

Xara Web Designer has been available on the market with a set of UI Design features that many Sitebuilder tools are just approaching as future directions. Xara has  on the page editing of all text blocks. Xara supports true drag and drop plus resizing of images, text blocks and groups of objects on a page.Xara also provides for extensive image and graphic enhancements. Here is a an overview of Xara Web Designer in action:

[iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/e1Q2-8rL94s” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen]	Web Designer allows users to group objects together and then drag and drop plus resize them anywhere on the web page. This is a capability also available in PageBuilders but with strict, default  limitations. Among the WebBuilders only Wix has close to comparable drag and drop plus resizing features. What makes this attractive in the case of Xara Web Designer is its extensive library of templates which can be imported and then  easily & quickly customized to meet  users design ideas.
[iframe width=”384″ height=”216″ src=”https://www.youtube.com/embed/96euo0fr1tw” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen]	WYSIWYG-What You See Is What You Get also known as Frontend Editing has become an issue because WordPress Gutenberg has been promoted as being WYSIWYG capable. But the current 1.9 beta version of Gutenberg is far from delivering such capabilities. This is no small factor in WebBuilding because the ability to see a web page as you build it has been one of the winning featurees of PageBuilders/SiteBuilders. This is a key capability attracting people new to the world of DIY Web Design and Development.
[iframe width=”384″ height=”216″ src=”https://www.youtube.com/embed/v1DWeEAkk8I” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen]	Xara Web Designer has a number of added & elegant UI features: liquid text flows around objects; easy mouseover, thumbnail and pop-up creation; automatic adjustment of photos to the correct web resolution; one-click change of site wide theme colors and shades; automatic color matching of imported objects such as buttons; a concept of ‘repeating objects’ such as headings and button bars – edit one instance and they all update. These are robust features. But the Premium version adds PageBuilder-like capabilities – Single Source MultiPage sites activated by scroll, menu click or key icon swipe; sticky menus and objects; sophisticated animations; rich  fonts and icons support, etc.
[iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/1uDRs_Teqsc” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen]	Xara has a superior Graphic Designer most of which is incorporated into its Web Designer. This means that images and vector graphics can be created and/or refined right in the Web Designer. This is like having WordPress’ Aviary plugin  for bitmap images and the Vectr plugiin  for vector images. But the sophistication of Xara graphic tools extends to layers  of vector and bitmap photo images. Coupled with animations and the result is that  users can develop stunning Hero images and Landing Pages.

Web UI Assessment: Among the top 6 PageBuilders from WordPress  Divi 3, Elementor,  and Visual Composer have inline text block edits with very simple style edits. Thrive Architect like the JavaScript Frameworks from Mobirise and Bootstrap Studio plus SquareSpace and Weebly WebBuilders support  inline text block editing and with more complete styling. Only Wix has complete inline text editing with full styling. Also Wix is the only UI tool to support drag and drop text and image block movement and resizing. All the other UI tools have only very basic inline image resizing. With its grouping and framing capabilities, Xara Web Designer is stands out for fast and easy text, image and block editing.

So the bottom line is that Xara Web Designer already has the features that many PageBuilders and SiteBuilders can only promise. The UI interface is geared to rapid design and and creative innovation. However to my chagrin, there are four major downsides to the Xara Web Designer:

1. Xara does not have a large library of plugins or add-on modules to match competing WebBuilders to say nothing of the 47,385 available to WordPress users;
2. Xara does not have a public database with standard API like WordPress MySQL;
3. Xara does not have the rich set of interprocess APIs like AJAX, XML/RPC,  REST API, available in other WebBuilders.
4. Xara is just releasing a SmartShape API for Developers; but the broader coding API is not yet public.

For informational and presentation sites Xara is more than adept. With a strong Interprocess API Xara could easily become a goto FrontEnd Builder.

Slider Revolution Creates Layering with Animations on Hero-size Landing Pages

Slider Revolution is an example of a tool being extended beyond its original domain because of the flexibility and ease of use of its UI. Slider Revolution is  a slide creation tool with four exceptional capabilities.

1. Slider revolution supports layers of images, text, buttons, and grouped objects.
2. Those layers and grouped objects can be moved, resized, made to vanish and reappear  at a new level
3. Thus, Slider Revolution supports animations of any and all of its layers and objects;
4. Slider Revolution supports add-ons and linkages among its elements for special effects like parallax and typewriting text.

With these capabilities Slider Revolution has added frontend Hero Page Design as a new task. Some of the opportunities this provides can be seen in the video below and this tutorials playlist :

The development of some of these Hero Pages can be challenging but the many templates files give users a headstart on designing some stunning landing page designs. Better still, Slider Revolution has a JavaScript version for use with the Bootstrap IDEs. The following is an example of a full-screen Hero Landing Page with animations and action buttons done with Slider Revolution.
Now Slider Revolution that comes free with many Multipurpose  WordPress themes like Xtheme and Total does not have the full range of templates  and addons available on the CodeCanyon version. However, already animations  and sliders are available in many PageBuilders and SiteBuilders – so expect to see more layering and special effects to appear there too.
Web UI Assessment: All of the WordPress PageBuilders except SiteOrigin provide a set of animation routines [some with as many 16 different animation types]. these animations can be applied  But all of the UI tools use a basic  2 level layering with a background layer and then user objects layer just above. None of the UI tools have multiple layers and assignable  objects which can be overlapped over each other.

Wix delivers Artificial Design Intelligence along with Drag & Drop IDE

Wix has two  of the more advanced UI Tools  among all the WebBuilders. Wix has a fully capable drag & drop IDE which matches many of Xara Web Designer features. The video below shows the Wix Ui tool:

But almost hidden within Wix is its ambitious ADI – Artificial Design Intelligence tool. This tool does a careful survey of your website’s overall mission and then lets you iteratively build that website design:
There is a 9 step process to add elements to the evolving website design. Users will get guidance at each step  and can try many variations at each step. Or  a step can be skipped. For example here is the many Website Color options:
The color options bring along some font and trim stylings as well. If the user is not satisfied they can try another option – and as you go back ADI chnages the options available to choose from. Even better, users can repeat any of the nine steps later after seeing the completely generated website design.

I have taken first time website users through the process and most pick it up quickly and do iterate to a satisfying design. What has to be emphasized is the amount of time and thought required to arrive at a desirable website design. Also users have a key decision – when to stop the ADI cycling and switch over to the drag & drop UI Editor. Once the switchover is done and even small UI Edits have , Wix does not support returning to the ADI for design cycling.

Wix Limitations

So given the great design tools and the ability to build and run a free website at no cost [but not on your own web name and with Wix ads appearing on yor pages] , what is the downside to Wix. There are 3 main drawbacks – cost, mobile ready, and feature addons.

For  a basic website with no add-on features, but  unlimited bandwidth, plenty of disk space using your domain name and stripped of all Wix ads  – this will cost you $168US/year [See here for all the basic pricing plans]. This cost rises to $300/year for a basic online store.  But unlike Drupal, Joomla  and WordPress which have hundreds of free plugins, Wix is more limited as seen is the following screenshot:
Wix has a number of freemium addons – free for the basic tool, but a premium price for the complete tool. However, the Wix API and Code is open and allows users familiar with JavaScript and Web  interface protocols, to code their own add-ons and interface connections.

There is  a tech bug that has persisted in Wix regarding mobile responsive designs. Your website is considered mobile responsive if it is capable of running on desktops/laptops, tablets in portrait or landscape mode, and mobile phones in portrait and landscape mode. Unfortunately, Wix designs can falter in delivering  acceptable responsive portrait and landscape views or resized windows displays.  This is such a vexing limitation given the overall promise of the Wix ADI and UI editor.

Web UI Assessment:Only Squarespace does a user  query before issuing/generating a simple template. In general, expect to see this Design Refinement addon to appear in other SiteBuilders as they cater more closely to the DIY community of users with online help. For example, the past few versions of Corel PaintShop Pro there is a online Discovery Center with numerous tips and video tutorials on photo design in general and using PaintShop Pro. Then in the program there is a Learning Center Panel [easily collapsed or expanded] which changes its advice  and point by point suggestions depending on which  tool  you have selected in the Edit window. WordPress and Visual Composer both have small tours for new features.  Proactive DIY help in making a Web user more productive is clearly inbound.

Summary

Clearly DIY website design is alive and well. Many small businesses want a well designed and mobile responsive  Web Presence. many want to do/influence the original website design or make changes and updates as business conditions and opportunities change. The full range of UI Tools from PageBuilders to full SiteBuilders to complete WebBuilders are hard at work trying to capture this growing need in the Web marketplace. What is most striking is that  many  of the future UI tool directions and features are already available in current Web Building software. The race is on to see who can deliver the most complete and effective DIY  Web Design platform.