As we’d already designed (and built) the Hanging Space website, once we had finalised the logo designs they slotted nicely into the space at the top. We’d designed the logos and brand identity to work with our new website design because when we design a website, even if we’re not creating a new logo, we still want to get to the heart of the brand and design something with the right feel, does that make sense? And so it all slotted together rather nicely.

You’ll notice a conspicuous absence of the crocodile skin texture on the website: that was deliberate! It’ll make a beautiful splash on the printed literature, but we really felt it best to keep things simple and elegant on the website itself.

The Product Pages

Simple, elegant and image rich, each product page is designed to create a feeling of desire!

This experience page is fully editable and gives visitors a glimpse into what they can expect.

And Space Magazine. We love this! Elaine just doesn’t have the time to write a blog, but completely understands the importance of great content and so we came up with the idea of creating an online magazine for her which she can edit through her content management system. A magazine doesn’t need updating daily or weekly, and so we are looking forward to this giving Hanging Space the perfect balance between current content and not too much work.

Remember the old website?

Quite a transformation I hope you’ll agree! We’re really looking forward to seeing the impact this is going to have on the business and can’t wait to start work on some of the printed collateral.

I’ve been looking forward to sharing this project with you for quite some time now and I’m just delighted to be able to reveal the Hanging Space rebrand and new website design. This has been quite an extensive project, with a rebrand, new website design and shopfront design so I’ll be splitting this out over a couple of posts just so I don’t overwhelm you!

Elaine Palmer is the creative force behind Hanging Space, a Weybridge, Surrey based company who design and build bespoke, fitted furniture. The Hanging Space product is incredibly high end and bespoke, and their original website design just didn’t communicate that.

The original website

Elaine originally came to us with a very cool and clever logo she’d just had designed with another agency, ready to have us create a gorgeous and commercial website design. After much planning we developed a stunning design for the homepage as well as some really cool ideas for the site structure.

Iteration One

Whilst the logo ticked many of the boxes, as time went on, Elaine realised that it just didn’t feel right. And I get that – Elaine is highly creative and very feminine, and is working in a very high end market and so whilst the logo looked smart, it made sense to look at the logo design. The funky logo you see above is certainly very clever conceptually (the font plays on the idea of space, as does the icon) but it feels very masculine and cold.

Our philosophy is that when you connect you with your business and your customer you create a brand that’s incredibly powerful. I always think there’s a lot that you can do with a brand identity without necessarily needing to change a logo, but as Elaine was having a new shopfit and sign it made sense to be sure that this was right. And so she invited us to create a new logo design for her. I want to share that with you next.

Lisa is a fabulous Garden Designer based in Leatherhead, Surrey, but whose flair for creating gardens that suit their owners has meant that she works both throughout the UK and internationally. Lisa has been blogging now for several years, and you may remember our initial blog design? This latest iteration reflects where Lisa’s business is right now and works with her blogging style just perfectly!

Chloe has made sure that Lisa’s new blog fits within Lisa’s brand style and website design, whilst at the same time giving another dimension to her brand. I think it’s really boring when your blog looks the same as your website: it’s supposed to have another voice, another take on your business. So we’ve used the distinctive handwriting font and the same colour palette but introduced some new texture, pattern and illustrations.

Redesigning the Flourish blog is one of the next jobs on our list, and so I’m incredibly jealous of the small details on Lisa’s blog: the customisation of things like the Link Within box and the way the comments box has been styled. Just gorgeous!

Lisa takes beautiful photos of both her own garden designs and also gardens that inspire her, and I really think the new blog design shows them off in their full glory. I saw lots of lovely comments on Twitter yesterday about Lisa’s blog and I’m really looking forward to seeing the impact it has on her business.

Oh and isn’t the name fab? Lisa and I brainstormed a lot, as I know did many of her friends! I forget who came up with the name, but I think it perfectly encapsulates what Lisa creates for her clients: a room outside they want to spend time in. And I think the strapline “Grand Plans for Outdoor Spaces” just builds on that nicely.

You can see Lisa’s new blog, The Room Outside, at blog.lisacoxdesigns.co.uk I’d love to know what you think…

Focus matters more than smart

