Headspace Design/Development

• About
• Projects
• Services
• Blog
• Contact

Back to list of articles

Headspace performs for the East Coast Music Awards

More correctly, Headspace is honored to be working with the East Coast Music Awards on developing their international email newsletter.

With a new website launching soon, ECMAs need to get their message out, and more importantly, connect with a worldwide audience of movers and shakers in the music biz. The email marketing campaign will feature news, events and links to video clips and testimonials.

Headspace will design, develop, launch and measure the quarterly newsletter, driving traffic to the ECMA website, and increasing ROI for them. We’re proud to be working with this highly esteemed organization, and we look forward to assisting them with their marketing efforts.

To Firm or Not to Firm? How to Choose Between Going Solo or Going Big

A post I wrote has been accepted to Freelance Switch.

The article has been copied down below (but you should still check out the site!):

Before going out on their own, many freelancers struggle with the idea of how to position themselves in their market of expertise. Considering many freelancers have at one time worked in an agency setting, it’s tempting to have the agency mind-set when crafting your promotional materials.

For example, the decision of whether to use ‘I’ or ‘We’ can dramatically affect the way you’re perceived by prospective clients; “We can deliver excellent results” sounds much larger than “I can deliver excellent results”. The big question, then, is this: do you want to be an agency or a freelancer?

The truth is, most big agencies started as one or two people. For those who knew they didn’t want their business to stay small, they had to position themselves as something greater than what they were, and grow slowly over time. Therefore, any freelancer starting out has to consider the question of whether he/she wants to stay a freelancer, or grow into a firm. There are definite pros and cons to either approach. Here are just 5 factors to consider:

1. Overhead
2. Competition
3. Client caliber
4. Hourly rate
5. Busyness

Freelance

1. Little overhead. When you work from home, as most freelancers do, you have little to pay for, other than the cost of keeping a roof over your head, food in the fridge and the internet connection plugged in. Most of the money you make can go directly into your pocket, whether that be a savings account, investments, or a new Apple cinema display. The lower your overhead, the higher your profit margins.

2. Competitors are colleagues. Competition is fierce in any business, and the same goes with freelance design/programming/writing. That being said; many of our freelance competitors tend to be colleagues or even friends. People we can have a beer while sharing client horror stories. Sure, we may lose projects to them on occasion, but for the most part, there’s enough work to go around, and clients make their hiring decisions based on our portfolio, price, experience and professionalism—and nothing else.

3. Worth less in the client’s eyes. While reputable freelancers can certainly gather big client work, many large companies tend to favor established firms for their $50K projects. It can be hard to convince a prospective client that you can do the same quality of work as a 10 person company with a downtown office, a team of designers and coders, and an attractive front-desk person who offers to hang up the clients’ jacket and make them a cup of coffee. Meanwhile, the lowly freelancer is sitting with the prospect in a Starbucks. The truth is, many prospects worry a one-man band is unreliable since, as they often put it, we could ‘get hit by a bus tomorrow.’

4. Lower rate = no outsource potential. Let’s face it, freelancers generally can’t command the high rates that even small agencies do. Clients know we don’t have to pay employee salaries, or keep the phone system running, so the same caliber of work will often get sold at half the rate that the big boys charge. Because of this, freelancers generally can’t afford to outsource their work and turn a profit. As a result, they can only bill for the hours that they are physically able to work. This may mean they have to turn down work on occasion.

5. Octopus syndrome. Freelancers tend to suffer from this. They are required to be all things to all people; designer, writer, programmer, copywriter, strategist, accountant, cold-caller, dog walker, networking-event shmoozer—the list goes on. As previously stated, freelancers usually can’t afford to outsource their responsibilities, which means they have less time to be working on the stuff that actually pays the bills.

Firm/agency

1. Major overhead. Office rent, furniture, computer hardware and software (times the number of employees), file servers, phone systems, not to mention salaries—firms and agencies have overhead to spare. It’s usually the ol’ bricks and mortar that destroys the cool little design firm that used to churn-out award winning work… before they went under.

2. Competitors: they’re out to get you. Unlike freelancers, competing agencies are usually not the best of friends. Because of the aforementioned overhead problem, every agency needs all the work they can get. That means they’re usually savagely competing with other firms on proposals, and often bad-talking their competitors when they can. That can be a little unnerving when your monthly break-even rate is 50K.

3. More credible to large clients. One of the benefits of being considered an agency is that big clients with big projects have no problem handing you big wads of cash. You’ve got an office and a fancy phone system, so the client has less concern about liability. In this case, perception is everything.

4. Higher rates mean outsourcing potential. Because agency rates tend to be in the triple-digit-per-hour range, you as a business owner can leverage the talents of other people, whether that be salaried employees or contracted freelancers. This means you can take on more projects, and, if well managed, can turn a good profit.

Think about this in simple terms; imagine you could take on 10 projects a month, at $10,000 per project, each one requiring 50 hours of development time. You have 10 good contractors to outsource to who charge $50/hour, one contractor on each project. If you paid each contractor $2,500 for a job, and took the time to manage each client and each contractor, directing the quality of the work and the expectations of the client—you’ve just made $75,000 that month, you’ve got 10 happy clients, and 10 happy contractors who can be used in future projects. This is something you would have never been able to achieve as a solo freelancer.

5. More time to focus. In theory, if you have a team of either employees or freelancers at your disposal, you should have more time to do what you do best. If you find you’re better at developing business than designing, then you can hire a great designer and have fun watching her work some magic while you profit off of it. If you love being creative, but have trouble managing the business end (paying bills, invoicing, networking etc.), then you can hire someone else to fill that role. That means you’re spending your time doing what you love and what you’re good at, and avoiding the octopus syndrome freelancers often contend with.

Do what feels right

So what do you choose? There is no right or wrong answer because it all depends on what you value most. If you’re positioning yourself as a business, you can hope for more money in the long term, but more initial stress and start-up risks to go with it, and greater complexity overall.

Freelancing tends to offer a simpler way of life: working on what you want, when you want, but it may not bring the prestige of working on million dollar projects for international brands, or making the top CEO list in the local business mag.

Every company starts as one or two people, but it is your positioning that will dictate your growth potential. If you’re content to stay as an independent freelancer without any ball-and-chain overhead, then position yourself honestly as such.

Do you have any other factors that can help you decide whether or not to grow your freelance business bigger?

Headspace Listed on 30 Most Inspirational Web Designs

Never one to modestly throw away a chance at shameless self promoting, I just wanted to proudly mention that the Headspace site was listed on Elite By Design as one of the 30 most inspirational light web designs.

A good process can work wonders for your design

In my experience, I’ve noticed that with traditional design studios, there seems to be more care put into the design process. Sometimes this process can be lacking when a firm specializes in the web. Perhaps this is because web firms have more to think about, there’s SEO, analytics, and the big focus; development. Poor old design can get relagated to the back seat it would seem.

But if you’re a designer, you need to fight for your craft! In many ways, this can be done by having a tighter process, which, instead of impeding creativity, will maximize client satisfaction and design quality.

Typical Design Process

1) Call/email/meet with client, go over design questionnaire
2) Begin design
3) Present design, and receive feedback
4) Make any necessary revisions
5) Once approved, send templates to development team
6) Review and test before launch

Okay, so this is a pretty standard process. I’ve found time and again though, that a few extra steps in the beginning and a few extra steps at the end go along way to minimizing needless client-revisions, and maximizing the quality of the final product. As you see, there’s only one extra number in the steps:

Suggested Design Process

1) Meet with client
2) Design Brief
3) Information Architecture/Wireframe/Sitemap
4) Design
5) Present
6) Translate to code
7) Refine and test

1) Meet with client

I can’t stress enough the importance of meeting with a client face-to-face. In many ways it can completely affect the final outcome of the website as well as the working relationship with the client. It is where you get a chance to present yourself as a consultant to the client, not merely an order taker.

The problem with sending an email questionnaire is that the client simply fills out an order for the designer, and then expects the order to be carried out the way a cook in a restaurant prepares a meal based off of written instructions, without ever meeting the patron. This is not the way to go about a design project. We want to develop real trust between ourselves and the client, trusting they know their business, and they need to trust we know design, and have their business interests at heart.

Also, you’ll notice that clients will often say completely different things when they fill out a questionnaire as opposed to a discussion, where they will naturally be more candid and less ‘official’. It’s this reading between the lines that will give you as the designer tremendous insight into the mind of the client.

If a personal kick-off meeting cannot be arranged (in the case that the client is out of the local area), a phone conference call can be arranged, but again, email exchanges are greatly discouraged, at least at this stage (once you know the client, email exchanges are fine).

Another note, it’s incredibly helpful to discuss content at this point. Getting a client thinking about their content early will reduce the likelihood of a site being put on hold for weeks while the client struggles to provide content. Having content, even if only rough, will also improve the design. Instead of designing a template with lorum ipsum, you will be designing with real content in mind. Content in this case can mean photos/video as well as copy. The more is planned from the beginning, the better. Never allow the client to treat content as an afterthought—it is perhaps the most important element of any website.

The business benefit of taking this approach is the up-sell factor. Unless you bring it to their attention, clients rarely think about the content. By reminding them that they need to provide it, you can often sell a client on allowing us to bring in a professional copy-writer for the written text, and a professional photographer for the images. This gives us better quality content to work with, and also brings in additional revenue for the company.

2) Present a design brief

Before even beginning the design, it is helpful to present a design-brief to the client. This is a common practice in traditional agencies, however it sometimes gets overlooked in a web design company, where other services such as site marketing and development can overshadow one of the key components to a site’s success—the design.

A design brief simply states back to the client in writing everything that was taken out of the kick-off meeting. It shows what your design strategy is based off of the clients’ goals. It defines for a client how to judge the success of the project, giving them a measuring stick, and eliminates the “wait and see” attitude of the client (ie: “I’ll know when I see it whether I like it").

Once the design brief is signed off, it will serve as your guiding point for the rest of the project. If you stray from the brief, your client will let you know, and most likely question the design choices. If the client feedback is excessive and strays from the brief, you can always go back to it and state how your design fulfills all the mandates of the brief.

A good design brief is a crucial part of the design process.

3) Wireframe and site-map

Although its tempting to begin the design at this point, it can be helpful present a wireframe and sitemap to the client. This need not be in person, but a phone call to discuss is ideal.

Essentially, this is information architecture. You’re trying to get the client to understand and provide feedback on the information hierarchy without being ‘distracted’ by the branding aspect of the site design (ie: type, colors, photos). This will help the client comprehend your layout, which blocks of information go where, and it will help them understand the basic flow of the site—how users get from point A to point B.

This process can help you as the designer come up with ideas that improve the site usability, without being concerned (at this point) with the visual aesthetic.

4) Design

Now with all the necessary research and insight into the project, you can begin designing. Before starting the design on the computer, have a creative session with the design team. This is something done in most creative agencies, and again, gets overlooked in a web setting. It shouldn’t. A website deserves as much creative strategy as a print, radio or TV ad. Get together with the group, briefly discuss the clients goals, and then throw out concepts. Some of the greatest sites designs are based off of a concept, which help differentiate the client site from their competitors.

Remember that not just designers need to be involved here. It can be incredibly beneficial to brainstorm with a developer as well. Though we may not believe it at times, they are creative people in their own right, not just brains in jars plugging in function calls. Often, good developers will be able to offer insight into current development techniques being used that improve site usability, such as an interesting content feature, or a JavaScript method that still keeps the build within scope.

Before, during and after this, do thumbnail sketches of the site design so you can freely experiment with the design elements before being restricted by the computer. Remember, the software is only a tool to digitally translate your design. Once the team has brainstormed, leave them out. It doesn’t make business sense to have two designers working on the same site, nor does it improve the design by having multiple designs to choose from, which leads us to…

Don’t create more than one design. I highly discourage the act of mocking up multiple design options for a client. It devalues design, and wastes time and money for both the company and the client. Read more of my rant on the topic of multiple designs.

Although a common practice is to design a home page and a sub page layout, it is often beneficial to actually lay out the majority of the website using real (or close to real) content (which you received by now thanks to pestering the client at the beginning). Laying out standard pages such as ‘about us’ and ‘contact’ allows you to create sub page layout variations that depend on the content. This also gives the client a more concrete idea of how their site will look once coded and live. Of course, you need to actually enforce that these pages look like they were designed once they’ve gone to code land.

5) Present/revise design

