Future of Web Apps Miami - Conference 22-24 February 2010

News Flash

Want to make extra cash? We'll give you $20 for every ticket you sell to the CSS3 Conference. Yay! http://bit.ly/9nD2SM

Archive: Clients

8 July 2009

Editor’s note: This article is a summary of Paul Boag’s talk at our event The Future of Web Design. You can also listen to the audio or watch the video of the talk, which is below the article.

I’ve been thinking recently about the relationship between clients and designers. And about how we get clients to the point of saying yes. Yes to what, you might ask? Well, that might be yes to the design, that might be yes to your wireframe, some feature or just your approach. But it’s the way that we present ourselves to clients and the way that we interact with them that I want to look at.

(more…)

Continue reading 22

28 April 2009

There’s been much debate of late regarding speculative or ’spec’ work and the associated problems (and benefits) of it. Blogs have been buzzing for a while with negative rants by some high-profile designers regarding the practice and sites such as the infamous NO!SPEC project have gained backing from some big names which in turn has encouraged designers to say no to spec work.

But what exactly is spec work? Some people don’t seem to know. Why all the hoo-ha and what, if anything, should we do about it?

What is Spec Work?

The practice of spec work is the “undertaking of work for free, often as part of a competition”. In the words of NO!SPEC:

“Spec has become the short form for any work done on a speculative basis. In other words, any requested work for which a fair and reasonable fee has not been agreed upon, preferably in writing.”

In a traditional spec situation a prospective client encourages several designers to do a small amount of design work in order to help the client decide which to employ. While this in itself has its problems, much of the recent concern in working ‘on spec’ has been caused by the emergence and rise in popularity of sites such as 99designs and CrowdSPRING that actively promote clients finding complete solutions by running competitions. Such ‘crowdsourced’ design solutions are deemed damaging to the design industry by some.

As with most competitions there’s normally only one ‘winner’ compensated for their efforts, usually at a rate of payment much lower than a professional agency would charge. None of the other entrants receive anything at all. Despite the odds, many are still keen to participate and the competition sites are proving very popular.

Not all competitions are considered to be spec work. There was much debate on whether Carsonified’s (the company behind ThinkVitamin) competition to design a holding slide for its forthcoming Future of Web Design conference should be considered spec work or not. There is clearly still a debate to be had on what spec work actually is.

Why Do Clients Like Spec Work?

There are just as many designers keen to champion the practice of spec work as there are outspoken against it. However, clients are clearly the biggest supporters of spec work since, on the surface they seem to gain most.

It’s certainly low risk for them. Some (not all) of the clients using these site are not interested in design and simply want the cheapest reasonable solution. By commissioning work ‘on spec’ there is potential to get something for nothing without having to formally engage a designer in the traditional way; contracts, up-front fees, having to pay for meetings and design iterations etc.

“…I am a potential customer, not a designer. I am looking for something inexpensive and decent-looking. I don’t need to win a design award,”

says George McC, a client commenting on Graphicpush’s Graphic Push’s post on the ethos of spec work.

1) It’s Cheap
Many spec sites allow clients to set the price that they are willing to pay and a fixed deadline for submissions. Payment is only required for the chosen design, not those which are not liked and not used.

2) It Offers Greater Choice for the Client
Rather than be tied to one agency or designer’s style and ideas, spec work means you can receive a large number of designs, styles and ideas in a very short time.

3) It’s Guaranteed
Dissatisfied clients can choose to abandon a competition and reject the submissions if they are not happy and are not therefore obliged to provide a reward.

The Case for Spec Work

It’s not just the clients who feel they’re getting a good deal from the spec arrangement. A great number of participating designers defend the practice.

1) it’s easy money.
Certainly in the case of 99Designs and other crowdsourced projects, it can be easy to make money. Granted many of the designers taking part are either students or work in countries with less-strong currencies who see involvement as potential to easily make good money. One designer commenting on the same post explained,

“I entered two 99designs competitions. It took 1hour. I won £500. I bought an Xbox 360. Sorry if I undermined all you designers out there.”- designer commenting on Graphic Push’s blog post

2) It’s Good for Developing Skills
Some designers see doing spec work and entering competitions as an opportunity to get bigger, more high-profile clients and improve their design skills.

3) It’s a Quick Way to Get Your Name Out There
As a struggling designer there are few opportunities to get your name known in the industry. Doing spec work can be one of them. Once people have seen your work and like your style, then you can start to charge for your work.

The Case Against Spec Work

There are a great number of reasons why spec work is considered inappropriate by some professional designers. The AIGA, the professional association for design, advise against it.

“AIGA believes that doing speculative work seriously compromises the quality of work that clients are entitled to and also violates a tacit, long-standing ethical standard in the communication design profession worldwide. AIGA strongly discourages the practice of requesting that design work be produced and submitted on a speculative basis in order to be considered for acceptance on a project.” – AIGA.

