Professional Documents
Culture Documents
Criterion B: Developing Ideas
Criterion B: Developing Ideas
⚙ 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 (make a copy and put it into your criteria B folder).
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/4
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)
2/4
B4 Planning Drawings - Sustainable Design - Jane Doe (7DET8)
3/4
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.
4/4