With a finished design presented to the client, discuss with them how this design is based off of the wireframe, and more importantly the design brief. Show how all of the clients’ mandates for their target user are being met by the design. Don’t simply send it to the client and ask them if they like it—you have to sell it. NOTE: I usually refrain from referring to a design as a mock-up. I feel that subconsciously, this devalues what your offering by suggesting that it isn’t ‘designed’ until its in code form, reinforcing the notion that design is quick, cheap and easy. We are presenting their sites design, though not in a work-able format, therefore this is the time for the client to present feedback, not once it’s developed. Many clients try to speed through this ‘mock-up’ process to expedite the build. This will only cause problems down the line, and will slow down the developers.

Revisions from the client should be handled delicately. The trick is to balance customer service with self-respect and professionalism. Often clients will make judgment calls based off of what they “like”. However designing according to a clients’ taste is like shooting at a moving target. There’s nothing to base your decisions from. This is why presenting yourself at the beginning of the process as a consultant, and having an informed design brief will minimize the chance a client will tell you he doesn’t like what you’ve done. If a site is well designed and based off of real business goals, it can be sold to a client, even if he wouldn’t choose to decorate his home in the same style. One of the best ways to sell a client on a design is to repeatedly point out that decision X has been made for the target user. Decision Y has been made for the target user. This way your taste and the clients taste are completely left out of the equation.

There are times when a clients negative feedback is right on the money. Because they intimately know their business, they may have a request for a revision on an element that you’ve completely overlooked. In these instances, it’s important to avoid the cliche designer attitude that our crap doesn’t stink. Coming off as dogmatic only frustrates clients and makes them question your professionalism. If a client is completely wrong, and you believe strongly in your decisions, kindly and helpfully explain why you did what you did, and the magic words, “I can do it the other way, but I highly recommend we go with this approach, as it will [restate benefit]”.

6) Translate to code

Once the client has approved the design—and signed off—create the XHTML/CSS templates for the developer if possible. I like to create my own XHTML/CSS from scratch for several reasons, the primary one being quality control. No one understands your design better than you, and you’ll be able to pay attention to the minute details that a highly caffeinated, overworked developer will likely ignore. Most developers appreciate having a well put together template of the “easy stuff” so they can plug in the dynamic data, and you’ll be happy that your left margin is set to 22px instead of 20px, and the headings letter-spacing is set to -1.5 instead of the default 0. Design is in the details. If we designed the content to start 38px down from the header, it needs to be that way. We didn’t make those design decisions arbitrarily, and we need to stand up for them, Of course, at this stage it is also wise to cross-browser test, which will diminish the chance of browser bugs once the templates are integrated with the CMS.

I feel it’s a good idea in a design/development team to have a CSS framework. Having a consistent repository of code, and naming conventions, browser bug fixes will speed up development, and allow team members to pass code around, not having to take time understanding what the previous developer has done.

An often missing step in the web design process is post code design. Too often designers hand off their precious designs like a mother bird throwing her babies off a high tree branch for the last time, never to see them again. As designers, we should be actively involved in the implementation of content. I highly discourage developers, project managers or *gasp* clients entering their own content. No one knows more about typography than designers, and just as in print design, web content needs to be pampered and massaged in order to be truly effective.

Of course, a client with a large site featuring hundreds of dynamic pages, in the case of a store, or online magazine, should enter this content himself, however it’s imperative to work with the developers to establish a set of rules that will give the client zero control over the design of the page. Remember, they’re paying to have a system to manage their content, not redesign their site. If I hire an interior designer to design my living room, and then once she leaves, I proceed to repaint the walls, and change around all of the furnishings, I’ve wasted my money.

7) Test and Launch

In the case of a small to medium sized website, I recommend training a client on the CMS only after their site is live. This will ensure the launch date isn’t postponed due to a client trying to learn their tool, and it will take a huge burden off their shoulders, while at the same time providing the aforementioned design quality control.

Conclusion

Though some of this stuff is a no-brainer, taking a little bit more time in the design process can, in a long-term way, save us from undue stress, reduce client revisions, make for a happier client who values our work, ensure that we are proud to show off our design after its launched, and even submit it to award sites.

See the trees for the forest

This post is for many of the designers who work on websites - whether exclusively (in the case of web designers) or occasionally (in the case of designers working in communications firms). Most of us are adept at creating good looking design templates. By that I mean a; header, footer, side bar, home page, sub page. These are usually the basics when we go about designing a new website.

However, it shouldn’t end there. More is involved in bringing a design from good, and passable—to the kind you see plastered all over design blogs and awards sites. And if you’re passionate about design, which I assume you are, you’ll notice that there’s something strangely mystic about the really good sites - the ones that are indelibly imprinted in your mind for months. What is it that accomplishes such a feat? It’s usually the amount of time and care that the designer took in polishing the content.

Keep in mind, I am not claiming to be a master at any of these practices. With every new project I’m constantly trying to attain to this higher level of web design. Sometimes I succeed, but not every time. It is, as it should be, an ongoing exercise—after all, there is no such thing as a perfect design.

Here I’ve identified some of the elements of a design that—if given attention—can truly elevate it above most others.

Forms

There are some usability and web design experts that argue passionately that forms should not be styled. They say that it is important for web forms to look consistent regardless of the aesthetic of the overall page.

While I agree that, as one of the most fundamental elements that separate a website from a non-interactive medium like print, a forms’ purpose should be placed over its’ aesthetic, and should never be disguised. However, it makes sense to style a form to the extent that it fits in with the websites’ overall appearance, - even if it’s a simple matter of applying a border color and background to it.

More importantly, thought should be given to an elements’ width, height, and placement among other form elements. Input boxes, text areas, radio buttons and drop down lists should be carefully positioned and labeled in such a way that a user flows from one to the other with ease. This is particularly important in long forms, such as on a registration page.

To take this concept even further, some of the really thoughtful designers have added a sprinkling of Javascript to achieve a highlight effect when the user clicks inside an input box or a text element. This greatly enhances the usability and flow of a form. Just look at this example from Gold Coast Web Design.

Typography

This seems like a given, but in reality, web designers as a whole have yet to match their print-brethren when it comes to typography. While most web designers pay attention to the “template” parts of a design, such as a header which appears on every page, many ignore typography on interior pages and content areas, which are perhaps the most important areas to consider for the user.

Look at the care that the designer(s) of one religious website took to ensure that articles where interesting, even inspiring to look at, and which complement the meaning of the words for their intended users. That, after all is what good typography is about—marrying letter forms to enhance the meaning of the copy.

By the way, if you’re wondering about how to technically implement some of the techniques used here, like drop caps and paragraph indentation, view this post for a web typography tutorial.

Lists

Like forms, lists are often ignored as an inherently ugly web element. And yet, when proper care is taken, a list, unordered or ordered, can break up a content-heavy page and ease the user.

Look at the lists on the Viget Inspire blog, and see how the designers patiently created icons, and background dividers in the footer to make the list of comment entries flow.

Layout variation in sub pages

As previously noted, most designers start with a home page and a sub page, usually consisting of a side bar and content pane, with long copy flowed in place. The downfall of ending it here is that depending on a websites’ content, a simple two column approach may not make sense, or even if it doesn’t, the content may need further styling.

Look at Trale and Poccuo. In each of these two example, the designer has taken care to lay out the content on a case-by-case basis, enhancing the presentation of it dramatically.

Animation

This is may seem like a dirty word to some when it comes to the web. Keep in mind, I’m not talking about Flash intros, or photos in a masthead that fade into each other. I mean animation that actually contributes to the usability and flow of a website, and yet can still function without it.

Two examples I have are Merix Studio and Alex Buga. Notice in the first example, clicking on “Sitemap” slides the menu and the rest of the site down with an eased animation. The same content could have been showed by simply loading a new page. But isn’t this way more fluid and interesting? In the Alex Buga site, you can drag the light, which makes for a nice easter egg.

Process

This is the main point—It can be a real challenge to get your site looking as good when it’s launched as it first did in your finished Photoshop comp.

Many times what happens in the life cycle of a web project is this: the designer creates comps (in Photoshop or Fireworks) and delivers screen-shots to clients for approval. For most straight-forward sites, this is a home page and a sub page option. Then once the client approves the overall template, the designer either hands off the files to a developer, or in some cases, hand-codes the HTML/CSS templates. From there the developer plugs in the back-end with the provided template files.

A crucial component which often gets left out is content implementation. The worst thing you can have happen is send the developer static site copy, and/or get the clients or an in-house editor to write content in the CMS, while the lazy or overworked (or both) designer dusts his hands off and moves on the next project. This is the death of your website. An entire phase should be allocated to having the designer go in and massage copy and images, and to really take the time to get everything outside the template shining. I’m going to go out on a limb and say this: Designing the interface and getting valid XHTML/CSS templates to the back-end developer is half of your design work. The other half should be spent implementing content and photos, massaging the layout, and adding in little touches to lists, paragraphs, forms and javascript touches.

I’m sure some will disagree with me, but I firmly believe is the secret to producing not just passable websites that clients and bosses are happy with, but truly magnificent interactive design.

12 things you need to know before commissioning a website - part 5: Accessibility

1. Know your audience
2. Content
3. Content Management Systems
4. Hosting and Domain
5. Bandwidth
6. Web standards
7. Search Engine Optimization
8. Browser Testing
9. Accessibility
10. Design/Usability
11. Open Source or Proprietary?
12. Flash or HTML?

The previous post covered topic 7. This post will discuss points 8-9 - accessibility and browser testing.

What is accessibility?

Accessibility, in general, is an important part of our modern culture. We take for granted the fact that almost any public tool is built with accessibility in mind. When you access a building, many modern builders have provided a wheelchair ramp for impaired users. When you watch a television show, you generally have closed-captioning provided, allowing those either visually or hearing impaired to be able to access, and enjoy a program.

Why accessibility?

Because the web is a very young industry, web accessibility is only beginning to become mainstream. Yet it is only proper to show compassion and ensure that any user who wants to access our website, has the ability to do so. That means that we should not be excluding users from our site who have problems seeing, hearing, or moving their hands.

In fact, it’s more than just a common courtesy to provide accessibility—in some countries it’s the law for government websites to follow accessibility guidelines. Let’s forget the law for a moment. Even just for purely selfish gain, it makes sense to seriously consider taking the time to ensure your website is accessible. Imagine you owned a store (and considering the audience for this article, let’s assume you at least own a business). Would you ever consider making your front-door inaccessible? Would you ever willfully turn away prospective customers because it’s too much time or effort to provide a means by which they can access your products? Of course not. So it goes with your website, which is nowadays becoming more important than your literal storefront.

Okay, now what can I do to improve accessibility?

So now that you realize the importance of accessibility, what can you do about it? As of April, 2008, the W3C has provided the Web Content Accessibility Guidelines 2.0 to help website owners implement current best practices. But in general, here are a few tips to keep in mind:

1) Perhaps the most common accessibility practices are for the visually impaired. Blind users often use text-to-speech software and/or text-to-Braille hardware to access your site. That means that your website should be:

a) Built with web standards. Clean, semantic HTML will go a long way towards helping screen-readers interpret content on your website. 

b) Use real web text at all times(ie: no images of text to achieve a certain look, unless of course your using image replacement). Using alt tags on images will allow blind users to know whats going on in a photo.

c) Make links meaningful. That means that linking the words “click here” while very common on other sites, is not accessible to a screen-reader. Instead, linking the words, “Click here to learn more about our products” is much more accessible.

d) Avoid Flash. That’s not to mean Flash is evil. It has it’s uses for sure, and a future post will discuss those. But for now think of it this way; if your company website is built in Flash, your content will be invisible to screen-readers, not to mention search engines. Browser’s only see a big, unreadable block. [Editor’s NOTE: Since the time of this writing, the masterminds at Google have found a way to pick up the text on Flash sites, allowing them to be indexed by the search engine. While this is good news from a search engine optimization standpoint, it still doesn’t ensure the site is accessible to screen readers. You can improve accessibility by using the swf object and using HTML text which gets replaced gracefully with Flash when the user has Javascript turned on]

2) Some users have visual problems, and yet are not necessarily blind. Those with poor eyesight may have difficulty reading small body copy, so providing scalable text, or simply making it large to begin with can help tremendously. The same applies to small images. Also, some users are color blind, so using high type contrast, and making text links underlined as well a different color can help them find their way. This link shows some good resources for checking colors.

Other impaired users

3) Some not so commonly thought of users are those who cannot control a mouse with precision. They may need large clickable areas, or navigation that allows them to user their keyboard or a single switch access device.

4) Deaf or hard-of-hearing individuals should be able to access video content via closed-captioning or sign-language.

