helpDid you know?
Anything red is clickable
+ & - will expand and collapse the code
Portfolio images
Hover the 'src' to view thumbnail
Click 'litebox' to view fullscreen
Text too small?
Press 'ctrl +' to increase the font size and 'ctrl -' to reduce it
“You don’t need to follow me! You don’t need to follow anyone!”
Brian of Nazareth. Judea AD33, about tea time.


But should you want to.... @designer_friend
Close
Previous tip
Next tip
tip-expander
<html>
<head>
<title>
Designers’ Friend Ltd. — Home
</title>
<meta name="description" content="Designers’ Friend is a web development company catering specifically for the world’s creative community. Websites as they are designed."/>
<meta name="keywords" content="HTML5 CSS3 PHP Python Django Javascript JQuery Bespoke CMS"/>
<meta name="author" content="Andy Mathieson — andy@designersfriend.co.uk"/>
<meta name="contact" content="70 Cameron Way Edinburgh EH54 8HE +44(0)7727487382"/>
<meta name="copyright" content="©2015 — Designers’ Friend Ltd"/>
</head>
<body>
 
 
<section id="introduction">
 
<h1>
Welcome to Designers’ Friend.
</h1>
 
<p>
If you have made it this far then you will have realised that this is in fact a fully armed and operational website. The challenge here was for a non-designer(me!) to design a website for the world’s greatest designers(you — maybe?) A pretty tall order by any means. Before we continue, please note that I don’t design at all, I am terrible at it. A 3 year old with an eight-pack of crayola can produce better designs than me. Yes I know I have won design awards from the Type Directors Club, D&AD and others but that doesn’t make me a designer, they must hand them out to everybody. So, I thought to myself, I’m a coder, write the thing in HTML, it’s neutral and shows exactly what us developers have to get out of bed each afternoon and comprehend. The intention is also to have a little bit of fun, hover things, click things, there are a couple of hidden items throughout the site.
</p>
 
<h2>
“Coders aren’t designers... and vice versa”
</h2>
 
<p>
From the previous paragraph you may have come to the conclusion that I do not design nor understand design concepts. That being said however, I do understand designers. I have had the good fortune to work with some of the best in the business. I think if I weren’t a web developer I could quite easily become a psychologist for creatives. Having worked so closely with them over the past several years I have witnessed the obsession, neurosis and borderline madness driven by the aim of perfection. I truly believe if you do not suffer from one if not all of these self-afflictions, you are not in that upper-echelon of greatness and our journey together should probably end now. I only want to work with the best, the obsessive compulsives. Designers’ Friend is different. You are the designer, I build for you. I don’t fuck mess with your designs. I understand that you have a million things going on in your crazy brain so I take care of hosting, SEO etc. Are you even interested that your website is built using Python and the Django framework, HTML5 and JQuery? Thought not. What matters is that the site is live, looks great and the copy has no
widows.
</p>
 
</section>
 
things happen
<section id="featured-projects">
 
<article id="the-its-nice-that-annual-2014">
 
<h1 class="project">
It's Nice That Annual 2014
</h1>
<h2 class="studio">
Studio Makgill
</h2>
 
<p>
As a frequent visitor to the It's Nice That website, I was
flattered to be asked by Studio Makgill to build this small
yet elegant microsite. Not only was it a pleasure to build,
but also to view all of the fantastic content that was being
uploaded. Have you bought your issue yet?
</p>
 
<div class="screengrabs">
<img src="img/its-nice-that-annual-01.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-02.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-03.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-04.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-05.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-06.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-07.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-08.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-09.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-10.jpg" alt="" class="litebox"/>
<img src="img/its-nice-that-annual-11.jpg" alt="" class="litebox"/>
</div>
 
<nav class="links">
<a href="http://theitsnicethatannual.com/">
Website
</a>
<a href="http://www.studiomakgill.com/">
Studio
</a>
</nav>
 
<nav class="share">
<a href="http://www.linkedin.com/shareArticle">
LinkedIn
</a>
<a href="https://twitter.com/intent/tweet">
Twitter
</a>
<a href="http://www.facebook.com/sharer.php">
Facebook
</a>
</nav>
 
</article>
 
<article id="saffron-brand-consultants">
 
