UI Tool Glossary
PageBuilder – Frontend Page/Post only IDEs – Divi, Elementor, Thrive Architect
SiteBuilder – Whole Website, Drag & Drop Builder – Gutenberg’s goal
WebBuilder – SiteBuilder + plugins and Admin tools – Squarspace, Weebly, Wix
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.
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:
|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.
|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.
| 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.
|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.
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:
- 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;
- Xara does not have a public database with standard API like WordPress MySQL;
- Xara does not have the rich set of interprocess APIs like AJAX, XML/RPC, REST API, available in other WebBuilders.
- 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.
- Slider revolution supports layers of images, text, buttons, and grouped objects.
- Those layers and grouped objects can be moved, resized, made to vanish and reappear at a new level
- Thus, Slider Revolution supports animations of any and all of its layers and objects;
- 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 :
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.
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:
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.
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.