Beyond the theme
✺ PKP 2019 Conference: Barcelona
✺ Beyond the theme
Introductions.
✺ Building blocks: what goes into a journal’s identity?
Colours, typefaces, logo, visuals, & theme.
✺ Building blocks
Find inspiration everywhere..
✺ Building blocks
✺ Building blocks
Create a simple & cohesive colour palette..
✺ Building block: colour palette
1: stick to black & white.
✺ Building block: colour palette
2: one base hue; keep it monochromatic.
✺ Updating base hue in Pragma: adaptative colours & greyscale
✺ Updating base hue in Pragma: adaptative colours & greyscale
✺ Building block: colour palette
3: up to three hues based on a scheme*.
* CSS / LESS + more time required
✺ Updating colours in Immersion: colour blocks by section
✺ Updating colours in Immersion: colour blocks by section
✺ Building blocks
Use a nice and legible typeface that suits the journal’s tone..
✺ Building block: typefaces
1: let your theme handle typefaces.
✺ Building block: typefaces
2: choose only one typeface for headings & body text*.
* CSS / LESS required if applied to content
✺ Building block: typefaces
3: pair two typefaces.
* CSS / LESS and a lot more research required
✺ Building blocks
Display a simple & versatile logo for use in various contexts..
✺ Building block: logo
1: don’t make one if you don’t need it (yet).
✺ Building block: logo
2: make a logomark*.
* Logo maker or graphics editor required
✺ Displaying logomarks: dealing with long & multilingual journal titles
✺ Displaying logomarks: dealing with long & multilingual journal titles
✺ Building block: logo
3: make a logotype *.
* Logo maker or graphics editor required
✺ Displaying logotypes: using a transparent background
✺ Displaying logotypes: using a transparent background
✺ Displaying logotypes: removing clutter, simplifying text, & using visuals
✺ Displaying logotypes: removing clutter, simplifying text, & using visuals
✺ Building blocks
Use high-quality photographs & illustrations..
✺ Building block: visuals
1: don’t bother sourcing images.
✺ Building block: visuals
2: find high-res visuals *.
* Make sure you have the rights to them
✺ Visuals: avoiding poorly-compressed, stretched-out, & distracting images
✺ Visuals: avoiding poorly-compressed, stretched-out, & distracting images
✺ Visuals: personalising visuals with your colour scheme
✺ Visuals: personalising visuals with your colour scheme
✺ Building blocks
Putting it all together.
� See: ojs3-theming.netlify.com.
BREAK.
✺ Tools and techniques
CSS: Typography and color adaptations.
✺ Derive color and typography from the logo
✺ Use a new font from Google Fonts
✺ Update the article title to match the new font
✺ More work to do
✺ What to check after a font change
· Does the text size need to be increased or decreased a little?
· Does the font weight (normal or bold) need to be changed in places?
· Does this font need more or less space around it?
· Has this font created an unexpected impact anywhere?
✺ Should I build a child theme?
· Do I want to reuse these styles for more than one journal?
· Do I want to include images directly in the theme?
· Do I want control over the LESS/CSS variables?
· Do I want to override one or two HTML templates?
· Do I want to stage my changes or use version control?
If the answer is yes, visit the Theming Guide to learn how.
✺ What kind of changes should be avoided
Especially:
· Trying to make things more “interesting” or to make things “pop”
· Colors or fonts that a key stakeholder thinks “look better”
· Adding or moving things to get rid of empty space
Be cautious of any change that does not emerge directly from a qualified designer’s recommendation, a journal’s visual identity such as a color palette or font pairing, or from an audit of some kind that identified a problem that needs to be solved.
✺ Tools and techniques
Mobile compatibility & accessibility.
✺ Device mode in your browser (press F12 or CMD+option+i)
✺ Keyboard navigation
✺ Accessibility audit with Lighthouse (requires the Chrome browser)
✺ Thank you! ✺.
Nate Wright — github.com/NateWr �Sophy O — github.com/sssoz