Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

Noodl Prototyping App

Emin Inanc Unlu
Prototypr
Published in
10 min readDec 27, 2016

--

Noodl is a prototyping app for application experience design with emphasis on connectivity, visualizing and interacting with data. It has been developed by Topp — a Swedish design & innovation studio. Although Noodl is more focused on IoT, it can be used to create every kind of prototype.

I discovered it when it was in beta process, and I have been using it from time to time along with my main prototyping tool Framer. I wanted to write about it because even though it’s really powerful and promising, it hasn’t been discovered enough by the community yet.

With Noodl you can prototype without coding, or even better, you can make it much more powerful with coding.

Animations are inspired from here. The photo and the texts are taken from National Geographic.

The User Interface and the Key Features

Noodl has a node-based interface like Quartz Composer, Origami Studio or Form. So what makes Noodl special? Here some of the key features:

  1. Cross-platform support, it’s based on web technologies.
  2. Well-thought-out node and property system that is very easy to use when organizing, ordering or connecting nodes and layers. Animation and state creation logic is outstanding.
  3. Component feature, a life saver feature, especially for a node-based app.
  4. Responsive design features.
  5. Extensive data, cloud and hardware connection features.
  6. Coding support. You can even manipulate and create nodes via coding.
  7. Multi-screen design feature, multiple devices working together in one project.
  8. Live previewing on any device.
  9. Collaboration support.

Here is a video that shows the whole process of creating a toggle button:

One of the things I like in a node-based or visual programming interface is that sometimes you make interesting discoveries by coincidence as it’s easier to connect things to each other compared to coding.

This comes in handy when you’re not sure of the design yet and want to explore the possibilities.

Let’s see how helpful it’s in finding a good loading animation for a list view:

Node Types

There are dozens of node types serving to different needs. What you can do with the combination of all these is almost limitless.

Of course there might be times you feel stuck or want to do something in more efficient way. In this case, you can always use the power of Javascript node.

The nodes available at the time of writing this article.

Components

Noodl allows you to divide the view or logic into components. There are several advantages of that:

  1. Designing all of the prototype in a single view makes it unnecessarily complex and confusing. Using components will make the project well organized. Also, it’s easier to update or understand things when the logic is divided into meaningful pieces.
  2. A component can be reused in different places easily. For instance, you can make a list item and use it in several lists powered by different data sets. Additionally updating the appearance of the item would be a piece of cake as all the list items are derived from a single component.
  3. It can be used to separate screens. Every screen can be a component and hereby all of them would have their own workspaces.
Thanks to Unsplash and to the people shared these great photos!

Note: Y0u could also use Page Navigation and Page Navigation Back nodes for the screen transition here.

Design Responsively

Static designs with fixed size and data — even worse if lorem ipsum — are outdated now. Responsive design features are obligatory for a design tool to stay in the race.

Let’s look at what options we have currently in Noodl for responsive design:

  1. Determine size by percentage (%) according to the parent.
  2. Determine size according to the content size. It’s very important to have auto-resizing feature, one of the core elements of responsive design.
  3. Align layers to the edges or to the center separately in X and Y.
  4. A couple of layout nodes: Flow Layout and Stack Layout.
  5. Padding settings for layers with children.

Here some of the properties I mentioned in different type of nodes:

Design with Real Data

With Noodl, connecting real data to design is easy and rapid. It enables designers to use data as a design medium, understand its impact and be creative with it.

There are some special nodes for making this job easy and free from coding as much as possible.

In the project in the following video, there are three parts related to this topic:

  1. Giving a static JSON input — CSV is supported too — for predetermining the countries in the list. It was also the same in the previous video, stream is produced from a JSON input rather than using images. In this way it’s really easy to make changes and testing different cases.
  2. Fetching capital and country population from a REST API for the listed and added countries.
  3. Ability to add new countries to the collection (database) with the text input view. So… yes, you can have a database in your prototype, and it’s really simple to setup, no coding required.
Thanks to restcountries.eu for the free API!

This is a very simple example compared to the things you can do with Noodl. You can use other methods like put, post and delete; meaning almost like developing the real product.

If you don’t have a REST API of your product yet, there is prototype backend feature of REST node for this. It’s simply a small script that takes the request prepared in the request function and provides a response like below. In this way you can test things easily before you have a working API.

context.sendResponse(200,{result:'success'});

Connect Hardware

Connect hardware for testing, reaching a higher quality and discovering more opportunities before releasing your product.

MQTT Ready

Messaging based on MQTT is a native concept in Noodl requiring no programing knowledge. Use the embedded broker or external brokers like Arduino Cloud and AWS IoT to connect to virtually any hardware. Build experiences driven from the cloud.

Connectivity

Use local connectivity protocols like Bluetooth without needing to dive into code to design beautiful and intuitive onboarding experiences for your thing or service.

Virtual Things

