Before any work begins on developing design concepts, wireframes are created for the homepage and all lower level page templates. Wireframes are basic illustrations of the structure of pages and they help clarify the various elements that will go on every Web page — navigational elements, page functionality, content blocks, and page display scenarios. During the wireframe process you begin to see months of work on research, strategy, information architecture and user experience come together.
Since we are undertaking a responsive design for our project we need to create wireframes for desktop, tablet and mobile views as shown below. Click on each image to view a larger slideshow.