The finalisation of the web design will be based on an indicative homepage design submitted by showpony Advertising.

Transcription

1 KD/0/5.5/0.1 Meeting Date: 7 June 2007 Agenda Item 3 Web design As part of agreements made between the University and showpony Advertising, the work required to finalise the web design will be undertaken by the University. The finalisation of the web design will be based on an indicative homepage design submitted by showpony Advertising. A work request has been submitted to Information Services Division for the web design and style sheet development. The brief submitted with the work request is attached for your information. The aim is to complete this work and launch phase 1 in early August 2007.

2 File: KD/0/5.5 Flinders University web redevelopment Web design and style sheet brief This brief outlines the requirements for the web design and style sheet development for the Flinders University Web. 1. Background The web design and style sheet development is a component of the phase 1 implementation of the web redevelopment. Related work includes: The establishment of wireframes These wireframes were established as part of the information architecture development. They outline the structure and layout of the templates, and the navigation elements and their relationships to each other within a standard navigation scheme. Flinders University brand refresh This project involves refreshing the corporate look of the University and its promotional campaigns and improving the visibility of the University. The design work for the brand refresh was outsourced to showpony advertising. As part of the brand refresh brief, broad requirements for the web design and the approved wireframes were provided. Indicative homepage web design Showpony advertising submitted an indicative homepage web design, which was accepted by the Vice-Chancellor s Committee in principle, with some changes. The web design has subsequently been handed back to the University for completion. The indicative homepage web design will be used as a basis for completing the web design. Page 1

3 File: KD/0/5.5 Establishment of phase 1 subsites in test environment While the work on the brand refresh was being undertaken, the information architecture and content development and editing for phase 1 subsites was undertaken. Structural templates based on the approved wireframes and utilising a basic style sheet were applied. Phase 1 subsites were established and content was migrated into the content management system in the test environment. As a result of this work, standards and considerations for the style sheets were identified. 2. Requirements Whilst the web design should communicate the Flinders University brand in a manner which is consistent with the corporate branding, the emphasis of the web design will be on usability and accessibility. Consequently: the implementation of the web design will be undertaken using Cascading Style Sheets (CSS) the web design will be developed for a minimum 800 x 600 screen resolution, yet optimised for larger resolutions the design will be based on relative rather than absolute measurements, allowing design to conform to the available space, regardless of browser or screen size visual cues will be applied in a consistent manner to assist navigation and usability web safe colours will be used for banners, logo, fonts/text and navigation elements all navigation elements will be text-based rather than image-based the minimum text size will be 10 pixels. More detailed requirements are outlined at Attachment 1. Page 2

4 File: KD/0/ Scope The phase 1 implementation includes the top-level University-wide content. Specifically, the subsites included in Phase 1 are: About Flinders University Campus Research Teaching and learning Flinders Prospective students International students Current students Staff Alumni Business and community News and events. The web design and style sheet development will need to specifically develop designs and style sheets for the subsites listed above. In doing so, it will need to establish standards that will be applied across other subsites as the web redevelopment is further rolled out. The detailed requirements provided at Attachment 1 aim to address this Visual direction The indicative homepage design submitted by showpony advertising at Attachment 2 provides the visual direction required for the web design. Note: this design should not be referred to in relation to the structural layout (see item 2.4 below). Specific elements of this indicative design that are required in the web design include: White background A slight border of colour (coffee colour) to be allowed for. Specific changes to this indicative design required for the web design include: Flinders University logo to be moved to the left of the banner Tagline to be moved to the right of the banner Three line colour block on the top right corner of the banner to be removed Spiral down the right side of the page to be removed Cut-off at the bottom right-hand corner of the page not to be included. Page 3

5 File: KD/0/5.5 Other elements (ie fonts used for navigation, images, etc) are subject to some flexibility, particularly to address any usability, accessibility and space issues. The homepage design will then need to be extended to subsite homepage and subsite content page designs. It is expected that a use of a graphic element/s (eg images) will be used to distinguish between subsites Branding elements The key branding elements in the visual design include: Logo - International, horizontal version Inspired achievement tagline - coffee colour Use of corporate web colours - refer to the colour palette provided at Attachment 3*. *Important note: the web colours indicated at Attachment 3 are not fixed. If more accurate web colours can be recommended, please provide these for approval. DVDs including branding artwork are available. Any further clarity or specifications can be sought Use of images No specific corporate images have been provided. Images will need to be sourced from current stocks and via liaison with phase 1 subsite content owners Structural layout The wireframes provided at Attachment 1 should be referred to in relation to the structural layout of the web design and style sheets. These wireframes also provide specific notes and requirements for the various elements of the web design and style sheets. All elements in the structure should remain in place. Any flexibility for particular elements is noted at Attachment 1. Page 4

