Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet af retningslinjerne i dette dokument. Designmanual for Aalborg Universitets websider 1
Indhold Hvem omfatter designmanualen... 3 Designets muligheder og anvendelse... 3 Forsiden på en hjemmeside... 4 Element 1: Logo, søgning og sprogskifte... 5 Element 2: Topbillede(r)... 5 Placering af eget logo... 6 Element 3: Navigationsmenu (global menu)... 7 Designspecifikationer for menuen... 8 Niveau 3 navigationsmenu (horisontal menu)... 9 Designspecifikationer for horisontal menu... 10 Element 4 (attentionbokse)... 10 Designspecifikationer attentionbokse... 11 Element 5 (midterfelt)... 11 Designspecifikationer for midterfelt... 13 Element 6 (footer)... 13 Designspecifikationer for footer... 13 Undersider... 13 Designspecifikationer for undersider... 13 Browserkompatibilitet... 14 Bilag 1:... 15 2
Hvem omfatter designmanualen Designmanualen omfatter hjemmesider drevet og vedligeholdt af Aalborg Universitets administration, campus København, campus Esbjerg, fakultetshjemmesider, instituthjemmesider, hjemmesider under studienævn herunder også de enkelte studiers hjemmesider. Designet skal være implementeret på disse hjemmesider inden 1. januar 2010. Websider baseret på knap så layoutmæssige fleksible platforme (f.eks. E læringssystemer), men som godt kan fremstå som hjemmesider for brugeren er undtaget disse retningslinjer. De skal dog som minimum have Aalborg Universitets logo øverst til venstre på siden samt adresse og kontaktinformation nederst på siden. Tvivlsspørgsmål eller forslag til forbedringer af designmanualen kan afklares med: Bo Hvass Pedersen, AAU portalen, bhp@aub.aau.dk Figur 1: Eksempel på placering af logo og adresse/kontaktinformation Designets muligheder og anvendelse Designet er udarbejdet, så det er muligt for den enkelte organisation at sætte sit præg på egen hjemmeside, hvad angår billeder, farver, animation, videoer eller lignende. Konceptet giver mulighed for at forsider (og undersider) kan variere alt efter, hvilke ressourcer og kompetencer redaktørerne har til rådighed. Det vil være muligt at opnå æstetisk fornuftige resultater uafhængigt af dette. 3
Det forventes, at man tilstræber et look and feel, der læner sig op af de hjemmesider, der findes her: www.webdesign.aau.dk/hjemmesider/eksempler. Forsiden på en hjemmeside Forsiden på en hjemmeside er her defineret som den første webside, man som bruger lander på, når man besøger en hjemmeside. Det kunne f.eks. være Universitetets hjemmeside www.aau.dk Bibliotekets hjemmeside www.aub.aau.dk Projekthjemmesiden DEMDI www.demdi.aau.dk Figur 2: Eksempel bibliotekets kommende hjemmeside En forside kan bestå af de elementer, der er vist på figur 2. Elementerne 1 til 6 beskrives og specificeres herefter. Se eventuelt også designoversigt bilag 1 (side 15). 4
Element 1: Logo, søgning og sprogskifte Dette element består af Aalborg Universitets logo, en søgeboks og et flag. Elementet er 780 pixels bred, og det angiver sidens bredde. Elementet skal være centreret i browserens vindue (se figur2). Logoet er AAU s officielle, og det kan hentes på webdesign.aau.dk. Der må ikke ændres størrelse eller lignende på logoet. Ved klik på universitetets logo går man til universitetets forside aau.dk. Ved klik på et af flagene skifter hjemmesiden til det ønskede sprog. Placering af designelementer og funktionalitet: Hjørnet af logoets første bogstav skal flugte vertikalt med billedet nedenunder (element 2) Bunden af logoet skal flugte med søgeboksens nederste kant Billede (element 2), pilens spids og flagets højre side skal flugte vertikalt med hinanden Afstanden til toppen af billedet og søgeboksens nederste kant i element 2 er 14 pixels Flagene til skift af henholdsvis dansk og engelsk sprog kan hentes på webdesign.aau.dk Flagene placeres 14 pixels over søgeboksens øverste kant Der vises et engelsk flag på danske sider og dansk flag på engelske sider Se røde streger for linjerne i designet. Figur 3: Linjer i element 1 og 2 I søgeboksen skal der stå Søg eller Search alt efter om man befinder sig på den danske eller engelske udgave af hjemmesiden. Søgninger skal gå til universitetets officielle søgemaskine (search.aau.dk). Søg og Search skrives med følgende specifikationer: FONT FAMILY: VERDANA, ARIAL, SANS SERIF FONTSTØRRELSE: 10PX FARVE I HEX: 666666 EVENTUELT MED GRADIENT I SØGEBOKSEN (SE EKSEMPLER PÅ WEBDESIGN.AAU.DK) Element 2: Topbillede(r) Topbillederne på hjemmesiderne er 780x120 pixels, og man kan selv vælge, om man vil benytte sort/hvid eller farvebilleder. En meningsfuld titel sættes på billedet og placeres oven på et farvet rektangel, som kan gøres transparent mod det underliggende billede. Farven, der vælges til det farvede rektangel, skal 5
anvendes i hjemmesidens navigationsmenuer, links og overskrifter (h1). Farvevalget er frit, men bør afstemmes med det underliggende billede. Placeringen af teksten samt rektanglets højde og placering er fast. Se figur 4 for mål: Figur 4: Placering af tekst og rektangel i headerbillede Fonten (skrifttypen), der skal anvendes på topbillederne, er: FONT: DAX MEDIUM FONTSTØRRELSE: 18PX TRACKING: 100 FARVE: VALGFRI DOG HELST HVID ELLER SORT Placering af eget logo Ønsker man at placere et logo fra egen organisation i topbilledet, skal det placeres i billedets højre side i et rektangel på 192 x 120 pixels. Grunden til dette er, at dette rektangel skal have samme bredde som navigationsmenuen. Ønsker man et mere enkelt topbillede, kan man også vælge at placere eget logo i element 4 (se element 4 for nærmere beskrivelse). Figur 5: Institut for Produktion med eget logo til højre Figur 6: WOFIE eventhjemmeside med eget logo til højre Ønskes dynamik eller har man blot har brug for flere topbilleder for at signalere, hvad man arbejder med, kan man vælge at bruge flere billeder, der skifter efter tilfældighedsprincippet. 6
Eksempler på topbilleder kan ses på webdesign.aau.dk, og en skabelon i photoshop filformat kan også hentes her. Hjælp til udarbejdelse af topbilleder kan fås hos AAU portalen eller Informationskontoret. Element 3: Navigationsmenu (global menu) Navigation i designet består af en menu placeret i hjemmesidens højre side. Denne menu følger med rundt på alle sider på hjemmesiden. Menuen består af et sæt overordnede links til websider. Hvis man klikker på et af disse links, lander man på pågældende side og en eventuel undermenu åbnes, som man kan klikke videre på. Alle menupunkter skal skrives med kapitæler. Se følgende beskrivelse af funktionaliteten af menuen: Figur 7: Eksempel på menu i forskellige tilstande (bibliotekets hjemmeside) 1. Forsiden med samlet menu med en markering af, at man befinder sig på forsiden. 2. Man har klikket på menupunktet Om biblioteket, og man lander på siden, der omhandler Om biblioteket. Det markeres i menuen med et farvet rektangel, og derved angives, hvor man befinder sig i hjemmesidens struktur. Da der er flere underpunkter åbnes en undermenu, som man kan klikke videre på. 3. Ved at klikke på et af underpunkterne i menuen, går man til den pågældende webside, og underpunktets tekst i menuen farves, så man ved, at man nu befinder sig et niveau længere nede i hjemmesidens struktur (i dette tilfælde Åbningtider). 7
Designspecifikationer for menuen Rammen om menuen BREDDE AF MENUEN: 192PX RAMME OM MENUEN: 1PX, HEX FARVEVÆRDI: E6E6E6 BEMÆRK: PADDING SÆTTES FRA VENSTRE KANT AF MENUENS RAMME Links 1. niveau: FONTSIZE: 10PX FONTCOLOR: 4D4D4D PADDING: 15PX Links 1. niveau valgt (active) FONT SIZE: 10PX FONT COLOR: FFFFFF PADDING: 15PX BACKGROUND COLOR: DEN SAMME FARVE, SOM MAN HAR VALGT AT BRUGE I TOPBILLEDET OG <H1> Links 1. niveau hover/mouse over FONT SIZE: 10PX FONT COLOR: FFFFFF PADDING: 15PX BACKGROUND COLOR: DEN SAMME SOM MAN HAR VALGT AT BRUGE I TOPBILLEDET OG <H1> Links 2. niveau: FONT SIZE: 10PX FONT COLOR: 999999 PADDING: LEFT 22PX, TOP 3PX, BOTTOM 3PX Links 2. niveau valgt (active) FONT SIZE: 10PX FONT COLOR: DEN SAMME SOM MAN HAR VALGT AT BRUGE I TOPBILLEDET OG <H1> PADDING: 22PX Links 2. niveau hover/mouse over FONT SIZE: 10PX FONT COLOR: DEN SAMME SOM MAN HAR VALGT AT BRUGE I TOPBILLEDET OG <H1> PADDING: 22PX Bemærkning: Ved meget omfangsrige hjemmesider kan det være nødvendigt at bruge flere sæt menuer, men som udgangspunkt bør det undgås (f.eks. i Studieguiden vil det være nødvendigt). 8
Niveau 3 navigationsmenu (horisontal menu) Det kan være nødvendigt at have endnu et navigationsniveau på en hjemmeside, og man kan derfor indsætte en horisontal menu, når man befinder sig på et underpunkt af den globale menu (element 3). Herunder ses opbygningen af en informationsstruktur, hvor man fra hjemmesiden har klikket på følgende: Forside >> Forskning >> Forskeruddannelse >> På siden Forskeruddannelse (PhD) er det så muligt at klikke videre på: Studerende, Kommende forsvar, Afhandlinger, Forskerskolen og Programmer. Antallet af punkter bør IKKE overstige en linje, da det vil gå ud over overskueligheden på siden: Figur 8: Eksempel fra Institut for Produktion 9
Designspecifikationer for horisontal menu ALIGN: HØJRE FONTSIZE: 10PX LINE HEIGHT: 12PX FONTCOLOR: 6E6E6E PADDING LEFT: 6PX PADDING RIGHT: 6PX HOVER: UNDERLINE STYLE: DE ENKELTE PUNKTER ADSKILLES AF EN LODRET STREG BEMÆRKNING: AFSTAND FRA <H1> TIL TOPBILLEDET, SKAL VÆRE 42PX, NÅR DER ANVENDES HORISONTAL MENU Element 4 (attentionbokse) Den nederste sektion af siden kan bruges til at skabe opmærksomhed omkring bestemte elementer, som man ønsker at fremhæve yderligere. Farven afstemmes med farven i rektanglet i topbilledet (se beskrivelse af element 2) og farven i navigationsmenuen. I dette eksempel er attentionboksene anvendt til nyheder og nogle af de ressourcer biblioteket gerne vil gøre specielt opmærksom på. Længst til højre er indsat et logo fra netmusik.dk, som skal køre i nogle uger som en mere grafisk kampagne. Som nævnt under element 2 om topbilleder, kan man også vælge at lægge eget logo i attentionboksen længst til højre, hvis man ikke ønsker at inkludere logoet i topbilledet. Figur 9: Eksempel på attentionsbokse på bibliotekets forside 10
Figur 10: Eksempel på samarbejdspartners logo placeret i boksen længst til højre Disse attentionbokse skal ikke nødvendigvis være på alle hjemmesider. Eksempler på dette kan findes på webdesign.aau.dk. Designspecifikationer attentionbokse Størrelse og afstande De i eksemplet farvede bokse er: BREDDE: 290PX HØJDE: 140PX AFSTAND MELLEM BOKSE, BUNDE, GLOBAL NAVIGATIONSMENU, MIDTERFELT: 4 PX Boks længst til højre (figur 10 DEMDI logo): BREDDE: 192PX HØJDE: 140PX AFSTAND MELLEM BOKSE, BUNDE, GLOBAL NAVIGATIONSMENU, MIDTERFELT: 4 PX Fonte og overskrifter i boksene OVERSKRIFT: 18PX FONTSIZE: 9PX LINE HEIGHT: 20PX FARVE: VALGFRI MEN HELST HVID, SORT ELLER MØRKEGRÅ MARGIN LEFT: 12PX Element 5 (midterfelt) I midterfeltet er stedet kan der indsættes tekst og billeder (se figur 11) eller man kan være mere kreativ og dele siden op i flere felter, som kan anvendes til tekst, links, billeder, multimedieklip eller video (figur 12). Herefter er vist en side, hvor man bliver budt velkommen af tekst, og et eksempel hvor der er indsat et søgeformularfelt og skiftende multimedieklip. 11
Figur 11: Hjemmesiden tempus tourism.aau.dk Figur 12: Bibliotekets kommende hjemmeside med søgefelt til bibliotekets database og en række multimedieklip, der fortæller om biblioteket 12
Designspecifikationer for midterfelt BREDDE: 584PX MELLEMRUM TIL NAVIGATIONSMENU: 4PX HØJDEN SÆTTES ENTEN AF INDHOLDET ELLER STØRRELSEN AF NAVIGATIONSMENUEN Element 6 (footer) Her sættes kontaktinformation for pågældende hjemmeside i følgende rækkefølge: Organisationens navn Adressen for organisationen Telefonnummer Email for kontakt til organisationen Designspecifikationer for footer FONT FAMILY: VERDANA, ARIAL, SANS SERIF ALIGN: LEFT FONTSIZE: 9PX FONTCOLOR: HEX 878787 TOPMARGIN: 5PX Undersider Undersiderne på hjemmesiderne er i princippet blot en forsideskabelon, hvor midterfeltet er skiftet ud med almindelige artikler. Designspecifikationer for undersider FONT FAMILY: VERDANA, ARIAL, SANS SERIF H1 COLOR: SÆTTES EFTER FARVEN I NAVIGATIONSMENUEN OG REKTANGLET I TOPBILLEDET FONT SIZE: 18PX FONT WEIGHT: NORMAL AFSTAND TIL TOPBILLEDE: 26PX (UDEN HORISONTAL MENU) H2 COLOR: HEX 000000 FONT SIZE: 12PX FONT WEIGHT: BOLD Brødtekst COLOR: HEX 6E6E6E FONT SIZE: 11PX FONT WEIGHT: NORMAL AFSTAND TIL VENSTRE KANT: 10PX 13
Links COLOR: SAMME SOM H1 HOVER: UNDERLINE Browserkompatibilitet Websiderne skal kunne vises meget tæt på disse specifikationer i de nyeste udgaver af Internet Explorer, Firefox, Safari, Chrome og Opera. 14
Bilag 1: Designoversigt for AAU s hjemmesider 15