[button color=orange url=http://humbergdpw.com]Launch HumberGDPW.com[/button]

I recently developed a newly designed website for Humber College’s Graphic Design for Print & Web (GDPW) program. The purpose of the new website is to showcase current and past student’s work–along with–providing information for future students and employers. Usability and navigation were some of the key components of making this website functional and easy to use. 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. The applications and languages I used to design and develop the site were: Adobe Illustrator, Adobe Photoshop , 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 and the creation of social networks for the HumberGDPW program. Current students and alumni can keep in touch with each other through HumberGDPW’s Twitter and Facebook social networks, and the GDPW’s blog. The blog is 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. In addition to providing information to potential applicants and current students of the GDPW program, the website provides Alumni with an outlet to stay in contact with their peers and faculty throughout their careers. A ‘Showcase’ section on the blog will carry student success stories and host achievements of their current students and faculty throughout the year. Students and applicants can also follow HumberGDPW on Twitter and Facebook to stay connected and keep up-to-date with the program and their course offerings.

I have attached a few screenshots of the websites various device views below. I hope you like the new look and feel of the website.

Please feel free to share this project if you like it.

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.