detailed layout designs

Detailed layout designs:

Fonts/Colour schemes

Franklin Gothic BookAdobe Fan HeitiCambriaHaettenschweileKozuka Gothic ProLetter Gothic StandardVerdanaTahomaBodoni MT

POSSIBLE COLOUR SCHEMES: POSSIBLE FONT TYPES:

CLIENT DECISIONS:

Bodoni MT

Minutes of meeting 23_09_2011

Actual product development:

Homepage

LAYOUT 1:

LAYOUT 2:

LAYOUT 3:

FEEDBACK:Client: “I like the first layout. It is much clearer and well laid out, the other too are more fussy and not very well laid out .”Year 13 tester: “I quite like layout three, although it is quite structured. Layout two I really dislike, it looks really childish and doesn’t suit the age of the people that will be using it. My favourite design would be layout one because it is really well spaced. If the buttons were animated in some way this would make the overall page much more interesting to look at.”CHOSEN DESIGN AND IMPROVEMENTS TO BE MADE:Layout one is the final design, and both my client and test user have suggested no improvements aside from animating the buttons which I was planning to do and I am therefore confident to take this design forward.



General section

This page is meant as a link through to the different sections under the general heading. The links would be rollovers, and the general resistant

materials would be a flash file to add interest through simple text animation on the page. The

test yourself page links straight to a hot potatoes quiz.

General main link page

This would be quite a multimedia rich page, because there would be rollover animated gif’s of all the joints that I would create, meaning that the user is able to

properly visualise how the joints work. Also, there would be a video demonstrating how a hidden dowel joint

would be made.

This page also has quite a bit of

animation. When hovered over, the

words inside of the larger circle would

change accordingly. For example, when

you hover over ‘plasticity’ a small animated gif shows

through images what the definition of

plasticity is in the centre. Alongside all of the texts there will be a sound option so

they can hear an audio clip explaining the definition if they

want to.

CLIENT COMMENT:Client: “I am very happy with the content of all of these pages. I don’t like how the circles have been layered on the definitions page so this should be changed to be just one circle, the same with the wood joints page.”CHANGES TO BE MADE:Don’t layer the circles and just have plain circles on these pages.

Wood joints page.

Definitions page.



Careers section

Careers page.

CLIENT COMMENT:Client: “I am very happy with the ideas on this page, and think that the animation will look really good and have interesting information if done properly. I think you should have a clip with a student or someone already with a career in design as your sound clip rather than having me. Maybe it would be too much to have information on different designers like Philippe Starck as this could go on for far too long.”

CHANGES TO BE MADE:Change the sound clip, do not include images on the flash file.

This is the smallest page of the site. It is very multimedia rich,

however. It includes a small sound clip of Mr Wallace talking and explaining to the user a list of different careers that could come from studying Product

Design, Resistant Materials at A-level. There is also a flash file

animation that will show the user what sort of jobs and careers they could go on to

have. There are also links to the UCA’s website, and information

about apprenticeships or college courses that are similar

to this field of work.

This page contains hotspots with links to other pages. There

is also a quick test yourself question, meaning that the user is able to test themselves at all

different stages of using the product.

Apprenticeships and college courses page



Exam section

CLIENT COMMENT:Client: “This is a really good page. One thing that I would add is a link to moderator and examiners reports so that students can see how their work will be marked and what parts should be included that could easily be missed in coursework.”

CHANGES TO BE MADE:I need to add links to examiners and moderators reports.

The main multimedia on this page will be a video. This allows the user to gain interaction and

advice from another student. This page is rich with links to other documents, for example mock exam papers and mark

schemes. This means that they are able to print off paper

versions of work to help them revise more effectively. The

main advantage of having this on the page is that they only have to go to one source to

access all of these links.

Also on the page is a link to a PDF version of a good

coursework example so that they are able to check that the work they are doing is correct

and so that they can gain ideas and see if they are missing any

important work. Another large multimedia aspect of this page is the ‘test yourself’ links to quizzes that I will be creating. This is yet another helpful, interactive way that the students are able to gain access to different forms of revision using the product.

Exam page



A-level section

A- level link page design 1:

I needed to break down the page designs for this section as it is the biggest and covers so many areas.

A- level link page design 2:

FEEDBACK:Client: “I don’t like the first design. It is too messy and a bit all over the place. I much prefer the second design, as it allows the person using it to do there revision in a chronological order and not get confused about where they were.”

CHOSEN DESIGN AND IMPROVEMENTS TO BE MADE:Design 2 has been chosen, and he is completely happy with the design as it is.


GRP/Carbon Fibre pages

