preloading all assets, please wait

Newcastle Creative Industries Responsive Website Design/Development Show Menu
Back To Portfolio Show Overlay
home screen full display home screen content pages mobile views tablet views

Newcastle Creative Industries

This was the first major academic design project I worked on, and I consider it one of the most important, in the context of my academic development.

Before I started the Digital Media course, much of the work I was producing was of a development-centric nature. As a result, I felt that I was lacking in design skills, and had no confidence in handling a design project. This project gave me an opportunity to work on a design-centric brief, and to exercise the skills that were laying dormant for a number of years prior to my application for this course.

The brief itself was an interesting one: design a site that advertises the Creative Industries and provides a platform to inform, advise and assist potentially new students in finding the right course for them. Unlike the regular Newcastle College site, NCI is aimed at those who may be interested in creative subjects, and should have a more creative angle with the design.

I designed NCI to act as a portal, allowing users to search and explore the site. The search system would be the main focal point of the site, much like Google and Bing displays their search feature, and the advanced search would use a “natural language filtering” system that would ask the user questions and direct them to specific content based on the answers provided. The reasoning being that a visitor may not necessarily know what they’re looking for, so the best way to assist is to ask questions and suggest answers rather than forcing the user to filter results manually. This would give the design a more user-centered focus.

The design of the site was created in Photoshop, and I only used visual styles that could be recreated in CSS with little problems, such as the skewed page curl shadows. I also looked to create the design using an underlying baseline grid, to create structure and organisation, as I was planning to code the site using a responsive framework. As a result, the design itself was recreated in markup with a minimum of fuss.

Development of the site was done using Skeleton, a simple responsive framework. This was the first time I had thought about design a responsive website, let alone developing one, so it was a great learning experience. As I needed to learn how to use Skeleton, I had to conduct a lot of research into responsive web design theories, which gave me a good platform to go on and produce the project in code. It also taught me the importance of organisation within the design and development of a project.

Close Overlay