6 File: KD/0/ Stages and timeframe Stage Stage 1 Homepage design Stage 2 Extend homepage design to design of subsite homepages and content pages Stage 3 Communication and approval Stage 4 Coding and implementation of style sheets Stage 5 Testing and final refinements Timeframe 1 week 2 weeks 1 week 3 weeks 2 weeks 4. Communication and approval The Web Project Officer will communicate with the Web Redevelopment Steering Committee, phase 1 subsite content owners and other stakeholders in relation to the web design. Showpony advertising will be provided with copies of the web design prior to approval, to ensure the web design is consistent with corporate brand design. Approval of the web design will be by the Vice-Chancellor. Page 5

7 Attachment 1 Flinders University Web Wireframes The development of the new information architecture included a set of wireframes for the: Flinders University Web Homepage Subsite homepages Subsite content pages These wireframes outline the structure and layout of the templates, and the navigation elements and their relationships to each other within a standard navigation scheme. They were used as a basis for developing structural templates within the content management system (CMS) to develop phase 1 subsites in the test content management system environment. They were also used in the brief for the brand refresh from which showpony advertising developed the indicative homepage web design. In the process of developing the structural templates and migrating content into the test content management system environment, standards and considerations for the style sheets were identified. In addition, the need for a variation of the standard set of templates the top-level content page - has been identified. The initial wireframes have been updated as a result and detailed notes have been included. This information will be used to inform the completion of the web design and the work involved in developing the style sheets. Contents: 1. Wireframe - Flinders University Web homepage 2. Flinders University Web homepage Notes 3. Wireframe - Subsite homepage 4. Subsite homepage Notes 5. Wireframe Subsite content page 6. Subsite content page Notes 7. Wireframe Top level content page: 1 column 8. Wireframe Top level content page: 2 columns 9. Top level content page: Notes

8 Wireframe - Flinders University Web Homepage Skip to Content Accessibility A B Flinders University Logo C Inspired achievement D E About Flinders Library Staff Directory F Quicklinks Quicklinks. GO A - Z Index Advanced search Search G For I About News GO J H Prospective students International students Current students Staff Alumni Business and community Media Flinders University The campus Courses and programs Research Teaching and learning Flinders aaaa aaaa aaaaa aa a aa a a a a a aaaa a a a aaaa aaa aaa aaaaaaa aaaa aa a aa aaaaa.. bbb bb bbbbb b bbbb bbb bb bbbb bbb bb bbbbb bb bbbb bbbbb bbbbb bbb bbbb bbbbb bbbbb.. ccccc ccc ccc cc cc cccccc ccc ccc cc c cccccc cccc ccc ccccc cccc ccc ccccc cccc ccc cccc c cccc.. Feature links K News and events... Mid Year Entry iflinders L Quality at Flinders Postgraduate Entry Information Examination Timetable TAFE to Uni. Member of Innovative Research Universities Australia M N Copyright & disclaimer Privacy Contact us CRICOS Provider: 00114A Updated <date> Maintained by < > O See Notes next page...

9 Flinders University Web homepage - Notes The following should be visible in a browser resized to 800 x 600, without scrolling: Banner items logo, tagline All global navigation (items A, E, F below) Site structure navigation At least one news item Feature links title Horizontal content columns will evenly divide with the width (ie about 33% each for For, About, News ). Legend Item Notes A Accessibility toolbar A standard global navigation toolbar. Provides access to accessibility information and features. Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. B C D Banner Flinders University logo Tagline A global navigation feature. Consistency of the banner needs to be maintained across all levels of the site. A global navigation and branding feature. Includes an embedded link to the homepage. Always appears on the left side of the banner. A branding feature. To maintain the integrity of the tagline, may need to be image rather than text-based. Include Alt tag behind the image.