CLIENT COMMENT:

Client: “I love the use of all of the video clips and animations. I’m happy with all of these designs. I prefer it with just the one circle though.

CHANGES TO BE MADE:Just have the one circle instead of layering it.

The two videos would

need to be selected to be played,

as they both can’t start at the same time or this will

be confusing

to the viewer.

The animation on this page includes a flow chart of how thermo ceramics are created. There will also be a small sound clip of a voice explaining what silver halide does

for photochromic glass and a little animation showing the user how it works.

Thermoceramics/ Tinted glass and photochromic glass page.

Threading page

There will be a very short

video explaining how

‘tapping’ is done. There will also be a

very small animation of

what a drunken

thread looks like.


Gears pageCams page

CLIENT COMMENT:Client: “Very happy with all of these designs and the animations and videos on them. I like the test yourself sections.”

CHANGES TO BE MADE:None, client is very happy with these pages.

This page is rich with animation, because it is a

particularly hard section to

understand without being

able to visually see what is

meant. There will be hardly any text on this page, as is

meant to be a visual aid.

However, there is a small sound

clip that explains what gears are

used for.

There are small animations on this page showing how each of the three types of cam follower. There is also a section on

the page where the user is asked a question that they need to answers out

loud to themselves, and then a small sound file tells them the right answers

when they choose to click to hear them. The text book is lacking a diagram explaining exactly which part is the

follower and which part is the cam, and therefore I have included this on my

page to help the user better understand.

Extrusion page

I chose to do a page on

Extrusion because it is the smallest

section in the book and

therefore not explained very well. It will be

simply explained to

the user through the

user of a video explaining the process. Again there will be a

small test yourself

question and answer

through a sound file.


Rivets pages

CLIENT COMMENT:Client: “Very happy with these pages. No changes I can think of.”

CHANGES TO BE MADE:None

This will have to be two pages, because both

types of rivets are best shown through very

small video clips. The layout will be exactly the same on each page, the only difference will be

the video that is playing. When the snap rivet link

is selected, the snap rivet video plays and vice versa. Down the side there are three images of how the

different rivets look, and this is an important

element because in the revision guide there are no pictures explaining what a rivet is so this

will aid visual learners.

There is an animated element on this page of the flash file, which would

include text and pictures helping to demonstrate the advantages and

disadvantages of the different types of seasoning. There is also a small test

yourself section, which uses multimedia including a sound clip file so that they can see if there answer is

correct when they are ready rather than having it written underneath to

avoid the temptation to cheat.

Here there will be a slideshow of images

showing the user exactly what all of the different faults

in wood look like, as the revision guide is

lacking in visual images to help

explain what the different faults

actually look like. There is again a

small test yourself section, allowing the user to revise

more effectively by asking questions

that they should be able to answer if they have been

revising effectively.

Seasoning page

Faults in wood page


Quality Assurance page

CLIENT COMMENT:Client: “I am pleased with all of the topics that you have chosen to cover, especially these as students to struggle on the difference between quality control and assurance!”

CHANGES TO BE MADE:Client is happy with these pages.

This page is

rich with multimedia as it includes a flash

file animation as well as a test yourself section.

This page is exactly the same as Quality Assurance, except the flash file will be

completely different as it is explaining a different system. The same question has been given in the test yourself section to enforce that the user learns the answer

as it is important that they know the difference,

Quality Control page

Total Quality Management page

This is only a small section of the

book, but it can be quite difficult to

understand hence why I have chosen to do a page on it.

There will be a short video

explaining what the system is and

what are the benefits.


Test yourself: General Section Test yourself: A-level section

There is a test yourself section on the exams page – but these link directly to the quizzes themselves.

CLIENT COMMENT:Client: “I am very pleased with this page. There is a lot of opportunity for the user to be revising and testing themselves on the knowledge that they need”CHANGES TO BE MADE:None

There will be a link here to a match-up exercise testing the user on what they have learnt about wood joints, and

there is also a link to a definitions

crossword which means that the user is being tested on

whether they know what the definitions

of the key words mean.

Quick question on something from the book – this means that the student is

being tested on their general

resistant materials knowledge and not just tested on the information from

the book.

Two multiple choice style quizzes. There is also a

section which provides the user with hard exam style

questions for them to answer – these will be different from those in mock exams and this means that they will have to

think more.

Hard question that the user is able to

answer in their own time. The answer

gives a summary of the points that they should have covered in order to gain full

marks.


detailed layout designs

Technology

page links

careers page

good page

definitions page

smallest page

overall page

multimedia rich page

list of differentthis