Developing your Google Site
The videos below demonstrate how to set up a basic Site. Underneath that is guidance on how you can make your site look better.
This short video demonstrates how to create your own Site with a starting point of using a Template that has been created.
What your website should include
the basics:
The work you have done in class
Nice Titles and Headings to show what the work
Introductions to each piece of work included on your site
Explanations of what the work is and a summary of what you learned by doing the work
Explanation of the knowledge and skills you know e.g explanations of equipment you used or how you used apps like Procreate, Onshape etc
To achieve higher marks:
Additional research around the project above what you have done in class
Posters that analyse and explain your work in detail
Graphic colours and font styles that enhance the information
Information about things you have seen or work you have done at home.
Grading:
10 - The best!
9 - A**
8 - A*
7 - A
6 - B
5 - C
4 - D
3 - E
2 - F
1 - G
0 - U
Remember - Quality over Quantity. More is not always better! Do not copy and paste from the internet - write in your own words.
Website Layout, Procreate Presentation and Presentation Posters
Whenever you create a poster, you should always follow the steps to streamline your workflow.
Search. Google search all photos (save/download all together)
Upload. Open Procreate and start uploading/adding each photo
Layout. Arrange the layout of photos
Title. Create a title
Text. Add supporting text
Although only 3 inspirational images have been included, I have foused on the shape of octopus which have become part of the background wallpaper. I have also looked and included colour palettes, paint effects and textures. Although these have not been shown as individual images they have become part of the overal design of the poster.
Editing text to create my own colour mask.
Multiple layers were used and masking was a main feature when adding colour effects.
I started with line drawings and dulicated the same images and resized it to build up a more complex design layout.
I began by colour dropping flat colour into the shapes but didnt like how flat the design looked.
I then starting masking shapes and adding my own colour effects with the spray tools.
Additional images were laid over the top and added sufficient content as the images were busy and full.
I made edited choices bewteen photos i likes and didnt like.
You can see the texture created from the spray brush tools here.
A new modern style of title that uses the opacity settings and layering to make it stand out.
Text settings have been edited to change spacing, opacity and size.
Only photos with white backgrounds have been used. if white background corners overlap other images, then these are erased. Notice the layer menu and the corners that have been erased.
Images and white backgrounds have been erased to allow each image to touch. A small eraser size was used for this to keep it neat.
Titles and fonts should had a design element where settings in the Aa menu have been adjusted. Test effects by sliding the Kerning, tracking and Leading sliders.
Test should be subtle and neat. Reduced text size can improve the overall appearance of an annotated poster.
Use transparency and opacity sliders to when working with layers to help blend between layers.
Version 1. After creating version 1, I duplicated the file and made a version 2. The photos were the same. The text was similar but the layour different.
Step 1: Plan your layout or poster grid
Step 2: Use the masking tool to section shapes
Step 3: Add text to describe your patterns
I was aiming to write longer paragraphs which held more information so they were more meaningful.
I draw a basic grid with a black pen tool, then later hid the layer to leave white gaps
I used the masking tool to section of different shapes to create a pattern of my own.
This is the final product of the inspiration board. It consists of 4 themes and 2 extra sections. The main aesthetics and vibes from this inspiration board are desaturated, organic, and natural forms. Now I will explain the themes below and the reason why I have chosen them.
I started by inserting my photos that have been collected into procreate. The photos are mainly from an app called pinterest.
The colour select feature was used to make the custom colour palettes for each themes. To do this you need to press the screen and hold until it starts selecting the colours you want.
After finishing my layouts and annotation I then selected everything with the grouping features and create space for my logo. this is made easier when using layers properly.
I then grouped up each photos from the same theme to make it easier to access theme. By grouping up the layers and photos it makes it easier to move them all together rather than one by one. (One of the feautures in procreate)
This is the lasso tool used to move specific thingsd on the same layer. The location of the button is on the top left on the 3rd button. You can draw over freely around it and selected it without aftering other elements on the same layer.
Logo Design
After organising my photos I started annotating and noting the different themes in each group to have a clear inspiration board.
This feature is used to paste images into procreate. One of the good things about it is that it personally seperates the picture in each layer without effecting other pictures. This is on the top left button of procreate.
This website was used to create my logo. There are features that requires you to put in your themes and colour palettes so that the website can make a logo customed to your liking.
This was the logo that I have chosen for my inspiration board. My criteria for choosing the logo was how much it related to my design and the colour palette. The mountain design was related to one of the topics and themes which is why it was chosen.
Ocean
Land
Digital Portfolio Examples Below
These examples show the standards and expectations we have for each website. Use these examples to help you plan and design your own Website and design pages and don't forget to ask your teacher if you need help.
Website Example 10/10
Advanced layout options have been used.
Text is short and straight to the point - punchy.
images have been cropped and are clear.
Titles categorize the section/topic.
Text matches the images.
Skills from class have been explained.
New knowledge has been written about.
Website Example 10/10
Website Example 10/10
This example and website section really stands about because of its content and relevance.
This student has borrowed screenshots and photos from another student and used their design work to evaluate.
The evaluation is compared to their own evaluation pf their work.
Strengths and weaknesses are explained and also discussed.
Paragraphs are long and explain the topic in detail.