Disability Innovation Institute

Disability Innovation Institute

Drupal 8 | Bootstrap 4

Overview

The Disability Innovation Institute at UNSW Sydney is a world-first initiative, harnessing interdisciplinary research with people with disability to seek innovative solutions.

Context & Challenge

The main challenge of this project was to apply the technology for screen readers to the website, because it was the website for disability innovation, I had to build the website in a way that was accessible for everyone.

Process & Insight

The process required more usability study than other projects because of its complexity related to the inclusion of technologies that could generate the proper code without compromising the appearance.

UI & UX

Regarding the UX, I had the inspiration in clean and sleek pages, big readable texts and colors that generate a good contrast for visually impaired people.

graphic design

The graphic design of the footer and header are decided by the branding guidelines of UNSW.
The colors selected for this website were pastel and clear for the backgrounds and dark for the fonts to improve readability as mentioned before.

Web Development

I developed the theme using Drupal 8 and responsive CSS based on the framework Bootstrap 4. The animations and interactions were built using jQuery and everything was built following the W3C and the WCAG standars to optimize the SEO and create a easy to use interface.

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

SOMMET

It is a sans-serif with a high-tech web 2.0 feel. The typeface family is a powerful and sharp design that is highly legible onscreen even at small sizes. Sommet features a tall x-height, and its letterforms are compressed, perfect for when layout space is at a premium. Updated in early 2010, the Sommet family now includes six weights and italics for plenty of design options and is suitable for body copy and display text.

Color Palette

The colour palette is selected from the branding guidelines and adding a dark blu to the mix to give a more royal look and feel.
  • #01135d
  • #ffe600
  • #0b5d9d
  • #f0f0f0
  • #283d58

Results