A very good friend of mine (shall we call her Jane?) bought a business eighteen months ago and since then has worked like a trojan with her business partner to grow the sales. Whilst my friend comes from a recruitment background as has no knowledge of the industry, her business partner worked in the business for ten years before they purchased the company, so they certainly know a thing or two between them.

But despite this knowledge and my Jane’s discipline at the selling, business isn’t easy. In fact, it’s incredibly tough for them.

Now branding is no magic wand for a failing business, but when you’re working as hard as Jane is, it’s something that will really make a difference. I look at their website and whilst it may be smart, it’s boring. More than that, it’s confusing and they’re missing opportunities. Jane and I were talking last week and she said “I know we need a new website” but the thing is, if they just create a new website they’re not really fixing the problem.

The real challenge

Before they race out and have a new (smart) website developed, they need to ask themselves: how do we create a brand that is irresistible to our most profitable customers?

Right now, Jane’s website looks the same as most of her competitors and that’s not doing them any favours. In being similar the only differential is price.

Jane’s company sells and provides training for voice recognition software (the stuff that you dictate onto a dictaphone and then it types up what you say). Jane’s website looks like a software house. Shouldn’t it look like an approachable, friendly and efficient business that can train their customers to save time? Shouldn’t they look like a business that are easy to work with? Surely you don’t want this software unless you’re busy, surely you don’t need the training unless you’re not technically savvy? I look at the website as a business owner and it terrifies me.

I really wish I could show you screenshots to illustrate the point but it wouldn’t be fair. And really the point is that this isn’t about the website, this is about their brand, their focus.

This is about creating a brand that sets Jane’s business apart from her competitors, one that makes the company utterly irresistible and engaging to their ideal clients, one that reconnects Jane and her business partner with the business again. One that re-energises them and most of all, makes doing business easier.

Creating a website that looks the same as your competitors is the easy route. Taking three steps back to think about the focus for your business, what you want to be known for and why your customers really do business with you is much harder. And it can be scary. You’re going against the tide, creating something that’s breaking industry norms, and you need to be very confident that you’re doing the right thing. But it’s exciting isn’t it?

Ta da! The brand, spanking new website for the Branding Masterclass is now live, and with the next class less than four weeks away, I wanted to share the design with you.

I’m not one to hang about (as my team will testify) and so when I made the decision to launch our first masterclass back in late November 2011 I knew we had our work cut out preparing the “classroom” (aka the blog), the brand, a promo video, writing the content and the sales copy as well as all the back end admin it takes to run a course. We did a LOT in that two-ish months and fitting in a stand alone website was always going to be impossible. But I did want to pull one together for the next class.

Both James and Stuart have worked incredibly hard to pull this together before Easter, and I want to say a very big and public thank you to both of them (and Caroline) for making sure the site was ready. I know it wasn’t easy, especially with your current workload, but it is very much appreciated.

The Designs

The designs are very much rooted in the brand identity James created back in January for my masterclass classroom. I wanted everything to feel clean, easy to read and welcoming but also with some substance. This isn’t airy fairy stuff, despite the prolific use of flowery pictures! There’s real, commercial meat behind what I’m writing about, even if much of it is delivered in a light and easy to understand way. And so I love James’ use of type, colour and white space.

There’s a bit of work to be done after the Easter hols on the about page – I wanted to put a quick showreel together of our work for anyone that hadn’t come via our website or blog, so we’ll add that in over time. We also plan to integrate our event booking system into the website and be done with the horrible shopping cart once and for all! But I think that realistically that’s going to need to wait until after May…

We wanted to bring the testimonials to life and as they’re such a photogenic bunch, the social media avatars work quite well don’t you think?

You can see the website in action over at brandingmasterclass.com

Have you discovered Blogstomp yet? If you’re a blogger and you blog photographs then you need this, like, yesterday. It’s AMAZING.

Before we go any further, I’m not an affiliate, I’m not trying to make any money out of you. I have been using the app for a couple of weeks now and it has completely revolutionised how I blog images. And I am evangelical about it. That’s it! So this is not about generating any affiliate revenue, I just want to save you time.

Time saving and pixel perfect

One of the things that stops many of us blogging is a lack of time. For some of us, it’s also that quest for perfection. All these things get in the way of you showcasing your lovely work with the world.

