You're looking at the brand new Designate website. We thought it would be a nice insight into how we work if we took you behind the scenes and told you how we built it and what can be done with the site and of course, what we can do for our clients.

As an agency we believe in Audience Engagement and we felt the new site should really reflect this. It was a great creative opportunity to showcase the best of what we do, and a great challenge too as we were dealing with very demanding clients - ourselves. The site also had to embrace all the latest technology and be scalable for the future.

UX Design

To keep the site clean, simple everything was planned with great detail. We decided that it would be best to  develop our own CMS so that we could really do what we wanted to do with it. With mobile becoming more and more important to web browsing and  more people coming to our site that way,  a responsive site that looked as good on your phone as it does on a PC screen was crucial.

Now here's the science bit.

We decided to use HTML 5 even though some API features and tags don't work across all browsers, however this will offer us more options as it develops and becomes more cross compatible. We used HTML5 in the email tag in our signup forms, validation and many other ways throughout the site.

The responsive structure of the new site is based on the http://foundation.zurb.com/framework. This has given us a  really clean starting point based on a 12-column grid.

We then developed our own CMS which has been built in a modular way. Built from the ground up, the new CMS is PHP based, modular, branded and laid out in a way so that all the team at Designate can login and add content without having any training - it works that simply!

Other tools we used to compliment the Foundation Framework were the Flexslider by Woo Themes. This Jquery slider displays images on our home page and other pages to give quick access to more content and also make the site more visually rich for the end user. The Flexslider is also responsive, but the best feature is that it is swipeable when using a touch device and gives the feel of a native app when using a phone or tablet. Check it out on yours.

API's & Technology

The technology implemented made sure that our site could be shared through the use of social networking tools such as the Twitter API and Addthis API. Facebook comments were also added to the blog posts so that you can share your opinions with us.

Google Maps API was used for our contact page and we used Mailchimp's API so that users could sign up to our brand new ENGAGE newsletter. CSS 3 has also been embraced as we are not afraid to use the latest tech. Moving forward we now have a great responsive framework to use for future clients. Building sites this way in a modular scalable way means that rather than having to re-design in 2-3 years, we can just add or re-align and this is the way forward.

The new site now enables the whole agency to create blog content and voice opinion on industry based topics and engage you in conversations.

Motion & Sound Design

Last but not least, Kriston and I worked closely together to deliver the visuals and sound for the about video and case study video. As a DJ this was a bit of a labour of love for me. Using the latest tech and a lot of hard work we've created some really visually rich content. If you like this kind of thing, we were using  After Effects and Premier for the video edits and Reaper, Apogee convertors, Native Instruments Plugin and Maschine for sketching out beats.

The whole project has been a joy to work on and the whole team here pulled together to get the new site out the door. Have a look around and tell us what you think, we'd love any feedback you've got...