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 this 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 list 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/7
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)

Insert Style Guide + link here

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

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

Link to style guide: https://docs.google.com/document/d/1-Kj4AGYluhaGV2NFkACDcKqLJ6QwLz24cCSD9jha08s/edit

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: Works Cited
2) Take high-quality photos of your 5 wireframes
3) In Google Drawing, make a site flow drawing which shows the flow of the site with arrows (11x17 tabloid
size). See an example here.

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

Insert Site Flow Drawing + link here

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

6/7
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)
Assessment
Level Descriptor
0 The student does not reach a standard described by any of the descriptors below.
1-2 The student creates an
incomplete planning drawing.
3-4 The student creates a planning
drawing or lists requirements for
the creation of the chosen
solution.
5-6 The student creates a planning
drawing and lists the main
details for the creation of the
chosen solution.
7-8 The student creates a planning
drawing, which outlines the
main details for making the
chosen solution.
Typical features of student work
❏ Most (parts) of the site flow is incomplete. The digital portfolio
cannot be constructed without further additions to the
planning drawings and/or diagrams.
❏ Style guide, wireframes and site flow contain several
inconsistencies.
❏ Some (parts) of the digital portfolio can be built without
further additions to the planning drawings and/or diagrams.
❏ Style guide, wireframes and site flow contain several
inconsistencies.
❏ Planning drawings and/or diagrams demonstrate some
knowledge and understanding of the technicalities involved in
the creation of a digital portfolio.
❏ Most (parts) of the digital portfolio can be built without further
additions to the planning drawings and/or diagrams.
❏ Style guide, wireframes and site flow are mostly clear in
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.
❏ Most (parts) of the digital portfolio can be built without further
additions to the planning drawings and/or diagrams.
❏ Style guide, wireframes and site flow are very effective in
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.
7/7