10 E F G H Standard global (resources) bar Standard global (supplementary navigation) bar Quicklinks Search A global navigation feature. Needs to be designed for flexibility to add/amend items as required. Text based. Minimum font size 80% of base (10px). Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. A global navigation feature. Needs to be designed for flexibility to add/amend items as required. Text based. Minimum font size 80% of base (10px). Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. Drop-down list and Go button (use of this button is negotiable). Maximum length of item, at font size of 100% is 30 characters. Default item is i-flinders. A global navigation feature. Includes a link to advanced search, a search box and Go button. Search box minimum 18 characters at 80% of base (10 px).

11 I J K Site structure navigation News Feature links Needs to be text-based. Titles should also be text-based. Minimum font size 80% of base (10 px) Maximum label length: 28 characters. Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. A homepage content feature. Aim is to include more than 1 news item on the homepage. Links to News and events subsite provided at the end of the news feature. News items: Heading size: characters in length Max body length: 200 characters Min body font size: 80% of base (10 px) Thumbnail size 80 x 80 px A homepage content feature. Includes links to content the University would like to promote. Min font size 80% of base. Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. Maximum 6 items.

12 L M N O Feature links image Member of Innovative Research Universities logo Standard global footer Border of colour Provide the opportunity for the image to rotate (timed or per page refresh). Aim is to include images that are consistent with promotional campaigns. Includes an embedded link to Innovative Research Universities website. Placement of logo is not fixed. All items are required. Text-based. Font size should be smaller than base as small as 80%. Cricos Provider Number to link to /InstitutionDetails.aspx?ProviderID= 114 The indicative homepage web design includes a border of colour (coffee colour). This needs to be allowed for in the stretchable layout design and style sheet, as long as the page is at least 90% of window width and height. This may be optional for low resolution screens.

13 Wireframe - Subsite homepage Skip to Content Accessibility Flinders University Logo Research A B Home About Flinders Library Staff Directory Quicklinks i-flinders... GO A - Z Index Advanced search Search GO Flinders University > Flinders C Our Research Research profile Research performance Areas of research focus Research expertise Research infrastructure Centres and Institutes Research management Office of the Deputy Vice-Chancellor (Research) Information for Industry and Investors Commercialisation and consulting Commercial entities Donations D Information for Flinders Researchers Office of Research Grants and funding opportunities Contracts, agreements and intellectual property Publications data collection (PDC) Research data and statistics Ethics and biosafety Research policies and procedures Research contacts Research form and download library Glossary of terms Research links Suggestion box Research news aaaa aaaa aaaaa aa a aa a a a a a aaaa a a a aaaa aaa aaa aaaaaaa aaaa aa a aa aaaaa.. bbb bb bbbbb b bbbb bbb bb bbbb bbb bb bbbbb bb bbbb bbbbb bbbbb bbb bbbb bbbbb bbbbb.. E F Research Higher Degrees Research Quality Framework (RQF) Copyright & disclaimer Privacy Contact us CRICOS Provider: 00114A Updated <date> Maintained by < > See Notes next page...

14 Subsite homepage - Notes The following should be visible in a browser resized to 800 x 600, without scrolling: Banner items logo, subsite title All global navigation At least 5 lines of the local navigation. Horizontal content columns will evenly divide with the width (ie about 33% each for the 3 columns). Legend Item Notes A Subsite title Possibly image-based to be consistent with tagline on the Flinders University homepage. If so, Alt tag to be provided. Consideration should be made for longer titles to be accommodated for in the further roll-out (Eg Faculty of Education, Humanities, Law and Theology ). B C Standard global (resources) bar - variation Breadcrumbs Home is added to the standard global (resources) bar for all levels from subsite homepage and below. Breadcrumb navigation feature introduced for all levels from subsite homepage and below. Breadcrumbs should appear as close as possible to the content area. May need to be a visually distinct area from the Standard global (resources) bar. Needs to be text-based. Typeface may be slightly smaller than base (say 80%). May need to occupy entire width. Links within navigation to behave consistently.

