This document serves as a preliminary catalogue of requirements for the planned face-lift of the Orient-Institut Beirut’s website. To comment and annotate this document via hypothes.is click here

This document was last edited 4 June 2018.

General framework

The Orient-Institut Beirut plans a facelift of its website The main purposes for this facelift are:

  1. Improve aesthetics: the layout shall be modernised with an improved colour scheme and better use of imagery
  2. Improve accessibility:
  3. Streamline maintenance:

There will be only minor changes to the general structure and content of the website. The main addition will be an alumni section, which, however, shall be modelled on the existing subpages of the people section.

Currently, search is implemented as a link to Google. For the redesign, we would like to see functional search of our website included in the website itself. This, however, is of the lowest priority of all changes.

technicalities

Detailed description of changes

Colour scheme

We would like to retain the colour scheme of three main colours: green, yellow, red. But the current, muted colours should be replaced with brighter versions.

Main layout

Regardless of whether responsive design will be implemented, the website should use the full width of modern computer screens (min 1200px)

Redundant menus and navigation options shall be removed and the header and horizontal navigation bar need to be redesigned.

changes to the main landing page
changes to the main landing page
schematic mock-up of a generic page
schematic mock-up of a generic page

The website of the Max Weber Foundation can serve as an example for being well-organised. However, we prefer a brighter colour scheme.

landing page MWS
landing page MWS

The header for all pages shall include a main bar with three sections (from left to right): OIB logo, image(s), some descriptive text for the current site.

current header and horizontal navigation bar
current header and horizontal navigation bar
schematic mock-up of header and horizontal navigation bar
schematic mock-up of header and horizontal navigation bar

The horizontal navigation bar shall be simplified and always highlight the current selection to provide the reader a clue as to where on the site they currently are. With these changes, the display of the current path can be removed.

The navigation bar on the left: shall be removed without replacement

main content window

The main content window should be organised into two unevenly sized columns: the main content column on the left and another column with additional information.

schematic mock-up of a generic page
schematic mock-up of a generic page

The column headers shall remain as they are and retain some sort of a logo:

column header column header

For entries in lists—such as events, news or publications—that point to sub-sites with more information, remove the trailing “Read more” and convert the entire item into a link. Also fonts and font-sizes should be unified.

list item
list item
slightly different looking list item
slightly different looking list item

The footer is in urgent need of a redesign. All redundant information needs to be removed; this includes the logo, “upcoming events”, “face me on facebook”, “RSS”, “vacancies”. The link to “Find us on the map” is dysfunctional and needs to be removed. This information can be found under “contact us”, which needs a new location

The footer currently links to a subsection of the main page, with a new secondary horizontal navigation bar not not otherwise accessible. This needs to be removed.

secondary horizontal navigation bar only accessible from the links in the footer
secondary horizontal navigation bar only accessible from the links in the footer

Most of the currently available information shall be removed from the footer, while social media buttons need to be moved here.

Individual sections

Each section should have its own main colour, similar to the current website but brighter.

Adopt the two-column layout. Get rid of the “News” section on the top. Integrate new publications and news into one column. To retain the style of the lists, one might have to design a generic “news” icon.

This main landing page also needs to integrate the relevant contact information without another click. We suggest the lower section of the left column.

schematic mock-up of a the landing page
schematic mock-up of a the landing page

Change the title to “Events” instead of “upcoming events”), add an integrated applet/box on the page (on the right side) containing years to archive past events (thus, the events page will have two columns).

The main column should contain a list of links to events sorted from the newest to the oldest:

list of events
list of events

This site needs to provide some means of breaking lists of more than 10 entries into subpages. One could retain the currently available at the list of all events

list with multiple pages
list with multiple pages

Similar to events, an integrated applet/ box on the right side should provide navigation to subpages. In addition, the graphic visualising the relations between various research projects should be made functional (i.e. clicking on project names should link to the description of the project) and moved to the top of the page

  1. main page: retain lists of people sorted by surname. Add a photo to each entry (already available on the individual detail pages).

    Remove labels for empty fields.

    entries in the list of people
    entries in the list of people
  2. individual detail pages

    Retain the current structure of some free text description and a structured list of publications. All fields should allow hyperlinks. Make sure to provide links to research projects.

    Remove the “Profile” label.

    individual detail page
    individual detail page

Similar to events, an integrated applet/ box on the right side should provide navigation to subpages.

Adopt all changes to the main layout but retain the search field for the library catalogues in the header.

Applet to search the library catalogues
Applet to search the library catalogues

Remove the subsection Library/About/Library Team since this is part of People/.

Academic Support

Other improvements


  1. NEW. This section was moved from OIB/People

  2. NEW. This section is populated by separating “affiliated researchers” from “visiting fellows”

  3. NEW.