5) Users who are prone to seizures should not be forced to watch flashing animations.

6) Those with dyslexia or learning difficulties may need to be accommodated for using simple plain content and diagrams. Of course, your copy should always be simple and well-written, regardless of whether or not the user suffers from these conditions.

The more you do your best to ensure your site is accessible, the more users you’ll make happy, and if that isn’t reward enough alone, the more business you’ll do on the web.

Browser Testing

I didn’t think I could write a large enough post on browser testing alone, but I feel it goes hand-in-hand with web accessibility. Gone are the days when users will tolerate a message on your home page saying, “This site works best with Internet Explorer”. If your site can’t be used on virtually every browser imaginable, then you’ve got problems.

Considering many web designers and developers use Mozilla Firefox, a fantastic, standards-compliant, open source browser, it’s important that they still check their work on other browsers when testing. As of this writing, Internet Explorer (IE) is still the browser of choice for most end-users(and I use the term ‘choice’ loosely, it’s pre-installed on Windows). And to their credit, Microsoft has brought their buggy, non-standards-compliant browser a long way with IE7. However IE6 is still widely used, and must be accommodated for when web developers are testing their work.

Other browsers, while not as popular as Mozilla or Internet Explorer, are still in use by a percentage of the population: Apple’s Safari, Opera and Camino. (NOTE: Just recently, Netscape Navigator, the first web browser many of you are probably aware of, has officially died. It is no longer being updated.)

It is also important to be aware of the growing number of users browsing with mobile devices. No doubt, this trend will continue, so your site should at least be accessible, if not good-looking on a blackberry, cell phone or iPhone.

In closing, get your web designer, developer or team to state up-front what steps they’ll take to ensure your website is accessible to impaired users, and to alternative browsers. If they hum and haw too much, consider getting someone else for the job.

12 things you need to know before commissioning a website - part 4: SEO

1. Know your audience
2. Content
3. Content Management Systems
4. Hosting and Domain
5. Bandwidth
6. Web standards
7. Search Engine Optimization
8. Browser Testing
9. Accessibility
10. Design/Usability
11. Open Source or Proprietary?
12. Flash or HTML?

The previous post covered topic 6. This post will discuss point 7 - search engine optimization (SEO).

If they find you, they will come

The web is increasingly becoming the new phone book. And we all know who the Yellow Pages is in that analogy. That’s right, Google. It’s become so prevalent that the company name has become a verb, and if you’re company isn’t getting Googled, you’re in trouble.

The fact is, search engines are one of the most important ways to market your site, and a niche service in the broad field of internet marketing is that of search engine optimization, or SEO. This is relatively simple, as much as SEO experts would like you to believe otherwise. Despite the scientific sound of the term, search engine optimization is just that, it’s optimizing your website for search engines. It’s making your website ‘search-engine friendly.’

The pen is mightier

The key thing to remember is this—search engine spiders (the incomprehensible things that crawl through the web and find, or index websites) like one thing - words. The more content on your site the better, or more accurately, the more appropriate content in the more appropriate places, the better.

You see, most people when searching the web will never type your company name, and if they do, they are actively looking for you anyway, and thus not a qualified lead. Most people type in key words. If your looking for the nearest flower shop, your not typing “Aunt June’s Flower Shop”. You’re going to first look for the type of business; “flowers”, then you’re adding the location; “downtown Halifax”, just as you would if you were searching the phone book.

With this in mind, key words are vital to SEO. Try to figure out the key words that your users are searching with to find your competitors, and then try to weave these words in your website as much as possible. Of course, this is what an SEO expert does, therefore you’ll have to work with your consultant, be that your design and development team, or a specialized contractor.

Because of the nature of these posts I will not get into the technical details of how to incorporate words on your site. But here are a few dos and don’ts of SEO:

DO:

• Make the content of your site key word rich, yet still readable and fluent
• Keep your site updated on a regular basis (search engines love that)
• Use lots of links, both to internal site pages, and to other appropriate sites

DON’T

• Stuff your site with hidden keywords, it will get you black-listed from the search engines
• Put key words ahead of content, that is, don’t place more importance on getting key words on your site than writing good, meaningful copy
• Expect to be number one immediately. Even with best practices, it takes time and patience to see the results of your SEO

Oh yeah, perhaps that last ‘don’t’ is this: Don’t assume that the team making your website will automatically be concerned with your search engine ranking. Most of the time, designers are too busy designing and developers are too busy developing to be adding key words to your website. Ask up front how the team will optimize your site, and add an additional budget for it if necessary, even if it means hiring a web copywriter. Remember, even as a tree in the forest makes no sound if there are none around to hear it, a great site will have no impact on your bottom line if no one visits it.

Personification in advertising

This post is not meant to be particularly insightful or surprising—just a simple observation that may generate discussion. I don’t claim to be an expert in advertising, though I did work in an ad agency for a couple of years, and had some fun coming up with headlines while throwing a rubber ball against a wall. I definitely don’t make advertising my focus for Headspace, nor do I pay much attention to it as an industry (though I usually check out Ads of the World and every year I read the Communication Arts Advertising Annual ).

With that being said, I can’t help but notice a trend in advertising in recent years. That of personifying the inanimate,—using human beings to represent company products. True, using people to sell is not a new concept. Since as far back as the 1950’s, housewives would hold laundry detergent, real or imaginary customers told testimonials, celebrities would endorse big brands. It also used to be more common that inanimate objects were used as the metaphor, not the other way around (remember “This is your brain on drugs” back in the 80’s, with a fried egg as the metaphor?).

I’ve got three examples of a newer take on this, though I know there are more. Perhaps the most universally known and accepted is the Apple ads that use the 20-something cool-breeze to represent Mac, and a dumpy, middle-aged (albeit funny) man to play the boring old PC. Note how this differs from the age-old practice of having a company spokesperson; it’s common for people to represent companies, as in the case of Bill Cosby representing Kodak Film back in the 90s. However, in the case of the Apple ads, the actor is representing the inanimate product itself (the computer), which in turn represents the company.

The Capital One ads instead use a series of actors to represent other banks interacting with customers. Interestingly, in this case you’ve got humans representing companies, only they play the part of the competitors this time. The first in this series used the now familiar “Hands in my pocket” song to show that bankers always are always ripping off consumers, wrapping the metaphor with a pun. The series has since broadened its concept to use the bankers in other seedy ways (such as the exterminator, “You’ve got bankers").

The third ad is one I saw today, which inspired me to write this post. It’s a French web company called Bouygues Telecom, and the ad concept is a man (the vistor) walking through a field by a woman (the welcome page). The hostess shows the man all of the different features of the website, like the search engines (a stuffy bunch of analysts), the travel sites (good-looking flight attendants) and online gaming (a war zone of aliens running around shooting lasers).

I’m not sure if this trend has any cultural significance, or if it just means that one thing never changes—people are always the most interesting way to sell. I only wonder what other innovative ways will human beings be used to move products. Do you have any other examples of personification in advertising, or do you have thoughts on the post?

12 things you need to know before commissioning a website - part 3: Web Standards

1. Know your audience
2. Content
3. Content Management Systems
4. Hosting and Domain
5. Bandwidth
6. Web standards
7. Search Engine Optimization
8. Browser Testing
9. Accessibility
10. Design/Usability
11. Open Source or Proprietary?
12. Flash or HTML?

The previous post covered topics 4-5. This post will discuss point 6.

Because of the nature of this series, I’m not going to go into great length to discuss the history of web standards. I’ve done that already to some extent in a previous article. This post is simply meant to help educate a business owner who needs to commission a person or team to create their website. This should assist them in choosing the right provider for the job. Alright, with that said, let’s dive in.

Web Standards and why they’re crucial

When it comes to things that people use, standards are a good thing. Can you imagine if their were no standards in place for houses? No benchmark, no rules—it would be a nightmare. In many ways, that has been the case on the web for many years. Site’s were built in many different ways, usually shoddy, browser makers like Netscape and Internet Explorer each had their own features that different websites would follow independently. As a result, sites looked different depending on which browser’s they were being viewed on, many were slow to load because they utilized techniques like using HTML tables for layout, or images for text, and worst of all, people with visual disabilities had virtually no way to properly hear the content on most websites.

All of that has changed… for the most part.

Because of organizations like the W3C and because of web standards evangelists like Jeffrey Zeldman, web standards is a new concept that has influenced the majority of the web community for the better. Essentially what web standards mean is that there’s an even benchmark for how to build a site. It takes Hyper Text Markup Language (HTML) back to what it was originally designed for—that of “marking” up text with meaningful tags that made viewing copy on the web possible. Now, instead of web developers using and abusing HTML to do things it wasn’t meant to do, they write the HTML or content of the page with clean semantic code and leave out all style related elements.

For example, if I’m creating site navigation, I would write what’s called an unordered list. It would look something like this:

<ul>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>

See how clean that is? It has no style information, it simply describes the content semantically. This is good because now all site’s built with standards have much less HTML, resulting in faster page loads, better search engine optimization and accessible content to the visually impaired.

So where does the design come into play? With Cascading Style Sheets (CSS). CSS are separated from the HTML in a separate file so that the meaning and the style of a website are completely separated from one another. If you turn CSS off in your browser, the site will look like a neat, clean text document. For a great example to understand clearly how this works, go to CSS Zen Garden. Every link in the page uses the exact same HTML page, and simply swaps in a different style sheet. As you can see, this separation of content from design means making a design change across a large site with many pages is relativlly painless. For example, if all your links were blue and you decided that you want them all red now, you don’t have to manually open up hundreds of HTML pages, you simply update one style sheet, and presto! All links on the site are red!

The point

The point of all this is that when you’re commissioning a website, ask about web standards. If the company you’re talking with doesn’t know what terms like tableless layouts, standard-compliance, graceful degradation or semantic markup mean—head for the hills. Although standards have come a long way in terms of acceptance, many so-called web experts have turned a blind eye to it. Even more high-profile websites for large companies still use the old tactics, and fall short. Don’t let it happen to you.

Remember the benefits:

• Save money and time
• Make your site accessible to the blind (a large market!)
• Compatible with mobile devices (an even larger market!)
• Compatible with all current and future browsers
• Fast page loads, meaning happier users and lower bandwidth costs
• Easier future upgrades
• More findable by Google and other search engines

As you can see, the results are worth asking a few questions. Companies that embrace standards provide their clients with what can only be called the highest quality, both on the surface and under the hood.

The next post will deal with Search engine optimization.

What is good web design?

The argument is often made that web design and print design are very different from one another, like in the excellent post by Jeffrey Zeldman. Although this is true, I thought it would be interesting to look at how they are the same. I was listening to Andy Rutledge’s podcast today, and he made some interesting analogies about web design that got me thinking.

In his post, he criticized AIGA and Communication Arts, American leaders in the graphic design community, for refusing to truly acknowledge the web medium. Though I am a big fan of both organizations for pure, juicy, design inspiration—I completely agree that neither understand the web. Every year, their interactive annuals mostly profile Flash websites, merely focusing on colour, type, video/images and other purely visual or conceptual elements. I feel that these organizations are at least partly to blame for many in the graphic design community not understanding true web design.

But this post is not meant to beat up on the AIGA and Communication Arts. They won’t change until they’re forced to by their readers, or until somehow over time everyone naturally evolves with the still young and misunderstood web industry. But this whole issue got me thinking about the nature of design period. Many would have corrected me earlier by saying that there is nothing wrong with focusing on aesthetics because that’s what design is—it’s visual. But is it?

What is traditional design all about?

One of the most, if not the most important design philosophies I’ve been taught is how semantics, syntactics and pragmatics factor into design. Most print designers acknowledge this; we know that first of all, there has to meaning in design. We can make it look great, and communicate a message visually, but ultimately, there must be a message. There must be content. And lastly, it must work—it must be pragmatic. For example, if you are designing a magazine spread, you need to first of all, make sure you have content. The content, and the intended audience will dictate how the spread will look. Then once you craft a design, you must make sure it works—that the body text doesn’t fall into the page gutter, that the inks used won’t cause ghosting or registration problems, and that there are page numbers so that the reader knows where they are. Without just one of those factors, meaning, aesthetics or practical application, the design can hardly be called good.

All designers usually resent one of two statements from clients: That designers are only needed to make pretty pictures, or on the other hand, that client know how to make it look pretty, but they need us to work the software. The reason either of these statements are insulting to designers is because really you need both skills. Solid understanding of design principles is why the design looks good, but also thoughtful problem solving and technical implementation is why the design respectively has meaning and doesn’t fall flat in the execution.

Though these ideas are nothing new, they should help designers from a traditional background understand why their perspective needs to change when it comes to the web. Because design is not only visual, but also practical, technical skills have always been a necessary part of a designers toolbox. After all, print design used to be much more technically involved before computer software gradually took away the need for thorough typesetting and printing-press knowledge. Interior design is an incredibly technical discipline, involving not not just conceptual, layout and colour understanding, but knowledge of materials, construction, finishing, and all other decidedly non-aesthetics-related skills. For example, an interior designers’ choice of materials is based not just on how it looks, but also how the users will be able to live around it and work with it day-in and day-out.

Web design is no different

For this reason, good web design cannot be judged simply on good aesthetics, balance, harmony, contrast, typography, colour, or any other basic design elements. It has to also be based off of how it works in the medium it lives in. How does it enhance the content, how does it provide intuitive navigation, seamless flow, information architecture, usability, accessibility? All of these factors are necessary for truly good, quality design for the web. Just as it’s always been, design is partly technical problem solving. And though that thought scares most designer new to the web, they have to come to grips with it.

It’s difficult, if not impossible to excel at web design if you don’t know how the web works. That means that to design for the web you need to learn about things like web standards, HTML, CSS, and Javascript. Learn what all of the major browsers are, and how to develop sites so they work in all of them despite each ones minor (and sometimes major quirks). Do you know what terms like MySQL, AJAX, Apache, PHP, Ruby on Rails, or ASP.net mean? Learn a little bit about servers, and databases, and server-side scripting, you don’t have to be good enough to develop a back-end custom-coded site, but at least know the basics, or at least their purpose. Even more importantly, learn how people use the web—it may be drastically different from the way you use it, and knowing this will greatly influence the quality of your design.

The bottom line

The point in all of this; the design community for the most part refuses to move forward with the web, partly out of ignorance, and partly out of fear of the technical side of implementing web design. But there is no need to fear this, or worry about losing the design-side in favor of a more technical one. As discussed, design has always been about the technical implementation of good aesthetics so that the product is usable to the audience. Rutledge, mentioned earlier, used the analogy of a shoe designer not just required to design a nice looking shoe, but also make sure it fits, conforms to shoe standards, and doesn’t wear out.

What is required more than anything else is the modesty to admit change is needed in how one goes about his or her design process, and enough passion for good design to throw out preconceived notions in an effort to better ones craft.

An upcoming post will help the humble-hearted print designer wishing to understand the web medium more fully by breaking down necessary fundamentals and explaining them. Please use the comment form below to express agreements/disagreements, or outline things you think that every web designer should know more about.

Not all Flash Designers are created equal

It can be said that Flash is a niche area of web development. Generally speaking, “typical” web developers (and by typical, I mean developers who build websites using web scripting languages, like PHP or Ruby, build databases with MySQL, and mark-up the front-end with HTML, and style it with CSS) use Flash very little or not at all. The reason being that Flash is a closed piece of software. It requires a license to use, and once published to a website, the code is hidden away, never to be seen by anyone—including both developers and search engines. Also, Flash websites usually aren’t even recognized by browsers; you can’t right-click and open links in new windows, you can’t bookmark internal pages and the visually impaired can’t access the content.

On the other hand, most web designers use Flash. Or I should say they can use Flash, even if they primarily build website the “proper” way. Whether it’s for banner ads, intros, or simple page headings, you’re average web designer should be able to open up Flash and make some nice animations.

Between the two aforementioned groups, there is a massive gap, and if you are looking for a high-end Flash website or application, you need to find someone with a specialized skill-set. Some website managers, not understanding the difference, make the mistake of assuming that their designer who knows the basics can implement streamlined, advanced Flash interactivity. What makes it even more confusing is that these Flash “tweeners” (I’ll explain in a minute), often try to make it appear as thought they can do this more advanced stuff, and sometimes they can actually pull it off.

How does Flash work

So here’s the difference; if you’ve ever seen a Flash file being worked on, you’ll notice that it looks a lot like a design program, ala Photoshop, Illustrator, Fireworks. It’s got color pallettes, selection tools, and basic shapes. You’ll also notice that it has a large grid timeline at the top. When being used this way, Flash is an animation tool. What’s made Flash so popular since it’s inception is that it makes it very easy to pull off simple animations. For example in my workspace, if I draw a red circle on the “stage” (canvas), and then I create a “keyframe” (animation starting point), and then I create another keyframe on the five second mark on the timeline, and then drag the circle to another place on the stage, when I play my animation, my circle will move from point A to B in five seconds. This is called tweening. You only need to instruct Flash when the animation starts and when it ends, it will take care of the in-between frames for you.

However there is another large part of Flash development that is becoming more important as Adobe improves its product—programming. The language that controls Flash is called Actionscript. What began as a very simple non-language in the early days of Flash requiring basic “play”, “stop” instructions, has become since Actionscript 2.0, and especially 3.0, a very robust programming language. Actionscript now shares a similar structure (syntax) as advanced software languages. Because of that, there’s a lot more you can do with Flash than simple animations and page headers. If you’ve ever kept tabs on the FWA (Favorite Website Awards), you know what I mean. Most of these sites employ powerful development practices, such as “speaking” to languages outside of Flash, like PHP, XML or Javascript, pulling in user-generated content, or even what’s called socket programming, where the Flash file your viewing is showing what other users are doing on the site, like in Flash community games.

Know what you need

So the big question is this; what do you need to know when you want Flash work done? First, know exactly what you need. Is it a website, with different content sections, maybe a photogallery, or dynamic video integration. A “tweener” may be able to pull this off, but more often than not, he/she will not employ Actionscript, meaning the end product may look fine, but it’s not built in a flexible way. Let’s use the example of a photogallery. In the Flash interface, you can easily import, drag and drop photos, and even make them react to buttons. But what that means is a) The Flash file will take longer to load, because all of the photos are contained directly inside the Flash file b) Adding/removing photos is a chore because the designer has to go in and manually move all of the photos c) the gallery is harder to build on, in the event that you want to add categories, or perhaps change the way the photos transition.

