B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

Criterion B: Developing Ideas 

 

B4: Planning Drawings 

🔎 ​What? 
  
❗​Why? 
 
Create a planning drawing/diagram, which outlines the  You want a detailed illustration of all aspects of the 
main details for making the chosen solution.  product you are going to create plus a full overview of 
all you will need to create this product. 

⚙​ How?
 
For website design, you need to consider the overall aesthetic for the site as well as plan the layout and flow of the pages. Web 
designers plan these important elements using two types of planning diagrams - a ​Style Guide & ​ a​ Site Flow Drawing 

1. Style Guide 
● Once you are familiar with Weebly you can start making style decisions for your site.  
● Create a folder on your desktop to download all of the images and icons for your website into. 
● Create your 1-page style guide using t​ his template​. These are the areas included in the style guide: 
○ Theme​ (choose 1 of the theme options from Weebly) 
○ Font (​ choose the fonts you will use for various areas of the site). 
■ Feel free to use the default font family given with the theme (this is a proven font pairing) 
■ If you wish to change the font, here are your options: 
● Look at the l​ ist of Weebly Fonts 
● Only use max(!) 3 different fonts in the whole site 
● Make sure they pair well together (Google it!) 
● Check for readability & graphic balance 
○ Images​ (choose the royalty-free images you will use for banners and aesthetic appeal) 
○ Icons​ (choose royalty-free icons that you will use to direct your audience to important parts of your 
website - see how CIS uses icons ​here​) 

 
1/6 
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

 
2/6 
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

 
3/6 
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

2. Site Flow Drawing 

1) Make a wireframe drawing for each page of your site (you can fit all 2 wireframes on an A4 paper) 
○ Wireframe 1​: Home (include: Global Context, Key & Related concepts, Statement of inquiry) 
○ Wireframe 2​. Inquiring & Analysing 
i) Contains (A1: The Problem, A2: Research Plan, A3: Existing Solutions, A4: Design Brief) 
○ Wireframe 3:​ Developing Ideas 
i) Contains (B1: Design Specifications, B2: Design Ideas, B3: Final Chosen Design, C1: Work 
Plan) 
○ Wireframe 4:​ Portfolio Planning  
i) Contains: (Pinterest Board of portfolio/blog examples, B4: Planning Drawings) 
○ Wireframe 5: W ​ orks Cited 
2) Take high-quality photos of your 5 wireframes 
3) In Google Drawing, make a​Site flow Diagram Example​ site flow drawing which shows the flow of the site 
with arrows (11x17 tabloid size). See an example ​here​. 

 
4/6 
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

   

 
5/6 
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

Assessment 
Level  Descriptor  Typical features of student work 

0  The student does not reach a standard described by any of the descriptors below. 

1-2  The student ​creates​ an  ❏ Most (parts) of the site flow is incomplete. The digital portfolio 
incomplete​ planning drawing.  cannot be constructed without further additions to the 
planning drawings and/or diagrams. 
❏ Style guide, wireframes and site flow contain several 
inconsistencies. 

3-4  The student ​creates​ a planning  ❏ Some (parts) of the digital portfolio can be built without 
drawing o ​ r l​ ists​ requirements for  further additions to the planning drawings and/or diagrams. 
the creation of the chosen  ❏ Style guide, wireframes and site flow contain several 
solution.  inconsistencies. 
❏ Planning drawings and/or diagrams demonstrate some 
knowledge and understanding of the technicalities involved in 
the creation of a digital portfolio. 

5-6  The student ​creates​ a planning  ❏ Most (parts) of the digital portfolio can be built without further 
drawing a ​ nd ​lists​ the ​main  additions to the planning drawings and/or diagrams. 
details​ for the creation of the  ❏ Style guide, wireframes and site flow are mostly clear in 
chosen solution.  communicating the final plan. 
❏ Planning drawings and/or diagrams demonstrate significant 
knowledge and understanding of the technicalities involved in 
the creation of a digital portfolio. 

7-8  The student ​creates​ a planning  ❏ Most (parts) of the digital portfolio can be built without further 
drawing, which ​outlines​ the  additions to the planning drawings and/or diagrams. 
main details​ for making the  ❏ Style guide, wireframes and site flow are very effective in 
chosen solution.  communicating the final plan. 
❏ Planning drawings and/or diagrams demonstrate excellent 
knowledge and understanding of the technicalities involved in 
the creation of a digital portfolio. 

 
6/6