TFN#24: 🪜 How I use wireframe.cc for quick ideation

Reader,

Have you been in a situation where you want to quickly draw a couple of things on the computer and share them with your colleague or team? To give some idea of what the output should look like?

Output such as: where to place elements in a poster, how to arrange a report dashboard, the seating arrangement for the event, or anything that requires some scribbling of shapes.

But do you know what most people do?

They get on a 30-minute-long group meeting trying to explain what they mean. They try to sketch using words.

But why?

Because who wants to waste time struggling in some design program to show their idea? And if you think about it, they’re right. Design tools are an overkill for most people.

We need something simple.

Free, fast, and minimalistic.

We need a wireframing tool

In simplest terms, a wireframe is an illustration. Illustration without many colors, styles, and graphics.

It helps decide where different elements are placed, in what size, what would be their function, etc.

For example, this illustration shows a wireframe of a mobile webpage:

If you want to tell your website designer your idea of how your website should look like, you don’t need to sketch on a piece of paper. You can create a wireframe and discuss how you want to layout your website.

The same goes for a poster, a dashboard, or an app!

We don’t need to use Photoshop, Canva, or Paint program to do it.

wireframe.cc does the job

I use this free and fast tool.

You don’t even need to sign up.

Just go to wireframe.cc and start ideating.

What I like about this tool

The in-built options.

For example, if I’m creating a survey form in some software.

And I want to ideate before I invest my time in the software.

Within a few minutes, I can have the rough sketch like this:

Notice the following elements in the above screenshot:

  • A placeholder headline (dark grey)
  • A placeholder paragraph (light grey)
  • A text input box
  • A slider
  • A button
  • A scroll bar

I didn’t have to “draw” them.

They were already provided with right-click options.

And the right-click options change with what kind of rectangle we draw on the canvas.

Look at this, when I draw a thin rectangle:

Sharing with others

Wireframes are not for personal use only. You may want to share it with others. This is how it is done:

When the design is unsaved, the URL will remain unchanged:

When you hit save, you will receive a confirmation and your design will become accessible through the unique URL to anyone you share.

You can actually go to this URL https://wireframe.cc/eXfUDq and access the design and edit it.

So, next time you need to scribble on paper to ideate, try this tool.

And share with me your experience.

Meanwhile, how do you communicate your ideas with your team?

Is there any specific tool that you use?

Hit Reply and share it with me.

Reads of the week:

How would you persuade somebody smart like Steve Jobs or Elon Musk to rethink their positions on ideas?

Adam himself is an accomplished academician, author, and researcher. I re-read this gem from him this week.

Adam provides one example that you may find memorable. He tells the story of how the iPhone’s glass manufacturer had to persuade Steve Jobs to reconsider his idea of how the glass should be manufactured.

In every workplace, we encounter people who are too stubborn, too smart, and too powerful to be persuaded. This article will provide a glimpse into how this can be done.

Scroll to Top