Following several design planning discussions with Gary Menzies, Design & Publications Manager at Forum, we finally got the go ahead to start on the new website project
About Forum Housing
Based in Wirral, Merseyside, Forum Housing provide accommodation for vulnerable young people. Officially founded in 1969 with Christian values at the heart of their mission, Forum Housing Association has gone on to help thousands of people over the years. They continue their good work with the help of over 120 staff, their stakeholders and countless volunteers.
Above, you can see the first draft I created for the home page. I opted to present the design in a 960 desktop layout as this would be the most commonly viewed format within the association and by its members and staff.
The Design Brief
I’ve worked with Gary for over five years now on various projects and have built up a good working relationship and understanding of his requirements. For the first step he provided me with a website design “mock-up” wire-frame. This was intended to demonstrate how they wanted the home page to be organised and was agreed in a meeting of all the main stakeholders. As you can see if you click on the thumbnail on the right the layout is quite specific. This enabled me to crack on with the general design, use of colours and all the fun stuff really.
There were a few important requirements for the website, boxes that needed to be ticked from the outset. Some of these included usability, the website needed to easily viewed on mobile, and tablets and desktop pc’s. The site needed to feature a prominent slide-show at the top of the home page to promote big events and important announcements. Regular updates will to be made by different members of staff so a user friendly CMS was required, enter WordPress, mine and worldwide over 72 million other users favourite CMS and Blog software too!
I started out by sketching up some rough drawings using Gary’s mock-up as a reference. I needed to show the content in roughly the same way but I still wanted to play around with a few ideas that I had in my head. I went for a grid based open layout which makes it easier to organise the main blocks responsively. The base colours I had to work with were already determined. These are dark blue ( #0B395B ) and scarlet red ( #D60000 ) which I used as the main accent colour for a:hovers’s etc. I also decided to introduce four additional colours for the link panels to the main areas of the site. These are an Apple Green ( #669933 ), Dark Cyan ( #339999 ), Tangelo Orange ( #FF6600 ) and a Royal blue ( #5C76B9 ).
For the fonts I decided to use Museo 500, which is free to download, in the H1, H2 and H3 headings. In the main body including the <p>, <ul> and menu navigation I chose Arimo which is also free to download at Google Fonts. Both font families are clean sans-serif typefaces. Arimo has a Normal 400, Normal 400 italic, Bold 700 and Bold 700 italic character sets. Museo 500 is a semi-slab serif font that features some nifty little curls on the bottom tips of most of the capital letters that sets it apart from other similar styled fonts.
Following a few revisions of the original design I finally got approval to go ahead and build the new site. I asked the hosting company to set up a test site where I could develop the new design. I then created the new MySQL database, installed WordPress and activated my preferred base template. After customising the CSS to display Forum’s details, uploading the new screenshot.png file I began selecting the required plugins. Next I began applying the colour styles, header, body, menu design and installed the fonts with @font-face in the main CSS file. I then applied all the styles for the footer area and installed the translation and text resize widgets.
Now that the work on the template was complete it was time to focus on the content. First of all I created all the pages required and a hand full of blog posts, all supplied by Gary. Then I began working on the most complex page of the website, the home page. Starting at the top I inserted the slider shortcode for Meteor Slides and customised its CSS to match the rest of the site. After that I created a three column grid using <ul> tags with a class for the media queries. I imported the images with CSS so there was no need to wrap them in <div> tags. For the hover effect I wrapped the contents of the <li> tags with <a href=”#”> link tags and setup the a:hover effects in CSS. Gary wanted to display a list of important pages inside the left hand block so I used a nifty plugin called Custom Menu Shortcode by Bas van der Lans.
Making it Responsive with Media Queries
I wanted to keep things as simple as possible to cut down on extra work and hopefully future proof the site for the next five years. So I decided to limit the media queries to just three. I created @media only screen and (max-width : 1090px), @media only screen and (max-width : 767px) and @media only screen and (max-width : 480px). I then placed all the necessary selectors into position and applied the relevant properties to each one. After some fine tuning with the help of the Responsinator the site was ready for first inspection.
I pleased to say that overall the new site was well received and after a few minor adjustments it was ready to go live. You can see the finished site here and if you have any questions please feel free contact me.