I have been extremely fortunate to have worked for The State News web team, SN Works, for the past year. From the earlier post on The Cavalier Daily redesign I have worked on two major site redesigns, the main and most impressive being this past summer when we redesigned The State News. The site gets about 200,000 views a month and is one of the top rated collegiate websites and newspapers in the nation. When we began the site was a well designed site from 2008 that had gotten a few updates and been fairly well maintained, but when you redesign a site of such stature, it has to be on a huge scale. The main challenge was getting a responsive design that would work all the way from wide computer screens down to smart phone browsing windows. I was made project manager at the beginning of the summer and between myself, Matt Bush, Rod Dennis, and our manager Mike Joseph we entirely rebuilt the site from the ground up using Bootstrap as our responsive framework.
We worked together as a team but the pieces that I worked specifically on were the navigation, footer, sidebar, and multimedia. The “C” of the navigation, sidebar, and footer needed to be fully responsive and at the same time able to let the main content of the specific page take precedence over the pieces that are in the “C.” This was a momentous task for me because it involved working with Twig PHP languages as well as the Bootstrap responsive pieces. I feel very proud though every time I visit the site and know that the first things people see and how they navigate through the site depended on the consistent pieces I created. Secondly, and as you can see in the gallery below, the multimedia page took a full revamp. We went with a darkened background to enhance the media that State News is known for and made it easier to navigate through more pieces. Lastly, on the homepage we utilized another open source program, Isotope, which allowed us to make a very dynamic photo area that was still responsive. Between myself and Mike Joseph coding away we were able to make a very cool piece that our editor in chief gushes about at trade shows right on the homepage. This was by far the largest and most impressive web design project I’ve undertaken and has had such a rewarding feeling once it was all finished that I will continuously work on web design from here on out.
I’ve included below a full gallery of the process from beginning to end, how the site used to look followed by the wireframes and design documents and finally the finished product which is still live.
For my first attempt at creating my own Professional website I was fortunate to have a course based in web authoring. During the spring of 2012 I learned web development and design, information architecture, and proper semantic markup. I initially had a very novice understanding of HTML and CSS but this course took me from knowing how to make a <div> to actually designing databases and my entire own WordPress Theme. This course entirely shifted my outlook on my professional life as I knew once I starting building dynamic web pages I could become a front-end web developer. At the time I was also hired by The State News web team so I was able to use the skills I was learning in class at work and vice versa.
Version 0.5 of the site was a hard coded HTML and CSS site that showed just how little I knew about web design. However, it showed me just how much work goes into simple HTML semantic markup. I hard coded all the lists and pages enhancing my knowledge of tags, the DOM, and how web pages work in general.
After this initial design I worked on creating wireframes and detailed views of the actual pages using adobe Photoshop and Illustrator. Once I had created dynamic markups and designs documents we were able to transition this into a WordPress theme, which you can see the final result below. Taking these initial designs into full HTML markup was another example of learning at a rapid rate because I was doing the same with my job at State News at the time. I continue to use these skills of markups everyday, so this skill will continue to benefit me for years to come.
As an employee of State News Works, the web development firm related to The State News, I have had the pleasure of working through two very major redesigns for major websites. My first major project was the Cavalier Daily, the online newspaper for the University of Virginia.
We first took consideration of the site as it was initially. Here you can see that the site was based solely in Web 1.0 standards of link behaviors, 960 grid system, and stuck very closely with a blog look and made little effort to have new content prominent in the site, a large University we set out to create a design that brought The Cavalier Daily roaring into 2012. We therefore decided on creating a responsive design webpage, one that would resize and work across the multitude of platforms now hooked into the web – from desktops, to tablets of all sizes, down to web browsers on smart phones.
The current Cavalier Daily homepage is leaps and bounds ahead of the old version. Trading out the gaudy background color and implementing a responsive design using Twitter Bootstrap it was our first successful run at creating a fully responsive news site that contained a great deal of content along with traffic, ads, and multimedia. Please see the below images and feel free to visit their site to see it live in action.