Visual Identity for TheVCS.org
The Visual Commentary on Scripture
--
The Visual Commentary on Scripture (VCS) is a freely accessible online publication that provides theological commentary on the Bible in dialogue with works of art.
The brief
The original brief described the vision for a beautiful visually-led and engaging online publication,
of particular value to scholars interested in the rich possibilities of using a theological hermeneutic to interpret the interactions of sacred texts and visual art…
and more broadly,
a resource that engages a community of schoolteachers, clergy, artists, museum curators and educators, and members of the public inquisitive about both art and Christianity.
Problem: lack of identity
The primary focus of the brief was the development of an online publication. The visual identity was presented as a secondary consideration; a temporary logo was provided with the caveat that it may change and suggestions for an alternative were welcome.
Logos alone are not enough. A digital project needs a rich palette as a go-to when working up wireframes and styling components of the interface. Without an existing toolbox of assets or a solid brand guide to begin with, it becomes nearly impossible to establish a sense of cohesion and build an effective design system for digital projects. My approach then, was to establish an identity for the VCS in Sprint 0 that would set the tone for the rest of the project.
The first task was to resist redrawing the original logo before considering what the project needs.
Considerations
A functional toolbox
From the outset I proposed a lightweight visual identity toolbox that is easy to understand and apply in everyday situations.
How will someone with little/no design experience or creative software use this toolbox?
Google Drive, Word, Powerpoint, print applications etc.
Contextual image
The new image of the VCS is one that needed to consider both the client image and historical context.
Client image — how does the client see themselves (self image)? How do they want to be seen (projected image/project vision)? How do I see the VCS and does my image align with theirs (subjective vs objective image and battling against my own ego/vision for the project)?
Historical and material context is the driver — are my design decisions superficial or rooted in context? Real-world environments, colours, textures, feelings, associations.
Word and image first
Users of the site should have room to explore the historic and ongoing conversations between word and image. The identity must enhance this encounter by falling back and allowing the artwork and commentary to lead.
Identity building
Colour discovery
The colour palette was informed by a visit to St Bartholomew’s Church, Brighton. Having this direct material experience of the building and contents ensured non-arbitrary choices about colour and tone.
- Bible cover and internal pages directed the top-level identity for logo and text colours
- Gold page gilding on the edge of pages translating as a gradient value for button states on the site
- Green, blue, red of church interior fabrics and surface used for call to actions — the palette can extend from here to cover the full-range of liturgical colours for seasonal representation (a forward-thinking consideration)
Typography: Spectral
The type family chosen for the logo/top-level identity, headings and Biblical passage text is a Google Fonts serif called Spectral. It was chosen for the following reasons,
- Developed with digital reading environments in mind
- 7 weights and parametric/responsive characters
- Low stroke contrast (difference between thick and thin strokes) for greater readability at small sizes
- Modern and distinctive take on the serif — the interesting letterforms are revealed when the letters are larger such as the VCS logo and headlines
- Bible-esque — distinguishes the Bible passages from other content
Typography: Source® Sans Pro
The secondary type family is called Source® Sans Pro. It‘s Adobe’s first open source typeface family. It is a sans-serif typeface intended to work well in user interfaces and complements Spectral well due to a similar x-height and letterform shapes. It is used for main body copy, theological commentary, call to action buttons, links and artist captions.
Typographic modular scale
By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers
The perfect fourth
Base rem 18px
Multiplier 1.333
The perfect fourth was selected for the gradual increase from the base upwards, offering a harmonious typographic hierarchy. The Golden ratio was the obvious choice due to its divine proportion, however the step up between headings was too great in application.
Gridlover: tool used for the modular scale.
Logo
With both digital and print in mind from the beginning, the logo was created by considering the online and offline applications for its future use.
- VCS simple — cover pages for slide decks, leading promotional material
- VCS stacked lockup —main logo
- VCS inline — reading in a single line when more of the vertical page is desired (eg. website)
- URL logo — how it reads as a URL for marketing purposes, drawing people to the site
Placement: the holy number seven
The central placement of the logo for horizontal and vertical page orientations is worked out by dividing the page into seven.
Disclaimer: I had to break this rule, it doesn’t work for everything 😱
Icons
A custom set of icons was created for the UI.
Client
Involving the client in Sprint 0 enabled us to communicate the importance and value of identity early on. Walking through the process together established mutual trust and made everyone feel like they were part of identity building. We were all on the same page.
Rationale
Having a strong rationale for design choices made the sign-off process much easier and proved to the client that they could trust our next decision. This is a rock-solid foundation for a successful working relationship and project.
