Skip links

Diverse-City

An advocacy website project informing the people to challenge the concept of lookism, a discrimination based on looks. The website contains information and some sample articles and stories as well.

FEATURED & AWARDED AT THE MULTIMEDIA ARTS FESTIVAL 2018

DESIGNER

Alyssa Maac

PROJECT TYPE

Web Design
Web Development
Graphic Design

TOOLS USED

HTML5
CSS3
Adobe Illustrator

CONTRIBUTORS

Jennifer Agarpao
Andrea Carreon
Alli Cunanan
Rochelle Mempin

ABOUT THE PROJECT

For our finals school project for our subject in third year, we were grouped and challenged to construct an advocacy website out of HTML and CSS. We chose one of the topics of our team member, lookism, since it is more important now than ever in globalization. Lookism is a prejudicial attitude conferred to people because of their physical appearance. It can most likely happen to anyone at any time and in any place (Desir & Tietje, 2005). Each member of the group made and developed their own version and interpretation of the project but we used the same color, branding, typography. Our of my 3 design studies, my professor and I chose the one that shows “diversity” the most in terms of layout and design.

CONCEPT & DESIGN

For my interpretation of the project, I used 5 colors to showcase the diversity. I assigned the colors to each sections so that there’s a sense of separation. The yellow is the main color, the orange is for the “about”, the red is for the articles and the stories, the blue is used for the newsletter, and the gray is for the accent. For my design elements, I also used lines to show the “separation” of groups in the society. The two main typography used, ‘Playfair Display’, a serif, and ‘Montserrat’, a sans-serif also symbolize the huge difference between people and how it still coherently worked together like people should.

I also allotted a section for a quote to challenge the users when you scroll down in the homepage. I also put some sample content for the articles and the stories to give a preview about the website. The articles are for education and the stories are for case studies and testimonials. For the layout, I did a broken grid to show dynamics like how different we are with each other but still could work in harmony. The biggest challenge of this was to develop the website since I we were only just introduced to CSS back then. But I’ve managed to learn through tutorials and produced this output. The website is coded in HTML5 and CSS3 with some javascript plug-ins for improved functionality.

LAUNCH Website
Explore Work
Return to top of page