Software

Balsamiq

This is great as a replacement for Windows Paint when doing visual brainstorming for math. For example, I use it for planning out / visualizing math operations that I need to do for Rhymecraft.

Create a project called something like "Practice - Simple mock-ups of the UIs of existing websites and software".
For each mock-up (page) within the project, you'll sketch out the UI of some website, app, or desktop software that you use.
Important: Only use the "Rectangle" element (look for it in the "Containers" group) to sketch the website.
1. This includes using it to represent the browser and/or phone. Keeping it abstract will help keep you from getting sucked into the trap of trying to make everything pixel-perfect.
Use the elements you see in the "Markup" group to label what the different sections (rectangles) of the UI are for.
- Specifically, use the "Comment", "Arrow", and curly brace elements.

Pre-Balsamiq:
1. Determine what the desired output of the application is.
2. Figure out what input you will need from the user to provide the desired output.
3. Figure out if there are any groupings of inputs that should be together in the UI.
4. Figure out the order in which you will want to ask for those different inputs.
Create a simple mock-up using only the "Rectangle" element to designate the major divisions of the UI (navbars, sidebars, main work areas, etc.).
If you want, then go in and create detailed mock-ups that are closer to being pixel-perfect.

What real-world length, if any, do the sides of the grid squares represent?
- A: The smallest square seems to represent 20px on a side.

I wish the inspector would have a link for each element you select that would open up some quick help section on that element.
- For example, I saw a "Callout" element in the "Markup" group and had no idea what it was.

The big problem I see with it is that it seems focused on the "Photoshop but easier" features that involve manipulating visual elements, and doesn't really provide any guidance about how you should go about using it. It seems to be a tool developed for PMs working in a somewhat-large team who will already have a rough idea of what they want and just want to make it more real for the higher-ups to see. While working on Rhymecraft, I opened up Balsamiq and was like, "I have no idea how to even begin."
I think what Balsamiq could do to help my use-case for Rhymecraft is to have a wizard that guides people through what their app does and what pages it needs, and then show the user what other apps have done to guide the user through the various actions they can take, and state the pro's and con's of the different choices, and then have the user click on a button to indicate their preference.
- For a very simple example, the wizard could say "Do you need display Terms of Service? Here's how to decide if you do: XXX. And here's the different ways they're displayed: XXX. Click the option for how you want to do it."
- More examples:
  - Do users need to be able to log in?
  - Do you need a Terms of Service?
  - Do you need a Privacy Policy?
  - Do you need an About page?
  - Do you need a splash page that explains what the app does?
  - Should users be able to navigate to the other pages regardless of what other page they're on? (Do you need a navbar?)