The Me Website - Task 2

Introduction

Creation of my E-portfolio or as I like to call it "The Me Website", has been a challenging task as well as the second piece of work in the series. My E-portfolio was by far the largest of all the assignments, but also inspired the most creativity. The framework, created by me, is based on HTML5 for structure and PHP for dynamic content.


Work

Even though the original design has changed many times, I decided to finally work with the 1080 Grid System proposed by Justin Cates. The 1080 Grid System defines the width of a page using a number with a high amount of factions. This concept is derived from The 960 Grid System, however the difference is that the 1080 Grid System takes larger screens into account. The reasoning behind these grids is to allow users greater structure when designing column based layouts as well as caring for most screen sizes.

Design

My first idea was to cram as much content as possible in a single space, with everything accessible from the home page. I also wanted a large header and the entire page following a blue color scheme. Excluding the header I want to three major blocks; news, main content and a sidebar.

Original design created in Adobe Photoshop
Original design created in Adobe Photoshop

Although I was pleased with the original design, I wanted to reduce the amount of content on each page. With the second mockup the plan was to reduce amount of graphics, as well as space out some of the content.

Second mockup created in Adobe Photoshop, illustrating a cleaner layout
Second mockup created in Adobe Photoshop, illustrating a cleaner layout

Although the above website was created in code, it has changed a lot. It became the foundation of the website you see today. You may notice in the final version that I swapped to a green color scheme, as well as moving a lot of content around. The reason for the color swap is to accomidate for future websites linked to the so called "Swift" network. Each website can easily be distinguished by their color and blue was chosen for the "Swift Schedule" site. All code is written by me except for plugins and other creative commons licensed work. However most are heavily derived, the exeption being the plugins. References and inspirations can be found at the end of this article.


Resources

Inspiration

Plugins