Working within template websites can often feel challenging, though I think it can also be an opportunity to try to be creative. As webmaster for Cornell University's chapter of the Phi Beta Kappa honor society, I wanted to redesign the group's website when Cornell migrated student organizations to the new OrgSync platform for Cornell student organizations. The platform allows modification of HTML and CSS elements (though not PHP or database functions). Both individual pages and a template can be customized to various extents. Rather than using PHP or databases for content, content can be manually entered into pages, or be added via a CMS and embedded into pages via pre-built modules and some custom markup language. All sites are provided with an initial template, as seen below:

I've had some experience with OrgSync sites, such as my redesign of the Cornell University Program Board website. Again, I wanted to try to move away from a rather run-of-the-mill template that didn't seem to inspire too much creativity. With my prior experience, I decided to again use Bootstrap for its ease of implmenting responsive design and its built-in classes and libraries. The first thing I did was do some initial sketching on paper, before doing some mockups and then an implementation in HTML. 

We did have an old Wordpress-style website before the OrgSync move (see below), but I didn't want to go back to that. Instead, I wanted to make a website that looked a little more formal for the honor society. 

Most of the content was moved over from the old Wordpress site. However, in order to give it a formal feeling, I gave the main content a background resembling paper, trying to give off the feeling of a fancy paper invitation. While I generally use flat design over skeuomorphism or realism on most every-day sites, I feel that realism can still work well on a formal website. Adding to the ambiance are the use of serif font Alegreya SC and limited use of cursive font Great Vibes.

The layout of the site is rather simple, having a large title at the top, a horizontal navigation (with a highlighted invest link), and a 2 column layout on larger screens which collapses into a single column on mobile. The footer has additional contact information (which can also be easily found on the contact page) and other Cornell insignia. I also wanted to follow the Cornell branding style guidelines (as of Winter 2014), including the header bar with Cornell logo and search box. 

Thanks to Bootstrap, making a mobile version of the site was quite simple using responsive design.