Talis.com

Author: Andy Hartwell

Talis.com website image

Talis are a Birmingham based company who create software for higher education and libraries with the aim of making teaching and learning easier. We’ve been working with Talis for a few years now, designing and developing some of their various websites, but earlier this year we were approached to give their online presence a reboot. Having recently rebranded, they were keen to have a new website which not only merged a few existing sites into one, but also embraced the new brand style. The fully responsive Talis.com is our reaction to that brief.

Design

Working closely with their UX designer, we created a minimal, but characterful visual style which works in harmony with the new logo, their current and future products and the team themselves.

Early on, we took the decision to create a homepage that gave an overview of Talis – their vision and values – before diving into the products they have to offer, similar to a conventional ‘about’ page. It gives an insight into the larger goal of Talis as a company, through the brand promise, the customers who trust them, and the grid of team members (arranged alphabetically, not hierarchical).

We took a special amount of care with the two product pages; Reading lists and Digitised content, which both needed to accurately and simply communicate what they did straight away. Taking a cascading content approach, we created animated illustrations to accompany a brief intro, followed by content which gets increasingly more detailed, so as to entice users down the page to learn more. For these we created a range of simplified illustrations to represent how the products worked, and icons for the features and benefits (many used from the excellent free resource iconmonstr.com).

Digitised content needed to communicate the ease of taking multiple types of content, and digitising them into a consistent, and protected form. Reading lists‘s goal was to show lists of multiple types of content being accessible over multiple devices, all in sync. We created both these animations using CSS, with static illustrations for mobile as a fallback due to the performance impact on the page.

Development

The site is fully responsive, and optimised for high res (or retina) screens by using SVGs where possible (with PNG fallbacks), and otherwise double res images. This was so everything looked crisp on high-res mobile screens, but also in a few years time when similarly high-res screens/displays are more mainstream on laptops and desktops. While initially brainstorming and planning the site, we found a few appropriates uses for loading in content after the user has scrolled into view

Talis.com also serves as a hub for students wanting to log in to their respective institutions Reading lists/Digitised content installation. We created a login modal window which uses JSON to check if one, or both of the products is used by the selected institution, and then changing the button hrefs to link to the right URL accordingly.

Screen Shot 2014-08-06 at 11.37.04 Screen Shot 2014-08-06 at 11.37.28

Take a look through the site and let us know what you think. It’ll likely all evolve and change over the months to come, so take a look now and visit back at a later date.

Go to Talis.com