This design was based on print materials provided by the client. The long, scrolling homepage design helps highlight different features of the school, including information on curriculum, school philosophy, student features and news. The interior template includes a variety of block, galleries and title styles to match the styles of the homepage. The footer area was designed to display icon-decorated links and school facts througout the site.
The client wanted a homepage that highlighted news and events, so I designed one that helped feature this information. A large photo-based carousel displays featured news with high quality photography. Lesser news stories and those with less dynamic photography are displayed with smaller, round thumbnail photos. A carousel to display events, a section for a Twitter feed and quicklinks and buttons with custom created graphics round out the rest of the design.
The homepage was designed with a full-browser, rotating image to feature the school's beautiful photography. Large buttons on the image, take the viewer to a landing page which features text and photography to highlight key features of the school's curriclum. The interior of the site matches the general look and feel of the homepage design, with a number of CSS block styles used for building pages. Each page of the interior also features a wide banner image to highlight the school's photography.
The client wanted a homepage that featured their photography so I designed a homepage with a full-browser image. Navigation and an area for events and news floats on top of the image, to give the design a more open feel. The interior of the design features a wide banner photo on every page. CSS block styles, navigation and photo galleries were designed with lots of white and very light grey to keep the pages from being heavy and boxy.
For this design I used images with a white backround to break up the boxiness of the page. Orange was used as an accent color to add the the school's color palette of green and yellow. The school's tartan pattern was placed in the background of the banner and footer areas to give a nod to the school's traditions, while the bright, vibrant colors helped to modernize the school's image. This website was self-managed by the school, so a number of block styles were created to be used for content on both the home and interior.
This client wanted the ability to display multiple photos on the homepage, so I designed a carousel to display three photos at a time along with titles for each photo. News, buttons with custom graphics and a block to display school facts rounds out the bottom of the page. Block syles matching the homepage were created for the interior. Many of these same block styles can be used on the homepage as needed.
This site was designed on an older CMS system which was not responsive. The client wanted a site with a layered look. Texture was added to some of the background areas to add some interest. The school's colors were red and blue, but yellow was added as an accent color to brighten the design. The interior maintains the layered look from the homepage and includes matching block styles.
This homepage features a large rotating photo and accompanying quotes. As a break from the usual horizontal navigation, the site navigation is placed vertically down the left side of the page. An area for news and calendar is positioned horizontally across the bottom of the page. If no news or events are present, this horizontal bar goes away automatically until needed. On the interior template of the site, the main level navigation is positioned horizontally accross the top of the page to make room for any lower-level navigation that is needed. As this site was built on an older CMS, it is non-responsive, but the client has the ability to edit content and layout on all pages.
This design was for a mini site for the school's 100th anniversary. The school wanted to include both historical and current photos so I made a number of collages of old and new photos featuring similar subject matter, to feature on the homepage. A custom timeline was created which I designed to be broken down by decade and then further by year. Each year selected would display a large background photo, a photo gallery and text block. The 100 years of Hockaday page was created to display the school's large number of videos. A collage of video thumbnails, in the shape of a 100, was designed so when the thumbnails were clicked, a video would open and play in a separate window.