All Saints Anglican Cathedral Web Design

Nathan Labrecque Creative Web Icon Arrow

Project Description

This project involved the full redesign of the website for All Saints Anglican Cathedral in Edmonton. Their old site was cluttered and designed as more of a blog-style site, which made things a bit difficult to find and navigate through. I was tasked with going through it with a fine-toothed comb and figuring out a way to organize and layout the substantial amount of pre-existing content in a way that both looks clean & modern and is intuitive to navigate.

After a few design meetings with the client it was clear that they wanted the bulk of the content broken up into 3 main categories, "Worship", "Learn", and "Serve". You will see these displayed prominently on the homepage to easily access each section. The colour red was also found to be an important aesthetic symbol for the church and their beliefs, so the logo and highlight colours on the site were changed to reflect this.

The design and functionality take full advantage of the Wordpress CMS and includes features such as a dynamic news feed & events calendar, fixed top navigation bar, and Google Map integration.

Tools Used

Illustrator Icon Photoshop Icon Wordpress Icon HTML5 Icon CSS3 Icon

There's No Progress Without Process

Nathan Labrecque Creative Process Image
This wireframe represents an initial layout idea for the homepage. The 3 main categories are still displayed in a prominent position, with an added "Ministries" section at the bottom.
Nathan Labrecque Creative Process Image
Here is the same Homepage layout transformed into a full colour mockup. Experimented with a darker blue as an additional highlight colour, but it didn't seem to pop as much as the yellow used in the final design.
Nathan Labrecque Creative Process Image
This is another preliminary wireframe layout for the Homepage. Tried out a fixed left-side navigation bar for this one which can be a bit of an unconventional but popular option.
Nathan Labrecque Creative Process Image
The overall look and feel of this homepage mockup ended up being very close to the final product, as well as the layout with the exception of the left-side navigation menu.
Prev Button Next Button