Whimsical: Turning App Ideas into Visual Designs without Coding

Hi everyone! In this blog post, I want to share with you what I learned from the first section of the Nocode training: Planning and structuring your app. This section was very helpful for me to understand how to turn my idea into a design that I can use to build my app.

One of the tools that I learned about in this section was whimsical. Whimsical is a web-based tool that lets you create wireframes, flowcharts, mind maps, and more. It's very easy to use and has a lot of features that make designing fun and fast.

I used whimsical to create a wireframe for my practice project, which is a simple app that lets users create and share lists of their favorite things. Here's a screenshot of what I came up with:

As you can see, I used whimsical to create a basic layout for my app, with a header, a sidebar, and a main area. I also added some icons, colors, and text to make it more appealing. I really liked how whimsical let me drag and drop elements, resize them, and align them with guides and grids. It also has a lot of templates and components that you can use to save time and get inspired.

Whimsical also lets you collaborate with others in real time, add comments and feedback, and export your designs as images or PDFs. You can also share your designs with a link or embed them on your website.

Now, you might be wondering how to use whimsical yourself. Well, it's very simple and intuitive. Let me show you how I did it.

First, I went to whimsical.com and signed up for a free account. Then, I clicked on the "Create" button and chose "Wireframes" as the type of board I wanted to make.

Next, I saw a blank canvas where I could start designing my app. On the left side, there was a toolbar with different elements that I could drag and drop onto the canvas. On the right side, there was a panel where I could adjust the properties of each element, such as size, color, font, etc.

I started by adding a header element from the toolbar and typing in the name of my app: "My Favorites". Then, I added a sidebar element and added some icons from the "Icons" tab in the panel. I also changed the background color of the sidebar to make it stand out.

Then, I added a main area element and divided it into two sections: one for creating a new list and one for displaying existing lists. I added some text fields, buttons, and labels to the first section, and some cards to the second section. I also added some text to each element to explain what they do.

Finally, I added some finishing touches to my design, such as adding shadows, borders, and rounded corners to some elements. I also changed the font and color scheme of my app to make it more consistent and attractive.

And that's it! That's how I created my wireframe using whimsical. It took me less than an hour to do it and I had a lot of fun along the way.

I hope you found this blog post useful and interesting. Please do share your thoughts and other tools that are similar to whimsical in the comments below. I would love to hear from you and learn from your experiences. Thanks for reading!