Design Considerations Think about this in a Presentation Today we are going to look at a website to find out about Multimedia. © 2010 www.achildsguideto.com

© 2010 www.achildsguideto.com Look at a website Home page Graphics Navigation Hyperlinks Corporate Image Colour scheme Layout If you look at a website, you will see that each one has certain things in common. They have a HOME PAGE which is the first place you go on the website. The home page tells you about other parts of the site and helps you to navigate to them. Nowadays, websites usually include some graphics or images. These two words generally mean the same thing, although an image is usually associated with a photograph whereas a graphic is a more generic term meaning you can use it for a photograph or an image. The home page is used for navigating around the website and to other websites. To find your way around, you need to know where you are, where you want to be next and how to get there. There are various clues to help you find your way around. These include breadcrumbs (as in Hansel and Gretel), a navigation bar and hyperlinks within the text and from pictures. Finally, most company web pages also have a corporate image. This means that they have a strong colour scheme, they display the company logo on each page, the layout is similar from page to page so that someone using the web page knows what to expect. © 2010 www.achildsguideto.com

© 2010 www.achildsguideto.com Navigation Bar made of hyperlinks Breadcrumbs that tell you where you are Title Graphic Next Button As we look around this website, we can see various features of a piece of computer multimedia. Across the top is the Navigation bar . This has lots of hyperlinks to other pages in the site. Each “button” tells you where that button is going. This is called an index. Underneath the navigation bar, the breadcrumbs show you where you are. In this case, we are on the Home Page so the word HOME is written here. On other pages, you may see the words HOME > EVENTS or HOME > CONTACT US. Clicking on the breadcrumbs will take you back through the pages so if you can make a wrong mouse move, you can easily go back one stage to where you were last. Down the left hand side, the Image forms a border. Note that it is in line with the Navigation bar across the top. Imagine you are putting all the information you want users to read in a box. That is the effect the designer was after here. Look at the images. What images have been chosen? At the top, one that actually states, ”This is a School.” The playground, the classroom, the school building. After these, something about the school’s location. Notice that the images are faded into the webpage, creating a hard border on the left whilst a soft border leads you into the main content of the page. Across the bottom of the site, there are a lot of hands. This image was chosen because it portrays a successful school: when a child knows the answer, they put up their hand. Also, it follows the local authority guidelines for including images of children on school websites. In actual fact, the hands on this image were repeated twice from different angles. See if you can spot which hand goes with which. The photograph of the school, taken on a sunny autumn day provides an inviting light. The times of day you take a photograph will affect the mood of the photo. Below the photograph, is a little circular Next button, indicating that there is more than one photograph to be seen. Hyperlink Text providing the welcome to the site Image forming a border Image providing context © 2010 www.achildsguideto.com

© 2010 www.achildsguideto.com Navigation Software all allows for: Back Forward Home Many software companies have developed applications for viewing web pages. These are called BROWSERS. The browsers allow you to navigate the web, looking for the information you need. If you look at the slide, you will see that they all have very similar buttons. The browsers shown are Firefox, Internet Explorer, Netscape Navigator and Opera. All these browsers have a BACK, FORWARD and HOME button. © 2010 www.achildsguideto.com

© 2010 www.achildsguideto.com Structure There are three main structures in information systems: Serial access which means one after the other. Random access which means you can dip into it at any point. A mixture of the above. All information systems use one of these structure If we are reading a story, we start on page one and work our way through to the end. On the other hand, an encyclopaedia provides an index to a specific article or piece of information. That article can be accessed at any time and is not reliant on whether a person has read the preceding article. There are various ways in which we can structure a website. You need to think carefully about it. Do you want the user to be able to go anywhere or do you want them to have to read the next page. When we looked at the presentation on frogs, the user was taken from the title page in a set sequence. Once they started to do the quiz, they were guided through the questions and provided with feedback determined by their response to the question. They were given a limited choice of where they wanted to go. © 2010 www.achildsguideto.com

Two different structures Series Random Looking at a diagram of each of the two types of structure, you will see that there are a lot more routes to take using Random Access. The sequential or series access moves from page one to page two and so on up to page six. This is just like in a storybook. The Random access means you could start at page one and then move to page two then page six and then back to page four. There are 720 different ways in which you can read these pages in this case. If there were ten pages in a presentation, there would be over 3.6 million different permutations and this assumes that you look at ever single page. © 2010 www.achildsguideto.com

© 2010 www.achildsguideto.com Task You are designing a presentation on the parts of a flower. You are provided with a picture that looks like this: You are going to design and build a presentation about the parts of a plant. You will need to ensure that you cover the important parts including stamen, anther, filament, stigma, receptacle and stem. Make sure you know what each part of the plant does. © 2010 www.achildsguideto.com

© 2010 www.achildsguideto.com Design a presentation What information will each page have on it? How will you structure your presentation? One page after the other Click on the bit you want to find out about Some other way of organising the information How will you ensure the information has been passed on? You will need some paper. Decide what pages you will need and how they are going to link to each other. Draw each page and write the information you are going to include on each one. You don’t want more than about 100 words as an absolute maximum for each page. Also, remember, you will have to produce the drawings so do not make them too complicated. They call these sheets of paper a STORYBOARD. You need to remember that word. Today: you are designing. You are building your presentation next time. Make sure you keep your storyboard somewhere safe. © 2010 www.achildsguideto.com