EC Boston, the Boston division of EC English, was formerly known as The Olin Center. Since their name has changed, they wanted to capitalize on the opportunity to update their website to reflect the current branding strategy in addition to reorganizing the information on their site.
With the help of EC Boston staff, we designed the basics of the structure of the website and page layout. We based this structure off of a revised version of The Olin Center website.
To create a strong web presence and to drive conversions from many market areas, we placed image-link pairs on the home page. This rough sketch shows the beginnings of what will mature into flushed out images supported by brief text.
Just before coding the CSS structure of the site and laying out where the elements will be placed, I drew up a final sketch to incorporate the discussed changes. To mimic the parent site, I used tabbed navigation along the top and designated navigation within tabs to be below them and vertically on the left. I set up a sense of reading hierarchy (left to right, top to bottom), to help users intrinsically know the relationship of elements to one another. This is important because users should be able to instantly navigate within a topic or between topics and know which links do what.
Using a basic fluid-width CSS template as the building block for the website, I got a step ahead on cross-browser compliance. I then modified the template to include some fixed-width elements and tweaked the width of other columns. I then placed in images and dummy content to bring the site to life!
Wohoo! The website is 90% complete from a coding perspective. It is set up to work seamlessly with Adobe Contribute to allow my clients to update their own website content: text, images, and downloadable items. Finding a beautiful balance between giving them update access to changing information and locking the website skeleton means the difference between a site that can be kept up to date and one that needs constant webmaster maintianence.