An Actionscripter on the other hand will do things differently. He/she will use very limited drag and drop components, if any at all, and will instead write the whole gallery with code. That means that a) the gallery will load quickly because all of the photos will be contained outside of the Flash file, only being loaded when a user clicks on a particular button b) Adding/removing photos becomes very quick and easy because the gallery is dynamic - simply calling a new photo will automatically re-arrange the position of all the other photos c) building on the gallery becomes much easier. If you wanted to have a fade effect between transitions for example, the developer would add a simple function call in the right place, and it would automatically apply to all of the images.

A lot of large web companies utilize Flash teams of designers and developers—the designers only adding art-work and animations to Flash, and the developers make it function. Make sure that if you require anything beyond a simple banner, that you get an Actionscripter for the job. Get someone who either knows both design, animation and development (which is ideal, yet hard to find), or just get a developer and use your inhouse designer for the graphics, even if he just produces them in Illustrator or Photoshop. As with any project, understand what you need done exactly, and communicate the functional specs well. The more complex the application, the more expensive and time consuming it is to switch up the functionality of a Flash site on your Actionscript developer.

What to look for in a Flash developer

So here are some things to ask a prospective contractor when you need a medium to large scale Flash application developed:

• How would you rate your Actionscript skills, beginner, medium, or advanced?
• What level, 2.0 or 3.0? Both are acceptable, 3.0 is the way of the future, but many haven’t had a chance to learn it yet.
• Can you pull in XML or database driven content with Actionscript?
• Do you keep your swfs (compiled Flash files) lightweight, keeping in images, classes and media files outside and pulling them in at runtime?
• Do you efficiently make us of object and functions to streamline your code?
• Do you document and comment your code clearly, and is the source code available in your price?
• Many AS developers have a specialty, for example writing dynamic animation algorithms, or perhaps video/sound integration—do you have a specialty?

Questions like this should give you a good indication of whether your prospective contractor is up to the task. Of course, you’d ask other questions too like timing and cost. Keep in mind that advanced Actionscripters tend to be more expensive than other types of web programmers, but you’ll find that the cost is worth paying to someone who can write advanced code and solve challenging Flash problems. Also, the high cost is frankly because there aren’t that many Flash developers out there, and it is a niche, highly lucrative market.

This post hopefully helped you understand Flash a little better and the people who build Flash applications. If you’re in need, talk to someone who has access to a pool of talented Flash developers, just don’t try googling them—most of their sites are built in Flash.

Warmer waters

Rentals Your Way, a Colorado-owned property rental and management company based out of Cozumel, Mexico, has commissioned Headspace to completely re-create their identity. We will also be re-designing their website, as they prepare to expand outside of the Caribbean region within the coming years.

Rentals Your Way currently enjoys success, renting condo properties to vacationers who want an experience that an all-inclusive can’t offer—that of relaxing in your own beach-front private property. Sister company, Caribbean Beach Properties, also takes care of the management end of the rentals, such as concierge service.

Headspace will help re-position RYW in the minds of both condo owners and travelers, by designing a new identity system. Also, the new website will provide a seamless, and accommodating user experience, both selling the advantages of renting privately owned condos, and also allowing the user to search and book properties in their chosen destination.

Set to launch within the coming months, this project will help re-define Rentals Your Way, allowing it to successfully grow into an company that can offer properties all over the world. The side benefit for the designer of this project? I can spend more time looking at blue water and white sand during the rest of the Canadian winter months.

The new site is here!

But obviously, you know this is the new site since your looking at it. Here are my thoughts/intentions with the new Headspace website:

From the front-end, I tried to make this design feel a little bigger and richer, and to display the content in a way thats easier to scan. I also wanted to make it more white, instead of the all black. This is purely a legibility concern. I want the website to be used for discussion and reading the blog posts, so I tried to find a solution that would be the easiest to read for long periods of time.

I’ve also abandoned the Flash gallery in favor of Javascript. The big difference for those without much technical knowledge is that with javascript, your merely manipulating traditional web content (HTML). With Flash, all the web page sees is a block of Flash code, without knowing any of the content it contains. Also, if you turn off style sheets in your browser, the images are still visible in an unordered list.

From a technical end, this new site is built with ExpressionEngine, a licensed content management system from Ellis Labs. It’s become my CMS of choice that I use on all client sites. It is flexible and easy to use, yet also extremely powerful and can perform advanced functionality with very little database/scripting ability. Now all of the site content is database driven, whereas in the old website, it was just the blog that was dynamic.

There are now RSS feeds for the blog and project gallery, so you can check for updates without visiting the site. I now have a request a quote form, which should make it simple to email detailed project requests. The blog is now easier to comment on, since you don’t need to register an account. I really hope that more people comment on the blogs, since it’s quick and easy!

You’ll also notice that I have some new projects, including the new Empire Theatres website (update, I was forced to take it off the site until it’s live, oops). This was something I art-directed and designed over at Modern Media. The development team over there is still hard at work making it happen, but sometime this spring, it should be live, and will be a great improvement over the current Empire website.

Okay, now on to the problems with this site. You may notice a few things aren’t working great - yet. The blog posts were ported over from the old site, so some of the formatting of special characters got messed up. I’ll be going through with a fine tooth comb and fixing those. Also the search form isn’t working so hot yet. I haven’t extensively tested the site in Internet Explorer yet, so please let me know if something is wacky.

I look forward to hearing your opinions of the new Headspace website. For my email newsletter subscribers, an announcement will be going out shortly once the site is fixed up.

This website is no more. Just kidding…

This is an announcement that I’m currently redesigning the Headspace Design website, and thus I don’t have a lot of time to write new posts. The new website will change several things:

• The blog and the news section will be merged into one section - I think it makes more sense to have one dynamic section since it’s all personal information, just some relates to Headspace news and some to industry opinion and advice.

• I have a lot of blog post ideas in the works regarding usability, as well as continuing the 12 things you need to know before commissioning a website. In addition to that, I will start having featured interviews of local designers and developers to try and gain some additional insight. Please let me know if there’s any topic you’d like covered or if you’d like to get interviewed.

• In the new site, it will be easier to comment since there will be no login required - I greatly encourage more comments!

• There are some B2B features that will be improved, such as RFP forms, ability to sort case studies by type, global search and a better breakdown of my services.

I anticipate the new site will be live on April 1st - so I encourage you to check it out, and those on my email list will get reminder beforehand. I apologize for the lack of new content in the meantime, but trust me, the new site will be better than ever!

Kyle Racki

Lessons learned from designing truck lightning

