I’ve been designing and creating Mobile-First responsive websites using HTML5, CSS3, Bootstrap, JavaScript and jQuery for almost a year now and have recently started a 16-week front-end development program. Here I’ll be posting my progress towards the following 16 weeks. You can check out my work on my personal website. Hit me up for full-time or freelance work, collaborations, or to say hello 🙂.
Project #1 — City College of San Francisco Website Redesign
Overview
Having attended City College of San Francisco (CCSF) and seen the same website for long time — outdated, crowded, and without a clear message, it felt about time to redesign and recreate it from scratch. Some goals during this project were to create a modern look and feel site with a concise message and clear guide and directions for visitors such as future students as well as alumnus.
Technology Used
HTML5, CSS3, Bootstrap, Sketch
Problems
- Outdated — website feels and looks it was made in the early 2000s, built purely with HTML and little design and message direction
- Crowded — too many features, images and videos, and call-to-actions making it difficult to navigate and find important information
- Message — there is a lack of clear and strong message to the audience: future and current students
Process / Challenges
There were three (3) main challenges I wanted to focus and emphasize during the reconstruction process of the project: create a modern — 21st century website, develop a clean and clear call-to-action — cutting most of the unnecessary information and messages, and build a strong site from the design and web responsiveness point of view.
Research included competitor colleges as well as some of the best universities around the world which allowed me to understand better the messages, design direction, and web creation I wanted to follow and build in the new website.
Wireframe + Mock ups
Colors
Gray #e1e1e0 | Black #211614 | Yellow #f5a310 | White #ffffff
Result
The final project has a new navigation bar with a clear direction of the most important features for visitors: about, academics, students, staff, application, MyCCSF (student’s login), and search. It delivers consistent look and feel with branded colors red, yellow, and black; the new front page site has a high resolution picture of one of the CCSF’s buildings and three clear call-to-actions with clean messages/information.
Created from the point of view of an outsider but with a thought of an insider, I’ve created a call-to-action that targets future undecided students to schedule an appointment of chat with a counselor to understand better the college’s programs, staff, student’s life, and college transfer.
What’s more, CCSF is a college with outspoken students, therefore, the creation of a CCSF News and Get Involved section for up-to-date information related to its campuses and events. Finally, a clear section regarding registration, tuition and fees, as well as a contact us form have been created for future and current students as well as alumnus’ questions.
New vs Old
Richard Chan 