1 / 33

Science Timelines

Science Timelines. Interactive history. Purpose of the site. To provide a visually attractive and interactive timeline of the major scientific discoveries throughout history. Motivations and inspirations.

fynn
Download Presentation

Science Timelines

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Science Timelines Interactive history

  2. Purpose of the site To provide a visually attractive and interactive timeline of the major scientific discoveries throughout history.

  3. Motivations and inspirations I’ve always been interested in the history of science and what provoked people to find out more about space and the natural world. It’s difficult to get a sense of how a subject develops from the list of discovery dates alone, but an interactive graphic timeline is more engaging and more likely to hold the viewers attention.

  4. Target audience and suitability The target audience is still members of the public with an interest in the subject. The language is comprehensible. There is: • Text • Links • Pictures Suitable for all ages

  5. General content The timeline is populated with clickable boxes and dots. Yellow boxes indicate more information on the event. For yellow box events there is: • Text up to 130 words • 3 or 4 links • a picture. Content can be accessed through the visual timeline or through text timelines

  6. What’s been done - homepage

  7. Pre-designed pages - home

  8. Event page

  9. Event page

  10. Text timelines

  11. Text timelines

  12. Technology Features • There are 4 ways to scroll through the timeline – Jquery • On rolling over the link, a description of the event appears – Javascript • Navigation through individual pages – Rollovers • Positioning in the event page – CSS

  13. Other features • Text timeline navigation and other support pages • Comparison of timelines

  14. Design - minimal clicks - comfortable user experience Layout Colour Scannability Usability Accessibility Compatibility

  15. Layout – main pages • Logo is the corner and sitemap at the base. • Because it’s a horizontal website, the navigation is at the top and bottom. • Pictures on the timeline make it more lively. • Z-index used to feed nav bar into container to show connection.

  16. Readability / scannability • Navigation is intuitive. The guidelines on the main timeline go off left and right and are ordered with ascending numbers which indicated the website continues left and right. • The vertical lines at the back show the progress of scientific activity through the decades and centuries, which helps the user get a sense of the context in which the discoveries were made. • Each box contains only a small amount of information. Just date, name, discovery and nationality so the information can be taken in quickly and easily.

  17. Layout – event page • Clear from the top where the user is • The links with dates on either side provide context. • CSS styling used to position boxes, text and links

  18. The layout will stay consistent for each event page as the information is always less than 130 words and there are never more than 4 links

  19. Colour • I decided I liked the combination of dark red and sandy yellow and found two colour schemes on Kuler that included both. • They were ‘Campfire’ and ‘Copy of burnt clay’. I kept these in mind throughout development and used the ones I liked. • The colour scheme is consistent and, aside from white, black and gray, only five colours are used throughout, which is the recommendation.

  20. Navigation • Buttons highlight to show location • Navigation at top and bottom so choice with user • Instead of overloading the top nav bar, there is a drop down at the end indicated by an arrow. • Multiple navigation methods on timeline: • Nav bar buttons • Mouse scroll • Keyboard arrow keys • Draggable scrollbar

  21. Accessibility • Some people, such as the partially sighted, will be using screen readers to view the site and it will be difficult to get a sense of the timeline from the main pages. This is the main reason for text timelines. • Alternative methods of navigation improve accessibility, • Full CSS styling puts the user in control

  22. Compatibility • I had to include this code in the header to make the site accessible in older browsers. • <!--[if lt IE 9]> • <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> • <![endif]--> • <!--[if IE]> • <style type="text/css"> • #supWrapper { • /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/supWrapper_ie.png', sizingMethod='scale');*/ • background:none !important; • } • </style> • <![endif]--> • It degrades gracefully if javascript is switched off - the scrolling bar is not javascript dependent and the CSS gradients and radius styling have alternatives.

  23. Blog • Right-hand navigation. Title tags link to all subtags • CSS posts - lots of links to favourite sites • Design principles posts - it details how I learnt about colour and layout in particular • Rich media - it shows some Photoshop techniques I used for the images on the site

  24. Blog • Website tag brings up all pages with Websites • Images tag does the same for images • Tips and tricks • Project tag charts progress - I’ve hosted the project as it’s different stages on an external website so it’s possible to look back on the site’s development.

More Related