There was a time when I was green and new. I had only been working as a designer for about a year. So, when a friend of mine who owned a vinyl shop came to me with a client who needed some freelance work, I was happy to take it on. This guy (ahem) wanted lightning designs on his black pick-up. Not for his company, just for him. And he was willing to pay. Not the most exciting freelance project, agreed, but a project nonetheless. Or so I thought.

After a phone conversation with him, I realized he wasn’t exactly a class act, but I started work on the project anyway. He agreed over the phone to pay $300, so because I charged low at the time, I had about 10 hours of work ahead of me. After presenting the designs by email, and a few rounds of revisions, he dropped off the face of the planet. Months went by and several emails were sent. Then, I finally heard back from him. His email said something to the effect of; ‘We’re not paying you, we didn’t really like the designs you did.’ I made a vain threat to sue him, but he knew it was empty as much as I did. I later found out he got the designs printed on his truck.

Sure, I was upset about it, but you know what? I learned something. Actually I learned several things:

Get a contract

Many have a negative view of contracts, thinking they are meant to fool people with fine print, or that its a reflection of the trust you have in them.

Even if I’m working for a family member or friend, I make them sign a contract. It’s just the thing to do. No one ever balks at signing a contract when setting up a bank account or buying cell phone service - why should they when contracting a designer to produce marketing materials? In fact, a contract is protection for both you and your clients, plus it adds respect to the work you’re doing.

There is a great free contract template for designers from AIGA. You can customize it to your liking, and be sure to change the American information to suit whatever country you live in, Canada in my case.

Charge enough to be competitive

Along the lines of adding perceived respect to the work, charge enough money. Even if its a small client that doesn’t have a lot of money, or a non-profit client, remember that they don’t realize the level of effort that goes into this stuff. If your charging low just so that you’ll get the project, the client usually won’t appreciate it, and therefore won’t think twice about making unnecessary revisions, or requesting additional items.

If the work is a gift from you to them, in the case of non-profits or friends, make it clear that you are doing them a favor and charging less than the work is worth - this way they’ll appreciate it and be happy to pay you promptly with a minimum number of revisions. If you don’t appear to value your work, your client surely wont.

Require an initial deposit

A great way to sift through the people who are looking for free work, charge 30-50% up front. If they weren’t planning on paying, or wanted to wait and see if they liked the work before paying, they’ll drop out quickly. At least this way, they drop out before you’ve spent the hours designing.

I’ve never had any reputable clients express concern about up-front payment. They assume that the work will be done well, and on time - and they don’t expect me to sink a month into their projects before getting any payment.

Communicate in writing

This I didn’t do from the beginning - communicating by email can be a life saver. Make sure the client fully understands what they’re getting, how much it costs, and that they are paying for a service, not a product. Your getting paid is not determined upon whether they like what you design - they need to be sure you’re right for them (by looking at your work and checking your references) before they commission you to do the work.

Emails keep track of these types of interactions so that, in the event you get screwed out of more than $300, there is a record for legal purposes.

Make sure the client is the right fit for you

Everyone can learn from this lesson, because it’s something that even many large design companies struggle with, not just freelancers:

If the work isn’t interesting, the client isn’t reputable or the person your talking to gives you a bad feeling, don’t work for them.

There is enough work out there that we don’t need to say yes to everybody that asks for a quote. Although in this example, it was just a yokel who wanted truck lightning (no offense to yokels), there are many low-lives who own companies, and who you can tell from an initial meeting or phone call that they are going to be trouble. Trust me, no matter how tempting the money may be, you actually save more money by turning these prospects down!

Accept work only from a client who is the right fit for you, and who you feel will be pleasant to work for. Life is just too short for jerks.

Bottom line

I put all of these lessons into practice recently. I had a request for a logo come from a person who was starting a Greek restaurant. He said he already had fired 2 designers because they weren’t giving him what he wanted. He asked me to start immediately.

Instead, I sent a formal email stating that the work would be started upon sign-off on the budget and 30% payment up front. I also charged according to the time and effort that I guessed would be spent on the design. My email was short and concise, and more importantly, didn’t waste too much of my time - I never got so much as a reply back from him.

Design, while fun, is still a business—and as such, safety nets need to be in place so that you’re protected and can make a fair profit from your skills. And by the way, if you ever see a black pick-up truck with lighting designs all over it, give the driver a good fist-shaking for me.

Top 20 Websites of 2007

Ah, don’t we love end of year lists? It’s a time to reflect on the strides made over the last year. To gain inspiration. To see the foundation that’s been laid in the past, and the pedestal to spring from in the future. Oh, and it’s also a chance to see really cool stuff that you might otherwise have missed.

I felt that it was important to separate “regular” HTML/CSS sites from Flash “microsites” because there’s a completely different mentality that goes into designing each. The web standard variety is generally more for company websites, blogs and shopping carts, whereas Flash is more for the entertainment/advertising variety. In this list, I’ve favored Flash sites that are well designed or innovative in their concept and interface, not in sites that merely featured entertaining video. I think that belongs to another type of list.

Flash sites are highly criticized in the web development community for not being standard compliant, but I take a balanced view. Flash sites can be highly entertaining and innovative, and I feel as long as they are being used for experiential purposes otherwise not possible with HTML/CSS/Javascript, then it has a place in the web design world.

One last note before we begin; there’s been a lot of beautiful sites in the last year, and many of them have been for design companies, photographers, freelancers and web agencies. For the most part, I have highly favored sites in these top ten list that have not been designed for self promotion purposes. Why? Because I think it’s more rewarding to see sites that have been designed for paying clients — Fearless clients, who have accepted what these designers have created for them. Agencies/freelancers have had to overcome the client hurdles we all experience everyday, and still come out on top. It’s not that I don’t think there’s merit to a nice agency website—it can be a great source of inspiration—but I just feel it’s better to see what designers have done for companies other than themselves.

Top 10 CSS websites

1. 
   
   

   Jesus Rodriguez Velasco

   This was without a doubt, the most breathtaking blog site I’ve seen this year. The art-work and typography is amazing, and the layout deceptively simple. I especially liked the 4 columns that collapse to three and two when your browser window shrinks. A superb example of usability and design aesthetics perfectly combined.
   

2. 
   
   

   Uniquely Knoxville

   This site gets points for it’s style and type. It’s one of the few sites that gets the whole, cluttered paper-textured look right. Uniquely Knoxville definitely lives up to its name.
   

3. 
   
   

   Frieze Magazine

   Frieze shows how online magazines should feel - it takes massive amounts of content and presenting it simply and elegantly.
   

4. 
   
   

   Come home to a Tennessee Winter

   Beautiful colour contrast and a full, flexible layout. The subtle snowflakes are icing on the cake.
   

5. 
   
   

   San Diego Brewing Company

   Often, pubs and restaurants don’t do a good job of presenting themselves online. San Diego Brewing Company has a cozy vibe that just makes you want to come over and enjoy a few pints with some friends.
   

6. 
   
   

   Biola University

   The textures and illustrations really make this site pop.
   

7. 
   
   

   The Big Noob

   The Big Noob feels, well, big. It’s design is transparent, drawing attention to the humorous content.
   

8. 
   
   

   Free People

   Online shopping carts are hard to do well, but Free People is so fun to explore and shop, and it’s design speaks to its female target in an effective way.
   

9. 
   
   

   Xero

   If a site makes online accounting software seem exciting, you know it’s doing something right. Xero definitely has the ‘Web 2.0’ look going on, but it does the big fat buttons and shiny gradients better than most.
   

10. 
    
    

    Etnies

    Like Free People, Etnies takes online shopping to a new level, while presenting it’s merchandise effectively to it’s audience, in this case, the youth culture. The Flash content adds to the experience instead of seeming tacked on.
    

Top 10 Flash sites

1. 
   
   

   Get the Glass

   It’s very seldom that an advertising site can really suck you in and take up a half hour to forty minutes of your time, but Get the Glass surprised a lot of people with it’s ingenuity and scope. The production team created a massively entertaining board game experience, and of all thing, to sell milk!
   

2. 
   
   

   Red Universe

   Remember how I said I wouldn’t showcase agency websites? Well, this is the one exception to the rule. Red Interactive went way beyond breaking conventions with their self-promo site. For heck sake, you can create an avatar and wander the virtual universe talking, punching and flying with other users of the site in real-time. This definitely shows that some agencies can swallow their own pill and stand out in a big way with their marketing efforts.
   

3. 
   
   

   American Red Cross: September 11th Response & Recovery

   Information architecture at its best, the pie charts, time lines and video samples are so perfectly balanced, and the intimate, emotional content shines through.
   

4. 
   
   

   Own Bora Bora

   Simple, elegant and beautiful, the site breaks through the clutter simply by offering stellar full screen video that makes you feel like hopping on a plane the day you see it.
   

5. 
   
   

   Lake Nona

   Lake Nona is a community in Florida, and the website takes such an interesting approach in delivering this type of content. The expandable interface, map and funny “Nonaology” makes the site truly a joy to explore.
   

6. 
   
   

   Verizon Action Hero

   Getting to upload your face to an action hero and direct your own mini movie has universal appeal. My wife’s hero was eerily similar to how she really looks. Oh yeah, and the interface is also really well designed. The creators made a relatively complex process simple and fun.
   

7. 
   
   

   Coke

   Creating one site can be daunting, creating a bunch of sites for every corner of the globe, for one of the biggest brands in the world must have been terrifying. But the team pulled it off, and really made a corporate website anything but typical, evolving how I think many of the Fortune 500s will think of their online presence. By the way, doing a site like this with some XHTML/CSS and not entirely in Flash showed great restraint and I think shows that web standards are the way of the future.
   

8. 
   
   

   HBO Voyeur

   An amazing concept well executed, the HBO Voyeur site gives you that guilty feeling of spying through the windows of anonymous people—um, not that I know what that feeling is… The large amount of streaming video makes this site also a great technical feat.
   

9. 
   
   

   Spamrecycler

   What a concept — recycling spam into abstract art! It actually works, and it promotes a German recycling company. So smart!
   

10. 
    
    

    Motorola Colors

    The Motorola Colors website allows the user to exercise his or her creative juices, resulting in colorful abstract art that enhances the brand.
    

Hope you’ve enjoyed this list - stay tuned for my picks for the top print designs of ‘07. As usual, I welcome all comments!

The distinction between design and advertising

It’s been said that ‘advertising is a knock-knock joke, design is a conversation.’

Interestingly enough, many firms that began as design boutiques, eventually turned into advertising agencies. There was just more money in advertising. Why is it that advertising and design is perceived this way?

There’s definitely a quick-turnaround mentality with advertising. Like a summer fling, there’s no commitment. A company can choose an agency, get a campaign conceived, story-boarded, shot and published relatively quickly, and then wait for six months to see if there was a change in revenue. If it wasn’t successful, they try again, maybe with another agency. If it was successful, they ask the agency to shoot the same campaign, but to “mix it up a little”.

Design is a totally different mentality. By design, I don’t mean just the act of laying out a brochure, or sketching a logo. I’m talking long-term. Like a solid marriage, a company’s brand will evolve and refine itself over time. It speaks a language, it communicates. It has a personality and constantly, and more importantly, consistently, gets it personality out there for people to see, touch and hear. Many of the worlds biggest brands have not changed radically over the decades, they simply evolved. They still say the same thing, but maybe with a little more style. But either way, you know them when you see them.

Think of how Apple has invented and reinvented themselves over the years. They keep changing with the times, but they are still projecting the same image as before. And people will remember that long after the “I’m a PC, I’m a Mac” ads have run their course.

No disrespect to advertising. It has it’s place. In many ways it is a great way to remind consumers of a brand’s personality. After all, who doesn’t like a good knock-knock joke?

How many design options do you show?

Last week on Boagworld, Paul Boag interviewed Andy Budd from Clear Left, a well-respected web design agency in England.

Andy commented on how they do things differently than many agencies in that they only offer one design to clients. You can read the interview transcript or download the podcast (see show 101)

Essentially his points were as follows, regarding presenting multiple design options:

1) Lowers value for the client.

Doing two or three times the amount of work necessary and the client only get half or a third of the value, they get to pick one of those three designs. They are essentially paying for work they’re not using. I don’t go to a restaurant and purchase three meals, knowing I will only eat one.

2) Clients make wrong choices.

No offense to clients, but they usually pick the option that’s least on strategy due to personal opinion. Is that their fault? They’re paying us to tell them what their best option is, are they not? If I go to a lawyer, and he presents me with three completely different options, I want to know what he thinks is the best option, after all - he’s the expert.

