The Applied Information Technology website was a project I worked on while a student at George Mason. It originally started as a class assignment, but received enough attention from staff and faculty to be commissioned for the department’s website.

Though I am proud of my original design, I shriek at what it has become. At the time I thought this was fantastic as the design and overall layout was 90% complete. All that was left was to implement a content management system. Easy right? Well… not quiet.

One major issue I had with this project which led to my personal dissatisfaction, was not knowing exactly what needed to be on the website. With the faculty tweaking, and pulling the site different ways, the overall integrity of design was compromised. To add to my stress, I was also dealing with software (Drupal & Gallery2) with which I was still unfamiliar.

Since I currently have some free time, I would like to revisit this project and see how I would improve upon it. Now that I have an idea of what various faculty members wanted from the site, it will be much easier to design. First, lets take a look at the existing site. The overall design is broken and the color pallet is too light to be academic. There is an event section with no events listed and excessive navigational areas. This can be exceptionally confusing for new users.

Furthermore, the News and Announcements area lacks content. When I originally designed this site the News area was generated as a blog. Though the complete article doesn’t have to be listed, I feel the reader should be entitled to some kind of blurb. This is to improve user experience and insure that the reader is not taking on a wild goose chase.

Concept Sketches

When tackling a project like this I always like to start with pencil and paper. It’s one of the fastest and easiest ways to quickly record ones thoughts. To begin, I jog down all the important elements of the page. For this project it was the logo, main navigation, side navigation, gallery, news, upcoming events, user login, a banner image, search bar, newsfeed, Mason logo and a footer. Once determining the page element I start sketching a layout. This could be considered my wireframe stage as the focus is on composition and placement.

Advanced Wireframe

After deciding on the best possible composition, I make my way over to Illustrator and begin on what I like to call an advanced wireframe. While details of images and colors are left out, the focus is placed on typography, hierarchy and placement. Making improvements to the navigation, I removed redundant links and compacted them. For the navigational links that contain sub links, a Jquery slider will be implemented to keep everything nice and tidy. Moving on to the News and Announcements area I composed the hierarchy of section. Once most of the advanced wireframe has been finished I move on to the finalized Comprehensive.

Finalized Comprehensive

In this stage of the design process, I started to explore different color combinations and contrasts. Unlike the current AIT website, I wanted this design to have an academic overtone. To evoke this kind of emotion, I used a darker color pallet while keeping consistent with the school colors. The end result is a design that is much more organized and unified.