The ARC CEPAR

The ARC CEPAR

Drupal 8 | Bootstrap 3

Overview

The Australian Research Council (ARC) Centre of Excellence in Population Ageing Research is a unique collaboration between academia, government and industry, committed to delivering solutions to one of the major economic and social challenges of the 21st century.

 

Context & Challenge

This website needed a complete theme creation and a Drupal 8 Build.

That involved:

Users analysis
Branding guidelines study
Content strategy
Graphic design
Theme development

Process & Insight

The CEPAR is a center for ageing research and it needed a platform where to show their findings and related information.
So the website objective was show the services, news and events of the center.

UI & UX

I started by focusing on figuring out layout and content placement, and solving navigation and functionality problems in a format that is easy to adjust.

graphic design

The design I did for them was important because it impacts how their audience perceives their brand.

Web Development

I developed the theme using responsive CSS based on the framework Bootstrap 4 and jQuery for the interactions.

Solution

The result was a well Designed and Functional Website.

Easy to Use.
Optimized for Mobile.
Fresh, Quality Content.
Readily accessible contact and location.
Clear calls to action.
Optimized for Search and the Social Web.
YOU CAN SCROLL ME!

Typography

Arial

Arial is an extremely versatile family of typefaces which can be used with equal success for text setting in reports, presentations, magazines etc., and for display use in newspapers, advertising and promotions.

I used this typeface cause it is web safe and loads faster given that is installed in the computers by default. UX studies have shown that with every 100ms delay to their website load time, companies lose 1% in sales. So using this font we make sure that the website loads faster.

Color Palette

The colour palette is selected from the branding guidelines.

The red is used all across the website as background, titles, icons and buttons.
The dark gray is used on the navigation bar.
The light gray is used in backgrounds to denote the content separation.
The green is used in the calls to action.
  • #d20035
  • #231f20
  • #d9d9d9
  • #00aab0

Results