Design for no-coders

Issue 55: Design tips to get you started with no-code

Aug 29, 2021

I believe software can change the world in a positive way. The ability to create software is a superpower. Currently today, the majority of software is created by a developer directly writing code, the series of instructions translated for a machine to understand and run the programs and commands. The definition of code is “a system of words, letters, figures, or other symbols substituted for other words, letters, etc., especially for the purposes of secrecy.” In some ways, that’s pretty gating.

A very small percentage of the world knows how to write code to make these machines work. This is where the power of no-code comes in, which is a visual layer of abstraction between a developer and software. This allows people to create programs without having to know the direct surface of writing code. To make it abundantly clear, no-code does not mean the absence of code, but not needing code was the primary method of creating programs.

I recently joined On Deck’s No-Code (ODNC) fellowship to share a presentation about design for no-coders (thanks to the program director KP for inviting me). I like to share concepts vs. teaching step-by-step because when you understand high-level concepts, you can learn the details. Whether you’re a developer who needs some tips on design or a designer no-code curious, I’ll expand on the five tips I shared with the fellows here.

#1: Map out your no-code stack

Even though no-code is visually abstracted from writing code, the fundamentals are just like building software. Start with mapping how data flows between software tools you will use. You might realize that your project doesn't need any other tools and it’s all contained in one product like Webflow. That’s a great realization to have and well worth the exercise! As you continue building, you might uncover that you need to scale your no-code stack. Mapping it out helps you plan.

Let’s use an example of how someone’s no-code stack might scale beyond building a website. Imagine you’re a professional coach and need to automate your booking workflow with your clients and potential customers. You start keeping track manually, but your business is booming and it’s hard to keep track of, so you want to build a Customer Relationship Management (CRM). Let’s use Airtable as a way to build your database for this. You can build a booking flow by:

Using Calend.ly or a similar service to allow customers to book time with you easily
Power automation with a tool like Zapier to send the customer information to your Airtable database
New customers are now captured automatically in Airtable when they book on Calend.ly

That’s a very simple workflow to start. Imagine now that you want to take that data and build a site out of it. You could take the Airtable database and pass that content through Webflow. There are infinite possibilities in no-code!

#2: Start with content and information hierarchy

Content informs everything. Could you imagine designing an app without knowing if it’s a recipes site, photo community, or blockchain startup? Content is the elements humans interface with your product. John Moore Williams wrote a great blog post "Why your design process should start with content." Mapping out your content will inform how you plan to structure the views/pages in your product. Content and information architecture are the blueprints to what you build.

#3: Create small experiments to learn

When you’re learning something new, it’s helpful to break things out into smaller studies before committing to a larger project. This allows you to explore different possibilities on a smaller scale vs. accruing technical debt as you go. There have been several times in web projects I wish I would have explored different possibilities instead of building on the main project. I love sharing the story of how Picasso’s painting Guernica was made. The masterpiece was not created in one fell swoop. The legendary Spanish artist conducted many isolated studies and explorations on certain pieces of the work before putting it together. You can see at the museum many explorations of the bull and many other elements the appear in the piece. You can do this with building software as well.

Keep a list of different functions you need to build. If you’re not sure how to approach something, create a separate project to help inform how you’d build it. This informs how you approach the larger build. If you're new to no-code tools, it's helpful to play around with different tools to understand their constraints.

#4: Build a living component library and style guide

One of the powers of no-code is your design is built as you work. The challenge that can come up is your designs can become inconsistent quickly. Design debt is constantly building and it’s not a shock if a website has 50 shades of gray. You may think this is a joke about the book series but I’ve worked on codebases where they were literally over fifty grays. When you build fast with other people, debt will accrue. Creating a component library and style guide can help you scale, whether it’s collaboratively or by yourself.

This is not a design system, but a start for you to embark on reusability. A little investment in this can help you build faster and consistently.

#5: Embrace the boxes

The core difference in designing in no-code tools than other design software is it’s not as free form as tools like Figma and Adobe Xd. In design tools, you can drag the thing and move it anywhere. However, designing in no-code tools often is building concurrently.

All digital experiences you encounter are built-in boxed structures with padding and spacing. The box model is nothing new on the web, and even mobile apps are starting to build with this philosophy in mind such as Swift UI with iOS.

Draw out the boxes of your experiences before you build them out in no-code. It'll save you a lot of time and rework if you plan accordingly. When I used to design for iOS apps, I used to sketch out all the different views and structures that would need to be created to understand how all the pieces fit together.

Tips from the community

“ I liked to create multiple accounts, duplicate a bunch of other people’s projects, and then dissect and combine them together into something of my own! Basically creating my own lil sandbox. I also found it helpful to collect websites I liked and then inspect them to see how I could recreate parts of that design in Webflow.” —@mollyfmielke
“A lot of learning no-code is googling, tutorials, etc. I wish I would have started a document earlier, saving resources with a short note about why it was helpful. It can be difficult to find that super helpful tutorial again, 6 months later when you want to reference it!” —@graceongrid
“Learn by doing. A small project to get familiar with the process and tools will help them improve quickly.” —@JeffTheSigma
“Embrace the learning process and the time it takes to get somewhere. While it’s easy to get caught up in mistakes or shortcomings, accept them as necessities to get better and use them as fuel to keep going in your no code journey.” —@kate_kassab
“Pick a tool and learn that well before jumping into the next tool or practice.” —@austinthesing
“Treat the output of your no-code tools more like prototypes than anything else. No code means you can iterate quickly based on feedback or intuition. Don’t get so attached to your solution that you miss the opportunity to learn, experiment, and improve it.” —@micahfenner

If you're interested in the No-Code fellowship the next cohort will start November 7!

P.S. Of course I need to tell you No-Code Conference 2021 is coming up and you should consider attending!

Hype links

Marco’s Webflow Design Guide: Marco Cornacchia put together a great guide to get started in Webflow.
MasterClass CEO: Joining an Early-Stage Startup Is Less Risky Than You Think

Design opportunities

The New York Times is hiring a Sr. Product Designer 1
California College of Arts is looking for an Adjunct Professor for Interaction Design
OpenTable is looking for a Sr. Product Designer - CRM
Loom is hiring a Director of Design
Public is hiring a Lead Product Designer

Olivia Cheng, a design leader I used to work with is the hiring manager. She's awesome.

Proof of Concept