Usually a designer will spend more time on one design than another and therefore that typically is the design that is closest in line with the clients goals. Clients, if given the choice will usually try to blend elements of two or three choices into one concept to feel they are getting value - which results in a mish-mashed design, which is less in line with their goals than the one design that had more thought put into it.

3) Design becomes less about problem solving and more of a beauty contest.

As to whether multiple designers should work on different designs for one client, Andy says that you’re using more internal resources to inevitably produce one design for the client. Again, the client is paying the firm for their design expertise. So instead of presenting the firms professional opinion, they’re letting clients pick what they feel works, and it usually is picked based on personal appeal (I have those colours in my living room), rather than a design that will work for the target. This is not how we want them evaluating our design.

4) Lowers value for the firm.

Designing two or three options is counter productive in that you’re spending time and money on designs that are never used, essentially wasting that time which could have been used on other things, and at the same time, spending effort on designs that will be thrown in the garbage in the end anyway.

Keep in mind, we’re talking primarily about web design here. In many cases it makes sense to present multiple options for things like logos and ad campaigns, as they are usually higher level concepts that attack a problem from multiple angles, and they are generally quicker and easier to present in concept form (not execution). Web design, and publication design for that matter, is more about information architecture and requires much detailed problem solving. It is difficult to completely start from scratch all over again once you’ve worked through the problem the first time. Sure you can change a palette or adjust a font, but complete restructuring of information is a lot to ask once you’ve solved it the first time.

This is a subject I’ve thought about for a while, and am more convinced of the benefits of only showing one option the more it comes up. What are your thoughts?

South-western hospitality

Destination Southwest Nova Scotia is a partnership organization between the Evangeline Trail, South Shore and Yarmouth County Tourism Associations. Much of the focus of the group since its inception has been destination marketing and soft product development such as the creation of experiential packages and itineraries.

Headspace is pleased to be involved in helping them market their services in and out of the province.

Three isn’t company

There are three kinds of service. Good, fast and cheap. Pick any two. You know the rule right?

This is easy to remember when we offer others our services, however it’s easy for us to forget when we have to commission others to do our work. How does this work in the world of design and web development?

Design

Good design cheap won’t be fast.
Good design fast won’t be cheap.
Fast design cheap won’t be good.

What is good design? Is it design that we feel strongly attached to? Not always. In many ways good design is about 3 things; semantics, syntactics and pragmatics. In other words; meaning, aesthetics and practical application. And those three things have to apply to the audience we’re trying to reach. For example, a design might have a lot of meaning to you and me, but not to your end target.

Design is a process. As the designer, you can’t always get the design right on the first try. Designers use problem solving techniques to accomplish the three aforementioned goals, and this usually requires experimentation and rounds of self-made revisions before it even goes to the client.

Design made too quickly isn’t usually going to have the necessary time invested to balance the meaning/aesthetic/practical issues that are required in order to be considered good design. However if you want the care put into your designs, in order for them to be considered high-quality, that means the designer is going to have some late nights ahead of him/her. And that doesn’t come cheap. After all, designers have families too - and time away from them should be compensated for. Therefore, if you want the design to be it’s best, and you don’t want to pay top-price, then don’t expect a quick turn-around. The designer will probably be more than happy to work on something over a longer period of time for little money if he/she can make it a portfolio piece.

Development

Good websites made cheaply won’t be made fast.
Good websites made fast won’t be cheap.
Quickly built websites made cheaply won’t be good.

Again, let’s define what a good website is. Aside from the design, which was previously discussed, how does the good/fast/cheap rule apply to the technical/usability planning and front/back-end coding of your site?

Developing a website isn’t the same as designing a logo, which is more conceptual than technical. Commissioning a website is more like contracting a house to be built. Building a house must be done in stages. Before you start the wiring, you need a foundation. Before you lay a foundation, you need a blue-print. Before you start painting and decorating, the walls have to be built. Each stage takes time, and must be done in a particular order. Web development is similar. It has several stages, and stage 3 has to be finished before stage 4 starts. If you’re done stage 4, and you want to go back to stage 2, a lot of work has to be redone, and this slows down development. The basic stages of most websites are:

• Accessing the needs of the website
• Usability/content/structure planning
• Design
• Front-end development (ie: stuff you see on the website; XHTML/CSS/DOM controls most of this)
• Back-end development (ie: stuff you don’t see; databases, CMS, forms)
• Content implementation (ie: getting the copy in place, and the pages built)
• Testing
• Launching

If you are at the testing or launch stage, and you want to go back and change the structure of the site, or make a design change, this can slow down the progress of the site. Also, remember that much like the design of the site, which can be good or bad, especially when it comes to usability, the technical side of the website can be good or bad too. If you get broken links, it’s a bad site. If your site breaks in major browsers, it’s bad. If there’s typos, it’s bad. Ensuring that your site is functioning well requires—you guessed it—time!

So the old rule is the same — ensuring your site is functional takes time(and this scales accordingly depending on the level of functionality you require. A simple site doesn’t take as much time as a large site that has a lot of complicated features). If you want your site to have technically complicated features, and work really well, with no kinks - expect either high-costs, or a long development time.

This rule actually works well for the client, even though in a perfect world, we’d all like to have all three. When you want something to be good, paying a fair price and giving it adequate time is insurance that you’re getting a quality service. There are very few circumstances in which you want fast and cheap instead of good. So if you are getting fast and cheap, you should be calling into question the quality of work that you’ll be getting in the end.

After all, you might save money and get it right away, but isn’t it a waste of time and money if it’s is ineffective?

12 things you need to know before commissioning a website - part 2: Hosting, Domain and Bandwidth

This is part two of a six-part series. It is meant to give someone relatively new (or simply overwhelmed) to the web the information they need to commission a website for their company. It is broken up into 12 bite sized pieces:

1. Know your audience
2. Content
3. Content Management Systems
4. Hosting and Domain
5. Bandwidth
6. Web standards
7. Search Engine Optimization
8. Browser Testing
9. Accessibility
10. Design/Usability
11. Open Source or Proprietary?
12. Flash or HTML?

The previous post covered topics 1-3. This post will discuss points 4-5.

Hosting, domain and bandwidth. These 3 words scare almost anyone new to the web. And yet they shouldn’t, because they’re actually quite simple. Let me break it down:

A generous host

Everything has to live somewhere. You probably live in a house. Your computer lives in your office. And even computer files need to live somewhere. Your word documents need to live on your computer. But where does your website, which is essentially a bunch of computer files, live?

Well, if you want people other than yourself to be able to see your website, you need to buy hosting. When you buy hosting, you are essentially renting a cozy little home for your website to live in. Your website lives on a special computer with a lot of other websites. This computer, or server is open 24 hours a day, which is why everyone around the world can view your site at any given time. You might say that your host is the neighborhood, and the actual directory your site sits in is it’s home, but that’s getting a bit too specific.

The type of hosting you buy is important because it can limit what you do on your website. For example, if you carry critical data on your site (like credit card numbers) you’ll need what’s called a dedicated server - in other words, a special computer that only your website lives on, and no one else’s. Some houses that you buy may be cheap, but they are small and boxy, whereas other homes are a little more money but have a pool in the backyard. The same idea goes with hosting providers.

Hosts are very important, so if you don’t know what you’re doing - then hold off on buying a hosting plan until your in touch with your web designer/agency. They will be able to help you find a host that gives you what you need.

Master of your domain

A domain is not the same as a hosting account. If we were to use the home analogy, when people want to visit your website, how do they get there? They need an address. When they type this address into their browser window, they browser locates the place on the server that your site lives in.

http://www.headspacedesign.ca is my domain, and I need the domain and a hosting account to keep this site alive and kicking. You have to be careful when you buy a domain. They’re relatively cheap, but remember; most of the good ones are gone, so you’ll need to get a little creative. What you don’t want is an overly long domain name, or one that is hard to remember. Dot coms are popular choices, but since most are already owned, try a dot ca if you live in Canada, or a number of other options are available. I use internic.ca for domain purchasing, since they offer dot ca’s among others, but you can use whatever domain provider you like.

Bandwidth - Nothing to do with your waist-size

Bandwidth is the amount of data that can be transferred between your website and your audience. Don’t let that phrase frighten you. It’s a pretty straightforward concept. Let’s use our house analogy; Your website is a proud homeowner, and he likes to have people visit him to show off his digs. But how many people can he have at one time? And how much tea can he realistically offer all of those visitors. The doors and rooms are only so big, and there’s only so much tea in the cupboard.

This is similar to bandwidth. When you buy a hosting account, your provider will generally give you as much bandwidth as most websites need. However if you’re a large company and you expect an enormous amount of people to be visiting your site, or if you want to put a lot of big files on your site, like video and audio clips, you will probably need to buy more bandwidth.

Can you imaging if a million visitors were on your personal computer at the same time? It would get really sloooowwww wouldn’t it? Every time a user visits your website, they are accessing that special computer that your site lives on, the server. So it has to have a lot of power to have that many people accessing it at one time.

Think of it like the difference between a garden hose and a fire hose. A garden hose can’t have gallons of water flowing through it at any given time, because the width of the hose is only so wide. However a fire hose is very great in width, therefore it can have a lot of water flow through it.

Summary

