What goes into an OJS 3 journal’s identity?

Access the workshop slides.

Download all the visual assets & colour palettes used in the demo.

These folders can be used as a template for your journal’s design folder.
design folder
|
|--- logo
|   |
|   |--- black on transparent background (PNG)
|   |
|   |--- white on transparent background (PNG)
|   |
|   |--- your brand colour on transparent background (PNG)
|   |
|   |--- black (SVG)
|   |
|   `--- white (SVG)
|
|--- visuals
|   |
|   |--- homepage images
|   |
|   `--- header images
|
|--- covers
|   |
|   |--- issue covers in high-resolution
|   |
|   `--- article covers in high-resolution
|
`--- colour palette (document listing out HEX values for your brand colour(s))
			

START HERE

Find visual inspiration

Find design inspiration through mood boarding, appreciating other sites’ layouts, your tastes.

Save those images in an inspiration folder or copy them into a mood board and bookmark interesting websites to guide you in your next design decisions. You don’t need a lot: inspiration can come from a single image as well.

Colour palette

Create a simple & cohesive colour palette.

Most OJS 3 themes have built-in settings that allow you to select one primary colour. Immersion is a lot more customisable and lets you select a different colour per section within an issue.

Using a polychromatic colour scheme requires more effort in terms of design research and CSS modifications.

What level of time and effort are you able to put into this?

Lower cost & effort

Choose black and/or white as primary and accent colours in your theme’s settings.

Greyscale is always elegant, while still allowing you to personalise your journal by highlighting other visual elements – such as article figures and issue cover images – through high-quality photographs and illustrations.

OJS 3’s newest themes have been optimised to be accessible (meeting WCAG’s requirements for text-on-background colour contrast) and aesthetically-pleasing when using greyscale as primary colours.

Medium cost & effort

Select a single hue as your base (brand) colour.

Most of OJS 3’s themes only allow a single primary colour which is automatically applied to accentuate certain page elements and call-to-actions.

In most cases, the theme will also handle variations of your selected primary colour by calculating lighter tints or darker shades to use on different page elements.

Note on accessibility: make sure to test colour contrasts for users with CVDs by comparing text and background colours. These combinations vary from one theme to another. Choose any one of the following tools:

Higher cost & effort

Create a polychromatic palette, but make sure to have only one base (brand) colour.

⚠️ With most themes, you will have to use your browser’s Inspector tool and to write some CSS if you wish to use more than a single hue to complement the primary colour in your journal’s website.

Immersion allows you to select a different colour for each section within an issue.

Manuscript is the only theme that has options for primary and accent colours.

Secondary and accent colours can also be used to edit your journal’s images to harmonise them with your site (e.g. by colourising them).

Stick to a maximum of 3 different hues.

Using your inspiration board and a palette generator…

Note on accessibility: make sure to test colour contrasts for users with CVDs by comparing text and background colours. These combinations vary from one theme to another. Choose any one of the following tools:

Keep in mind that displaying multiple colours makes meeting accessibility requirements for colour contrasts a lot more difficult. It is not recommended to use more than two or three hues for text and background.

If you wish to create a selection from scratch, base your palette on an adjacent, analogous, triadic or tetradic colour scheme. Stick to only using these colours as accent colours or to enhance visuals on your site.

Typography

Select a legible typeface that suits the journal’s tone.

Typeface choices are built-in in all OJS 3 themes and have been selected with web legibility and professionalism in mind. The options will continue to improve as we research into more high-quality, free, and open-source typefaces.

Do you want to write some CSS in order to use other fonts?

Lower cost & effort

Don’t do anything: let your selected theme handle text display and typeface pairings.

Themes come with either a selection of typeface pairings (Default) or a built-in typeface which are already optimised for their use in both heading and body text.

Medium cost & effort

Use only ONE typeface for body text and headings, but make sure that it includes at least italics & a bolder weight.

Careful: a display typeface is not designed to be used in body text; it will not be legible.

Higher cost & effort

Pair two typefaces based on certain properties, such as x-height, personality, history, type designer or foundry…

Typeface superfamilies are pairings of serif and sans-serif fonts that were designed together.

Many designers regularly compile recommended font pairings. You may also find inspiration there:

  • Typewolf: pairings found on websites
  • Typ.io: pairings found on websites
  • Fontjoy: Google Fonts pairings generated by deep learning (based on x-height)
  • FontPair: Google Fonts pairing suggestions

