Choose your own adventure: Customising your OJS 3 journal

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.

  • From UI and graphic design sites
    • AIGA Eye on Design
    • Dribbble’s search by colour
  • Various art blogs
    • But does it float?
    • It’s Nice That
  • Anywhere: (scholarly or non-scholarly) websites, library archives, art books, architecture, Instagram, Pinterest…

Save any inspiring images to a folder or mood board and bookmark useful websites to inform future design decisions. A single image can provide ample inspiration, so it is not necessary to accumulate a large collection.

Colour palette

Create a simple & cohesive colour palette.

Most OJS 3 themes come with pre-set options that let you choose a main color. However, Immersion takes customization to the next level by allowing you to pick a unique color for each section in an issue.

If you want to use a polychromatic color scheme, be prepared to put in extra work in terms of researching designs and making CSS tweaks.

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

  

Lower cost & effort

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

Using greyscale creates an elegant look while still allowing for personalization through highlighting visual elements like article figures and issue cover images with high-quality photographs and illustrations.

OJS 3's latest themes are optimized for accessibility, meeting WCAG requirements for text-on-background colour contrast, and are aesthetically pleasing when using greyscale as primary colours.

  • An example grayscale colour scheme, with HEX, RGB, and CMYK values

Medium cost & effort

Choose one hue as your foundational (brand) color.

The majority of OJS 3's themes exclusively support a solitary primary color, which is automatically employed to emphasize specific page components and call-to-actions.

Typically, the theme will also manage different iterations of your chosen primary color by determining lighter tones or deeper hues to be utilized on various page elements.

  • Culled from your inspirations (images or bookmarked websites).
    • Colormind.io’s image colour extractor
    • Chrome extension for colour picking a website’s palette
    • Firefox extension for colour picking a website’s palette
  • Randomly generated:
    • Random colour picker
    • Coolors.co
  • Based on its symbolism (taken from this article):
    • Red: energy, power, passion
    • Orange: joy, enthusiasm, creativity
    • Yellow: happiness, intellect, energy
    • Green: ambition, growth, freshness, safety
    • Blue: tranquillity, confidence, intelligence
    • Purple: luxury, ambition, creativity
    • Black: power, elegance, mystery
    • White: cleanliness, purity, perfection

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:

  • ContrastChecker.online
  • Accessible-colors.com
  • Who can use this colour combination?

Higher cost & effort

Develop a diverse palette consisting of multiple hues, but ensure that there is only one primary (brand) colour.

Note that, in most themes, modifying the website's colour scheme to incorporate secondary hues requires utilising your browser’s Inspector tool and writing some CSS.

However, Immersion permits you to select a unique colour for each issue section.

Manuscript is the sole theme that offers primary and accent colour options.

Using secondary and accent colours can help modify your journal images to blend better with your website (for instance, by applying colour to them).

Limit your selection to a maximum of three different hues.

Using your inspiration board and a palette generator…

  • find a random colour selection.
    • Colorsupplyyy’s random colour generator
    • Swiss Style colour picker
  • extract multiple colours from an illustration or a photograph.
    • Colormind.io’s colour extractor

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:

  • Accessible Color Matrix (tests combinations for up to six different colours)
  • ContrastChecker.online
  • Accessible-colors.com
  • Who can use this colour combination?

When considering the presentation of various hues, it is important to acknowledge that adhering to accessibility standards for color contrasts becomes significantly more challenging. It is advisable to limit the utilization of more than two or three shades for text and background.

In the event that you desire to construct a color palette from the beginning, it is recommended to derive inspiration from an adjacent, analogous, triadic, or tetradic color scheme. Restricting the implementation of these colors solely as accent hues or for augmenting visual elements on your website is highly encouraged.

  • Paletton’s colour scheme designer

Typography

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

The OJS 3 themes come equipped with pre-installed typeface options that have been carefully chosen to ensure optimal web legibility and a professional appearance. As we delve deeper into our research for superior, cost-free, and open-source typefaces, these options will only continue to expand and improve.

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

  

Lower cost & effort

Allow your chosen theme to take care of text display and typeface combinations, without requiring any action on your part. Themes are equipped with either a range of typeface pairings (Default) or a pre-designed typeface that has been specifically optimized for use in both headings 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.

  • WhatFont extension for Chrome, to identify fonts used in any webpage without the need to inspect elements
  • WhatFont extension for Firefox
  • 7 Gorgeous Free And Open-Source Typefaces And When To Use Them on Smashing Magazine
  • 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)

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.

  • Google Fonts’ superfamilies

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

Display a simple & versatile logo for use in various contexts.

A logo consists of an image file that is generally either…

  1. a logomark: it contains an icon
  2. a logotype (or wordmark): a stylised version of the journal’s name or abbreviation

Journals typically have the latter. If you desire a more distinctive logomark but lack the finances to procure a graphic designer, you may utilise free and open-source assets to generate one.

Occasionally, a journal may require a graphic file (in SVG, PNG formats) of their emblem for deployment on alternate platforms, like social media profile pictures and PDF articles and reports.

