Skip links

Innovation for Inclusion

Every year, De La Salle-College of Saint Benilde’s summary of achievements and milestones is reflected in an annual report. The theme for the report from 2017 to 2018 is “Innovation for Inclusion”.

WEB TEAM

Alyssa Maac

Designer, Developer

Mr. Marc Ti

Mentor

PROJECT TYPE

Website
Graphic Design
Illustration

TOOLS USED

Adobe Illustrator
Adobe Photoshop
Adobe Dimension
WordPress

PRINT TEAM

Alli Cunanan
Camille Atienza
Toni Jaladoni
Anna Marie Pili
Camille See

BENILDE TEAM

Br. Dennis Magbanua

President

Ms. Kat Juane
Ms. Sharon Arriola

Advisers

-

Ms. Carrie Franz Sy

Content Source

Benilde Center for Institutional Communications

School Branding

01

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.

02

THE THEME

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.

03

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.

04

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. You can view the full website by clicking the link below.

LAUNCH WEBSITE
Explore Work
Return to top of page