Try to create your own pairing.

This option is not recommended as it involves a lot more time, research, and testing to make sure the selected fonts can display your content.

  • Open Foundry: a selection and showcase of high-quality & free typefaces
  • Free Faces
  • Uplaod, a creative studio that provides free fonts (nicer for logos)
  • Velvetyne, a libre & open-source type foundry (also mostly quirky display fonts)
  • Google Fonts (⚠️ WARNING: not all are good quality)

Logo

Visuals

Use high-quality photographs & illustrations.

In OJS 3, besides the logo, you can upload visuals as a homepage image (Default, Manuscript, Health Sciences, Pragma, Classic) or a header image (Immersion), as well as article images. Some themes (Immersion) also allow you to upload an image for an issue section.

Do you want to source additional visuals to supplement your journal’s website?

Lower cost & effort

Invest time and effort in a high-quality logo, and enjoy the nice theme, colour and typography choices you’ve made.

If available, use your articles’ figures and photos (but make sure to always request a hi-res version of them in PNG).

Higher cost & effort

Find royalty-free photographs and illustrations: always in high-resolution PNG or SVG, without watermarks.

You could harmonise your images to match your site by editing them.

ShapeFactory’s duotone app lets you easily search images from Unsplash and colourise them with two of your selected hues.

Using a graphics editor, you can also filter and colourise your images using your chosen colour palette.

Theme

Choose a theme that suits your journal’s identity.

  • Health Sciences, a theme designed with a focus on text legibility and content clarity as well as an understated palette of light greys and white.
  • Classic, a theme that plays on colour and font contrasts based on literary classics’ book design and featuring a starkly contrasting black header and brand coloured-footer.
  • Immersion, a theme focussed on full-page images, large typefaces, and bold colour blocks tailored for journals with a focus on visuals.
  • Pragma, a theme inspired by 60’s minimalism and early periodicals’ tables of contents featuring an extensive use of a monochromatic colour palette.

Which theme would you like to use?

Health Sciences

…and update your journal’s settings with the design choices you’ve made:

  • Colour palette
    • Primary (base or brand) colour
  • Typefaces (optional, extra CSS needed)
    • Font for headings
    • Font for body text
  • Logo (with a transparent background)
    • PNG logo in black
    • PNG logo in your brand colour (make sure that the brand colour is accessible on a black background)
  • Visuals (make sure to check terms and restrictions on their use)
    • Collection of photographs
    • Collection of illustrations
    • Collection of patterns and abstract backgrounds

Classic

…and update your journal’s settings with the design choices you’ve made:

  • Colour palette
    • Primary (base or brand) colour (shows as link underlines & footer background)
  • Typefaces (optional, extra CSS needed)
    • Font for headings
    • Font for body text
  • Logo (with a transparent background)
    • PNG logo in black
    • PNG logo in your brand colour (make sure that the brand colour is accessible on a black background)
  • Visuals (make sure to check terms and restrictions on their use)
    • Collection of photographs
    • Collection of illustrations
    • Collection of patterns and abstract backgrounds

Immersion

…and update your journal’s settings with the design choices you’ve made:

  • Colour palette
    • Primary (base or brand) colour
    • Secondary (or accent) colour (for section colour)
    • Tertiary (or accent) colour (for section colour)
  • Typefaces (optional, extra CSS needed)
    • Font for headings
    • Font for body text
  • Logo (with a transparent background)
    • PNG logo in black
    • PNG logo in white
    • PNG logo in your brand colour
  • Visuals (make sure to check terms and restrictions on their use)
    • Collection of photographs
    • Collection of illustrations
    • Collection of patterns and abstract backgrounds

Pragma

…and update your journal’s settings with the design choices you’ve made:

  • Colour palette
    • Primary (base or brand) colour
  • Typefaces (optional, extra CSS needed)
    • Font for headings
    • Font for body text
  • Logo (with a transparent background; colour depends on your primary colour choice)
    • PNG logo in black
    • PNG logo in white
    • PNG logo in your brand colour
  • Visuals (make sure to check terms and restrictions on their use)
    • Collection of photographs
    • Collection of illustrations
    • Collection of patterns and abstract backgrounds