Why you should not run into code as a first step

Photo by Mika Baumeister on Unsplash

When you have a new idea, you don’t want to lose it !

And when this idea is a web or mobile application, you probably don’t want to spend two weeks trying to build it. And then find out that it’s not really what you want.

I search a lot and here is a good solution that would have helped my past self saving a few hours.

I was in this situation a few days ago and I tried to find out what tools I could use to have a basic prototype. I wanted to make a support to be able to show and discuss my idea with other people.

My goal here was to find a free and easy tool. I was not ready to spend some time learning a complete new process.

I just wanted to get it done !

I looked for this tool on my favourite search engine. After reading some articles, I quickly find out that I could use Keynote or Powerpoint.

Indeed, I know those tools and I use them regularly to expose my ideas. This is the case for a lot of people and even if you are not a Keynote master, don’t run, the learning curve is friendly.

So why not giving it a try?

Keynote / Powerpoint

This is probably the more obvious solution but you still need to think about it. It is usually used to prepare presentations or to support courses.

But, isn’t a new application kind of a presentation ?

Yes it is !

Configure the environment

I grabbed a glass of water, breathed a little and tried to bring with me the whole world motivation to open Keynote (Spoiler: I regret nothing !).

After this little setup time, I configured my page to have a nice ratio for my target and I was ready to add some elements.

Just before that, however, I though it would be nice to have a phone template on my slides. It can help you to add some context but it is not mandatory. I went to Mokuphone to get my template phone and used the Instant Alpha feature to remove the background.

this is an Iphone template but you can chose Android too

Then you can bring some icons for your navigation menu and arrange them on you layout. To find some resources here you can check websites like Flaticon, Hero Icons…

Be sure to do this step add the beginning, on your first “template” slide to be able to duplicate it for next screens.

Quickly create a menu using forms and icons

This is one of the limitations I saw in this method. If in the middle of the process you decide to change the menu, you will need to adjust all other slides. And I won’t scream about it as this is why there are good professional tools dedicated to UI/UX design on the market.

Design it !

From here you can duplicate your template and start building your pages/screens. Keep it simple and attractive !

Choose your colour pallet for the application. You can use some online tools to help you: Coolors.co, Adobe colour wheel.

Use Figures to create your layouts and buttons. Play with the border to differentiate components. Keynote will also help you with alignments which is super-useful to have a nice looking design.

Use links to design your workflow

Maybe at some point, you will need to add some interaction to showcase your application workflow. You can do this using the link feature.

Right click on the element and you will be able to link it to another slide or url. This is very useful to model your navigation.

Collaborate

Keynote (and Powerpoint) has a sharing functionality to work together with your mates on your project. I didn’t try it as it was a personal project at this time but think about it if your need to share the workload in your team.

Versioning

One Keynote very nice feature is the versioning. In just two clicks, you will be able to revert back your work to a previously saved version.

No more “last-last-last-true-final-mydoc-1.678” file name on your laptop !

Each time you save your document, Keynote create a new version. You can have a look at the other version in the File > Revert To menu.

Conclusion

That’s it, I was able to build my fake application in less than two days ! And I played a lot with design and other “not-so-useful-at-this-moment” features !

Whatever your tool, always think about what you want to achieve. Try to make it as close as possible from what you have in mind. You have to feel home in your prototype. Try some things, remove some others, rebuild what does not fit your vision.

Keynote was very quick to use but I was stating to see some limit near the end. I might consider other tools like Figma next time.

Remember that this step is key to transcribe what you have in mind. At the same time, you don’t need yet to spent too much time to make it perfect. Make it face your audience instead !

I hope this article was useful for you. Don't hesitate to give me your feedback on these tools or to suggest me other ones.

You can share this on the comment section bellow or contact me directly on my Twitter !