News

Site of the week: Tomas Bata University

It’s no mystery this university microsite has all the answers with an educated use of current-gen CSS

TomasBata

It’s no mystery this university microsite has all the answers with an educated use of current-gen CSS

URL: www.budoucnost.utb.cz/en/ | DESIGNER: http://madeo.cz

When it comes to choosing an education, some of us are less decisive. Which university to choose is one thing, but settling on a course is another given the amount of options. This microsite for Tomas Bata University in Zlín, Czech Republic, puts an innovative twist on the enrolment process.

Visitors and prospective students are asked a series of seven questions, dividing answers between two options and filtering candidates into personality types. Answers are arranged around a rotating PNG element that is animated simply with CSS3 transforms, underlining a general theme for astrological mysticism. By attaching the rotatable.js extension for jQuery, an arrow pointer div can be dragged around the circular device before triggering a neat transition to the next prompt.

The design is very clean and slick, avoiding additional clutter with superfluous text or an abundance of colour. A predictably dark and black spacey background remains unbroken but for an array of subtle star-like dots fizzing out from the page centre.

Achieved again with staggered CSS3 transitions and three stacked transparent PNG backgrounds, Czech designers Madeo Interactive have pushed fairly simple front-end tricks to the limit. Boasting a team comprising TBU graduates and working closely with the university’s Marketing and Communications faculty, Madeo has since seen the site scoop CSS Design Awards internationally. Lesson being: enrol quick if you fancy studying web design at TBU!

tomas02

A series of cryptic questions determines your outlook and personality to recommend all the suitable faculties available

tomas03

Answer all seven questions to get a final verdict on your candidacy as well as some humorous words of encouragement

×