Planning Drawings and Diagrams (Criterion B, Strand iv)
Welcome to the final step of Criterion B: Developing Ideas! In previous chapters, you created a design specification, brainstormed multiple ideas, and selected and justified your best concept. Now, it is time to turn that chosen concept into an actionable, visual blueprint. This chapter explores how to create accurate, detailed planning drawings and diagrams that outline everything needed to bring your project to life in Criterion C.
Think of planning drawings and diagrams as the instruction manual or recipe for your design. If you hand your drawings to another student or a technician, they should be able to look at your visuals and build or code your exact solution without needing to ask you a single question.
Why Planning Drawings and Diagrams Matter
In MYP Design, you are assessed on your ability to communicate your ideas clearly and systematically. Creating planning drawings and diagrams serves two major roles:
1. Bridging Ideas and Creation: A rough sketch shows what an idea looks like in your imagination. A planning drawing or diagram shows how it works in reality, including its exact sizes, components, digital pages, or logic paths.
2. Guiding Criterion C: When you step into Criterion C (Creating the Solution), you will follow these drawings step-by-step. Detailed planning prevents wasted materials, broken code, and lost time.
Analogy: Imagine opening a flat-pack furniture box, only to find an artistic watercolour painting of a chair instead of an assembly diagram with measurements and part labels. You would have no idea how to build it! Your planning drawings must be the assembly diagram, not the artistic painting.
Planning Visuals Across the Three Design Strands
The type of visual plan you create depends entirely on which design strand your course follows: Product Design, Digital Design, or Combined Digital and Product Design.
1. Product Design (Physical Solutions)
Product design involves physical items such as organizers, furniture, lighting, or packaging. For these solutions, planning drawings must clearly show dimensions, views, materials, and how parts connect.
Orthographic Projections (Working Drawings):
These are two-dimensional flat views of your product seen from specific directions, usually showing a front view, a side view, and a top (plan) view. They show exact dimensions and internal details without the distortion of perspective.
Isometric Drawings:
These provide a three-dimensional representation drawn with angled axes (typically at \(30^\circ\)), allowing the viewer to grasp the overall form and proportions while still showing realistic spatial relationships.
Exploded Views and Assembly Drawings:
These diagrams separate each individual component in space along alignment lines. They show how parts fit together, which joints are used, and where fasteners (like screws or dowels) belong.
Essential Product Requirements to Include:
• Standard Units: Always use standard metric units (usually millimetres, such as \(120\text{ mm} \times 45\text{ mm}\)).
• Scale: State the scale used (for example, \(1:1\) for actual size, or \(1:2\) for half-size).
• Material Callouts: Clearly label which materials each part requires (such as \(3\text{ mm}\) acrylic, pine timber, or recycled aluminium).
• Joints and Fasteners: Specify construction techniques such as finger joints, screws, or adhesives.
2. Digital Design (Software, Media, and Systems)
Digital design involves software applications, websites, interactive games, digital animations, or databases. Because there are no physical planks of wood or sheets of plastic, your planning visuals focus on structure, layout, user interaction, and system flow.
Wireframes:
A wireframe is a simplified, structural layout of an individual screen or page. It outlines where headings, navigation menus, image placeholders, input boxes, and buttons will sit. Wireframes do not focus on decorative colours or fonts; they focus strictly on functionality and layout.
User Flow Diagrams and Site Maps:
A site map shows the hierarchical structure of pages (e.g., Home Page branching into About, Services, and Contact). A user flow diagram shows the exact path a user takes to complete a task (e.g., Start Screen \(\rightarrow\) Log In \(\rightarrow\) Select Level \(\rightarrow\) Game Board).
Flowcharts and Logic Diagrams:
These diagrams use standard geometric shapes to plan the logic of a program or system before coding. For example, an oval represents the start or end, a rectangle represents an action or process, and a diamond represents a decision (e.g., "Is score \(\ge 10\)? Yes/No").
Essential Digital Requirements to Include:
• Screen Resolution and Dimensions: Indicate layout dimensions in pixels (such as \(1920 \times 1080\text{ px}\) for desktop or \(390 \times 844\text{ px}\) for mobile).
• Component Assets: List specific file requirements (e.g., SVG icons, MP3 sound effects, JPEG banner images).
• Interactive Elements: Clearly label button states, triggers, input fields, and output displays.
3. Combined Digital and Product Design
Combined solutions bring hardware and software together—such as a smart plant watering system, a wearable fitness tracker, or an interactive museum display.
For combined design, your planning visuals must include both types of plans:
• Physical drawings (orthographic or isometric) showing the casing, dimensions, mounting points, and physical user controls.
• Digital diagrams (circuit schematics, wireframes, and logic flowcharts) showing how sensors, microcontrollers, code, and display screens communicate.
Key Takeaway for Design Types: Product design needs dimensional views and material callouts; digital design needs layouts, site maps, and logic flowcharts; combined design needs both.
What Makes Planning Visuals "Accurate" and "Detailed"?
To score in the highest mark band (Levels 7–8) in Year 5, your drawings cannot merely be sketches. The syllabus requires you to develop accurate, detailed planning drawings/diagrams, outlining requirements for creating the chosen solution.
Let us break down those key terms:
1. Accurate:
• The proportions match reality.
• Dimensions add up correctly (for instance, if the total length is \(100\text{ mm}\), the two halves cannot be \(60\text{ mm}\) and \(50\text{ mm}\)).
• Standard symbols and conventions are used correctly (e.g., standard flowchart symbols or standard projection angles).
2. Detailed:
• Every single part, screen, or logic step is accounted for.
• Hidden details are shown (e.g., internal battery compartments, hidden joints, or back-end database links).
• Annotations explain specific choices rather than vague descriptions.
3. Outlining Requirements for Creation:
• Your plans explicitly state the exact resources required to make the solution: specific materials, hardware tools, software environments, components, and target dimensions.
The "Independent Peer Test": Ask yourself, "If I left the room, could a classmate take these drawings and build or code this exact solution without asking me for clarification?" If the answer is yes, your plans are detailed and accurate.
Command Term Escalation: How Your Work Is Assessed
In the MYP Design ePortfolio, your achievement level depends on the depth and quality of your planning visual:
Levels 1–2: The student produces planning drawings/diagrams with limited information or significant inaccuracies.
Levels 3–4: The student produces planning drawings/diagrams that outline basic requirements, but details may be missing or imprecise.
Levels 5–6: The student produces accurate planning drawings/diagrams that outline requirements for creating the solution.
Levels 7–8: The student develops accurate, detailed planning drawings/diagrams that thoroughly outline all requirements for creating the chosen solution.
Notice the ladder: you move from limited, to outlining, to accurate, and finally to accurate and detailed.
Step-by-Step Guide: Creating High-Quality Planning Visuals
Follow these four structured steps to build your planning drawings or diagrams:
Step 1: Select the Best Format for Your Solution
Decide which drawing techniques best represent your idea. For physical models, use a ruler, graph paper, or CAD software to prepare orthographic views. For digital solutions, choose vector software or wireframing tools to create clean page layouts and clear flowchart diagrams.
Step 2: Establish Layout and Scale
Ensure your drawings have sufficient space and clear margins. Label your scale (e.g., \(1:1\) or \(1:5\)) or canvas dimensions (e.g., \(1080 \times 1920\text{ px}\)). Use grid lines or guidelines so that all components are aligned neatly.
Step 3: Add Precise Dimensions and Labels
Add dimension lines showing total height, width, and depth, as well as the positions of specific features (like holes, ports, or buttons). For digital projects, annotate text sizes, button dimensions, margins, and padding.
Step 4: Annotate Requirements for Making
Write concise, targeted notes around your drawings pointing directly to relevant features:
• Material/Format: "Laser-cut \(3\text{ mm}\) birch plywood."
• Fastening/Logic: "M3 machine screw (\(12\text{ mm}\) length)" or "On button click \(\rightarrow\) validate email string."
• Tools/Software: "Sander, drill press (\(5\text{ mm}\) bit)" or "HTML5 canvas, CSS Flexbox."
Key Concepts and Related Concepts in Action
Communication (Key Concept): Your planning drawing is a visual language. By adhering to recognised drawing and diagramming standards, you communicate your design intent to makers, clients, and evaluators across communities.
Systems (Key Concept): Whether you are fitting mechanical gears into a physical housing or routing data through screen menus, planning diagrams show how individual parts work together as a coherent system.
Ergonomics (Related Concept): Planning diagrams allow you to demonstrate how your design fits human users. By noting human dimensions (e.g., handle grip diameter of \(35\text{ mm}\) or accessible touch target size of \(44 \times 44\text{ px}\)), you prove that your solution is comfortable and functional.
Common Mistakes to Avoid
Mistake 1: Submitting Concept Sketches Instead of Planning Drawings
A freehand artistic 3D sketch with shading is great for generating ideas (Strand ii), but it does not belong in Strand iv. Planning drawings require measurement, scale, structure, and precision.
Mistake 2: Missing or Inconsistent Units
Never write numbers without units. Writing "\(50\)" leaves the maker guessing whether you mean \(50\text{ mm}\), \(50\text{ cm}\), or \(50\text{ inches}\). Always use standard metric units for product design and pixel dimensions for screen layouts.
Mistake 3: The "Isolated Screen" Trap in Digital Design
Submitting a pretty digital screen without showing how it connects to other screens or how user actions trigger system changes makes it impossible to code efficiently in Criterion C. Always pair wireframes with user flows or logic flowcharts.
Mistake 4: Omitting the List of Requirements
Strand iv requires you to outline the requirements for creating the solution. Simply showing a shape is not enough; you must explicitly name the materials, tools, components, and hardware or software needed to produce it.
Chapter Summary and Quick Review
• Criterion B Strand iv requires accurate, detailed planning drawings or diagrams that outline requirements for creating the chosen solution.
• Product Design relies on orthographic projections, isometric drawings, exploded views, metric dimensions, and material callouts.
• Digital Design relies on wireframes, user flow diagrams, site maps, and logic flowcharts with pixel specifications.
• Combined Design integrates both physical dimensions and digital system logic.
• High-level work (Levels 7–8) is precise, complete, and contains enough detail for an independent peer to build the solution in Criterion C without guessing.