Responsive website design | TYPO3, Axure RP 8, Sass

During the last semester at uni we had one final project – to create websites for two research projects of the University of Applied Sciences Upper Austria. The requirement for both websites has been to use the CMS TYPO3, which would help the editors to manage and maintain their content.

During this project my role has been the team lead of the design / UI / front-end department. We started by sketching rough mockups with pen & paper and later transferred them into digital form using the prototyping software Axure RP 8.

 Mockup using Axure RP 8

The next step included starting to transfer the Axure mockups into static HTML templates using Bootstrap and Sass. After various feedback loops and satisfied customers we finally started with incorporating these HTML templates into the TYPO3 file system (using fluid templates). The two websites used the same basic design guidelines but with different colour themes (this is were SASS proves to be very helpful) to differentiate the projects.

 

Final results (here and here)

Technologies used:

  • HTML5
  • CSS3
  • Javascript
  • jQuery
  • Bootstrap
  • Sass
  • Axure RP 8
  • Github
  • PhpStorm