Project: Humber College, Graphic Design for Print and Web Website + Social Media

The goal of this project was to create a space to showcase current and past student’s work–along with–providing  a hub of information for future students, applicants, and employers who were interested in the Graphic Design for Print and Web (GDPW) 22 week program at Humber College. When I became the program lead for this program, I took it upon myself to design and develop an online presence for the program and our students. Usability and navigation were some of the key components of making this website functional and easy for users to acquire the information they required. To accomplish this, the site takes on a responsive design approach to maximize the users experience on their mobile devices. The site was built using HTML5, CSS and jQuery for simple animations. A slide-panel menu for the responsive layout was added for the user to have access to the site’s navigation at any time. The website also has a database system, which enables an admin to edit and upload new content for future graduates; such as portfolio URL’s and contact information. The applications and languages I used to design and develop the site were: Adobe Illustrator, Adobe Photoshop, HTML5, CSS, PHP, jQuery and MySQL.

To maximize the website’s social reach to it’s users, this project also included the development of a WordPress content management system (CMS)  for the GDPW blog and the creation of social networks for the HumberGDPW program. Current students and alumni would now be able to keep in touch with their peer, faculty, and alumni on HumberGDPW’s Twitter, Facebook, and Instagram feeds; in addition to the new GDPW’s blog. The blog was created as an extension of the main website, which allows students to get access to the GDPW program’s news & events, job board postings and various information about the program’s developments and partnerships. A ‘Showcase’ section on the blog presents student success stories and hosts achievements of their current students and faculty throughout the years.

Design:

The structure of the website is using a fluid layout, which adapts to the users screen size and resolution. The site is also Retina display enabled for users with HD screens. The fixed navigation allows the user to have quick navigational access.

Responsive Navigation:

The responsive version includes a slide-drawer menu using jQuery, for the navigation. The slide-drawer menu was implemented to maximize the users screen visibility and gain access to the navigation menu at any time when viewing the site.

WordPress Blog:

The blog layout and design focusses on visual elements and the content’s subject. To do this, the blog was designed using a single column layout with full-width images and article titles with a thin, sans serif typeface at a large font size.

Social Media:

I manage and create all the content and graphics for the HumberGDPW social platforms, along with carrying out social media ad campaigns and tracking analytics. Follow HumberGDPW on Twitter, Facebook, and Instagram to stay connected and keep up-to-date with the program and their course offerings.

Below are a few screenshots of the websites various device views below. Feel free to leave a comment below. I’d love to hear your feedback.

Client

Humber College, Graphic Design for Print and Web (22 week) Program.

Project

Branding, Corporate Identity, Responsive Website, and WordPress Blog

Software/Skills

Branding, Web Design, UI/UX, HTML, CSS, WordPress, Content writing, Social Media Marketing

View Project