Do you want to create a logo of your journal title and/or abbreviation to be used on other platforms?

  

Lower cost & effort

Utilizing plain text to showcase the title of your journal is a straightforward alternative, especially if an image-based logo is not required. By allowing the theme to manage the title display, you can concentrate on customizing your color scheme and incorporating visually appealing elements such as cover images and homepage images.

Medium cost & effort

This web application creates high-resolution logos in PNG using Google Fonts. Your logo font need not match the font employed throughout your website.

Avoid using long journal titles in logos. Utilise a logotype if your journal has a brief title or abbreviation.

Preserve these files in a secure location to maintain continuity of an unchanging logo for an extended duration.

⚠️ Warning: do NOT take a screenshot of text for use as a logo. It will not be high-quality, nor reusable in different contexts.

Note on accessibility: When uploading your logo, ensure that you fill out the "Alternate text" with your journal title.

You will need a graphics editor capable of exporting images in PNG and SVG formats.

Figma is my preferred tool for UI design and creating basic logotypes. It is a robust design application that is free for up to three projects.

If you previously selected a typeface for display purposes, this would be a suitable application for its use.

  1. Avoid displaying long journal titles. Use a logotype only if your journal has a short title or an abbreviation.
  2. Create a black version and a white version with transparent backgrounds, so that they may be used on backgrounds of different colours. You can also create one in your base (brand) colour.
  3. Make sure the image has a width of at least 500px; OJS 3 themes should resize them automatically to fit the layout.
  4. Export your logotypes in both SVG and in PNG. Save these files somewhere safe, so that the journal may continue to use a consistent logo for many years to come.
  5. You should have at least four files in total to be used on your site and any other platforms and documents

Higher cost & effort

Some apps generate clean PNG and/or SVG logos on the fly, without the need for a graphics editor. Careful: most require you to create an account and are not free.

  • Hatchful, Shopify’s free logo maker
  • Brandmark, another generator (NOT free)
  • ShapeFactory’s logo maker (NOT free)

If utilizing these services, it is suggested to preserve both the SVG and PNG versions and store them safely. This will guarantee that the journal can maintain a steady logo for an extended period.

⚠️ Caution: DO NOT capture a screen to use as a logo as it will not provide high-quality or reusable outcomes in various settings. DO NOT capture a screen to use as a logo as it will not provide high-quality or reusable outcomes in various settings.

Note - while uploading the logo, please furnish the "Alternate text" with the journal title for accessibility.

You will need a graphics editor that can export images in PNG and SVG.

I use Figma for UI design but it can also be used to design a simple logotype. It’s a powerful design app, and free for up to three projects.

  1. Find a royalty-free SVG icon on The Noun Project
  2. Avoid displaying long journal titles. Try to use your journal’s abbreviation.
  3. Create a black version and a white version with transparent backgrounds, so that they may be used on backgrounds of different colours. You can also create one in your base (brand) colour.
  4. Make sure the image has a width of at least 500px; OJS 3 themes should resize them automatically to fit the layout.
  5. Export your logotypes in both SVG and in PNG. Save these files somewhere safe, so that the journal may continue to use a consistent logo for many years to come.
  6. You should have at least four files in total to be used on your site and any other platforms and documents

Visuals

Use high-quality photographs & illustrations.

In OJS 3, the option to upload visuals extends beyond the logo, encompassing the inclusion of a homepage image (Default, Manuscript, Health Sciences, Pragma, Classic) or a header image (Immersion), in addition to article images. Furthermore, certain themes (Immersion) offer the possibility of uploading an image specifically 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.

  • Collect public domain images:
    • Public domain image banks: The Public Domain Review, Wikimedia Commons
    • Local and national public library archives: British Library NY Public Library The Hagströmer Medico-Historical Library
  • Download royalty-free images:
    • Illustrations: Undraw
    • Photographs: Unsplash
  • Create abstract patterns:
    • Blobs: Blobmaker
    • Triangles: Trianglify
    • Gradients: ShapeFactory’s Gradient maker
    • More patterns: Hero Patterns

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

ShapeFactory's duotone application facilitates the effortless discovery of Unsplash images and applies colourisation in a dual-tone fashion using two of your preferred hues.

Additionally, an editing tool is available for filtering and colourising images according to your selected 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.
    • Demo 1
    • Demo 2
  • 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.
    • Demo
  • Immersion, a theme focussed on full-page images, large typefaces, and bold colour blocks tailored for journals with a focus on visuals.
    • Demo 1
    • Demo 2
  • Pragma, a theme inspired by 60’s minimalism and early periodicals’ tables of contents featuring an extensive use of a monochromatic colour palette.
    • Demo

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

Created for the Beyond the Theme workshop presented by Nate Wright & Sophy O. (ouchsophy@gmail.com) on the 20th of November 2019 at PKP’s 2019 International Conference, Universitat Autònoma de Barcelona.

Contribute on Github