Global Catholic Network is a Roman Catholic website that is financed in part by the papacy. It’s aim is to connect with Catholics worldwide and become a focal point for spiritual knowledge and discussion.

aleteia cover 1
the brief

Design and build a website for an international Catholic organisation

What do you want your new website to do?

  • Have a new, cleaner website design with solid navigation based on “The Digital Cathedral”
  • A better content management system (WordPress)
  • An up-to-date design that we can grow with and adapt to new needs
  • A new mobile site, as the current site is not mobile-friendly
  • Multi-lingual capabilities in 6 languages including right-to-left language (Arabic)
  • A website that can support ad revenue
the solution

Building the ‘Digital Cathedral’

digital cathedral 1

The layout of the site is designed to reflect the design of a cathedral

The client wanted as much as possible to bring the experience of being in a cathedral to the website. This was done by looking at the parts of a traditional cathedral and arranging them hierarchically on the homepage.

The user moves through different areas as they scroll, experiencing differing ‘micro-designs’ as they go down the page. Each area has a distinct experience, content, and layout.

From the brief…

“The lead story is featured in the Hero. Other top stories are featured in a Vertical Listing, with the balance of stories in a 3 column article grid. Other content areas feature the Daily Gospel, Video, Trending Stories (by Section), and Spirit Advisor. Petitions, Fundraising and other areas will be added later.

The Vertical and Horizontal scrolling reflects the cross shape of a Cathedral.”

homepage mid2

Multilingual & International

Hello World; Bonjour le monde; Ciao mondo; Hola Mundo; Olá Mundo; مرحبا بالعالم

Religion and spirituality are global in scope. reflects the global scope of the Roman Catholic faith, and is delivered in 6 languages, including right-to-left Arabic.

language dropdown

Modern, organised, maintainable code structure

I coded the site directly in the developing WordPress project using for a grid structure, HTML5 Boilerplate, an initial Underscore theme, SASS, Grunt, and GIT.

aleteia sass directory structure
aleteia code

UX design

Some simple workflows were created to navigate the large blog sections

aleteia balsamiq mockup 1 copy

Mobile first and always

Aleteia was greatly in need of a new mobile website, as the existing one did not have a usable mobile view.

new mobile aleteia

Custom icon font assets

In a multi-device and multi-OS world, the cleanest way to guarantee sharp logos, icons and graphics is to use an icon font.

summing it up

A website for the 1 billion+ Catholics.

“It was a pleasure to work with Mike. He’s a master of his craft..”

Angelo Matera – Consultant & Project Leader – Aleteia

Let’s talk

    Start typing and press Enter to search