In Noodl it is simple to model virtual representations of external devices before any hardware is available. This lets you design and test the holistic IoT experience early and often to reduce risk and cost.

Taken from Noodl’s website.

Power Up with Coding

I like that Noodl enables many complex things without needing you to code. But still, programming can help you to do many advanced things that is not easily achievable with nodes yet. So why not mixing both.

Here two examples for using programming to power up your prototype:

And the second below shows how to make a flow layout more responsive to screen size and creating the items automatically:

Design Multiscreen

Noodl allows you to create multiple devices in your project, and each device can have it’s own interface. It can also act as a bridge between your devices to enable sending and receiving data between them.

You can have a look at this link for more details about designing multiscreen experience.

Preview on any Device

You can preview your prototypes on most of the devices as it’s based on web technologies.

To preview, just open the preview link on a device connected to same network.

A tip for previewing without the status bar on iOS devices: Use the apps like Frameless or Framer allowing you to open an URL.

If you want to send the prototype to somebody that is not on the same network, you can deploy the prototype and share it — the generated file is simply an index.html file together will all the javascript and assets needed for running standalone. Take a look here for the ways of sharing it.

Update: Deploy feature has been removed in v.1.1 and is being revamped for an upcoming release.

Sharing feature could be improved to make it simpler and easier to send to someone not on same network. Hope to see that update soon!

Collaboration and Versioning

In order to work effectively in a team with multiple creators, it’s important to have collaboration and versioning features.

Noodl allows you to do this by using Git. It’s easy to setup and start using it. Just follow the instructions here.

Learning and Documentation

One frustration of learning a new tool is lack of detailed tutorials. Luckily, we have some great interactive step-by-step tutorials embedded right in Noodl.

After completing these lessons you will understand most of the fundamentals of how things work and you will be ready to start experimenting on your own.

Additionally, there are some pre-made components in Noodl. You can examine them to get more ideas. To access these, open or create a project first, click on the “Library” button in the bottom left corner, and then select a component from the list.

Documentation

They have detailed documentation showing all the nodes and their properties with explanations. It will be very useful resource until you learn the nodes.

Other Helpful Resources

  1. Topp’s Videos on Vimeo
  2. Noodl Reddit Page

Download the Projects

You can download all the projects I have done for this article — there is an extra example included for REST API usage provided by Michael Cartner from Topp.

Conclusion and Comparison

You’re awesome, you made it all the way here!

Before I begin, I should say that, comparison with other tools deserves another long article, but I will try to sum things up as much as I can.

You know, prototyping tools are on rise for a couple of years. There are dozens of tools with different approach. So, choosing what to use mostly depends on your current requirements for the project.

In my opinion, these three features make Noodl special:

1. Powerful

Ability to design high-fidelity prototypes, extensive cloud and hardware connectivity features, coding and multiple screen design support.

Personally, I like to choose a tool that I don’t have a limit on what I can do. So this would be the prior factor for the people think in same way.

For specific cases: ability to connect hardware and cloud makes it a great option for IoT developers; the multiple screen design feature makes it unique if you need multiple devices communicating with each other on the project.

I should say that current node library might be insufficient for some cases depending on what and how fast you need to design. But if you know coding, you will be able to create things that are not exist in the library yet, so it might not be a problem too.

2. Practical

Noodl has very well-thought-out node and property system that is easy to use and practical — you can realize that very quickly if you have experience with other node-based tools.

Many tasks including responsive design, animations and states are easier to setup with simpler steps compared to Origami Studio and Form. Also, I think it’s easier to order things and understand which nodes do what when project gets more complex.

On the other hand, there are some advantages of Origami Studio in being practical: A helper plugin for importing designs quickly, some features for easy screen creation and transition between them, and a wide user community for getting help. But these could be added to Noodl easily with some updates.

I want to point out that if I had to compare the logic of the system or how well-thought the fundamentals are, I would vote for Noodl. That means, with the right improvements, Noodl has a big advantage.

Of course this is my personal thought. One certain thing is, these two platforms have a lot to learn from each other. It’s good to have powerful competitors, it helps you to improve more than anything.

3. Cross-Platform

Among the tools powerful enough to design very high-fidelity prototypes, Noodl might be one of the few options available to Windows. Linux version is in beta state right now.

So in a nutshell, you can think Noodl like the mix of Origami Studio and Framer with some additional unique features. It allows you to prototype without coding, but not limiting you with this. You can integrate the power of coding as well.

There is another nice video published by Topp. It shows the whole process of designing a good looking prototype with Noodl. If you want more insights, I highly recommend you to watch it:

Regards

Special thanks to Anders Larsson and Michael Cartner for their support and attribution to the article. I also want to say that you have done a great job all Topp team members!

Please recommend this article if you liked and help the knowledge spread! I would be happy to hear your feedbacks too!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Emin Inanc Unlu

Product designer and prototype developer. Likes traveling, nature, photography and sharing — www.emin.space

Responses (7)

Write a response