So remember, the host is the computer, or server that your site lives on. The domain is the address to this server (http://www.something.com) and bandwidth is the amount of data that can be transferred between your site and your users. If you’re commissioning a website through a professional designer/developer, they should be able to help you with all of this. But it’s useful to at least understand the terms and why they’re important.

Another term you’ll want to get to know really well is web standards. This is extremely important because not every freelancer or agency knows about it. This subject will be discussed in the next part of the series. As usual, all comments are appreciated.

Is video right for your website?

Video has certainly gained popularity since most internet service providers have been able to offer high-bandwidth connections. After all, most people would rather watch a movie than read a book. A powerful image can move you to tears. So can beautiful words. Music can affect you emotionally. Combine all these things into video, and obviously you have a medium with great force - and great potential for entertainment, education and advertising.

If a client’s product or service can be sold with a website that features or video pieces that are entertaining, engaging, humorous, informative or in some way enhance their message—video is great. Or, if a clients’ business is in comedy, movies, news, politics, sports or user generated content - anything in which users are coming to the site looking for video content—then yes, their website should have video on it.

Many businesses, however, do not need, or cannot afford to shoot proper video. Instead, they might have a video in the bag already, like a low budget TV commercial, or a link from You Tube that they want to use. Basically, anything so that they can say they have video on their site. After all, video always beats text and images, right?

Two of the most popular, ground-breaking sites ever made—Wikipedia and Flickr—feature no video. Their main method of displaying content is text and images respectively. And they’re awesome. The reason they’re awesome is because the content is plentiful, it’s user generated, and it’s interesting to its audience. My point is, video in itself will not make your site interesting. Good content always will.

I don’t object to the idea of using more video - however I think there’s a tendency with this mindset to put the cart before the horse, and place more emphasis on the method of content than the content itself. After-all, content is king. That’s what people are coming to your website for.

Sweating in Style

Headspace is set to design and launch the new brand and accompanying collateral of clothing-line, Shimbo. Locally manufacteured, Shimbo can be worn as workout wear, dancewear, aerobic wear, pilates, yoga, running, walking or casual. It uses an amazing fabric which is moisture wicking, machine washable and won’t shrink or fade.

I look forward to revitalizing their brand as they prepare to launch a full-scale marketing campaign out of home. Stay tuned for more. 

An internal project

I’m proud to announce that my son, Micah Stephen Racki, was born Friday, August 10th, 2007 at 8:28pm. He was 8lbs 12oz, 21 ½” long and, in addition to black fuzzy hair, he has all his parts in the right places. His current fixations are not design or development related, but include drinking colostrum while being lightly bounced.

There’s no accounting for taste

My wife and I were watching an interior design show, where a designer’s own home was presented. He had a lot unique ideas for his space.

There was a lot of muted gold and red textures used in the walls and fabrics, and then in the oddest place, a painting that used a completely contrasting bright aqua palette. The use of contrast was extensive—next to a sleek modern chair was a block of untreated lumber used as a table. Next to a large, black, Japanese-style table were two golden, Victorian-style coffee tables that had almost cartoonish floral carvings. Was it ‘out there’? Yes. Was it poorly designed? No.

My wife’s reaction was “I hate it”.

The difficulty in designing, no matter what category of design it falls into, is always the same: Design is partly subjective and partly objective. While the designer’s home was ugly to my wife’s taste, it was not poorly designed. In contrast, there are many poorly designed spaces, the owners of which are in love with. In many cases, it comes down to personal taste.

So where does that leave us? Are we as designers always doomed to the mercy of the crowds in the Roman arena? Does 100% of the people who glance at our designs need to become so ‘wowed’ that they immediately grab a copy to stick on their fridges? Should our design decisions always be based on what the client is going to ‘like’? In school, my instructor wouldn’t allow a student to simply state ‘I like it’, regarding a peers design. He would retort, ‘Do you like pie as well?’ All criticism had to be qualified.

We all know that you can’t please everybody. So how does one qualify his/her design? Obviously there are some rules that come into play with design, such as proper use of contrast, alignment, repetition, gestalt, harmony, flow, movement, proximity etc. And it takes study, practice and a bit of talent to be able to use these principles masterfully in your design. But more importantly, you need to know who it is you want your design to please.

To me, what separates design from art is that art is a personal expression which is left open to interpret, discuss, or ultimately—like. Design is trickier than that. It’s a calculated expression of creativity. And while it is usually seasoned with personal influence, it is really supposed to speak to a target audience. That means that if your design is required to speak to a select group who finds rainbow gradients appealing, and you can use it with an idea backing it up, while ensuring it’s well-designed—then use it. It can be ugly to 90% of the population, and yes, even ugly to you. But if it’s working it’s mission, and your not compromising good-design for client satisfaction, then work your rainbow-gradient-magic (RGM) I say.

It is rumored that the president of Nike, when originally looking at the choices his designer presented for logos, felt strongly about several options other than the check mark that has since defined the company. So, why did he choose the swoosh? Although he didn’t personally like it, he felt it was appropriate for his audience. Is it a coincidence the company has done well?

The designer mentioned at the outset accomplished his objectives. He used solid principles and some unique ideas to design a space he felt comfortable calling his own. In that case he was the audience, and not the viewing public. The key: Good design is good design. Make it appropriately speak to your audience and it won’t matter if your wife or your boss, or even your client dislikes it.

12 things you need to know before commissioning a website - part 1

This is part one of a six-part series. It is meant to give someone relatively new (or simply overwhelmed) to the web the information they need to commission a website for their company. It is broken up into 12 bite sized pieces:

1. Know your audience


2. Content


3. Content Management Systems


4. Hosting and Domain


5. Bandwidth


6. Web standards


7. Search Engine Optimization


8. Browser Testing


9. Accessibility


10. Design/Usability


11. Open Source or Proprietary?


12. Flash or HTML?

This post will discuss points 1-3.

So, your business has finally soared, demand is high, and your customers, prospects and competitors are gradually turning to the web as a means of business. It’s time for you to scrap that clunky old site that you paid your 14 year old cousin $50 to make back in ‘98. It’s time to go pro.

Problem is, where do you begin? How do you know where to go, what to look for and how much to pay? Web jargon gives you a headache and all you want to do is pay someone to make the problem go away. This article can help you.

For starters, it should be said (as obvious as it sounds) that your website is important. Of course you know that. That’s why you’re paying someone for it. Right? Wrong! Many companies hire professionals to design their websites simply because they’re told it’s necessary, and yet they fail to appreciate how important it is. It’s not something to rush into. You don’t want to pinch pennies, just to get something live. Take your time, spend what’s reasonable, and find the right company or freelancer. One who will give you a site that accomplishes your online objectives.

Without getting too technical, this post should give those involved in commissioning websites a clear checklist to use when going out and looking for the right interactive firm or freelancer. It will also give you the right questions to ask when you’re in touch with one, as well as clear up some misconceptions and general web mumbo-jumbo.

1) Know your audience

This is the first thing you need to know before you even flip through the yellow pages. Why do you want a website?

Is it simply to get your name out? Do you want to make money with it? Is it a resource for prospects to get useful non-biased information that will move them to call you? Is it to promote a temporary product or service, such as a contest?

Once you can clearly articulate what your intended purpose with your website is — and who you want to visit it — the easier it will be to fill in the rest of the blanks.

2) Where is the content?

It’s a tired cliché, but it’s so true - content is king. The web is about content first and foremost. No one cares how great it looks, or whether there’s video, or even how easily navigable it is. If the content is useless to them, then they don’t care about it.

There are a lot of sites on the web, so what makes yours so special that people will want to visit it? It’s a known fact that people will visit a website more than once if the content is interesting, and if it changes regularly. So if you want to keep your prospects or customers on your site and not on your competitors’, you have to give them something worthwhile. The information has to be useful, engaging, or funny. And it has to change. Not every six months, not every month. It has to change every day, couple of days, or every week. The more regular, the more they will visit you.

With that in mind, you have to think about two things regarding content—are you able to write your content, and can you keep it updated? Most would say, yes. But think about it - are you trained to write effective web copy?

• Can you write interesting copy that’s easily scanned making good use of heading hierarchy, and seamlessly incorporates keywords for search engine optimization?

If not, the web firm you hire should have a skilled copywriter on board, who can handle the bulk content of your site. But then comes the next question:

• Do you have the time to spend constantly updating your site with news, events, blogs, images, videos, case-studies, products, or all of the above?

If the answer is no, then you either need to hire someone who can handle those responsibilities, or learn the necessary writing skills yourself, and set aside a chunk of time in your schedule on a regular basis to write content. Think of it like shaving. Sure, it’s kind of a pain, but you need to do it, and you certainly can’t forgo it for a couple of weeks just because you’re too busy!

Naturally there will be parts of your website that rarely change, but there should always be at least one part of every site that is clearly dynamic to the user. (For the purposes of this article, dynamic refers to content that is regularly updated and generated through a content management system(CMS).)

3) Content Management Systems

Speaking of which, the next thing to discuss with regard to content is whether or not you need a content management system.

For most, the answer is yes. However if you decide to ignore everything I said about how you need to change your content regularly (silly fool) — and you honestly know that you will only change your site’s content once every 6 months or every year — then don’t bother with a CMS.

Think of a CMS like a time-share package in Orlando. It’s a worthwhile investment if you use it. If you don’t, it’s a waste of money. Every blue moon when you want to change a phone number or delete a team members’ photo, just go back to whomever developed your site and pay him/her to make the change.

In most cases, you’ll find that a CMS is a very worthwhile purchase. It allows you to publish your own content whenever you want through an easy-to-use editing interface, similar to writing an email or using Word. If you were to try to edit your site without a CMS you’d have to know basic HTML, and be able to handle files using File Transfer Protocol (FTP). Thankfully, with a CMS, you can leave that to the pros. Your CMS sort of serves as a translator between you and your website. You write in plain English that you want to add a page and edit copy on your site, and the CMS translates that English into a language that a computer can understand, thereby updating your website.

You may need your entire website editable - but in most cases there are only a few pages you’ll need to change on a regular basis. In my experience, I have found it easier to let pages like “About Us” and “Contact” remain static — since you’ll rarely change those sections — and get a CMS for thing like “News”, “Events” and “Blog”, which you should be updating constantly.

Closely related to this subject is RSS. It stands for Really Simple Syndication. Using what’s called a RSS-reader (which is built into the Mozilla Firefox web-browser), your users can subscribe to the dynamic sections of your site. This way they can check their RSS-reader for updates to the site rather than visiting it each time.

Believe it or not this actually keeps users on your site, because they’re constantly reminded of you every time they look at their RSS-reader, and therefore they wont forget about your site… provided you keep the content fresh. Definitely ask your web team about RSS.

Hopefully these points were a helpful start. Part 2 will discuss hosting, domain and bandwidth. Feel free to email this link to those who would find it useful, and leave your comments/criticism in the comment box below.

Won’t someone please think of the children?

Headspace was recently commissioned to brand a program by the Ecology Action Centre, called Active and Safe Routes to School.

They try to get more kids walking or biking to school, in order to preserve the environment, and increase the quality of life for children.

Headspace recently did a one-off print piece for their fundraiser called “Quarters for the climate”. The new work will include a brochure and re-designed website. 

Make it a combo today?

When you first decide to go through the drive-thru at your local fast food restaurant, what is it that motivates you? No doubt a number of things; TV or billboard advertising, past experiences eating there, or the dire need to eat something before you pass out. Maybe this particular spot is all there is close by. Either way, when you roll up to that plastic sign, and yell over the muffled speaker, the choice is yours. No one forced you to go there. And other than the usual promotional signs that are in front of you advertising the new mushroom-melt — very little “selling” is needed. Ronald’s already got you.

In a lot of ways websites are like fast-food drive-thrus. Visiting a website doesn’t take long and it should be equally fast to get what you want from it. Whether it’s information, downloads, or to sign up and become a member - you are at a site for a reason. Maybe you just want that Transformer that comes with the kids meal.

On the other hand, when you watch a television spot, or when you see a print ad - it’s mostly an unwelcome intrusion. Your mind was elsewhere, and now an advertiser is trying to vie for you attention. Don’t think of a website the same way.

When you visit a site, nine times out of ten, you’ve already been sold. You’ve clicked on a link, googled the name, or even entered the URL in the browser bar (do people still do that?). You’ve visited it because you wanted to. So why is it that some websites are still trying to sell you when you’re already there? Why are they trying to force you to view the site the way they want you to and not the way you want to?

One of the appeals of using the web is interactivity. Visiting a site when you want to visit it. Keeping your browser window the size you want it to be. Setting the body font to a size that is comfortable for you. In short, viewing content on your terms, not somebody else’s.

The following are some things to keep in mind when designing for the web to ensure your visitor’s stay is as comfortable, and customizable as possible:

Don’t misuse Flash

It happens a lot. People abuse Flash by getting it to do things it wasn’t meant for. Like creating ridiculously underwhelming intros that are meant to get the viewer interested in the site. The viewers are already there! There’s no need to sell them. All that intro is doing is stopping them from accessing the content they visited the site for in the first place.

Imagine the teenage employee of McDonald’s standing in front of your car before you can get to the intercom, saying (voice-cracking and all) “Welcome to McDonald’s, Here you’ll find Big Mac’s and other hamburgers. By the way if you want to skip this, just let me know.” Same goes with splash pages. There’s no need to create a barrier between the user and your content.

Another way Flash can be abused is by using it for navigation. If the site isn’t built in Flash, then the nav shouldn’t be. It’s inaccessible. It doesn’t allow people to use the contextual menu (ie: right-click and open the page in a new tab or window) and most of the time, it’s just plain annoying. Picture every time you looked at an item on the fast-food menu and it twirled.

Coming soon

Few things are as frustrating as trying to access something on a website only to find: “Still under construction. Coming soon”. If there is no content on a page, then don’t allow the user to waste precious time visiting it.

It doesn’t impress anyone to see that a page was initially conceived with the idea of content being in place. Rarely are we interested enough to keep checking back. No one likes ordering a food item and being told it ran out, but check back soon. There may be more eventually.

Taking away the control

It was stated at the outset that what separates the web from other media, is that users control it. So anything we do to try and strip them of that control is not going to make for an enjoyable experience. That means that even though we think our site looks really cool full-screen, and with no URL bar visible (hey, we don’t want them distracted by thinking about other sites they might want to visit) - it’s really intrusive to force upon them.

Kind of like if your sitting in your car placing an order and a big piece of chrome comes out of the side of the restaurant and closes in on your car so that the Wendy’s across the street isn’t visible. Just face it, people are there out of choice, and ultimately it’s up to them whether or not they want to stay.

This brings to mind the idea of pop-up windows. Generally it’s offensive to have a new window or tab open up in your browser unless you, the user, decided to open it. Sure, as creators of the site, we don’t want people leaving our site prematurely. But really if it’s made clear that the link is external, then they can be the ones to decide whether or not to see it in a new window.

Click here to read more. Click where? Oh right, here!

We see these kinds of contextual instructions, and for the most part, they’re a bad practice. It’s almost always better to visually identify what is a link, and make sure that what is identified is real, descriptive content. For example, “click here for more information” is silly and redundant. Why not link “More information”. The kid at the drive-thru intercom never says “Look here for more food choices”.

By keeping in mind that the websites we create are solely for the users that visit them, and not for ourselves, we can be sure that they’ll keep coming back for more online, tender, juicy goodness.

Not my type

If there’s one class that gets slept through a little too consistently in design school - it’s typography. There’s something about it that can seem so unattainable to some designers, and yet - like most things in life - it’s a simple mix between art and science. Easy to learn - hard to master.

Typography for the ages

