For my final year project I decided to create a e-learning platform for people of all types (no matter their disabilities or other circumstances) to be able to learn the fundamentals of the Internet and the various computer applications and websites we use in our day to day lives.

The site features many different bits of functionality including: a profile system, a completely custom forum and tagging system and a projects library.

The brief

As this was my Final Year Project we weren’t given a specific brief, instead we were given creative freedom to create something that we would present and pitch to a panel of staff acting as professionals within the Industry. The way I envisioned the module was that I was created a startup company and I was pitching Modernize to these professionals, perhaps for angel investments etc.

Planning & Research

After coming up with a project in mind I began to start noting down some ideas, both on paper and on Evernote. These were badic things about the project such as what functionality it would have, who it would appeal to and what it would aspire to achieve. Then, while fleshing out my ideas, I began to create a more physical map of these notes.

The mind map I created while planning out Modernize

Design

Once the planning and research had been conducted I went onto creating the assets and layout of my application. To do this correctly I needed to go through each stage of the design process with a fine tooth pick and figure out exactly what my application needed and perhaps more importantly, what it didn’t.

Sketches

The first order of business what to get my ideas for the project out onto paper, to do this I wiped out my sketchpad and started to create the different layouts and components that Modernize could utilise.

Initial sketches from the design process of Modernize

Initial branding & asset work

Next came the part of style guides. Once I had a firm grasp of the basic layout, structure and style that I was going for, I was able to transition into Digital assets by designing the building blocks in the form of style tiles.

The initial style tile for the colour scheme and typography

Style tile for the basic components that Modernize would use throughout

Testing the accessibility of my colour scheme for the deprived

Once these baseline styles were put in place I was able to create the full layouts, partially within Adobe Photoshop and then tweaked and refined whilst in the code.