Menu

Naar inhoud

Websites

Login NL - EN

3. Basic HTML elements

The basic elements ensure the correct brand image. By using the elements below the website will be recognised as Ghent University.

3.1 Colour

Colour is an important element within our identity.

The Ghent University colour palette consists mainly of 2 colours: Ghent University corporate blue and yellow.

Use the darker colours as standard and only in the 2nd instance the lighter version.

In addition every faculty has its own supporting colour. This replaces the corporate yellow colour.

Black and greyscale are functional and supplementary.

COLOUR SAMPLES

Below is a list of the different colours and functions

#1E64C8

Ghent University corporate blue

(standard)

#FFD200

 Ghent University corporate yellow

(standard except for faculties)

#e9f0fa

Ghent University corporate light blue

(e.g. background button, quote, expandable element)

#fffae5

Ghent University corporate light yellow

(e.g. notifications)

#202020

Text colour black

#646464

Date notation dark grey

#CCCCCC

Border colour grey

#DDDDDD

Border colour light grey

#B4B4B4

Inactive elements grey

(e.g. in event planner)

#F1A42B

Faculty of Arts and Philosophy (LW) 

Orange

#DC4E28

Faculty of Law and Criminology (RE) 

Warm Red

#2D8CA8

Faculty of Sciences (WE)

Aqua 

#E85E71

Faculty of Medicine and Health Sciences (GE) 

Salmon pink 

#6F71B9

Faculty of Engineering and Architecture (EA) 

Grey blue

#AEB050

Faculty of Economics and Business Administration (EB) 

Light green 

#825491

Faculty of Veterinary Medicine (DI) 

Purple 

#FB7E3A

Faculty of Psychology and Educational Sciences (PP) 

Warm orange 

#27ABAD

Faculty of Bioscience Engineering (BW) 

Turquoise 

#BE5190

Faculty of Pharmaceutical Sciences (FW) 

Light purple

#71A860

Faculty of Political and Social Sciences (PS) 

Green 

EXAMPLE OF FACULTY COLOUR VERSION

A faculty supporting colour can be used extensively (e.g. on faculty home page) or as accent colour (e.g. in a pictogram of a calendar).

Below is an example of the Faculty of Political and Social Sciences (PS):

3.2 Typography

The webfont of Ghent University is ‘UGent Panno Text’. See 4.1 Primary: UGent Panno Text

Use the following versions online:

  • UGent Panno Text SemiLight
  • UGent Panno Text Normal
  • UGent Panno Text Medium
  • UGent Panno Text SemiBold

HEADER H1 (PAGE TITLES)

Use an H1 for a page title, e.g. on a content page or news article.

The H1 is shown by Google as a link on pages with search results.

Bachelor­opleidingen

HEADER H2 (SUBTITLES)

Use an H2 to clearly differentiate the different parts of a page and make it more ‘scannable’.

Lerarenopleiding

HEADER H3

Use H3 to make further structural subsections within an H2 section.

Wanneer?

INTRODUCTION TEXT

Where necessary use an intro text on detail pages to summarise content of the page. This helps the user to decide whether or not to read on.

Bacheloropleidingen bestaan uit 180 studiepunten en duren 3 jaar. Aan de universiteit worden enkel academische bachelors aangeboden.

BODY TEXT

Continuous text is 17px with a line distance of 21px.

Dit diploma geeft je rechtstreeks toegang tot de aansluitende master. Wie al een diploma van professionele bachelor heeft, kan via een specifiek schakelprogramma overgaan naar de masteropleidingen.

NOTIFICATION

With Notification layout you can subtly highlight an extract from a text or news article.

For a stronger highlight use the Quote layout (see below).

QUOTE

Using the quote layout you can give a strong accent to an extract from a text or news article.

To give a light accent to a piece of text, use the Notification layout (see above).

‘Op deze manier kan er een langere quote geplaats worden’

2-COLUMN SUMMARY

Voor wie
Alumni, Studenten, Peroneel
Wanneer
Donderdag 25-05-2015, van 11:00u tot 12:00u
Waar
Het Pand, Onderbergen 1, 9000 Gent
Voertaal
Nederlands
Organisator
Vakgroep Letterkunde, Faculteit Letteren en Wijsbegeerte
Contact
joachim.vanwalleghem@ugent.be
Website
www.taalenletterkunde.ugent.be/permanentevorming

DATE NOTATION NL

Note the date in Dutch in the following sequence dd-mm-yyyy

DATE NOTATION EN

Note the date in English with the month in full: dd Month yyyy

Links are blue and underlined as standard. The underlining disappears with mouseover.

Links in a list after bullets are only underlined with mouseover: see 3.6 List

Links in a link box

You can insert a link box in the right column of the website.

This has a blue background and for the sake of readability the links in the box are black not blue. With ‘on hover’ they become blue and underlined.

3.4 Buttons

There are two versions. Try to limit the number of (secondary) buttons on a page.

Primary button (dark blue with white text)

Secondary button (light blue with dark blue text)

BUTTONS

Below is an example of the following/following buttons; these can also contain text.

PAGE NUMBERING

The button layout is also created to facilitate browsing through pages.

3.5 Sortable table

Below is an example of a sortable table. Table 1 and 2 in this example are connected (A in table 1 corresponds to 2 in table 2).

Sorteer op Titel 1 Sorteer op Titel 2
sorteerbaar item B sorteerbaar item 4
sorteerbaar item D sorteerbaar item 3
sorteerbaar item A sorteerbaar item 2
sorteerbaar item C sorteerbaar item 1

3.6 List

Below is an example of an (un)ordered list and a link list.

List without links:

Ongeordende lijst

  • Eerste lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item
  • Volgende lijst item

Geordende lijst

  1. Eerste lijst item
  2. Volgende lijst item
  3. Volgende lijst item
  4. Volgende lijst item
  5. Volgende lijst item
  6. Volgende lijst item
  7. Volgende lijst item
  8. Volgende lijst item
  9. Volgende lijst item
  10. Volgende lijst item
  11. Volgende lijst item
  12. Volgende lijst item
  13. Volgende lijst item

3.7 Images

Below are some examples of various images with caption.

Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.
Hier is plek voor een bijschrift voor bovenstaande afbeelding.

3.8 Expandable element

Expandable elements are used when the user only needs one or several parts of the page content.

Expandable elements help you to make the page concise and more scannable. Indicate clearly in the title of the expandable element what it contains.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3.9 Pictograms

Pictograms are inserted using the Bootstrap Glyphicons set. For file types we use FontAwesome pictograms.

3.10 Favicon

At the top of the browser window we show the logo of Ghent University without the letters ‘Ghent University’. This is an exception to the logo, which is usually applied as one unit (see 2.3 Corporate logo).

To top