Responses by the Toormix team

Background: Hospital Clínic de Barcelona wanted to publish its 2018 annual report on a digital platform to have it be seen by everyone—and have it be more visual and attractive to read. We developed the project to enhance digital content while simultaneously making it more accessible, complete and visual: a functional website conceived with data, milestones, news and other information about the hospital.

Design core: The illustrations and animations that complement the content. Our favorite design details are how the final layout responds to the UX wireframing and how interactive the website is for users.

Challenges: A brief that takes an annual report and makes it into a 100-percent interactive digital project was a first for us. We settled on a simple but accessible site with a one-page format organized by themes and concepts.

Navigation structure: Content is classified in order to organize it in a thematic way and to structure the website’s modular system. We attached great importance to developing interactive content that makes navigation easier for users, and we got that thanks to the data animations and the illustrated content.

Technology: The site runs on WordPress with mostly custom programming in PHP, HTML5, CSS3 and JavaScript. We used external libraries to create some specific things: We used Lottie for the animated elements to render native animations made with Adobe After Effects. For the sliders, we used Swiper. For the animation of the numbers, we used CountUp.js. There is also a grid that utilizes David DeSandro’s Masonry. We also used SketchUp to design the wireframing and the final layout.