Alyssa Maac

Innovation for Inclusion

De La Salle-College of Saint Benilde’s summary of achievements in the past academic years is reflected in an annual report. The theme “Innovation for Inclusion” summarizes the college’s 2017 to 2018 academic year.


De La Salle-College of Saint Benilde


UI Design, Graphic Design, WordPress Development



Mockup of Benilde's Website and Annual Report Book

About the Project

To be transparent and inform the community, the college always publishes its yearly achievements through an annual report. Since the school also encourages collaboration within the faculty and students, they invited us to make the report. For this year, I was part of the website, while also helping the print team. Our professors mentored us throughout the process.


Our mentors agreed that the visuals should be consistent between the website and the book. We presented 3 designs to the president based on the theme. Alli was assigned for the print version and so did 2 studies. I helped and did the third design. In the end, the chosen design interprets the theme as graphical elements that shows innovation and inclusion. The elements such as doors, windows, toggle switch, keyhole, lines, circles, and cross all refer to it. We had our design theme and cover.

Print Version

Since the annual report is tedious, we recruited more additional members for the team. We had a central design guideline to follow for our assigned parts. For the print, I did some of the statistics graphics and layout of other chapters. Once we finished our parts, I was the one who compiled it into one piece. To maintain consistency, I used the same elements, colors, typography, and layout style. Overall, the annual report was more than 300 pages long.

Website Version

Aside from the printed version, I also presented three web designs in the first meeting. Although there was no content and chosen theme yet, I did the design based the theme and used placeholders for the image and content. In the first and third studies, I did a text-heavy layout content. The second design highlights images so it was chosen. The president wants people to be aware of what happened in the college through the photos.


On the website, the challenge is to apply the design elements of the print version since it’s graphical. The content also got delivered very slowly. Luckily, my mentor and I had a plan. Based on my website study, I started to develop it before the content arrived. In this way, I am just going to replace the placeholders. Although, I re-designed the website after the print version’s cover design was chosen. The new study uses the colors and typography of the print. I even edited the photos to match the colors. The board also suggested having interactions on the website. The best way I figured to do this is to have an animation for the graphics. I did a lot of tests to see which are the most effective, especially in the statistics part.

In the landing page, the first section shows the president’s message for the college community. The preceding sections advertises the highlights of the academic year. Meanwhile, the last part presents the statistics of the Benildean population. As the users scroll down the homepage, the animation will trigger on the graphical elements and do a parallax effect. The overall look and feel manifest the innovation.

The other pages also benefit from the same concept. I applied the same animation for the sections using different modules and plug-in. I try to imitate the theme design as much as possible only with varying layouts. In the milestones page, I did a timeline of the events that took place in the year. I used eight tabs to separate content based on the schools of Benilde. It is easier to switch tabs than pages. Each of the steps had a photo with a short story or sentence to describe it.
This project is challenging but rewarding.