The Door Youth Centre: Concept Work

The Door Youth Centre is a non-profit that offers Ottawa's youth a safe, welcoming, and encouraging place to go after school. This is a concept website designed and built statically with the intention of being migrated to Wordpress.

HTML5 / CSS3 / jQuery / Photoshop

View the concept
The Door Youth Centre

Redesigning

Currently, the Door's site design is non-responsive, with little imagery and a slightly scattered site plan. I reorganized the main components and pages of the website and highlighted the most important elements, such as the Donate button and recent news. I then included a call to action both in the footer and header of every page, added full-width imagery and icons for more visual appeal, and chose fonts, colours, and layouts that I felt matched the organization's desired look and feel.

The Door Mockups

Rebuilding

The Door's current website is entirely static, using images as text and tables for layouts, thereby limiting their design and functionality. I rebuilt it to be responsive, dynamic, and based on current HTML5 standards.

The Door - Responsive Design

Added Features

With the intent of the site being to migrate it to Wordpress, the concept includes a fullwidth slider on the homepage whose images and content would be pulled from the latest or featured news.

A sticky header morphs and expands on scroll to allow the user to quickly navigate the site wherever they go. In the footer is a copy of the top-level navigation along with the corporate menu items such as social media links and a large Donate button. Above the footer, a repeating call to action takes the user to the contact page and encourages them to drop by.

The site features a gallery that pulls from its active Instagram account, ensuring it is consistently and dynamically updated with no extra work on the staff's part. Finally, a carousel slider showcases the Door's partners and sponsors.