Background: In 2021, UC Berkeley celebrated its 130th anniversary. The university needed a multi-page responsive timeline website that will include pages that show the university's history and its contribution to the field of education since its inception 130 years ago.
Design Problem: A website needed to be developed that presented a timeline spanning the 130 years of the university's contribution to education. The timeline needed to be broken down into 13 sections—each section is spanning a decade of the university's history. I was given access to branding guidelines to be followed while choosing the colors, graphics, images, and videos. These images highlighted the important events or achievements from each decade, and they were to be incorporated into the website. Also, the relevant information about the pictures had to be added. Several photos, being old, needed retouching and further processing in photoshop. 
Design Process: Initial brainstorming of the website included the creation of wireframes. I sketched two versions of the layout, each for Homepage, decade page, and 2021 page. After finalizing one of the two layouts, I used Adobe XD to create low-fidelity designs keeping in mind the twelve-column grid system and responsiveness. The next step was to create high-fidelity designs and build a prototype. One of the challenges was incorporating the 130-year logo in the navigation bar. It was a vertical logo, and the logo's content was not readable when sized down and placed in the navigation bar. So I put it on the hero image so that it looks as if the light is originating from the logo, which resonates with its tagline. All elements are responsive and easily visible to make it user-friendly and accessible.

Responsive Prototype
Responsive Drop-Down Menu


Timeline Page

2021 Page
Design Solution: The website was designed keeping in mind simplicity, clarity, and a smooth user experience. The layout is clean and minimal, which aligns with the style of UC Berkeley and UC Berkeley Extension websites. In terms of the breakdown of the structure, the website contains a total of 9 pages– 1 Homepage, 1 page dedicated to the current year 2021, and 7 pages for two decades each. Iconic and historical images are interspersed with facts about important events in the university's history on each page. Final coding of the website was done using HTML and CSS, keeping in mind the response and dynamic nature of the website.
Software: HTML, CSS, JavaScript, Adobe XD, VSCode, GitHUb
Copyright © 2021 UC Regents; all rights reserved

You may also like

Back to Top