<h1 class="project">
Saffron Brand Consultants
</h1>
<h2 class="studio">
Saffron Brand Consultants
</h2>
 
<p>
A beautifully designed pixel-perfect portfolio site displaying a whole array of work from one of the worlds leading brand consultants.

I loved working on this website, it works and looks exactly as the Saffron designers had envisaged.
</p>
 
<div class="screengrabs">
<img src="img/sbc01.jpg" alt="" class="litebox"/>
<img src="img/sbc02.jpg" alt="" class="litebox"/>
<img src="img/sbc03.jpg" alt="" class="litebox"/>
<img src="img/sbc04.jpg" alt="" class="litebox"/>
<img src="img/sbc05.jpg" alt="" class="litebox"/>
<img src="img/sbc06.jpg" alt="" class="litebox"/>
<img src="img/sbc07.jpg" alt="" class="litebox"/>
<img src="img/sbc08.jpg" alt="" class="litebox"/>
<img src="img/sbc09.jpg" alt="" class="litebox"/>
<img src="img/sbc10.jpg" alt="" class="litebox"/>
<img src="img/sbc11.jpg" alt="" class="litebox"/>
<img src="img/sbc12.jpg" alt="" class="litebox"/>
</div>
 
<nav class="links">
<a href="http://saffron-consultants.com">
Website
</a>
<a href="http://saffron-consultants.com">
Studio
</a>
</nav>
 
<nav class="share">
<a href="http://www.linkedin.com/shareArticle">
LinkedIn
</a>
<a href="https://twitter.com/intent/tweet">
Twitter
</a>
<a href="http://www.facebook.com/sharer.php">
Facebook
</a>
</nav>
 
</article>
 
<article id="wally-olins">
 
<h1 class="project">
Wally Olins
</h1>
<h2 class="studio">
Saffron Brand Consultants
</h2>
 
<p>
It was an honour to be asked to build a website for the legend Wally Olins to coincide with the launch of his brand new book, aptly titled ‘Brand New.’

It is with great sadness however that between the few short days between putting his website live and writing this very sentence, Mr Olins has passed away. I know Wally was loved by all those at Saffron and the world's creative community as a whole, who will miss him dearly.

May you rest in peace Sir.
</p>
 
<div class="screengrabs">
<img src="img/wally01.jpg" alt="" class="litebox"/>
<img src="img/wally02.jpg" alt="" class="litebox"/>
<img src="img/wally03.jpg" alt="" class="litebox"/>
<img src="img/wally04.jpg" alt="" class="litebox"/>
<img src="img/wally05.jpg" alt="" class="litebox"/>
</div>
 
<nav class="links">
<a href="http://wallyolins.com">
Website
</a>
<a href="http://saffron-consultants.com">
Studio
</a>
</nav>
 
<nav class="share">
<a href="http://www.linkedin.com/shareArticle">
LinkedIn
</a>
<a href="https://twitter.com/intent/tweet">
Twitter
</a>
<a href="http://www.facebook.com/sharer.php">
Facebook
</a>
</nav>
 
</article>
 
<article id="paul-belford-ltd">
 
<h1 class="project">
Paul Belford Ltd
</h1>
<h2 class="studio">
Paul Belford Ltd
</h2>
 
<p>
Paul Belford is one of the world's most talented creative directors and there was only ever one objective with his website — to display his incredible array of work.

The website is grid based as well as being responsive, looking glorious on small screens but especially on large screens.
</p>
 
<div class="screengrabs">
<img src="img/pb01.jpg" alt="" class="litebox"/>
<img src="img/pb02.jpg" alt="" class="litebox"/>
<img src="img/pb03_1.jpg" alt="" class="litebox"/>
<img src="img/pb04.jpg" alt="" class="litebox"/>
<img src="img/pb05.jpg" alt="" class="litebox"/>
</div>
 
<nav class="links">
<a href="http://paulbelford.com">
Website
</a>
<a href="http://paulbelford.com">
Studio
</a>
</nav>
 
<nav class="share">
<a href="http://www.linkedin.com/shareArticle">
LinkedIn
</a>
<a href="https://twitter.com/intent/tweet">
Twitter
</a>
<a href="http://www.facebook.com/sharer.php">
Facebook
</a>
</nav>
 
</article>
 
<article id="cast-iron-stoves">
 
