Yong Zeng Personal Website

Front end web development, Javascript

gif scrolling through Yong Zeng's new website

A website redesign for Professor Yong Zeng who had not updated his website’s design since its creation in 1998.

gif scrolling through Yong Zeng's old website

OVERVIEW OF YONG ZENG'S OLD WEBSITE

About the Project

Yong Zeng, my dad, wanted a website redesign for his academic work at his university. Using HTML and CSS, I created a new design with more organization and life without being too flashy or complicated for his tastes. I also wanted to create an easy way for my dad to update the content of his website without my help which I achieved by using Javascript and a content management system.

First handdrawn lo-fi wireframe Final handdrawn lo-fi wireframe Different mockups for different screensizes based on the final wireframe

FIRST WIREFRAME, FINAL WIREFRAME, & FIGMA MOCKUPS

Design Challenges

For his redesign, I wanted to modernize the visuals, create easier navigation, and simplify the content to its essentials.

The website's content is very text heavy with only one image throughout, so I struggled with adding life to the site without using additional images. In the end, I decided to use geometric shapes throughout the website's design to add visual interest which is best seen in the "Selected Publications" section where I placed simple shapes underneath the long list of text.

Screenshot of the Google Spreadsheet used to populate the website's data

GOOGLE SHEETS FOR DATA

Content Management System (CMS)

By using Stein, I was able to turn a Google Sheets into a CMS so my dad could easily update his website in the future without my help. I combined the CMS with Javascript to style the incoming data.

Gif scrolling down the iPad site design Gif scrolling down the iPhone site design

RESPONSIVE DESIGN FOR IPAD & IPHONE SCREENS