the design lab
the design laboratory
web designer
website design
cost of living
komfyroof
robert drayson
destination education
Spitfire Mark by Mark
news
What’s being created in the lab recently?
Client: The Cost of Living
We’re very excited about this one! Mostly because of the challenges and the maths involved.

A little background information:

Our client is an old friend of the Design Lab, in fact someone from college days. He had the idea, a few years ago, to create a website where people could go to see the effects of inflation on passed values. For instance, back in 1934 there was a reward on Bonnie and Clyde of $5,000. This doesn’t seem very much by todays standards but in fact this is the equivalent to $82,000 in todays money.

The original US version.

The client had already designed and produced a US version in MODX (a content management system) but it was hacked and eventually taken down by his ISP.

By this time it was showing its age and was out of date by three years. We aren’t overly keen on CMS platforms as they can be just too complicated and over engineered – well, they have to be as they need to be ‘all things to all men’. They contain thousands of unnecessary and unused files, so we suggested coding it from scratch.

This is where we came in…

The inflation figures are freely available on the internet and the client asked us to produce a UK version.

The first improvement we made was to the navigation system. In the clients original website selecting a year was a tedious affair – one long list of over 113 years! So we decided to create a menu in decades that made the process of selecting a year considerably more intuitive.

Then came the real brainteaser. The data supplied went back as far as 1900 and prior to 1970 pound, shillings and pennies were in use and then in 1970 decimalisation was introduced. We designed two Javascript calculators, one based on the old system of currency and the other for ‘new money’ as it was known back in the day. Then a small PHP function was used to select the correct calculator to use for the year required.

1900 with pounds, shillings and pennies.
1970 onwards with decimalisation.
All the 'equivalent' prices are dynamically
calculated using information in the
database and a little maths.

We wanted to make this site totally dynamic and easy to update in years to come. All the figures, in the site, use a simple database containing six columns, an ID, year, inflation value based on the Consumer Price Indices for that year, and then the average price of a house, car and wage for that year. These figures are then used as the basis for everything else on the site. The advantage to this is that when next years CPI is published and then updated in the database all the figures throughout the site will change inline with the new values. So, for instance, the 5/- Box Brownie featured in 1900 shows a equivalent value of £27.73 (2015), should the inflation figure double in the next year (heaven forbid) this value will automatically change to over £54 along with any other ‘equivalent’ figure displayed throughout the site.

Work in progress

The site is still ‘work in progress’ and we’re working on the historic part of the pages and we’re awaiting updated text for the ‘about this site’, ‘gold’, ‘memory’ and ‘Hyper inflation’ sections. Again, another PHP function allows us to automatically add new pages as they are completed, simply by naming the file by their year!

The new UK version.

Most of the complicated work is done and now it’s the laborious task of completing the history sections to each page. Even though most of the pages aren’t completed the figures shown are correct.

If you would like to advertise on this site please let us know and we’ll pass on your interest to our client.

The final site will probably be less than 200 files – eat that MODX!

Click here to view how the site is progressing.

Client: Komfyroof
Just a small job but treated like a big one.

A little background information:

Brand new logo.

We received a phone call one evening from our client wanting to make an urgent appointment.  The following morning we sat down and had a chat.

After a cup of coffee the problem turned out to be obvious – awful homemade website and branding. His primary service is the intallation of spray foam roof insulation.

This is where we came in…

Within days a logo had been agreed upon and within a week a website had been constructed and uploaded for all to see.

Some of our original ideas.
Even had time to design a livery.

Final website

Komfyroof new website.

This turned out to be one of the quickest jobs we've done in a long time as the client had work to tender for and he wanted to direct potential clients to his new website rather than the old one. This was very understandable!

We've added some small bits of animation using Hype which is a Javascript HTML5 application – easy to use and works well on modern browsers.

 

 

Click here to view this site.

Client: Robert Drayson
No matter how small you are you should think big.

A little background information:

Proposed new logo.

Robbie is our accountant and an all-round good guy.

However, like so many small businesses he doesn't have a website or even a brochure. Since no one uses the Yellow pages anymore the only way to find services like Robbie's is via Google or similar search engines.

This is where we came in…

Our first port of call was to design a simple modern looking logo. We decided it would be fun to take a pound character, to represent money, and introduce an 'add' symbol into the mix to represent accounting. Within a short time a branding exercise had been completed.

Some of our initial ideas.
Business card idea.

Website

