Detailed layout designs


Published on

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Detailed layout designs

  1. 1. Detailed layout designs:Fonts/Colour schemes
  2. 2. Minutes of meeting 23_09_2011POSSIBLE COLOUR SCHEMES: POSSIBLE FONT TYPES: Franklin Gothic Book Adobe Fan Heiti Cambria Haettenschweile Kozuka Gothic Pro Letter Gothic Standard Verdana Tahoma Bodoni MT CLIENT DECISIONS: Bodoni MT
  3. 3. Actual product development: Homepage
  4. 4. Minutes of meeting 23_09_2011LAYOUT 1: LAYOUT 3:LAYOUT 2: 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.
  5. 5. Actual product development: General section
  6. 6. Minutes of meeting 23_09_2011 General main link page Wood joints page.This page is meant as a link through to the different sections underthe general heading. The links would be rollovers, and the general This would be quite a multimedia rich page, because there would be resistant materials would be a flash file to add interest through rollover animated gif‟s of all the joints that I would create, meaning that simple text animation on the page. The test yourself page links the user is able to properly visualise how the joints work. Also, there would straight to a hot potatoes quiz. be a video demonstrating how a hidden dowel joint would be made.Definitions page. This page also has quite a bit of animation. When hovered over, the words inside of the larger circle would change accordingly. For example, CLIENT COMMENT: when you hover over Client: “I am very happy with the content of all „plasticity‟ a small animated of these pages. I don‟t like how the circles have gif shows through images been layered on the definitions page so this what the definition of should be changed to be just one circle, the same plasticity is in the centre. with the wood joints page.” Alongside all of the texts there will be a sound option CHANGES TO BE MADE: so they can hear an audio clip explaining the definition Don’t layer the circles and just have plain circles if they want to. on these pages.
  7. 7. Actual product development: Careers section
  8. 8. Minutes of meeting 23_09_2011Careers page. Apprenticeships and college courses page 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 This page contains hotspots with links to careers that could come from studying other pages. There is also a quick test Product Design, Resistant Materials at A- yourself question, meaning that the user is CLIENT COMMENT: level. There is also a flash file animation able to test themselves at all different Client: “I am very happy with the ideas on this that will show the user what sort of jobs stages of using the product. page, and think that the animation will look really and careers they could go on to have. good and have interesting information if done There are also links to the UCA‟s website, properly. I think you should have a clip with a and information about apprenticeships or student or someone already with a career in design college courses that are similar to this field as your sound clip rather than having me. Maybe of work. 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.
  9. 9. Actual product development: Exam section
  10. 10. Minutes of meeting 23_09_2011Exam page 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. CLIENT COMMENT: Another large multimedia aspect of Client: “This is a really good page. One thing that this page is the „test yourself‟ links to I would add is a link to moderator and examiners quizzes that I will be creating. This is reports so that students can see how their work will be marked and what parts should be included yet another helpful, interactive way that could easily be missed in coursework.” that the students are able to gain access to different forms of revision using the product. CHANGES TO BE MADE: I need to add links to examiners and moderators reports.
  11. 11. Actual product development: A-level section
  12. 12. Minutes of meeting 23_09_2011I 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 1: 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.
  13. 13. Minutes of meeting 23_09_2011 Thermoceramics/ Tinted glass and photochromic glass page.GRP/Carbon Fibre pages 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 Threading page 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. 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. 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.
  14. 14. Minutes of meeting 23_09_2011 Cams pageGears page 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 Extrusion page also a section on the page where the user is asked a question that they need to answers out loud to I chose to do a page themselves, and then a small sound file tells them the on Extrusion right answers when they choose to click to hear because it is the them. The text book is lacking a diagram explaining smallest section in exactly which part is the follower and which part is the book and the cam, and therefore I have included this on my therefore not page to help the user better understand. explained very well. It will be simply explained to the user through the user of a video explaining the CLIENT COMMENT: process. Again there Client: “Very happy with all of these designs and will be a small test the animations and videos on them. I like the test yourself question yourself sections.” and answer through a sound file. CHANGES TO BE MADE: None, client is very happy with these pages.
  15. 15. Minutes of meeting 23_09_2011Rivets pages Seasoning page 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. Faults in wood page There is also a small test yourself section, which Here there will be a uses multimedia including a sound clip file so that slideshow of images they can see if there answer is correct when they are showing the user exactly ready rather than having it written underneath to what all of the different avoid the temptation to cheat. 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 CLIENT COMMENT: more effectively by asking Client: “Very happy with these pages. questions that they should No changes I can think of.” be able to answer if they have been revising effectively. CHANGES TO BE MADE: None
  16. 16. Minutes of meeting 23_09_2011Quality Assurance page Quality Control page This page is rich with multimedia as it includes a flash file animation as well as a test yourself section. Total Quality Management page 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, 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 CLIENT COMMENT: short video explaining Client: “I am pleased with all of the topics that you what the system is and have chosen to cover, especially these as students to what are the benefits. struggle on the difference between quality control and assurance!” CHANGES TO BE MADE: Client is happy with these pages.
  17. 17. Minutes of meeting 23_09_2011There is a test yourself section on the exams page – but these link directly to the quizzes themselves. Test yourself: General Section Test yourself: A-level section There will be a link here to Quick question on Two multiple choice style quizzes. Hard question that the user a match-up exercise something from the book – There is also a section which provides is able to answer in their own testing the user on what this means that the the user with hard exam style time. The answer gives a they have learnt about student is being tested on questions for them to answer – these summary of the points that wood joints, and there is their general resistant will be different from those in mock they should have covered in also a link to a definitions materials knowledge and exams and this means that they will order to gain full marks. crossword which means not just tested on the have to think more. that the user is being information from the tested on whether they book. CLIENT COMMENT: know what the definitions of the key words mean. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.