I have been told off on numerous occasions by Matt Pereira complaining that my photo montages aren’t pixel perfect. Now I don’t know about you but I have better things to do with my time than nudge things a mm to the left or right. Yes, I absolutely expect it of my designers when they’re creating client work. But my blog is my notebook and if everything was pixel perfect I honestly wouldn’t have time to get done half the stuff I get done (but that’s another story for another day…).

Matt Pereira and Eddie Judd both encouraged me to try Blogstomp, and I’m so glad they did. Even though it just looked like another pain in the backside tool in my workflow, it has saved me AGES when it comes to creating web ready images for the blog. And they come out pixel perfect! Result.

How I use it

I still do all my photo selection and organisation in Lightroom. And I edit my photos in Photoshop. But then I just import my full sized images into blogstomp and let it do it’s thing.

I don’t love that layout, and the difference in background tones looks appalling there doesn’t it? It’s really quick to chop and change images when you see that they’re not working.

I tend to select a few images I think will work together and see what kind of layout it comes up with.

If I don’t like the layout, I click Mix It Up until it comes up with something I do like. Then I click Stomp It and it’ll save the images at the right size and resolution for my blog. How clever?

You need to set up the detail for your blog- specify how wide you want your images to be and also define your styles – I have a 1px black border and a 10px (that’s pixels by the way) white border style. You can also add a watermark but so far I haven’t felt the need or found the time to work out how to do that.

The upsides

If you don’t already use Blogstomp, here are a few of the features I’ve found really helpful and I hope you find it saves you time too…

• Playing about with photos that you think might go together without using shed-loads of memory in Photoshop
• Resizing and reorganising at a flick of a button. I dread to think how many hours I’ve wasted doing this manually in Photoshop
• Pixel perfect borders with no effort
• Consistency of styling – every image that comes out is exactly the same style (if I choose it to be). That would be really hard to do manually
• Saving at the right size for my blog without even trying (to be fair, I used to use Photoshop Actions for this so it was pretty quick, but it was still a 2 step process – resize using the action and then Save For Web – blogstomp does this in one Stomp It click)
• As it Stomps them it removes them from your list so you don’t accidentally use the same image twice (tell me it’s not just me that’s done that?)
• If you realise that a couple of the images don’t work together you just de and reselect different ones

Does this sound more and more like an advert? Sorry Told you I was evangelical.

The downsides?

• It can only montage up to 4 images at a time. So if you want to put together uber-montages like Matt did in his recent post on my charity fundraiser then you’ll need to use something else.
• There’s no free (useful) trial – they get watermarked, so you kind of have to just go for it
• It doesn’t seem to like .png files (the files I get when I take a screenshot like the images above) which means I still need to resize those in Photoshop

Are you a Blogstomp convert too? I’d love to know how you use it and if I’m missing any tricks.

One of my favorite designers Mike Kus has recently given a talk called ‘Designing for Humans’. The talk explored the concept of creating meaningful visual designs with easy-to-use functionality in order to create an overall improved user experience.

As part of this talk he did an unauthorised re-align of the Innocent brand. As they are a perfect example of a fun, creative company with a strong and recognisable brand who’s current website doesn’t reflect their company’s personality.

“Innocent are a fun and creative company with a strong and recognisable brand. They have a lust for life, promote healthy living and are environmentally conscious. These values, brand attributes and personality don’t come across on their current site. I had a go at realigning their homepage to better reflect the Innocent brand.”

The point of this inspirational time-lapse video was to demonstrate the importance of communicating the personality of a company on it’s website – making it more human.

He recorded the entire design process and sped it up to 3 minutes and 59 seconds.

I think you’ll like it and draw as much design inspriation from it as I do.

Innocent’s Current Site

Mikes re-design

Definitions

Firstly I’ll make some quick definitions so that we’re all on the same playing field. There’s no need to confuse matters by calling something X when it’s Y.

