What is No-Code?
Note: This post contains affiliate links, and we may receive compensation for any purchases made through them.
No-code as a concept is incredibly simple to grasp. Web development in the traditional sense is a costly venture, both in terms of the cost to develop a project and in the time it takes to actually deliver it. Whilst some businesses can quite easily afford to shoulder these burdens, a great many simply do not have the available capital or in-house talent to create quality and responsive digital products for their own use. No-code seeks to level the playing field somewhat, giving developers sleek and responsive tools that they can use to eliminate a vast amount of the intensive labour involved in building a website or web application.
Whilst a relatively new concept in the world of web development, the major players in the no-code space have been growing and expanding exponentially year on year; Bubble.io closed an incredible $100 million round of Series A funding in July 2021, Webflow completed a $140 million Series B funding round in January 2021. Whilst vast investment does not necessarily guarantee a successful business, the signs are becoming clearer and clearer that whilst traditional web development will likely never disappear, no-code development will almost certainly be extremely important if not critical to the future of our industry.
Tools of the Trade
Atom Design is all about learning, expanding horizons and sharing knowledge as openly as possible. We thought it’d be helpful to do a bit of a deep dive on the tools we employ daily to help us go from the conceptualization phase of a project, to delivering a responsive and beautiful product to our clients at the end. If you’re curious, most of these tools have a free component that can be easily experimented with and for the most part, hobbyists can get quite deep into the no-code world without spending a penny.
There are also some fantastic premium tools and materials out there, including UI Kits such as Untitled UI which we’ve used extensively in the past as well as in-depth online courses. We are currently in development on our own no-code learning hub called The Lab. You can read more about it on the project page and if it sounds like something you’re interested in, then stay tuned to the Journal for updates on launch and upcoming content. In the meantime, we’d love to hear your thoughts on some of the tools we’re about to share below and your experience using them, either as a hobbyist or a professional!
Notion
Notion is the nerve centre of the entire Atom Design operation. This is an organizational tool from which we plan almost all the work that we undertake daily. If you’re unfamiliar with Notion, think of it as a one stop shop that incorporates some of the best parts of your favourite tools. It takes elements from Evernote, Trello and other organizational powerhouses to form one incredibly sleek and powerful tool. A vast amount of the functionality that Notion has to offer is free and it has a ton of applications for personal use too. We use Notion for everything from keeping an internal task tracker where Kelsie and I can assign and manage work relating to the overall operation of the company to simple things like keeping detailed notes on up-and-coming software or groups in the no-code space. I can’t say enough about how much Notion has increased our overall efficiency and streamlined our entire workflow, I’d consider it an integral day one tool for any start-up in the modern era.
Figma
If you’re at all interested in UI/UX design then you’ve probably already heard of Figma and its similarly powerful collaborative whiteboard tool Figjam. Figma is the dream tool for creatives in just about every industry but none more so than web development. We use Figma to create the entire skeleton and visual design of a site or web app before we ever enter the actual development stage. Figma allows for incredibly high resolution images and files and genuinely makes the design process so much simpler than many other tools of the same ilk. By far and away the best feature of Figma is that it is entirely collaborative. This means Kelsie and I can work in the same file, live at the same time with next to no latency. We can share ideas with one another and get instant feedback, and making changes is incredibly easy too. We tend to start with a blank canvas at the ideas stage and just throw various elements and colour schemes at the page whilst we work together to whittle our ideas down into one cohesive plan. There are a ton of excellent pre-built UI and design kits available through Figma too, one of which we’ll link at the bottom of this post because we think it is outstanding (Untitled UI).
Figma also comes packed in with its own collaborative whiteboard tool too, as if all of the above wasn’t compelling enough. Kelsie and I use Figjam to chat through in-depth ideas surrounding the running of Atom Design. Figjam has a ton of really cool features like being able to instantly notate a piece of work for future reference, as well as being able to see in real time which elements are being viewed and highlighted by another user. We can actually use Figjam to deliver presentations to clients which, due to the its fully interactive nature, allows for clients to comfortably ask questions and make notes on the presentation they’re being shown in real time. There are all some fun wee features like being able to “high-five” your mouse cursors or being able to stamp temporary emojis on the presentation almost like a message reaction. These features are less integral, but make the whole thing seem a little more fun and less corporate and stuffy.
Figjam is entirely free to use and though they have a premium plan which you can pay for, Kelsie and I have managed to squeeze so much out of the free plan that it’s really hard not to recommend picking up Figma for anyone who has even the slightest interest in design.
Bubble.io
Bubble is the first of two incredibly powerful no-code development tools that Kelsie and I use here at Atom Design. Bubble is the absolute premiere tool for all things web-app and includes an incredibly powerful suite of design and development elements that are integral to the work we do. Once we have our design blueprints fully drawn up in Figma and we have an idea of how we want to link our pages together, we move on to Bubble in order to start the development process. Bubble is a no-code drag and drop tool, meaning that getting started is literally as simple as dragging a group or a button onto a blank canvas and beginning to edit the properties.
We use an in-house design document to speed up the process of adding our elements to the canvas, ensuring that every single element looks and responds exactly how we want it to, without too much manual labour. Once you have the design language part of the web app down, it really is as simple of sizing and spacing elements on the page to ensure that they not only flow nicely together, but are entirely responsive across various display sizes. Bubble actually allows you to view your canvas at four viewpoints or “breakpoints” as you design, so you know exactly what your webapp is going to look like when viewed at various screen resolutions. This is an absolutely essential part of the tool in the modern era, where literally every other site / app user is going to be using a different device with a different screen size.
Bubble has continued to develop and expand since its launch in 2012, which is important for us as developers. We always want to be able to tell clients that we are using the absolute best, cutting edge tools to bring their project to life, and thanks to Bubble’s ability to keep up to date and continued evolution, we can do just that. Bubble recently launched its new “responsive engine” out of beta, which has given us the ability to get granular with our webapp elements in order to design with even more control than before. Bubble offers various pricing packages depending on a user’s needs, but it’s absolutely free to try out. Kelsie and I both started our no-code journey with Bubble as free users and we’ve been really impressed by how it's grown to keep up with us.
Webflow
Webflow is the second but no less important no-code development tool that we specialise in at Atom Design. Webflow is an incredible tool for developing static websites such as marketing sites or MVPs. Webflow includes a powerful suite of animation tools that allow us to make our client’s brands come to life on each and every page. You can comfortably get quite fancy and extravagant with your animations, or you can keep them sleek and subtle. There really is no right answer and it totally depends on the brand and the individual project. The important thing is that I can come to Webflow with no traditional animation experience and make some genuinely jaw dropping stuff with just a few clicks and a little creative thinking.
Webflow is backed by some of the best infrastructure on the web and they’ve blown us away by the load times we get on our own site, as well as the plethora of hosting locations available with their various premium plans. They also use cutting edge technologies but in an even more intelligent way than they were originally intended to be used. A great example of this is how they decided to modify their AWS S3 set up following the now-famous outage suffered by AWS in 2017. We love being able to tell our customers how safe, secure and reliable their site is going to be when we build it with Webflow and it gives us confidence in turn as developers.
We use Webflow’s built in CMS a ton when offering e-commerce functionality to our clients and it’s extremely straightforward both to set up and use. It’s crucial for our clients that when we hand over a completed project, be it a webapp built in Bubble or an e-commerce site built in Webflow that it’s simple for them to maintain and update as time goes on, and that’s something we pride ourselves on ensuring.
If you want to check out Webflow for free to get a better understanding of exactly what kind of features we use on a daily basis at Atom Design, we’ll leave a link at the bottom of this post that’ll take you straight to their signup page.
The Future
One of the most exciting things about web development as an industry is that it’s actually relatively young, and the advent of no-code tools is an even more recent revelation. Things are constantly moving and shaking and in order to keep up, you really have to be on your toes and open to learning new things. We’re constantly hearing of new tools sprouting up with various niches and USPs that are super exciting, and we’re always evaluating our current suite of tools to see where we can add and adapt to make an even better product for our clients.
This website, and many of our projects, draw inspiration from the incredible resource that is Untitled UI, and we highly recommend you check it out.
