Sports UNSW

Sports UNSW

Drupal 8 | Bootstrap 4


The UNSW Sport Strategy was developed between August 2016 and March 2017 and received input from multiple sports stakeholders at UNSW including clubs and societies, senior UNSW staff, partners who deliver sport and recreation services to UNSW students, alumni, external sporting bodies and other universities.

Context & Challenge

The Sports department of UNSW needed more promoting amongst the students of the university.
So the website objective was to promote the activities for the students.

Process & Insight

The whole process required the analysis of the content to be displayed in the website as well of the final users, in this case the students, to generate the best experience.


The user interface was set to divide the content and the right hand navigation in 2 columns (75/25) inside the pages, while on the front page I used 4 columns to show the content in the desktop version.

graphic design

The graphic design of the footer and header are decided by the branding guidelines of UNSW.
El diseño gráfico del pie de página y el encabezado lo deciden las pautas de marca de UNSW.

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.

我使用 Drupal 8 和基于 Bootstrap 4 框架的响应式 CSS 开发了主题。动画和交互是使用 jQuery 构建的,一切都是按照 W3C 和 WCAG 标准构建的,以优化 SEO 并创建易于使用的界面。

Desarrollé el tema usando Drupal 8 y CSS responsive basado en el framework Bootstrap 4. Las animaciones e interacciones fueron construidas usando jQuery y todo fue construido siguiendo los estándares W3C y WCAG para optimizar el SEO y crear una interfaz fácil de usar.


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.



El resultado fue un sitio web bien diseñado y funcional.

Fácil de usar.
Optimizado para dispositivos móviles.
Contenido fresco y de calidad.
Contacto y ubicación fácilmente accesibles.
Llamadas a la acción claras.
Optimizado para búsqueda y la web social.



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.


Es un sans-serif con una sensación web 2.0 de alta tecnología. La familia tipográfica es un diseño potente y nítido que es muy legible en pantalla incluso en tamaños pequeños. Sommet presenta una altura x alta y sus formas de letras están comprimidas, lo que es perfecto para cuando el espacio de diseño es escaso. Actualizada a principios de 2010, la familia Sommet ahora incluye seis pesos y cursiva para una gran cantidad de opciones de diseño y es adecuada para el texto del cuerpo y la pantalla.


它是一种具有高科技 Web 2.0 感觉的无衬线字体。 字体系列是一种强大而锐利的设计,即使在小尺寸下也能在屏幕上清晰易读。 Sommet 具有很高的 x 高度,并且其字体被压缩,非常适合布局空间非常宝贵的情况。 Sommet 系列于 2010 年初更新,现在包括六个粗细和斜体,可提供大量设计选项,适用于正文复制和显示文本。

Color Palette

Besides the UNSW branding colors, the blue was used for the links and some transparent backgrounds to complement the content display.
  • #01135d
  • #ffe600
  • #0b5d9d
  • #4a4a4a