No-code tools - the future of UI Design?
Sample demo: https://arekibo-webflow.webflow.io/
What is no-code?
No-code is a movement that has been evolving and gathering momentum in recent times. No-code strives to empower non-technical people with the ability to design and develop in the browser without needing to hand write code.
Essentially, this means that designers or developers can code visually, using a design tool. In the past, this approach has been criticised for producing poor code quality and difficult to maintain, however times have changed dramatically in the last few years.
.png "Group-11-(1).png")
No-code tools promote the following features:
- Ability to build responsive websites without writing a single line of code
- Drag and drop interface
- Development platform for designers to build finalised design concepts
- Ability to add classes and reusable styles
- Powerful CMS and e-commerce
Who are no-code tools for?
These platforms finally begin to bridge the gap between design and development. They can be adopted as tools for designers, developers, editors and clients to work within the same platform.
What are the popular tools?
There are many tools on the market that contribute to the no-code movement. These tools can be used to build web applications, mobile applications, automation and managing databases. See below for examples:
- Webflow
- Editor-x
- Air table
- Build base
- Bubble
More examples can be found here: https://www.nocodeportal.com/lists/all-tools/
Webflow
Webflow is currently one of the industry leaders in no-code platforms for web. Webflow aims to incorporate web design best practice to output semantic and accessible code - all through a drag and drop design interface. They have recently raised over $140 million and sees their valuation rise to $2.1 billion.
To demonstrate the core functionality and flexibility of the tool, I have put together a sample demo website.
Demo site includes:
- CMS managed content
- Blog listing with feature articles
- Blog details with dynamic content
- Category filters
Webflow example
Designs for Webflow should begin outside of the tool itself using a design tool such as Figma or Sketch etc. This ensures that design decisions have been agreed before assembling the website and will therefore help to speed up the process. In this case, I am using the existing Arekibo Blog as a loose design reference to create this demo.
Look and feel
Once the look and feel has been designed and finalised, we can start setting up our project with the following steps:
- Setup Typography and import font in project settings
- Import assets e.g. logos, images and icons
- Grid - ensure grids set up 12 columns grid - Layout grid settings
- Evaluate design - ensure grid columns setup correctly
- Start to set up shared components as symbols e.g. header, footer
- Setup colour swatches and save for reuse
Elements
The elements panel provides:
- Div blocks - key to building every layout
- Grids - simple grid to organise responsive layouts
- Typography - all basic font elements
- Forms
- Navigation
- Tabs, lightbox, sliders
- Collections - dynamic content that connects interface to CMS
CSS box model
Builds layouts using CSS Box model and we make utilise tools like flexbox and grid.
Breakpoints
The platform offers easy ways to adjust layout for four breakpoint variations. This provides an easy way to adjust a websites look and feel for different devices. Text can easily be moved around for each device width, elements can be hidden or images can be adjusted quickly.
Content management
The Webflow content management system can also be used to inject dynamic content into pages. This is a really useful feature for setting sample content and ensuring layouts are robust. Content can easily be edited, updated and published to live with complete design freedom.
While the CMS is very useful for simple websites structures, it does not have all the capabilities common with other CMS platforms.
Performance
Performance was tested with Google Page Speed using this demo. The following scores were achieved with very minimal effort and could possibly be improved with the licensed version.
Desktop
The sample demo project scored 95% for desktop.
Mobile
The mobile score was 79%. Google Page speed outlined the following opportunities.
Accessibility
Accessibility scores very high. I have used the demo website to carry out some preliminary tests using webaim. Initial tests outlined some minor issues with colour contrast and duplicate IDs which were easily fixed from within the tool itself. Webflow also offers its own tool that provides warnings and feedback on the accessibility or usability issues.
Final thoughts
This is an impressive tool that outputs really well structured mark-up. While these tools are promoted as no-code, it is important to have a good understanding of frontend development principles to really understand the layout concepts.
It is exciting to see that we can create a dynamic blog, powered by a CMS from a design tool. I was able to create a look and feel, setup and manage dynamic content and publish to a domain all from one single interface.
Still a need for developers
While it is straight forward to code a simple site very easily, it is still important to understand web design best practice, coding standards, accessibility and have a good understanding of HTML and CSS to understand the concepts behind the interface. The platform has a fantastic help section that offers provides extensive documentation and clear instructions on how to use.
Depending on the requirements and complexity of the website, web development and frontend development is still essential for more complex projects with more bespoke requirements. The interface has limitations in terms of creating more complex functionality like megamenu structures, bespoke filters or sliders.
Webflow is a great tool with so much potential for the future.
Useful links:
Are you planning a website redevelopment? Get in touch to discuss your options.