<h1 class="project">
Cast Iron Stoves
</h1>
<h2 class="studio">
Very Own Studio
</h2>
 
<p>
Mark at Very Own Studio has once again come up with a fantastic design, this time for the aptly named cast-iron-stoves.co.uk. The requirements were for an e-commerce with two forms of payment merchant, the ability to resize to the users browser, and for a separate mobile version. Voilà!

Cast-iron-stoves.co.uk is up, running and successfully trading.
</p>
 
<div class="screengrabs">
<img src="img/cis01.jpg" alt="" class="litebox"/>
<img src="img/cis02.jpg" alt="" class="litebox"/>
<img src="img/cis03.jpg" alt="" class="litebox"/>
<img src="img/cis04.jpg" alt="" class="litebox"/>
<img src="img/cis05.jpg" alt="" class="litebox"/>
<img src="img/cis06.jpg" alt="" class="litebox"/>
<img src="img/cis07.jpg" alt="" class="litebox"/>
<img src="img/cis08.jpg" alt="" class="litebox"/>
</div>
 
<nav class="links">
<a href="http://cast-iron-stoves.co.uk">
Website
</a>
<a href="http://veryownstudio.com">
Studio
</a>
</nav>
 
<nav class="share">
<a href="http://www.linkedin.com/shareArticle">
LinkedIn
</a>
<a href="https://twitter.com/intent/tweet">
Twitter
</a>
<a href="http://www.facebook.com/sharer.php">
Facebook
</a>
</nav>
 
</article>
 
<article id="handsome">
 
<h1 class="project">
Handsome Brands
</h1>
<h2 class="studio">
Handsome
</h2>
 
<p>
Handsome are a London based branding agency with whom I enjoy
working with. On this occasion it was their own portfolio website
which showcases their outstanding talents. This site just looks slick.

Always a pleasure to work with you. Good luck with the site.
</p>
 
<div class="screengrabs">
<img src="img/han01.png" alt="" class="litebox"/>
<img src="img/han02.png" alt="" class="litebox"/>
<img src="img/han03.png" alt="" class="litebox"/>
<img src="img/han04.png" alt="" class="litebox"/>
<img src="img/han05.png" alt="" class="litebox"/>
<img src="img/han06.png" alt="" class="litebox"/>
<img src="img/han07.png" alt="" class="litebox"/>
<img src="img/han08.png" alt="" class="litebox"/>
<img src="img/han09.png" alt="" class="litebox"/>
</div>
 
<nav class="links">
<a href="http://handsomebrands.co.uk">
Website
</a>
<a href="http://handsomebrands.co.uk">
Studio
</a>
</nav>
 
<nav class="share">
<a href="http://www.linkedin.com/shareArticle">
LinkedIn
</a>
<a href="https://twitter.com/intent/tweet">
Twitter
</a>
<a href="http://www.facebook.com/sharer.php">
Facebook
</a>
</nav>
 
</article>
 
<a href="portfolio">
view full portfolio
</a>
 
</section>
 
<section id="testimonials">
 
<article id="paul-belford">
 
<h1>
Creative Director @ Paul Belford Ltd, London
</h1>
 
<p>
“I work with Andy all the time. He understands
the frustrations many designers have with
work for the web. Because, unlike some web
developers, he gets design.

He worries about something being one pixel
out and will always suggest ideas to improve
a website. I recommend him.

Don’t talk to him for too long though, you’ll
start believing in UFO’s and things like that...”
</p>
 
<nav class="links">
<a href="http://paulbelford.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/paul-belford/19/257/31b">
LinkedIn
</a>
<a href="https://twitter.com/Belford_Paul">
Twitter
</a>
</nav>
 
</article>
 
<article id="rick-banks">
 
<h1>
Designer @ Face37, London
</h1>
 
<p>
“Working with Andy is a pleasure.
His attention to detail is always pixel perfect.”
</p>
 
<nav class="links">
<a href="http://face37.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/rick-banks/20/541/526">
LinkedIn
</a>
<a href="https://twitter.com/_Face37">
Twitter
</a>
</nav>
 
</article>
 
<article id="alex-maclean">
 
<h1>
Creative Director @ Rupert Ray, London
</h1>
 