There are many reason why designers think that spec work is a bad thing. Some high-profile designers simply dismiss it out of hand.

“Never do spec under any circumstances.” – Jeff Zeldman

While others give more detailed reasons why they dislike it.

It’s Uninformed Work
Design is about much more than individual taste. ‘Spec’ work encourages clients to look upon design as a commodity whereas good design is a process of understanding and solving a problem in the most appropriate way.

“While good design invariably has an eye on aesthetics and a concern for technical accuracy and perfected details, graphic design, (whether for web, print or screen), is essentially about solving problems. Each project has its own set of unique problems to address.” – Mark Boulton, FiveSimpleSteps

Spec work often ignores the problem-solving, considered design process in favor of promoting a ‘beauty-contest’ of finished work, with the winning entry appealing to the client and not necessarily solving the problems at hand.

It Devalues the Profession
Commissioning work for no payment could be considered immoral, it is certainly degrading and minimizes the value of the design and the value of the designers intellectual property.

“At the very outset of my career, I did several projects on spec — and I’d never do it again. Our ideas are the most valuable things we bring to the table on any project and, once given, there’s no taking them back. Spec work sets a dangerous precedent.” – Daniel Burka, Digg.com

It Encourages Plagiarism
While many feel that spec work reduces the risks for the client, in fact the opposite is true. It has been suggested that many participants use stolen or copyrighted material as part of their submissions. Plagiarism is quicker and easier than designing from scratch, especially if there’s a risk that you might not be paid.

It’s Unprofessional
The client-designer relationship is largely unmoderated, thus both parties are at risk due to the potential for unprofessional conduct. Stories from unhappy designers abound who feel they have not been fairly treated by a client and from clients who have been harassed by unprofessional, unqualified designers. Many suggest it’s often more trouble than it’s worth.

Is There a Solution?

While the demand for poor quality, cheap design work prevails the problem is unlikely to go away. The only way to eradicate this from the design industry is for designers to refuse to do spec work, en mass. For this to happen though, designers need to agree on what is and what is not spec work.

Maybe what is needed within the graphic/web design industry is a global, dedicated body to educate and support clients in their search for appropriate designers. How do you think the issue should be resolved?

Further Reading:

Graphic Push – 99Designs Bullshit

Paul Boag – Why Speculative Work is Wrong

Jeffrey Kalmikoff – The Fine Line Between Laziness and Crowdsourcing

Ross Kimbarovsky – CrowdSPRING’s reply to NO!SPEC

Andrew Hyde – Spec Work is Evil

Dev Lounge – Spec Work, Good or Bad?

Main image: Kyril

Continue reading 21

18 February 2009

Possibly the biggest mistake in any development project is failure to plan. Recently, the owner of a prospective start-up told me that planning was unnecessary and a good developer could just start coding. This, I promise you, will end in tears.

Wireframing is one of the first steps in your planning process and arguably it’s one of the most important ones. This is when the idea starts to take shape as an application, becoming boxes and buttons that users will interact with. This article will take you through a wireframing process; who should be involved, the tools to use and tips to enable you to make better wireframes.

1) Be Clear About Your Objective
As a developer I can understand the temptation to jump in and start coding. Often the initial idea seems so simple that surely you could just sit down and bash it out? Unfortunately, projects are rarely simple and anyone with experience will know what a myriad of unforeseen issues and challenges await you if you go down this route.

A wireframe will help you identify many of these issues in a way that is time and cost effective. It is far easier to make changes to a collection of paper screens than after you have written a thousand lines of code.

The process also helps to create a better understanding of the application. Putting it down on paper raises questions and ideas and leads to changes.

The final output will be a blueprint from which designers, developers, architects and project managers will work and makes sure everyone is in sync.

2) Make it Functional, Not Pretty
There are variations in how wireframes are presented and this is reflected in the various tools available. Fundamentally it is about the functional parts of an application, e.g. that a page will have 3 text boxes and 2 buttons. It’s about function not form.

At Howard Baines we take an austere approach to this and our wireframes include nothing but the functional elements (boxes, buttons, dropdowns etc). We ignore anything that could be seen as design or layout. Others may go a little further and include layout and other visual elements. Whatever works for you.

3) Draw on Your Experience
You do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.

4) Decide Who’s in Charge?
Make sure someone owns the wireframe process. They are responsible for keeping it up to date and managing feedback, changes etc. In the case of a start-up this is often the founders, the ones with the idea and vision who understand the end goal. In the case of our clients we often take on this role. It doesn’t matter who it is so long as ’someone’ is in charge.

