New Website Landing Page

CG@Penn Website

Web Design

Adobe XD, HTML, CSS, Javascript, Bootstrap

During summer 2019, I was given the task of redesigning the offical website for the Computer Graphics Department at UPenn. After talking to the head professor of the department, I learned that the old website is outdated and disorganized. Together, we identified several problems, such as a pixelated logo, superfluous pages, low readability, and an unprofessional look--one that does not highlight the potential of Penn’s CG department.

I began with selecting a color scheme and font, and creating wireframes. Although outdated, the previous webpage uses playful pops of blue in its menu and an image background, different from other Penn academic websites. I decided to keep the playfulness through a light hearted color palette as well and a fun font. I also want the student work to be at the forefront, so I decided to compile a head video to display on the landing page, and to display department work in the background of every page. Then, with the help of another CG student, Rachel Gu, I moved onto implementing the website using HTML, CSS, Javascript and Bootstrap.
Original Website

Design Process
CG@Penn Website

Notes about old website,
ideas for change

Experiments with color palettes and fonts

Designs on Adobe XD

Final Implementation I
Display on Large Screens

Final Implementation II
Display on Mobile

As I moved the website onto mobile, I wanted to ensure the display still clearly imparts information. One of the challenges was adapting the original menu to the phone by creating a drop-down hamburger menu. This was coded through javascript.

Scroll-through of Website
Original Website
Re-designed Website

Reshu Catherine Liang