<p>
“Caroline and I work with Andy whenever possible.
We have always found him to be considerate and
responsive when working to strict deadlines.

He has an eye for detail and a high level of finesse
to his work so we like to take his advice on suggestions
for elegant and appropriate solutions.”
</p>
 
<nav class="links">
<a href="http://rupertray.com/">
Website
</a>
<a href="http://uk.linkedin.com/in/alexgmaclean">
LinkedIn
</a>
<a href="https://twitter.com/rupert_ray">
Twitter
</a>
</nav>
 
</article>
 
<article id="martin-brown">
 
<h1>
Creative Director @ Paul Belford Ltd, London
</h1>
 
<p>
“Andy has called his company 'Designers’ Friend.'

Spot on really as he’s that very rare type of coder
(or programmer if you prefer?) in that he understands the
requirements of the most demanding designers.

He is pixel perfect to the most ambitious of designs - as
well as always proactively thinking about how they might
function and work better.

In terms of his code I believe it’s a thing of beauty.”
</p>
 
<nav class="links">
<a href="http://uk.linkedin.com/pub/martin-brown/19/a99/a70">
LinkedIn
</a>
</nav>
 
</article>
 
<article id="mark-ferguson">
 
<h1>
Creative Director @ Very Own Studio, Brighton
</h1>
 
<p>
“Working with Andy is great! At the start of a
project he asks lots of questions and goes
through different scenarios and options to
help try and make the website as effective as
possible. All this while remaining faithful to
the detail of the design.

Andy gets designers, he has a great eye for
detail, his development is thorough, and he
communicates well.

I’d certainly recommend him.”
</p>
 
<nav class="links">
<a href="http://veryownstudio.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/mark-ferguson/27/1a4/525">
LinkedIn
</a>
<a href="https://twitter.com/@VeryOwnStudio">
Twitter
</a>
</nav>
 
</article>
 
<article id="megan-riera">
 
<h1>
Motion Designer @ Independent, London
</h1>
 
<p>
“Having worked with Andy on several projects,
his attention to detail has been the quality
which has has stood out the most.

Not content with ‘just getting things done’,
he always has suggestions and ideas to make
everything look and work the best they can.”
</p>
 
<nav class="links">
<a href="http://www.meganriera.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/megan-riera/12/154/210">
LinkedIn
</a>
<a href="https://twitter.com/MeganRiera">
Twitter
</a>
</nav>
 
</article>
 
<article id="joseph-carter">
 
<h1>
Designer @ Independent, London
</h1>
 
<p>
“The attention to detail and perfectionism
in both front and back-end means the
designer/developer relationship is always
a great one.

Thirst for knowledge and understanding
makes the experience a lesson for all
those involved, often leading to pioneering
digital outcomes.”
</p>
 
<nav class="links">
<a href="http://josephcarterstudio.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/joseph-carter/63/246/97b/">
LinkedIn
</a>
<a href="https://twitter.com/jjgcarter">
Twitter
</a>
</nav>
 
</article>
 
<article id="charlie-de-grussa">
 
<h1>
Designer @ StudioMakgill, United Kingdom
</h1>
 
<p>
“Without your knowledge The Proust
would not exist. The site is exactly as
I specified, lightning fast and with a
fantastic backend. Very, very pleased.”
</p>
 
<nav class="links">
<a href="http://charliedegrussa.squarespace.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/charlie-de-grussa/b/396/3a">
LinkedIn
</a>
<a href="https://twitter.com/CharlieDeGrussa">
Twitter
</a>
</nav>
 
</article>
 
<article id="andrew-popplestone">
 
<h1>
Designer/Art Director @ Momoco, London
</h1>
 
<p>
“Working with Designers’ Friend for my new
website was an absolute pleasure. I got exactly
what I wanted and it works brilliantly! His technical
ability, speed and professionalism is second to none.

Designers’ Friend can handle a project of any scale,
can not only deliver on time but make it work and
look beautiful.”
</p>
 
<nav class="links">
<a href="http://andrewpopplestone.com/">
Website
</a>
<a href="http://uk.linkedin.com/pub/andrew-popplestone/a/9b/210">
LinkedIn
</a>
<a href="https://twitter.com/AndyPopplestone">
Twitter
</a>
</nav>
 
</article>
 
</section>
 
 
</body>
</html>