This design, with it's large scale, responsive functionality and unique style brings The Canadian Institute of Forestry in to the present and beyond. With everything rethought, from the overall look, to the positioning of content to the expected way users will interact, this new website offers more to CIF's visitors and members.
Our designer has used a monochromatic colour scheme of shades of earthy green throughout the UI of this design and used images to bring pops of colour. Green is professional, but also effectively communicates the environmentally concious aspect of CIF.
We have selected to typefaces for this design: A sleek, defined sans-serif for the headings and a classic serif font to compliment it. Together these two fonts feel corporate with just the right amount of personality. Both of these fonts are web safe and will render correctly across all browsers and platforms.
A responsive design allows The Canadian Institute of Forestry to be more accessible to their members and visitors. The design stretches and forms itself to each screen size, so that everyone gets the best possible experience. For a site that revolves around news updates and membership services, this is crucial.
The Desktop version of the design is optimized for viewing on a laptop or a monitor. The elements will become larger and more spread out or smaller and closer together depending on the specific size of the screen. Shown below is what the design would look like on a 1920 x 1080 screen.
jQuery is the perfect way for The Canadian Institute of Forestry to highlight all the projects and events they do, immediately giving new users a better view of everything they are all about.
The top of the website is organized so that everything is immediately established, making for the best possible user experience. The Canadian Institute of Forestry logo appears on the top left, indicating who this. The main navigation, user controls and search functionality are on the right side.
One of the most important functions of the home page is to direct users where to go next. This is why much of the page is dedicated to "actionable items", buttons and links the user can click on to explore further or perform an action. This helps make conversions (in the CIF's case, get users to learn more about them and join as members). The jQuery itself acts as a giant actionable item and below that are three graphics that entice the user to click.
One of the biggest problems with CIF's old site was that users were often confused about what the institute does and stands for. We have fixed this problem by including this large, simple and concise mission statement right near the top of the site, eliminating any confusion.
With an advanced CSS drop down menu, all of CIF's content will be available with only one click. Also, by organizing the pages in a proper, well thought-out hierarchy, pages are much easier to find.
There is always something new and exciting going on at the Canadian Institute of Forestry. This is why we have included two automatically updating feeds on the home page. These two feeds, one for Events and one for News will automatically update with the latest and greatest so that users can get the scoop at a glance.
The tablet version of the design is similar to the desktop version, except that all the graphics get condensed to fit much better at the smaller resolution.
For mobile devices, all the content moves in to a one column layout so that all the images and text can remain large enough to be seen on a much smaller screen. Also many functionalities have been simplified for a touch interface, such as the main navigation.