Imagine if some flash Gok Wan type in thick-rimmed spectacles had just come along and chucked your favourite Levi’s in the bin and presented you with a brand new pair. You’re understandably resistant. They feel stiff, they make your shoes look old and, more importantly, not one member of the opposite sex has ever said how good your backside looks in them!

You’d want your old pair back wouldn’t you? And no doubt your moaning would perpetuate until at least a few compliments about the new pair had been heaped upon you. By this time, though, you would have probably realised you like the new pair just as much as the old pair, if not more! It’s no different in branding. Change is uncomfortable, but in the long run, it’s needed.

That’s exactly what has happened to the Gap re-brand, except they’ve just fished the old pair back out of the Brabantia and kicked the designer out of the back door. Personally, I think it’s a big mistake and I can’t help but feel that the middle-of-the-road clothing giant has reacted in a rather spineless way by dropping the new logo after just one week.

A logo is a mere emotional trigger for the brand’s values; brand values which in this case have not been given any time to stand up to proper scrutiny. This new direction was always going to come up against resistance and Gap should have been prepared for the backlash.

We live in a time where mobilising hate via all of the different social outlets has never been easier. If you took the 5000 or so Facebook and Twitter users who joined the ‘campaign of dislike’ for the new logo and put them into a percentage of loyal worldwide customers they would certainly pale into insignificance.

Mark Hansen, President of the Gap brand in North America told The Guardian, “We’ve learned a lot in this process. And we are clear that we did not go about this in the right way. We recognise that we missed the opportunity to engage with the online community”.

I’d agree with Hansen that engaging with the online community could have had a positive effect for the Gap brand, but only in terms of their values. It would be beneficial for assessing how well they communicate with customers, the way their stores work for people and how they could improve generally, but not the success of the new identity.

If Gap was fully behind Laird & Partners, the New York-based branding agency commissioned to create the new logo (who have a pretty good track record with the existing brand by the way), they would have respected that the creative forces there knew what they were doing and backed them whole-heartedly. I have no doubt at all that the new brand would have been fine if it had been allowed to find its feet.

Everyone in the creative industry knows that design by committee doesn’t work. Clients need to trust an agency to work through ideas to form an opinion and create end results that can be defended with professional integrity. Caving in when the first wave of criticism hits the shore smacks of a brand that doesn’t really know what it wants to be.

I would rather go with ‘confident and assured’ than ‘spineless and fallible’. Maybe that’s why I’ve never owned a pair of Gap’s famous Chinos though?!

A huge amount of these techniques are workarounds to achieve results that, to the layman, look perfect. On closer inspection however, most professionals will agree that the workarounds used can create confusion, delay and in a lot of cases will need to be totally re-worked using best practice design techniques to avoid future editing problems. So here it is… a series of best practice design techniques for the Photoshop digital designer.

Smart Objects

Smart objects will help you save time, reduce the amount of layers you have and help you maintain all of the original vector data you need for the future – trust me – they are superb.

If you think you’ve heard of them but can’t think where from, you’ve probably used the option to import a smart object from Illustrator. If you copy a vector shape from Illustrator and try to paste it into Photoshop you will get four radio buttons asking you which format you’d like the file in.

A smart object will keep all of the vector data you are trying to import – meaning you can increase the size after you have placed the object. If you then re-open the Illustrator file via Photoshop (by clicking on the smart object icon on the relevant layer) you can edit and save the vector file and it will automatically update in your Photoshop file – smart eh?

Well, with graphics and images in Photoshop it works in exactly the same way – except you don’t need to use two applications.

Multiple Layer Styles

Let’s say you are trying to create one of those shiny web 2.0 buttons we all know and love – You want a nice light blue-dark blue gradient on the button but you also want a white gradient highlight over the top of the button.

Some designers may mask a new white layer over the top with a low opacity; some may do a similar thing with a rasterized white layer and the eraser tool, load the button selection and delete the surrounding white. The results may be similar but you’ve just done with two layers what you could be doing with one – and you may have just lost all of your buttons vector information.

Okay, using one layer instead of two might not sound like much, but when you work in Photoshop files with up-to-and-over 200 layers then cutting down on wastage is crucial.

All you need to do is create your button shape with your first gradient and any other style you wish, right click on the layer and select ‘convert to smart object’. You now have a new blank layer style palette to add your white reflective highlight gradient.

If you need to edit the original vector all you need to do is click on the smart object icon on the layer and your button will open in a new window. Edit and save this file and it will update automatically in your design. You can feasibly do this as many times as you like – though why you want more than two or three lots of layer styles on anything is a question you’ll have to ask yourself!

Batch actions

Okay, let’s stick with the button example – Now you’ve got your button you might want 10 buttons for your navigation all in the same style. A day or two later you re-visit the design and you feel the colour isn’t working, if you didn’t use a smart object you’d need to amend each of those buttons individually – if you did, all you’d need to do is open the smart object amend the source file to your new favourite colour, save it and it will update all of the buttons in one, immediately.

Bitmaps

A nice trick when using non-vector based graphics is to place your bitmap at the biggest size possible (let’s call it a logo that your client only seems to have in jpeg format – we all know what that feels like!).

If your place it at a size which is far bigger than you will ever use it and create a smart object out of it you can scale it down, play around with it and then, more importantly, scale it back up without losing any quality. As long as you don’t make it bigger than the original file you placed you can play with the size as much as you like.

Smart filters

The reclusive little brother of smart objects is smart filters, Harder to find but just as useful. The virtues of smart filters are simple and if you’ve any experience of using filters one-at-a-time I’m sure this will convert you.

Smart filters allow you to add as many filters to an image or graphic as you like without affecting the original file. Like layer styles, you can turn each one on and off individually from the layers palette with the added functionality of being able to edit each filter individually. If you weren’t using them before, I’m sure you will be now – it makes a lot of sense.

You can find the ‘convert to smart filters’ at the top of the filters drop down.

I hope this helps. If you have any questions or have a subject you’d like me to cover just leave a comment below and I will be in touch.

The debate between these teams rarely stops here at Zeta. We work through our individual desires together for each project and by listening to one another (with the occasional raised voice) we achieve results that we can all be proud of.

However, workflow can sometimes dictate that we need to outsource development to one of the many extremely talented teams that Zeta occasionally work with externally.

Getting your design vision across when elements cannot be discussed in real-time  and face to face can be tricky, so here are a few of the techniques we use to help communicate our work in order to minimise project time scales and deliver outstanding results on budget.

1. Layer Comps

Photoshop layer composites are all too often neglected by designers. Developers should not have to manually turn layers on and off to find different elements or pages in your design. By learning to use layer comps correctly you can be sure that your work is being viewed in the way you intended. It will also cut down the weight of your psd. You do not need to duplicate layers when they have different styles or positions. Layers comps will do all of this for you. There are also scripts attached to these layer comps (accessible via the file menu) which will automate saving the different stages of your design in one easy click.http://www.adobe.com/designcenter/photoshop/articles/phscs2mrlaycomp.html

2. Photoshop Animation

When designing motion elements (flash/javascript etc) it’s useful for both the designer and developer to animate the interaction roughly. It can give you a much better idea of the user flow and conveying movement in words only is asking for trouble, even basic movement is better than a static storyboards and descriptions. I’d advise you to create a separate psd for your animation file though because merging and rasterising multiple layers can become useful when animating.

3. Design Elements psd
Separate your websites interactive elements into one psd. One file with your buttons states will save a lot of time later in the project. Think about disabled button states, default, rollover and visited styles. The more information you get across at this stage the happier you’ll be with the results.

4. Collaboration Suites
Being able to annotate your work and explain design elements to developers is crucial. Remember as well that’s it’s a two way street, you shouldn’t just be telling people what to do. Any creative process is improved when all the parties involved feel their opinion is valid and if you can’t have that conversation in real-time somewhere to have a creative conversation is vital. There are several creative collaboration suites to choose from. Here at Zeta we use Concept Share. I can highly recommend it.

5. Screen casting
Ever taken instructions off someone and wished you could listen to what they said just one more time? Notes from phone conversations never cut it, so screen cast your thoughts and send a video. Your developer can take it one point at a time or go back and clarify points as and when they chose. You don’t get inundated with questions and the developer knows exactly what they are doing, everybody’s happy.

Communication is key in any creative environment and in my experience these are definitely some of the best ways to work smarter rather than harder when overseas development is necessary.

A call to action is a marketing concept, a request to ‘do something’, often the next step that a customer takes to purchase your product or service. It’s very important because it dictates what the website can achieve, and is a measure of whether it serves its purpose: to generate sales and enquiries.

Calls to action are important on any website, but most importantly e-commerce sites and email newsletters in which a business is driven by sales, so encouraging a user to proceed with a purchase is vital.

When creating a call to action button, it can appear in any form, but the user must understand what is being communicated. Calls to action contain several critical aspects that must be considered during the design process.

Language

Language is probably the most important aspect. Every call to action will contain some text whether it’s four words or one single word. But it must relate to the user. The way to approach this is to think “what would the user want to do?” rather than thinking as the seller.

For example, an insurance company may use the language “price estimate”, but a customer would say “quote”. Therefore the call to action on the button should display “get a quote” and not “get a price estimate”.

Another good reminder when designing a call to action is to make sure it starts with a verb. Otherwise it’s not a call to action, it’s just a button with some text on it. It is the importance of the words that prompt the user to interact and make an action.

Fig 1 shows how to use the correct language when creating a call to action.

Note: The use of the language is correct when the text begins with a verb relating to a user perspective.

Colour

Colour is also a very important factor within the design element, as it draws attention to the call to action. If you want your user to choose a certain path, then let them know exactly where they have to look.

A user should be able to see your call to action within the first few seconds when they land on your site. If a user cannot find what they’re looking for, they will become frustrated and leave.

Bright colours seem to have the best effect as they stand out, and communicate to the user that it’s something they can interact with. This is especially true when dealing with an e-commerce site that contains a lot of information.

Also, contrasting colours and negative space will help the colour to achieve its potential in a layout. The colours need to complement the brand colour palette.

Size

A call to action should always be instantly visible. Size is highly important, as you need the call to action to stand out for it to be most effective. A well-known fact is that the larger the button, the higher the chance a user will click on it. The idea is to intrigue your user, make them want to go through. Make it obvious it’s a call to action.

Fig 2 is an example of how big a call to action should be.

Note: The size of the button makes it stand out from the text above it, giving the call to action equal or greater importance than the heading.

Fig 3 is an example of how to use the correct colour and positioning.

Note: The contrast of the colour balances with the design and layout. The bright colour also makes the call to action stand out.

Positioning

The elements of language, colour and size brought together can only successfully work if the call to action is positioned well. If it’s not placed in the right way you won’t achieve your objective, regardless of whether the other elements are working.

The call to action should appear “above the fold“, the portion of a web page that can be seen without scrolling down the page. A call to action has to be inserted in the correct place for the user. For example, a user would not read a whole page of text about a product before clicking on a button to purchase the product at the very bottom of the page. You want the button to be the first visual a user sees in relation to the product. Every task you would like your user to access should always be well positioned on the layout of the page.

Taking account of these important factors can lead to good interactive design elements, setting a balance between user and designer.

Five points to remember when designing a call to action:

1. Always start your message with a verb
2. Make the button stand out with colours that contrast with the rest of your layout
3. Make sure the call to action is large enough to be noticed
4. Position your button so that it is accessible and noticeable, as you only have seconds to keep the user’s attention
5. Let your call to action be part of the design, give it as much importance as the content

“Over deliver” – the mantra all good digital agencies should live by and one we take very seriously here at Zeta. Meeting client expectations and delivering beyond the brief takes careful planning and consideration.

With that in mind, knowing exactly how browsers will display your design is imperative. Producing stunning visuals is a must. But if you present clients with concepts that don’t represent how the live site will look, your final delivery will not have the impact you hoped for.

Of course, Flash developers don’t need to worry about how their fonts display and neither, for that matter, do web designers. They can just turn text into images and everything will look fine. But any web designer worth their salt will care where their clients rank in search engines, so HTML text is a must. It’s beneficial to both clients and agencies to design for SEO. It also helps that we’ve got a team of marketers who keep the pressure up to produce sites that can be optimised to their full potential.

So how should fonts be displayed to clients?

When I started designing websites in the 90s, font smoothing was something Microsoft developers thought Apple designers did on a Saturday night in the privacy of their own homes. So back then, turning off my anti-aliasing altogether was the best way to display fonts to clients. Now, however, browsers cope well with typography.

For a while now, I have been meaning to test which of the anti-aliasing settings in Photoshop best represents the font smoothing in modern browsers. Well, guess what? I made some time, sat down and did it. I took screenshots of zeta.net from a Mac and a PC and compared them to the initial design files, changed the anti-alias settings and put it all together into two easily digestible tables.

Now, this is a fairly subjective exercise, so if you don’t agree with my findings that’s fine, Just have a look at the tables below and make your own mind up. Think of it as a resource to show clients how your concept will look when published on a live website. From now on I will be presenting visuals to my clients with the following Photoshop settings:

Sans-serif font – Arial

PC

Crisp for small body copy.

Crisp or smooth for large headings.

N.B. The extra transparent pixels Photoshop adds for anti-aliasing do make all fonts a little bolder on small sizes, so I would actually say the ‘none’ setting is still probably the most accurate for character width.

Mac

Crisp just edges it for all sizes for me.

Serif font – Georgia

PC

None for small body text, because it mirrors most characteristics of the browser-rendered font. With anti-aliasing turned on, the kerning seems to be different for small sizes.

Sharp for larger versions of this font. For dark backgrounds I think sharp also works best.

Mac

Strong for all sizes, because of the way Macs display fonts (a little bolder than PCs).

Managing Director Roger Allen says, “In any business the workplace has to be fit for purpose and that doesn’t just mean practical.  People have got to feel at home, comfortable and proud of the company they work for. The graffiti art on our walls is great and I just love the process we went through to do it.”

Background

When Zeta moved no one could begin to agree on art for the offices. Sometimes an outside view can give a better perspective of the strengths and USPs of an organisation.  Zeta does it for others so why not have someone do it for us?

Then there was that great weekend in Shoreditch and down Brick Lane.  A party in an old warehouse and sight of the most amazing street art spread across one whole wall in the warehouse.  That’s where we met Jay Gawronski.  The next morning Henry Waterfall-Allen announced that Jay was coming to Poole.  He would be looking at Zeta… who we are… what we do and then he would create his own street art on our walls.

Flowers and plants are important to Zeta, we’ve had the same plants from day one. They are part of our identity.  Interconnection is another theme in the world of digital, web, email and mobile.  That was it really so Henry started moving the furniture and three days later they were done. This part of the process has been documented with pictures and comments on Flickr: http://www.flickr.com/photos/zetadigital

The Result

The finished designs incorporate Zeta’s logo, colour palette and the words analyse and create – lead words in Zeta’s business strategy. Everyone agrees the office walls finally reflect the characteristics of Zeta and have made it an even better place to work.

View the complete photo album.

Contact:

Jay Gawronski
+44 (0)7760406574
fanakapan44@hotmail.com

You can read the article on the Design Week website.
http://www.designweek.co.uk/let-weymouth-beach-group-boost-the-resort/3001720.article

Over a two year period every time Weymouth got its bid ready, SWRDA would say “hey wait a minute you should increase the bid” so Weymouth would re-visit the application and duly increase the parameters. Just imagine the processes involved, engaging with architects, designers, artists, lighting specialists to say nothing of the consultation processes with the locals. Not once or twice but three times Weymouth has been encouraged to raise its expectations and re-submit proposals. The value of the bid increased from around £2.2 million to potentially around £8 million with SWRDA agreeing in principle last November to grant funding of £6.6 million.

The Weymouth scheme wouldn’t have just been good for tourism in the usual way. It was to be ground breaking, an ambitious development not tied to a retailer but firmly committed to excellent design. You have to know Weymouth to understand the issues. It has a fine original Georgian seafront. Arguably “the original Georgian seafront” as George III built his summer residence in Weymouth and made sea bathing fashionable there. George’s “Bathing Machine” still stands in front of his statue, one of only two painted statues in England.

The “George III” square was to have been absolutely pivotal to the whole scheme with fine sculptures and inspirational road planning. The lighting and the entire project had sustainability at its very core. Not just for the materials used but working practices, transport and waste disposal.

Does Government understand the economic benefits of great creative projects? Politicians still don’t even appreciate the huge value of music and the creative arts to the economy. SWRDA totally failed to appreciate the real value of the Weymouth Seafront Project and the consequent damage their betrayal will cause.

The brief was to explain how the printers frost a security hologram identity onto the ID cards and how it will benefit businesses. After much collaboration we decided that video was the best format to communicate the message and also target customers through the second biggest search engine, YouTube.

The video is part of the online Holokote Tool which we recently built for Magicard.

The Holokote tool is a unique way of encrypting a company logo onto an ID card. The watermarked logo is frosted onto the card creating a secure hologram. It is a really neat tool which we wanted to reflect in the ordering process.

So we built a truly bespoke application which allows customers to upload the background image for their card and their company logo. Once both images have been uploaded customers can alter the threshold of the logo to ensure it is pixel perfect and then play around with sliders to position the logo on the card. The preview stage shows how your card will look, fantastic!

I was quite amazed at the number of ideas online. Some were good, some were bad, and some were just strange.

Here are a few ideas I came across:

• Bookmarks
• Note cards
• Tooth picks
• Fingernail cleaners
• Noisemakers for the wheels of your child’s bike
• Non-sticking post-it size notes
• Handy cards to clean the spaces between your keyboard keys
• Shopping lists

The problem is I needed a solution for getting rid of hundreds of business cards and if I used any of the above ideas I wasn’t going to get rid of them any time soon. Another idea which interested me was ‘business card cubes’. This is where you create small cubes by folding six business cards together. Then once you have created a few boxes you can start combining them to make different shapes. This seemed like a fun idea, but what could I build which would use hundreds of business cards? Well what about a giant Z for Zeta which could be used in the new office? I discussed the idea with Will (one of our creatives) and he was enthusiastic about the idea.

We started creating about 60 cubes every lunch time. After a week we realised how much of a mammoth task this was going to be. Luckily Jessica (our Spanish search expert) wanted to get involved and started creating the cubes at home with her flat mates. This was a big help and in no time at all we had enough boxes to finish the job so we could start combining them into a Z.

After the fifth week we managed to finish the Z which was 18 boxes high by 10 boxes long and four boxes deep. It was a relief to finally finish the task because it started to get quite tedious. The Z looked fantastic and I had managed to get rid of all the business cards, well almost, the rest I can use for tooth picks.

You can find detailed assembly instructions for the business card cubes here: http://nedbatchelder.com/text/cardcube.html.

So do you think the Z was a good idea?

Sam Allen
Search