Rugby School Thailand Design & Technology Senior School

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.

Copy of Sites.mp4

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.

I want the snake design to be on of the design on one of the side of the holder and maybe combine with the moana stone on the picture below. The wave design could be one of the faces of the holder also with possibly jellyfish also or other kind of animal.

Ocean

This is one of the theme I might be using for the holder which i8s theme ocean and blue. I might use gradient black and blue to give darkness feelings. I should use the rasin so that there is like a beach type kind of emotions and the mystery ocean.

Land

My other theme is nature and ground. I might use green gradient as the base color and maybe add some animal on the design as well. The color wood might fit wells as soil or ground of the earth. I also might be designing the snake as the wood instead and using rasin to go around it.

One of my theme is nature and Earth and I have include the pattern on the stone which I really like. I also want to have the leak wood as the main wood.

I have create the title"Inspiration board" using the website call brand mark to create creative title.

One of my other theme is ocean and I will try to use the shape wave and the color blue and maybe some of the sea's animal if possible on the design.

This is my first draft on the inspiration board, I could have add some more explaintion on the board.

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

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.

Page updated

Report abuse