• Operating System - Generally Windows or Mac. You will know this by a loading screen or the layout of your computer screen. Based on a lot of assumptions I would say if your bar at the bottom is a fixed straight line you’re on Windows and if it’s a selection of icons that pop up as you hover over them you’re on a Mac.
• Operating System Version - All operating systems come in different versions. For example, Windows has been released in 3.1, 95, 98, 2000, ME, XP, Vista and 7. Mac versions have been in numeric form (e.g. 10.1) and then with a ‘cover name’ for the release (e.g. Leopard, Snow Leopard, Lion). If in doubt: Windows = Start -> My Computer -> Right-click -> Properties and it should tell you; Mac = Apple Icon (top left hand corner) -> About this Mac.
• Software - Software is a program on your computer that you’ll generally use to do an action (e.g. e-mail software, browser software, accounting software).
• Software Version - All software comes in different versions (depending on when it was created). Generally you can get the version by: Windows = Help -> About [Name of product]; Mac = Toolbar -> [Name of Product] -> About [Name of Product].
• E-Mail Software - Software that you use to read, receive and send your e-mails (typically Microsoft Outlook).  E-mail software versions (see software versions) are very important to know.
• Browser - Software that you use to view internet pages. Examples include Internet Explorer, Google Chrome, Firefox, Safari and Opera. Browser versions (see software versions) are very important to know.
• Server - A big computer somewhere on the internet. You would connect to one to either view a website or receive your e-mails. We’ll call these Web Servers and E-mail Servers respectively. This can also be referred to as Web Hosting and E-mail Hosting.
• Cache - Anything you view online your computer will ‘cache’ (store a copy of) on to your computer for faster loading in the future. For example images on a blog.
• Uncache - To uncache (remove the stored copy and load everything fresh) while visiting the web page press: Windows = ctrl+f5; Mac = Apple+Shift+r. You may need to press these a few times. This can also be called a Hard Refresh.
• Content Management System - Also known as a CMS, a Web Administration Panel; this is online software (so not running off your computer) that you can use to edit your web site. Examples include WordPress, Drupal and our own Nourish. These can also have version numbers that will be found at the top of bottom of a loaded page.
• Web Address - Also known as URL (Uniform Resource Location), Link etc. This is the address that you are visiting a web page at. For example http://www.bbc.co.uk is the Web Address of the bbc homepage and http://www.bbc.co.uk/news/ is the Web Address of its news page.
• Internet Service Provider - the company that gives you access to the internet. This will not, in general, be the same company that provides your web and e-mail hosting. For example: Sky, BT, TalkTalk.
• Screen Shot - A stored image of your computer screen at a certain time. This website explains how to take and store screen shots. http://take-a-screenshot.org/

Sanity Checks

It’s always good to make a few sanity checks first. Firstly,

• Am I getting an error message that I could interpret its meaning?

As an example, if your e-mails aren’t coming through properly, you’re likely to get an error message in your e-mails software telling you that there has been a problem. There may be some funny language amongst the meaning of the error but see if you can interpret the problem it is having. Can it not connect to the E-mail Server? Does it say your login details are incorrect?

A few other sanity checks to make whenever you’re having an issue with software or the web:

• Am I visiting the correct web address? Have I filled in all the details correctly?
• Am I connected to the internet? If you’re trying to access your e-mails, try going to a web page that you haven’t been to for a while. Your computer may have cached the web page or error message so try uncaching it.
• Try closing and re-opening the program.
• Sometimes your computer can get itself in a little bit of a muddle and can be returned to its usual sane self by restarting it and trying again from there. Give it a go and see if the problem persists.
• Have you tried another computer? Or another piece of software that does the same job (e.g. you could try using a different Web Browser for web site related issues).
• Have you tried from another location? It could be your Internet Service Provider causing the problem so ring up a friend and get them to try from their house.

When all else fails

When you’ve tried what you can it’s OK to drop an e-mail or phone call to somebody who provides support for the product/service you’re using (for example you could contact me about your e-mail/web hosting if we provide those services to you). They’re there to make sure that you can use the services they’re providing.

However I would advise following the layout below to best interact with your support service. The general key to coming to a resolution quickly is to give your support service as much information as possible – they’re not mind readers.

What is the problem in relation to?

E-mails / Web Hosting / Content Management System etc.

What operating system and software are being used?

Detail Operating System Name and Version.

Detail all software being used and their respective version numbers.

What would you normally expect to happen?

When I do X on [insert Software name and version], Y happens.

What is happening now?

When I do X on [insert Software name and version], Z happens.

Are you getting any error messages?

I get the following error message: [insert error message] from the program [insert Software name and Version]

Include a screen shot

It’s easiest for a support engineer to help you if they can directly see what’s happening.

