Skip links

Innovation for Inclusion

Every year, De La Salle-College of Saint Benilde’s summary of achievements and milestones in the past academic years is reflected in an annual report. The theme for 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

ABOUT THE PROJECT

To be transparent and inform the community, the college always publishes the yearly achievements through a website and a book. Since Benilde always encourages collaboration within the school, they invite students to participate in making the report. For this year, I was invited to be part of the website, while also helping the print team. Our professors mentored us throughout the process.

DESIGN & THEME

Initially, after the first meeting, our mentors agreed that the visuals should be equivalent between the two mediums. We presented three designs to the president based on the theme. Alli was assigned for the print version and did two studies. For the third study, I helped and did one 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 innovation and inclusion. We had our design theme and cover.

DESIGN FOR PRINT

Since the annual report is tedious, we recruited more additional members for the team. We had a central design guidelines 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 also 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.

DESIGN FOR WEB

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 just did the design based on this year’s theme and used placeholders for the image and content. I had three attempts. In the first and third studies, I did a text-heavy layout content. The chosen design is the second one since it highlights images. The president wants people to be aware of what happened in the college through the photos.

On the website, the challenge is to incorporate the designs of the print version since it is very 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 even before the content arrived. In this way, I am just going to replace the placeholders. Although after a few revisions, I restarted the whole process to match the website to the printed version. Thus, a new study was born. It incorporates the colors and typography of the print version. I even edited the photos to match the colors. In the first meeting, they suggested having a lot of interaction. The best way I figure to do this is to have an animation for the graphics. I did a lot of test layouts for sections to see which are the most effective, especially in the statistics part.

For the home page, the first section shows the president’s message of the year 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 graphical elements will one-by-one enter 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. For the milestones page, I used eight tabs to separate content: seven for the Benilde schools and one for others. 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. We were successful in bringing the theme to life. You can view the full website by clicking the link below.

LAUNCH WEBSITE
Explore Work
Return to top of page