Part of the reason type is so fascinating to me is because it is a visual representation of our most precious cultural touchstone - language. Even the lay person can look at a piece of type and instantly recognize the time period it came from. Think of everything from as far back as the Victorian era and the arts and crafts movement, to the modernism era. They all had distinguishable characteristics that even now, transport us to a time we never lived through. The graphic styles speak almost as much as the words and meaning they represent do. Even as recently as the 1950s through the 1970’s, each decade seems to have its own distinguishable typographic style.

Then a remarkable shift happened only within the last couple of decades. Designers began making the shift from typesetting by hand to typesetting by key stroke. The computer brought about great efficiency in some respects, but along with that, there was a price to pay. Now it was easy to open up a computer program, select a typeface and start typing away - and gone was the need for an understanding of typography.

In practice

Even now, some so called ‘designers’ know very little about typography, though this study is central to the very basic principles of graphic design. I once had the misfortune of working with a very arrogant (and untalented) individual who prided himself on his “fontography” skills. That’s right, to him, the only knowledge needed was in choosing the right typeface.

However, there is more to it. Remember the part where I said it’s an art and a science? Great typography is about knowing the rules, and then knowing how to break them. It’s about communicating in a way thats practical and methodical and easily read, but also about communicating a feeling by the way your letters appear, the place your words sit, and how your paragraphs are positioned on the page.

Question is, how will people remember our era? By keeping in mind the basics, you can take your designs to a whole new level, and keep our time from being remembered as the era of ugly type:

Letters - the building blocks of typography

It’s important to know the anatomy of letters and words. Remember how you used to print on looseleaf in the elementary days? You would have 3 horizontal lines that you would be used for each line of print. The top line would be where the top of your capital letters started (In typography this is the cap-height), the middle line would be where your lowercase letters reached their height (the x-height), and the bottom line would be where all the bottoms of your letters would sit (the baseline). And then you would have some lowercase letters that would go beyond the x-height and the baseline. For example the lowercase “d” has what’s called an ascender which reaches the cap-height even though it’s lowercase. The letter “y” has a descender which goes below the baseline.

Is all of this just useless head knowledge though? Check out what some designers have done by simply manipulating the anatomy of letters.

Text

When letters sit together, they form text. Knowing how to place letters next to each other is key to good typography. For example, one of the most common type blunders are not kerning letters. Take for example the word “Fan”. At small sizes you don’t notice the fact that the letter ‘a’ should slide in underneath the ‘F’. When set at large sizes though, it becomes apparent. The computer automatically sets the ‘F’ and the ‘a’ to have the same distance apart from each other as other letters. However, you have to override what the computer is doing automatically for aesthetics.

Paragraphs

One thing you have to pay attention to is the shape and size of paragraphs of text. Our eyes are not meant to read extremely long wide columns of text. It is much easier to read narrow columns, because your eye can skim in one place without having to travel long distances. Another common oversight among amateur typographers is not cleaning up orphans and widows.

When a new paragraph begins at the bottom of a column of text, or conversely if a paragraph ends at the top of a new column - that’s an orphan. It just doesn’t look right. Its better to break the column prematurely than to have this happen. Similarly, a widow is where one word has it’s own line at the end of a paragraph. Better to break the second-last line prematurely and let the poor widow have a companion.

When good type goes bad - a list of felonies

This is what not to do:

Do not run text vertically like Chinese characters (ie: all the letters have different baselines). Roman characters were not meant to do this. Instead, if you want a vertical line of text, simply rotate the whole line. It’s better to have to read the text sideways than up and down.

Using justified text on narrow columns. You know how newspapers have “Rivers” or large gaps between letters that make strange patterns through a paragraph? That’s what not to do. Narrow columns should use left or right alignment. Type does not have to be perfectly symmetrical to be legible.

Stretching letters. You see it all the time. Somebody wants to make a line of text fit how they want it, so he/she stretches the letters horizontally or vertical. This is bad! A common analogy with typography is to make the shoe fit, not the foot. In other words, create a flexible design, that can accommodate what you need it to, without forcing letters or typefaces to do what you want them to.

These are just a few of the things that go a long way toward making communication design practical, beautiful and meaningful.

And the extra credit question: What’s the difference between a font and a typeface? A font is the computer file that makes a typeface what it is. In other words, it is correct to say “I don’t have that font on my machine”. It is not correct to say “I love the look of that font”. The characteristics that make letters aesthetically pleasing, or identifiable are referred to as a typeface. So it is correct to say “That’s a beautiful typeface”, not “You need to copy over the typefaces to your computer”.

For more great tips on basic typography see Thinking with type

A Global Audience

The campaign Kyle Racki art-directed, illustrated and designed for Bishops Landing was selected for to be showcased on Ads of the World. This work was carried out while Kyle was with Impact Communications, and it was a memorable and rewarding project.

The ads paid homage to the art deco style of the 1930’s and was used to advertise the free concert series at the square in Bishops Landing. Also, an ambient campaign was used to promote the free concert to those parked near the event.

The ads, posters and print collateral that were launched in the summer of 2006 proved to be the most successful year in the events history.

Now that’s a smooth compliment. 

Yeah I’m talking to you! Why everyone should care about web standards

As the name of the article suggests, this is for everyone.* By everyone I mean anyone who is involved in purchasing, building or managing a website. If you are in business, chances are you have a website. Perhaps you’ve have heard of web standards, but don’t know what they are. Well, know this; web standards are drastically changing the web design industry, and it is critical that anyone who has anything to with websites gets on board with implementing these standards. I’m going to go out on a limb and assume that you care about things like:

• Return on Investment
• Staying ahead of the competition
• Consistent online branding
• Responding to your customers
• Reaching the widest possible audience
• Meeting your legal obligations
• Preparing for the future

So you don’t know the jargon - that’s okay. In fact, this article is specifically meant for people who don’t toss around words DOM scripting, semantic mark-up or graceful degradation. This is meant for people who care about achieving real benefits to their business.

A little history

Let’s take a step back for a moment. In 1991 Tim Berners-Lee created the internet. And the programming language that he created was called HTML. Perhaps you’ve heard of it. If you don’t know (don’t worry I promised no jargon), HTML is a very simple computer language that’s used to describe text in a way that a computer can understand. So simple in fact that web programmers don’t even like it being reffered to as a programming language. It’s beneath them because it’s so simple. They refer to it as a mark-up language. The beauty of HTML is it’s simplicity; because it was originally meant for academics to pass their research back and forth over the internet, it had to be so simple that anyone could use it. Basically it describes content. So if I want to make a heading - I wrap it in a heading tag. This way the computer knows its a heading. For example:

<h1>Here’s my heading</h1>

<p>And here’s my paragraph</p>

Not too difficult to grasp eh? However the problem came when the internet took off because businesses got involved and wanted to market themselves on the internet. Why was that a problem? Well, they didn’t want a plain old looking text document for their website, they wanted it branded like all their print materials. They wanted it designed! So what Tim Berners-Lee created in 1991 was now being forced to do things that it was never intended to do, like using multi-column layouts, and having background patterns and displaying images etc. It turned HTML into a hideous shadow of its former self. It was now a mess of code that was unreadable by most people.

Compound that with the fact that the browser war came into play in the mid-nineties. Now Internet Explorer and Netscape - and a host of browser manufacturer’s to follow - were each trying to one-up each other by adding new features to their browsers. So your website might look good on Netscape, but render terribly if someone is using an older version of Internet Explorer.

The aftermath

The problems that resulted from this method of web design was astounding. Our websites are business critical and yet:

They are expensive to redesign. What was once a fresh, original, unique design it now dated. However if you want to redesign your site it costs an extraordinary amount of money because the web team has to build it from the ground up. If you want to make a change to your site you need to have a web team to make those changes, and if that team isn’t in-house, it’s even more expensive.

I know what you’re saying - “But I have a content management system to make changes to my website”. Well, that helps to an extent. But it also leads us to another problem; it ruins your brand consistency. Now you have editors who are using a WYSIWYG interface to write content for your website who are bolding words, changing the colour of headings, using Comic Sans for the body font - it really is a mess.

Another problem with the old method of web design is that you can’t reach the widest possible audience. Imagine for a moment that you own a shop. And every third or fourth person who comes into your shop, you turn away. Well a lot of websites that are around today do the very same thing. They don’t cater to how different people use the web and they only work on a select few browsers. So many are forced to leave your site or are frustrated because it’s not displaying correctly.

For instance many times we want to print a page of a website, and it cuts off half of the text column. Or how about when you want to copy text from a site and paste it into an email - only to find out that you can’t. Either the text is just an image or it’s in Flash. Now many people are browsing the web with mobile devices - is your website readable on those small screens? Most aren’t.

Believe it or not your current website may not be compatible with the laws in your country. Depending on where you live there are laws that dictate that people with visual disabilities must be able to access your site. If your website is not compliant with web standards, then chances are someone using screen reader is unable to “hear” the content of your web page. Most of us are happy to see that care has been put into a building so that it is accessible to people with physical handicaps - but how many websites are out there in which someone with a disability cannot use the site?

A final thing I’ll mention is that these inaccessible websites are not easily picked up by search engines. For many this can mean death for their business. If you can’t be googled than it’s likely that most people won’t find your site.

Alright, now we’re really depressed, right? We’ve gotten ourselves into a big mess that we all have to live with. I’m pleased to tell you that it doesn’t have to be like that.

A sigh of relief

Thanks to the W3C - an organization that develops web languages, much like Tim Berner-Lee developed HTML - there are now standards in place that solve, or at least improve, most of the aforementioned problems with web design! You guessed it - web standards! So now instead of HTML being full of messy code that is unreadable by most people out there, with web standards your HTML remains simple, just like the way it was meant to be. It’s important to note that there are three elements that make up a web page:

• HTML
• CSS (Cascading Style Sheets)
• DOM Scripting

Oh wait! I said I wouldn’t get technical! Let’s redefine those three key elements into:

• Content (HTML)
• Design (CSS)
• Behavior (Dom Scripting)

Anything related to how your website looks is taken care of in a totally seperate place, leaving the HTML simple and readable. Also the behavior aspects of your site (ie: drop down menus, forms and things of that nature) are separated from the HTML as well. So now instead of each document in your website being one big mess, these three elements are separate from one another and much more usable.

This may be hard to visualize. For a perfect example go to CSS Zen Garden. It’s a site that shows the amazing things that can be done using only one HTML page. That’s it - the whole site. But what really drives the point home is that designers can submit different designs for this one HTML page and it simply swaps out a style sheet (CSS) thus delivering a totally different design, but leaving the content intact. Just click on the different links on the site and you’re seeing the same web page, but with a completely different look & feel. Amazing stuff.

And the benefits

So again, why do you care? Well when your site is to standards it means that you can now have a return on investment. A standards-compliant web site is much faster to build and maintain, and any changes that you want to make down the road are much faster and less costly to implement.

Now instead of your editors using their CMS tool to ruin the look of your website, they now have control only over the content of the site and can stick to doing what they do best - writing. If they want to write a heading, the HTML stays as a heading and the CSS makes the heading look the way the designer intended, not the writer.

You can now respond to your customers and reach the widest audience possible. Remember the analogy of the shop? Sites that are standards-compliant can easily be made to render well on different browsers and mobile devices, and ensure that users can access your content, no matter what their browsing preference or disability. This also means that you will be living up to your legal obligation - allowing your site to be accessible to the visually impaired.

Standards-compliant websites are faster to render, thus users with slow connections are less likely to leave the site because of waiting too long for large graphics to download. Also because the content is left intact, search enginges pick up the words on your site more easily and therefore your ranking on search engines will increase.

Best of all you are future-proofing your site. As newer browsers come out, most if not all of them are embracing web standards, and so as time goes on, your website will be consistenly rendered on all the modern browsers.

Not too shabby eh? It was a long read, but if you learned something about web standards and the benefits of them, then it was worth it. Unfortunately while more and more in the web design field are embracing these standards, many traditional agencies still don’t know or don’t care about them. You shouldn’t be paying for a website that doesn’t comply with web standards nor should your customers be using it. Embrace the future of web design and feel the benefits that will come to your business.

Pardon my french

Headspace was recently contracted to brand a not-for-profit group called Direction Emploi. They help Francophones find jobs right here in Nova Scotia.

Evolving Beauty

Over the years Eric Boutillier-Brown has built a solid reputation for creating beautiful fine-art photography. I’m proud to be able to help a true artist showcase his work from the past 15+ years online. Stay tuned for when his new website is revealed.

© 2008 Headspace Design. All Rights Reserved.

• Sitemap |
• XHTML |
• CSS

Powered by Expression Engine | Hosted by Engine Hosting

Top of Page