5) Involve Everyone
Maybe not at the first meeting, that should focus on simply getting the idea on paper and involve the key stakeholders whose idea it is. Fewer, people involved makes this process quicker. As the wireframe develops involve other members of your team and your client’s team. For example, if you are integrating your app or site with existing databases then make sure the DB owner can check that all the data fields exist in their database before you add them to your wireframe. Collecting a user’s fax number is no good if there is nowhere to store it. Equally designers have a good understanding of user experience and can spot potential problems in the flow early on.

6) Set a Deadline for Completing the Wireframe
It is important to set aside predefined periods of time and deadlines for deliverables to keep a project moving. The initial wireframing session could be one day or several depending on the size of the application. But set a period and stick to it. Follow up review meetings can be much shorter or even done remotely.

7) Keep it clean
If a particular page requires two text boxes and a button then it should have just that, no more, no less.

8) Avoid Designing Your Wireframe Too Much
Wireframing is about the functional way in which something operates it’s nothing to do with presentation or design. We try to avoid anything that could be construed as design. This will almost always distract the audience. Add a little blue just to try and make it more interesting and you will have a half an hour conversation about the merits of blue. Design should be left to designers.

9) Remember that UI is not UX
It can be extremely tempting to start thinking about the use of presentation methods such as AJAX. Remember that a wireframe document is about the functional elements and not the way they are presented or users interact with them. For accessibility reasons applications need to work without features like AJAX and therefore more like the wireframe.

10) Think About the User
It sounds obvious but it’s so easy to get caught up in creating a wireframe and forget about the user. The functional is what we’re focused on but it is still important to consider the user experience that is being created. For example, if you create a registration form that is three pages long you probably won’t find that many people fill it in.

11) Don’t Get Lazy
It’s often easy to say “the login page is obvious let’s not include it in the wireframe”. Make sure you wireframe everything. At the end of this process you should have a document that can be stepped through just like the final website. Every step counts and none should be ignored.

12) Organise Your Wireframe into Sections
A website or app is often divided into sections such as news, products and user account. Break up your wireframe document accordingly for much easier reference.

13) Number Your Pages
A web application often consists of a number of processes; a checkout is a good example. Often these are linear but sometimes users can choose different paths such as skipping a step. Clearly number the pages in your document and then label which page a particular action (such as clicking a button) takes the user to.

14) Look for Repetition
Consistency within an application is helpful to users, developers and designers. Repetition of groups of elements can therefore be a good thing. For example, wherever a user enters an address it should be the same fields in the same order. Look for these areas of repetition as you wireframe.

15) Check it all Makes Sense
The final document should be easy for anyone to follow. If only a developer can understand your wireframe then something has gone wrong. Ask at least one person who has nothing to do with the project if they understand it.

16) Ads are Functional
Many sites include advertising for monetisation, this may be as simple as Google ads but it is functional and not design, so include it.

17) It’s Not Just the Public Site
Many sites have an administration area for managing content, viewing registered user profiles, resetting passwords etc. This may not be viewed by many people but it is still important. Sometimes it can contain data that is not publicly available (such as a user account enable button). This is important information to developers when designing the database.

18) Know When to Stop
Make sure all relevant stakeholders have the opportunity to give feedback but don’t turn this exercise into painting the Sistine Chapel. Typically I would say three drafts should get the job done. The first gets the idea onto paper. The second reflects feedback from other parties such as developers, and designers. The third should be the final polish.

19) Choose the Right Tools
Pen and paper is often the way to start. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept evolves.

Once you start creating the document our advice would be to use the tool you’re most comfortable with. Developers for example may use Microsoft Visio, project managers PowerPoint, Designers Adobe Fireworks.

I think that the wireframe should be a document though rather than something interactive (like design, it can be a distraction) and therefore creating HTML may not be the best thing.

There are a number of specific tools for wireframing, for example Balsamiq provides an environment for quickly adding and customising common interface elements. They have given it a hand drawn feel to provide a visual lift while not actually being design.

20) Consider Dependencies
Everyone knows what a shopping cart process is, right? Therefore it’s easy to wireframe and put to one side. Not entirely. What if you’re using a third party payment provider such as PayPal? That may influence how parts of the site must work. Research the areas where there will be dependencies and make changes accordingly. It’s easier to do it now than later.

Hopefully this article has provided a clear sense of the wireframing process, who’s involved, how to approach it, the tools to use and what the final output should be. The most important thing to remember, however, is that a thorough and well put together wireframe can save you a lot of time later in dealing with issues later on down the line.

Do you have any tips for creating great, usable wireframes fast?

Continue reading 110

Subscribe to our Newsletter

Sign up to the Think Vitamin Newsletter to get updates on web design, web development and web entrepreneurship as well as special offers and discounts from Carsonified. Rest assured we never share your email address.

Subscribe to the Think Vitamin articles RSS feed

Future of Web Apps Miami - Conference 22-24 February 2010

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck