I’m trying to decide if I believe in the concept of ‘Creative people’.

It’s something I hear all the time at work. Creative people are meant to be a different breed, man. Free spirits, livin’ in chaos, expressing theirselves, yeh!

Now, I love being creative. I love a variety of creative pursuits, from designing to drawing to painting to crafts, but is this something you develop in yourself, rather than something you are innately born with? I’m not denying that there are some amazingly talented people out there, creative geniuses, perhaps, but the rest of us? I mean, I’m a very logical person, very practical. Being creative is something I’ve learned to do better. I know what web design layouts work, what colours look right together, but this is from experience rather than instinct.

I believe that all of us have the ability to be creative, there are just some of us who spend more time developing it. So, pick up a pencil, start sketching or something, then you can call yourself a ‘creative person’ too.

It’s been a long time since I’ve designed an email, so before I start here are a few basic things that I should consider.

Designing the email

• Who’s it for: While designing the email you should keep in mind who the target audience is. The email should be relevant and interesting to the reader, otherwise it will often be considered to be spam.
• What do you want them to do: You should also think about what you want the reader to do once they have read the email, basically, what is the call to action. This should be simple for the user to find, so keep irrelevant copy and links to a minimum.
• The layout: It’s very important that the reader immediately recognising who the email is from, so keeping the logo to the top left is a good idea. Also consider that the email will be viewed in different browsers and applications and may also be initially viewed in a preview pane. This means you should try to get the message across to the reader without taking up too much space. Think about how the content is set out. Titles should be short and informative, any images should be relevant to the content and try to be as concise as possible. Also minimise fonts, colours and images as these can make the email confusing and difficult for the reader to scan quickly. And finally, make sure the call to action is prominent in the email, so the reader can easily understand what the email wants them to do next.

Writing the copy

• The subject line: The subject line is the motivation for the reader to actually read the email, so it’s very important to get this right. You should briefly describe the emails’ content, and add something attention grabbing. It’s also a good idea to add a call to action whenever possible
• Personalise: If you have a name associated with the email address it’s a good idea to use this in the email. It will help confirm that the email is not spam, and also make the reader think the email is more relevant to them, hence making it more likely to be read.
• Talk to the reader: Copywriting is a skill all on it’s own, but quite often it will also be one of the designer’s tasks so it’s worth thinking about carefully. Try to think of the email as a conversation, rather than dry information and keep it simple and concise so the reader doesn’t have to read through lots of text to find out what the email is about.

Building the email

• Click, click, click: Make sure any images and relevant text are clickable; you want to give the reader as many opportunities as possible to click on the email.
• Important links: There are a some additional links that should be on every email. Having an unsubscribe link is essential. It will reassure the reader and is also a legal requriement. Another good practice is to add a link to a web version in case the reader has problems viewing the email.
• Compatibility and stuff: Finally, remember all browsers and applications have different rules for displaying backgrounds and images, so your email may not be viewed exactly how you want it to be. This means you should try to build the email as simply as possible, you should never use background images and all styles and colours have to be applied in the HTML rather than with external CSS.

So…

I’m sure there are many more issues to be considered when creating an effective email, so perhaps try a few of these resources too.

20 Tips for Good Web Copy

Email Guidelines

Good HTML Newsletter Design

My features spec is just about there. I’m sure there will be more to add to it at a later date, but I think it covers everything for now.

So, I’ve actually started on designing the initial look and feel of the site. I’m having to combine the latest branding from the print agency, which heavily involves circles (not the easiest to implement in a website) with a functional, reasonably easy to build wireframe.

It’s been enjoyable so far. Lots of gradients, shines and rounded corners, even though a part of me is twitching slightly. Lots more to do!

This is a quick beginners guide to creating advertising Flash banners, including some technical issues you should consider.

Before you create your Flash banner

Before you begin creating your file there are a few things you will need to confirm with your client, advertising network (i.e. MSN or Yahoo), or digital marketing agency (i.e. TradeDoubler) . These are, for example, banner sizes, file restrictions (such as animation length, looping, file size), and URL.

Banner sizes

A banner can be of almost any size, and can be dependent on placement, geographic location and company. Some common sizes are:

• MPU – 300 x 250 px
• Skyscraper – 120 x 600 px
• Full banner – 468 x 60 px
• Leaderboard – 728 x 90 px

File restrictions

Animation length

Some advertising networks will require a limit to your animation length, so before you start ensure you know what this is if there is one, otherwise take a look at IAB Rich Media Standards. They recommend 15 seconds for the length of the animation.

Looping

Some advertising networks also do not allow the animation to loop, so find out if this is so. It’s also worth considering whether the banner will benefit from looping the animation, or if you want to finish on a final frame with a strong call to action.

File size

There will be a file size limit to your Flash banner, so optimising your banner is essential. It’s a good idea to consider this at the design stage. Try to keep everything as simple as you can. Bitmap images and a variety of typefaces will increase your final file size, so on your publish settings select the option to generate a size report to discover where you can streamline your file. Also, take a look here for some further advice on optimising your banner.

URL

The standard method of passing a URL to the Flash banner is by using a clickTag. This code allows the banner clicks to be tracked. The page that the Flash is placed in will tell the banner what the ‘clickTag’ value should be, i.e. the URL with the tracking code, then the Flash banner will use that value as the URL when it is clicked.

The format of the clickTag is also dependant on the placement. ‘clickTag’ seems to be the most common, however, ‘ClickTag’, ‘ClickTAG’ and ‘clickTAG’ are also used.

Starting the Flash banner

Frame rate

Too fast and some processsors can’t keep up, too slow and the animation is jumpy and awkward. So what should you set your frame rate too?

Here’s some info on the ‘Magic Frame Rate’

“About magic frame rate numbers: Recommended fps values for your FLA document are either 21 or 31, otherwise known as the “magic frame rate numbers”. The reason for these values is that the default document setting of 12 fps is more often than not too slow for tween animations, resulting in “jerky” motion. So most of the time it needs to be higher. In addition, it has been found that two SWFs published to the same fps, will run slower on the Mac Flash Player than on the PC Flash Player, given equivalent processing power. Sometimes the lag time is quite noticeable. To counteract this “bug”, we must set our FLA to either 21, 31, 41, 51 or 61 fps to negate this effect. But of course most computer processors cannot keep up with a frame rate higher than 31 fps, or performance issues in the Flash Player may occur. Thus it is advised that only frame rates of either 21 or 31 be used for most FLA documents. Only if you are running an FLV video player in your browser with the video at high resolution (larger than 320×240) would it be advisable to drop the frame rate of your FLV down to 12-15 in order to conserve performance. See Tom Green’s CMX article for more details on video performance in Flash.”

Taken from: Community MX : Understanding the Movie Clip Architecture.

So, I’d recommend keeping your frame rate to 31fps, to ensure minimal performance issues while still keeping a nice, smooth animation.

Background

Always remember to add a solid background to your banner, rather than setting the background property in Flash. Quite often, when a banner is placed it will have the ‘wmode’ set to transparent, so you can lose your set background colour.

Border

It is also recommended to have a solid border differentiating your Flash banner from the content surrounding it. This is quite often a restriction requested by advertising networks to ensure that your banner does not appear to be part of the site content.

Button

Unless you want different parts of your banner to link to different places, a good habit to create a transparent button covering the full size of the banner.

Then add the button action, something like this:

on (release) {
getURL(clickTag, "_blank");
}


Providing an alternative

Also remember that you may have to create a gif alternative to the Flash banner. The file size restrictions will also be an issue here, so try to keep it as simple as possible. It may be a good idea to keep this static if possible.

And finally

If you are looking for some more information, check out Adobes Best Practices when advertising with Flash or read my other article on Flash Banners Ads.

This is harder than I thought it was going to be, writing this Features Specification, that is.

Well, I’ve almost finished the first draft of the written document. Then my plan is to print it out, read it through, sketch out a site map and then work out where all the holes are. There is a lot to think about. I want to ensure that I’m making the user experience as smooth and beautiful as possible, while considering all the functionality that the client wants to include.

It’s felt a bit like I’m chipping away at it for days, but soon I’ll be able to see the big picture (Sorry to mix metaphors!)

As I’m a Designer, it’s normally expected that I’d want to get straight into actually working on the visuals for any project, but as it turns out I’m the main advocate of creating a detailed Features Specification for the current project I’m working on.

It’s really important before a project goes ahead to know it’s full scope for a variety of reasons.

1. To make it clear to all involved in the project what the purpose and functionality is of each page, and the site as a whole. This clarity ensures that at the start of the project everyone knows what we are aiming to acheive. It documents our intentions and ensures we are going to create something that properly fits into the clients requirements and expectations.

2. To make the design more cohesive by defining components. When designing numerous pages there can end up being many different elements. Just a bit of thought into grouping these elements as similar components can make it easier on design and build.

3. To accurately plan and cost the project. If we are all aware at the beginning of a project of what the level of work will be required, especially in development, then the cost will be more accurate and the planning will be much easier.

4. To make it easier to actually design. If there is a clear set of content and functionality for each page, then when it comes to designing the site, there will be more time to concentrate on the look and feel, rather than what is actually going on each page.

Something I really want to spend more time on, is creating icons. Cute little darlings scattered across the internet. From favicons in your address bar to folder icons on your desktop to an extra touch in the design of a website. Little visual cues – telling you what’s going on, what’s it about, or just where abouts you are. Who doesn’t recognise the blue and white Facebook ‘F’, or the Windows Messenger figure.

Even I’ve created my little pixel icons as part of this latest web design (let’s call it v01, just in case I redesign this at some point in the future), which if you really fancy you can download here.

Anyway, here are some free icon sets that I think are really adorable:

Turbo Milk Monster Icons

~dimpoart on deviantART Yummy Icons

Icon Buffet Sushinobi Icons

And, if you want to make your own, try this out Axialis Icon Workshop

Today I’ve been doing some testing. Running through one of the sites we’ve been working on. Was really initially meant to be testing the layout in IE6, but due to my slightly pedantic nature I’m pretty much running through a lot of the functionality and logging the rather numerous, if minor, bugs. There aren’t that many IE6 issues anyway.

Testing is actually something we’re normally quite bad at doing right. It always gets scheduled in at the start, but as a project goes along, and things take longer than expected – especially the development work, the time for testing gets shrunk. It is a really essential step though. It’s hard to view something you’ve been working on objectively. You know where to click and what button takes you where, so you never get lost in a site, and unless there is an error, your expectations are always fulfilled. So, you require an outsiders eye. Someone who has absolutely no idea what’s going on (Okay, that’s a slight exaggeration).

Anyway – there is lots to check and fix. Fingers crossed for the deadline on Monday!

I’m almost at the end of working on this sign up process, so here are a few basics.

• Ensure that having to sign up is actually necessary
• Inform the user what the benefits are if you sign up
• Only request the minimum amount of information required
• Show links for ‘Sign in’ and ‘Forgotten your password?’
• The form labels should be simple and obvious
• When showing form errors, make it explicit where the error actually is (i.e. explain if it’s either the email or the password that is wrong)

Well, there is still lots more to learn, and if you are interested, here is a little bit more reading :

• Smashing Magazine, Web Form Design Patterns: Sign-Up Forms
• User Interface Engineering, Account Sign in: 8 Design Mistakes to Avoid
• A List Apart, Sign Up Forms Must Die ( excerpt from the Web Forms Book mentioned before)

Well, the next exciting thing I’m doing is revising a sign up process. What I really need to do is look at this book: Web Form Design: Filling in the Blanks by Luke Wroblewski . Actually I’m pretty sure there is copy around here somewhere.

Again it’s all about user interaction, creating a simple effective form that is easy to use. You want the user to not even have to think about what they have to do, but just do it. I’ll let you know how I get on.