Alyssa Maac


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


Group Project


UI Design,Art Direction



Mockup and Whole View of Diverse-City Website

About the Project

For our finals project in our web subject, we were grouped to create an advocacy website platform using HTML and CSS. We chose ‘Lookism’ since it is important now more than ever in globalization. Lookism is a prejudicial attitude conferred to people because of their physical appearance (Desir & Tietje, 2005). Each member of the group made their own version of the website but we used the same color, branding, typography.


For my interpretation, I used 5 colors to attempt diversity. Each colors were assigned to sections for a sense of separation. The photos used are of people from different backgrounds and culture. My design elements includes lines to show the “separation” of groups in the society. The two main typography used are ‘Playfair Display’, a serif, and ‘Montserrat’, a sans-serif. Using different fonts, showing the difference between people. For the layout, I did a broken grid to be more dynamic. By coherently working these elements together, it shows that the world will be better with diversity all the same.


When you scroll in the homepage, there are quotes to challenge perception. The very call to action tells a message. A testimonial of different persons. Starting with what people thought of them and then ending with the truth behind their looks. The articles and the stories pages have sample content to about the topic. The articles are for education and the stories are for case studies and testimonials.


The biggest challenge of this was to develop the website. We were only just introduced to CSS back then. But I’ve managed to learn through tutorials. And I also did several revisions after the project. The website is coded in HTML5 and CSS3 with some javascript plug-ins. The website is also fully responsive.

Diverse-City Website on Tablet and Phone

This project was awarded with “Certificate of Awesomeness” and exhibited at the Multimedia Arts Festival 2018 in De La Salle-College of Saint Benilde.