On the Wall

On the Wall Result

Categories: Content Strategy, UX & UI, Web Development, AMP
View: Website, On the Wall - Web Style Guide

Intro:

On the Wall is a collection of VFS Digital Design student’s artwork. These artwork were submitted and voted on by the students. The goal of this website was to engage students to share with their family, friends, peers, and the industry what they can create.

Process:

I looked at possible solutions to update the original user interface to be responsive and lightweight, as there was many images for the site. I used Material Design Lite at first to do a working prototype but found the framework couldn’t handle loading many images on my testing server; It worked well on the desktop but not mobile. When the Google AMP project was released, it became myanswer to faster image loading on smaller screens.

Artwork Gallery
Popup Overlay

Previous interface’s thumbnail gallery - Artwork Gallery / Popup Overlay

mdl-proto1-desktop
mdl-proto1-mobile

Initial Material Design code prototype

I wrote the HTML markup according to AMP, embedded necessary CSS in the head tag of each page, experimented on how the mobile menu will look, and tested the menu animation. Throughout the project, I performed changes to layout according to the feedback from my team; The feedback was to tighten the spacing of each artwork, and create a different type style for the name of the artwork and the author.

Prototype Menu
Final Menu

Mobile menu’s initial look and final look - Prototype Menu / Final Menu

The social media strategy included was to blog on the community blog – OOMPH.