Website is coming soon to a browser near you.

Now the hard bit!

A domain name has been purchased and a website is currently under construction.

One of our ideas is to include a simple tax calculator with the caveat “to get a more accurate total you should contact us as we can help you minimise your tax liability" – or something not too dissimilar.

Bookmark this page and come back soon to see how it's progressing.

 

Client: Destination Education
New website.

A little background information:

Brand new logo.

Due to some problems registering their previous logo and business a new name and brand was required.

The logo had been introduces quite a while ago but now had to be used solely.

This is where we came in…

The main focus of attention was on a new website. This became a bit of a beast but nothing we couldn't handle. All the coding was started from scratch and some of the key features and requirements for this site were:

News page.

Dynamic news section where the client can add content as required. We've done this before only this time we've made the most up-to-date article larger. Each time a new story is added this will replace the old one automatically adding the replaced article to the 'More news' section below.

 

 

 

 

 

Gallery page.

A gallery and slide show of events and lessons. We used some existing Java code to make the images bigger and move forwards and backwards using arrows. The final pages look lovely.

 

 

 

 

 

 

Page hit stats only viewable via login page.

Dynamic page counter with graph. This was done more for our own interest as we've been getting some remarkable high ranking sites and we want to know if anyone's visiting them! These pages are top secret and can only be accessed via a login page. Producing the code for the graph was interesting as we use dynamic data in the CSS to affect the table columns.

 

 

Destination Education website.

Final website

It took a few weeks of hard graft but we made the clients deadline of 1st August 2015!

Again we added some small bits of animation using Hype.

Examples of these animations can be seen in the ruler 94.7% graphic, the home page top slider and the members and supporters logos in the footer of each page.

 

 

Click here to view this site.

Client: Swaffields
A cut throat business.

A little background information:

Brand new logo.

Our clients, Paul and Nikki, asked us to design a new corporate identity for their new traditional barbers they were opening in Wimborne.

The word they wanted to emphasis was 'traditional' – early 1900's.

This is where we came in…

Having attended art college in the late 70's when retro was all the rage we put on our 'Michael Peters' hats on and set to work.

Some of our early ideas.
A recent A6 design to promote 'Cut Throat Shaves'.

Promotional leaflet.

Final products

A relatively small job in the scheme of things but we enjoyed the work.

We weren't asked to do their website but we did help with some graphic files they needed so they could to do it themselves.

 

Client: Spitfire Mark by Mark
Adding value.

A little background information:

Steve's book cover.

Steve Lucas, an illustrator and old friend of the Design Lab designed a book on all the marks of the iconic Spitfire and Seafire aircraft – over 60 during its production.

We designed and produced him a website to sell this very unique PDF book, over a year ago, but sadly sales haven't been as good as one would have hoped.

This is where we came in…

It became obvious that we needed to generate interest and draw in more customers to the site and it had to do more than just publicise the book.

Website home page.

After a conversation on the telephone, regarding the possibility of introducing a feature which Steve wanted in his book, we decided to do it on his website instead, with the hope that his site could become a point of reference to Spitfire aficionados the world over.

 

 

 

 

 

Identifier page.

Our first goal was to design and create a Spitfire and Seafire recognition page where the viewer could select options and see which plane featured them. This used a database of over a 150 variations of the planes and 32 different options. Steve generated the table while we created the database.

 

 

 

 

 

 

Features page.

As the job progressed we realised that it's fine if someone knows what a 'Coffman starter bulge' is but many of the items came in a varity of shapes and sizes. Take, for instance, the exhausts – there are six options but knowing the difference between the 'fishtail' and 'ejectors' required some expertise. As Steve is an illustrator we persuaded him to illustrate all the items listed on the search page – some several hundred.

Another page we put together contains a list, in the form of a drop down menu, where a particular model can be selected and all the versions are then displayed in an illustrative table.

When we'd finished that page we felt that being able to view all the specific options, all the exhausts for instance, next to each other would be useful too. A 'key' page was designed showing them in a larger format and even larger when scrolled over.


Key page.

Final website

We now believe that the site has 'added value' and hopefully it'll drive sales as we think this is quite unique for this subject.

 

Created using, MYSQL, PHP, CSS, HTML, a bit of Javascript and whatever else we could lay our hands on!

 

 

Click here to view this site.

Client: More to follow
More projects will be added so please bookmark this page.
Just imagine what we could do for you.
© 2017 The Design Laboratory, Bournemouth.