Skip to content

Basics of Drawing

Outline & Mind Map

Tool: Mubu

The process of organizing scattered thoughts into a systematic framework.

Prototype Planning

Creating a prototype is a fundamental skill for product managers. The key principle is to highlight the key elements of a page in a clear and concise manner. The next step after creating a prototype is to hand it over to the designer. If the key points are not immediately apparent from the page, a substantial amount of time will be spent in verbal communication, making it difficult to achieve the desired outcome.

Key Principles

  • Font Usage: Use sans-serif fonts whenever possible. Vary the size and color of the font according to the importance of the content. Avoid using pure black; typically, font colors with HEX values of 333333, 666666, 999999, and cccccc are sufficient.
  • Separation of Functionality and Content: Elements displaying content should be clearly distinguishable from elements that can be interacted with. System-standard control styles should be used for interactive elements.
  • Distinguishable Layout: Clearly differentiate multiple areas with noticeable spacing or appropriate whitespace. In essence, make it easy for people to identify which area an element belongs to at a glance.
  • Alignment of Elements: Strive for left/right/center alignment when placing elements.
  • Consistent Typography: It's advisable to use the same design language across different areas in typography to enhance predictability and reduce comprehension difficulty.
  • Appropriate Use of Icons and Existing Assets.

Use Case Diagram

Showcasing different user roles and describing their respective functions. This diagram provides a clear view of which functions are present in the system and who is responsible for executing or using them.

Flowchart

Tool: Process On, and others.

In general, rounded rectangles represent the start/end, diamonds represent decisions, rectangles represent operations and steps, and most of the time, this is sufficient. For more details, refer to this article.

  • Swimlane Diagram: Depicts roles and stages. In practical use, most of the time, each swimlane represents a specific role, thus illustrating the process relationships between roles.
  • State Transition Diagram: In contrast to a typical flowchart, a state transition diagram focuses more on the next state of each process, rather than when the process ends. It can help development teams better understand which states are final and which are intermediate, leading to the creation of logically clear code implementations.

Model Relationship Diagram

Closely related to database design, it reflects the relationships within the database. This aids in evaluating the complexity of implementing functionalities.

Framework Diagram

From a long-term perspective, this diagram deconstructs the product at a macro level. A product framework diagram focuses on addressing a problem from a macro perspective, rather than magnifying specific features needed in a particular area. Therefore, it is more about offering a retrospective, forward-looking, and holistic view of the distribution and relationships between different modules or systems within the product. As a result, a product framework diagram is not always necessary. Typically, it is only required when planning the complete future development of a product or retrospectively organizing the structure of a specific system.

Original: https://wiki-power.com/
This post is protected by CC BY-NC-SA 4.0 agreement, should be reproduced with attribution.

This post is translated using ChatGPT, please feedback if any omissions.