15 D E F Local navigation OPTIONAL feature area Promotional button Subsite local navigation appears in the centre of the page. Needs to be text-based. Titles should also be text-based. Minimum font size 80% of base (10 px). May occupy entire height (400+ px). Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. Images may be included as long as content allows. Background imagery to be avoided. The OPTIONAL feature area is used for News feeds, related links, pullout quotes, feature content, etc. It includes: a title, content (including images) and border. Headings have been set at <h3>. Minimum font size 80% of base (10 px). Image size 80 x 80 pixels. Feature area is expandable in depth according to the content. The promotional button is used occassionally to promote content. Standard size is approx 84 x 167 px.

16 Wireframe: Subsite content page Skip to Content Accessibility Flinders University Logo Research Home About Flinders Library Staff Directory Quicklinks i-flinders... GO A - Z Index Advanced search Search GO Flinders University > Research > Research profile Our Research A Research profile B Our Research Research profile Research performance Areas of research focus Research expertise Flinders University's approach to research is distinctive. Most importantly, our research is focussed and collaborative. Research infrastructure Centres and Institutes Research management Office of the Deputy Vice- Chancellor (Research) Copyright & disclaimer Privacy Contact us CRICOS Provider: 00114A Updated <date> Maintained by < > See Notes next page...

17 Subsite content pages - Notes Columns: Left approx 200 px Centre stretchable Right approx 200 px Legend Item Notes A Local left-hand navigation bar An expandable menu that goes up to 3 levels deep. Must be text-based. Minimum font size 80% of base (10px) Visual cues need to be established to identify expandable sections in the navigation. Appropriate spacing between navigation items to be considered. Visual cues to be provided to identify the selected item in the left hand navigation. Links within navigation to behave consistently. Links not identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues.

18 B Content area Minimum font size is 10 px for content. Links within content to behave consistently (rollover, visited links) Links not to be identified by colour alone: underline, rollover behaviour and layout to provide additional visual cues. Structural markup has been used. Page title is <h1> and sub headings are <h2>, <h3> and <h4>. Standards for <p>, <h1>, <h2>, <h3> and <h4> to be provided. Content image standards to be confirmed. Including: In-body default image size In-body default image thumbnail size Horizontal and vertical whitespace around images.

19 Wireframe - Top level content page: 1 column Skip to Content Accessibility Flinders University Logo Campus Home About Flinders Library Staff Directory Quicklinks i-flinders... GO A - Z Index Advanced search Search GO Flinders University > Campus > Environment Environment Flinders University is situated within the foothills of the Southern Mt Lofty Ranges. Related links Buildings and Property - Environment Prior to the establishment of the campus in 1963, the area was part of a larger grazing and dairy property. Since the campus was established, the number of buildings has expanded to accommodate the increased student numbers. The Flinders University campus now represents a modified urban environment with significant built-up areas, but has retained a variety of open spaces. etc... Copyright & disclaimer Privacy Contact us CRICOS Provider: 00114A Updated <date> Maintained by < >

20 Wireframe - Top level content page: 2 columns Skip to Content Accessibility Flinders University Logo Inspiring achievement Home About Flinders Library Staff Directory Quicklinks i-flinders... GO A - Z Index Advanced search Search GO Flinders University > A - Z Index A - Z Index A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A O Feeback For corrections and additions, webredevelopment@flinders.edu.au. Copyright & disclaimer Privacy Contact us CRICOS Provider: 00114A Updated <date> Maintained by < > See Notes next page...

21 Top level content page - Notes Two variations: 1 column 2 columns Description: The top level content pages follow the same structural layout as the subsite homepages except the entire page width, except for the right column used for optional feature items (approx 200 px in width), is used for content. This content uses the same standards as those used in the content area of a subsite content page. The top level content pages do not have a local left-hand navigation bar.

22

23 COLOUR NAME PANTONE COLOUR PROCESS BREAKDOWN WEB COLOURS Dark Blue PMS282 C100 M72 Y0 K COLOUR PALETTE Light Blue PMS543 C56 M15 Y0 K6 99CCFF Gold PMS116 C0 M15 Y94 K0 FFFF00 Coffee PMS451 C34 M27 Y51 K0 CCCC99 Black PMS Black C0 M0 Y0 K The corporate colours of Flinders University are dark blue, light blue, gold and coffee. Where possible these colours should be used to anchor all major communications pieces - creating a strong, corporate, immediate association with Flinders University.