And with that I’ll leave you all to it hopefully knowing that all issues can be resolved without hitting the panic button. Getting a larger picture of what is happening and what is going wrong will not only help your support engineer but can potentially turn small problems into fixable ones that you can do and learn from yourself.

Every website should have testimonials. Preferably on every page, preferably attributed to a real person in a real place or company – ie Jo Norman, Suffolk or Jo Normal, Daisyley rather than Mrs N. But I can pretty much guarantee that a small, but significant, percentage of people I suggest use testimonials on their websites will have an objection. Usually it’s:

But everyone knows testimonials are made up anyway.

Testimonials add another voice

Now call me naive but I prefer to see the best in everyone. And for that reason I usually dismiss the concept that anyone in their right mind would make up a testimonial. Why would you? Client testimonials (when written in their own words) add an air of authenticity, they add a new perspective that you may not have thought of, and crucially, they add another voice. I write in a very specific tone, if I made up my testimonials, you’d know about it. Take these two testimonials from my branding masterclass students

This class was both relevant and vital to my business. My current site has been active for around four years; it is dated, badly constructed, part-completed and lacking so much. I have been struggling for the last year to find direction following a number of problems including past developer issues and also feel I had lost some of my own personal inspiration. The course has given focus, direction and inspiration – plus it has endorsed some of the things we already do (quite pleasing!). I have a clearer picture of where I want the business to be, plus I am less daunted about the steps I need to take to take the journey.

Lisa Whitty, The Hay Experts

 This course has been an amazing rollercoaster ride that I am incredibly glad I took. I feel incredibly focused on making Zoe & Drew a real brand, something worthy of being shouted about. There is so much still to do but armed with a folder full of each post in this class I know that I will be guided into making both small and big decisions over the next few weeks and for years to come.

What if you’re on a deadline?

I was at an Entrepreneur’s Circle meeting on Tuesday and one of the fellow entrepreneurs said something that shocked me, if I’m honest. He was really proud of the fact that he’d written testimonials on behalf of his clients. To be fair to this guy, he had telephoned them first and interviewed them and then made notes, so it wasn’t quite as shocking as it first sounded. But I’m still not sure it’s right. And I’m not sure that if I’d done that, I could have de-Fiona’d my copy enough to make it sound authentic. What do you think?

I honestly believe that if you do a good job and build a great relationship with your customers, then surely some of them will be happy to write a couple of lines for you? Am I being naive?

We’re lucky enough to receive spontaneous cards and emails from our clients squealing with delight, so I suppose I just can’t picture a situation when my clients would be “too busy” to write us a testimonial. I’d love your thoughts.

I’m really excited to share our initial concept for Mamami by Chet’s new website design and rebrand. We’ve been working with Chet now for a number of weeks to get to the heart of her brand and come up with a more compelling and irresistible way to communicate with her ideal clients.

Mamami’s Current Website

You often hear me talk about weak, good and powerful design and Chet’s website is a great example of a good design. It looks smart (ok, so I don’t love the legs on the mum but the rest is good), there’s clearly been some thought into the design and it’s well laid out. It’s only when you step aside and gain a strong vision for the brand that you realise the missed opportunities. And this is why I get so excited about what we do. Because we can see the vision for a brand and how we can communicate more effectively when the client can only see what’s in front of them. And it’s this vision (and ability to execute the vision) that has a huge impact on a business.

Strategist extraordinare, Bronwyn, worked on the brand positioning and ideal client: the career woman who needs a classic bag to take her from baby classes to the gym to lunch with friends, a business meeting with the bank manager and back to the playdate again. And came up with the fabulous strapline: Beautiful on Purpose.

Chloe has then led the design which totally reworks the brand identity into something much more aspirational, editorial and desirable.

Initial Homepage Design

This homepage mockup is the first stage, we now need to take Chet’s feedback on board and refine this design as well as create templates for the product pages and category page (this is an ecommerce site). But we’re excited! And I know that Chet is incredibly excited too…

The logo stays the same for now, but isn’t it interesting the impact that all the elements around a logo can have? Often we get asked to redesign a logo when in actual fact it’s the brand identity that needs attention. The editorial font, strong colours and stylish shapes really create a look and feel that we’ve planned will appeal directly to Chet’s ideal client. I can’t wait to see the impact it has when the site goes live!