Rob Clark's profile

English Heritage Calender

English Heritage Interactive Calendar
This calendar was designed originally in PhotoShop in a basic template using there Style Guide Colours for Stakeholder approval. The images below show how dates which include events are coloured however dates without events remain blank and inactive by being displayed in grey.
In order to make the design more appealing images related to the event were placed as backgrounds instead of the colour, once again keeping the grey as a sign that no event is on this day. This is a fully responsive design so multiple viewport designs were provided.

The current day had a red overlay (See 1st as example) while the plan was that when hovering over the day, the box would increase in size (See 14th as example)
When clicking on a day a modal would appear that would display more information.
A prototype was then built using HTML, CSS3 and jQuery before being passed to the backend team that placed it into a .NET CMS. The images below are from a working example from www.english-heritage.org.uk
English Heritage Calender
Published:

English Heritage Calender

English Heritage Calendar UI. Designed in PhotoShop and built in HTML, CSS & jQuery

Published: