As app makers, entrepreneurs, ux specialists, freelancers and designers, we have a lot of ideas and projects to work on.

There are the ones we share with our partners or clients, and the ones we keep to ourselves because they aren't ready yet.

If you recognized yourself in the lines above, you're probably like me and write down your ideas as they appear during the day. You probably carry around a notebook and also use any kind of paper you might find from the back of an envelope, to a post-it note. Maybe you also use your phone and your computer.

What is the next step after you have an idea?
I usually feel like there's a bridge missing between the 2-line idea description and actually starting to design an app in your favorite design software.

This is especially true if you need to explain your idea to someone and collect early inputs.

That's how I started to use the visual process this article is about.

Start by drawing an overview

When you describe your initial idea with words, you usually don't dive very deep into the details. It's mostly about the main features of the application.
What the user can do with it and what the most important "blocks" are, design-wise.

This visual process works the same way.

Start by drawing thumbnails of the main views of your application. Lose the details. Focus on one important feature per view and how it is displayed to the user.

I usually try to have at least 2/3 views per idea.
Either complementary views or different ways to do it if I already thought about several alternatives.

Right next to each view, I name it, write one sentence about it's main purpose and, if needed, a short description about how it works.

Here is an example using Non-app Mockup:

Non-app Mockup overview

Store, review and iterate

If you're using a notebook, you could take the habit of putting a small sticker to mark the pages that contains visual brainstorms of ideas.

If you use something like Non-app Mockup, I advocate the use of a folder.

Once in a while, crawl through your ideas. I recommend doing it every 2-3 months, but you can definitely do it more often. Do it with the goal in mind of trying to find at least one thing to iterate upon.

If you happen to still be thinking about the idea you picked the exact same way you used to, it's time to zoom in and explain what the views will look like in order to make it easier to design in Sketch or photoshop.

Zoom in on the thumbnails

So, during the review or whenever you feel ready and have a clearer idea of what the views should look like, the ui and/or the ux, draw it at a bigger scale.

During this step, you can add as many details as you want, but you shouldn't try to draw pixel-perfect interfaces. Give priority to features and interactions over look. After all, that's what design softwares are for and you'll be using them later.

Drawn on a Non-app Mockup framework:

Non-app Mockup detail

Using this process as a team

This process is also team-friendly!

Print a couple of blank overview pages or ask people to reproduce a model you give them.

Explain the process you'll follow.

Then give the group a few minutes (5, 10, maybe 15) so everyone has the time to draw thumbnails of their own personal vision of the project.

Collect and collectively review all the thumbnails and pin the ones that match the vision the best to the wall. You can also make a list of the good ideas extracted from the thumbnails on a whiteboard.

Next step is to zoom in to give more details. You can either ask people to work individually on this task, or make groups of 3-5 people to extrapolate from the best thumbnails.

Final thoughts

For the majority of people, drawing without requiring too many details, inside a comfortable framework will be much less intimidating than using words.

Although, both obviously play well together. The alchemy happens with the right amount of doodle and the right amount of words to explain said drawings.



Want to use the framework I'm using? Click on the image below and grab your copy of Non-app Mockup.



Non-app Mockup logo