Designing for Non-Designers

For example, the designer is not concerned merely with what the user can see on the screen, but also with what the user will eventually see in response to some event occurring. An event could be something like a mouse click, a timer ending, or even an error occurring. We must be concerned with how the product will respond to things that happen while the user is interacting with it. Although our work is normally displayed on a two dimensional screen, we have to be able to think in at least four dimensions.

Success as a web designer requires mastery of a very wide range of skills. The chart below shows a hugely over-simplified view of the major areas that designers need to have at least a working understanding of.

Within each of these layers, there can be numerous other layers, each requiring different knowledge, skills, and specializations. For example, if you group the top two layers (User Interface and Navigation Architecture), you are in the territory of a UX designer, because their main task is to evaluate how these items in particular work or don't work for the benefit of the user. Grouping the bottom two layers gives you system design.

Isolating the top layer, you could find specializations in graphic design, form design, layout, typography, animation, and a whole lot more. The point is that there's no single easy definition of what a web designer is or does. They may do some of the things described above, or they may do none of them.

Some web designers might be brilliant at graphic design and drawing, but be totally clueless when it comes to coding. Others might be brilliant programmers, but can't draw much better than an average kindergarten student. If web designers aren't really sure exactly what web design is, then it's small wonder that clients rarely appreciate what a complex operation it is to create a high quality website.

Mastering all of these skills is a tall order for any individual person, which is why most studios prefer to work in a team environment. That's not always practical for everyone, for example if you're just finding your feet in your own small business, and there can be times when you may find you have to cover for an absent team member. This guide explains how you can cope when your client's expectations of you exceed your own expectations.

1. Know your strengths

It helps a lot if you already know what you're best at. Are you good at coding? Then focus 80% of your production effort on coding. Are you good at drawing? Then focus 80% of your production effort on that. Are you good at both? Exploit that advantage and find someone else to do the busywork. Incidentally, knowing your strengths also means identifying your weaknesses, and that's where you should be focusing 80% of your learning efforts, so you can eliminate them.

2. Team up

No matter how thrifty you want to be, or how greedy you're feeling, that advice you got in preschool that it feels good to share is actually quite solid. Put it this way: do you want to work on one website per month for $2000 or do you want to work on 20 websites per month for a 20% share of $40,000? Having a talented team of co-workers means you can get more done in less time, provided that you all can work well together (that's the other thing we learned in preschool).

Fortunately we live in an age where sourcing talent is easier than ever before. A team could all work together in the same building, or they could be scattered across five different continents. Little details like that no longer really matter, as long as you get your communications functioning well.

Just make sure that if you're outsourcing, you don't source your talent from competitive talent auction sites like O-Desk and E-Lance. These are filled with wannabes and slackers, so finding genuine talent is like looking for a diamond in a huge mountain of coal.

Go to places where you'll find mountains of diamonds tainted by only the occasional speck of coal instead. If you do have to bite the bullet and work with somebody from those other sites, don't go with the lowest bidder or the bidder with the most completed works. Look for the best communicator (well written ad or reply, clearly setting out what they can do for you in language you can understand).

So what kind of places? Here are a few suggestions:

  • StackOverflow for coders
  • ProBlogger for content writers
  • Freelance Artists Network for illustrators
  • Toptal for UI, UX, and Visual Designers

Hiring from quality sources like this doesn't come cheap, but it means you can feel more confident about the potential results. Try to form lasting partnerships, and if possible it's best to hire on a profit-sharing of fixed fee basis than to pay an hourly rate.

Be aware that most people over-estimate their skills, so don't pay to much attention to what people say they can do. Put more emphasis on what people show they can do. Also be aware of cascading. What's that? Well, when you outsource somebody who in turn outsources the job to somebody who may be outsourcing it themselves… you can see what the risk is here.

If a prospective hire seems to be producing more work than would be humanly possible and the quality doesn't totally suck, that is a very strong sign that they're probably cascading, which means you're paying more than you should be, and the person doing the work is getting taken advantage of.

3. In a pinch, you can always trace

Using a combination of GIMP and InkScape, you can create just about any kind of graphic design you can dream up. But if you're not really the kind of designer who is good at drawing, you can always cut corners and cheat. This article is really just repeating all the lessons you learned in preschool, isn't it? But hey, why draw when you can trace, right?

Now you will notice I said trace and not copy. Copying is wrong, except when something is already public domain. By copying, you expose yourself and your client to unnecessary risk, and you're cheating somebody who put time and effort into creating something that you think is worth copying.

Tracing, on the other hand, is still creating an original work, as long as the end result is not too similar to the original. But you don't necessarily have to trace somebody else's work anyway. You could trace your own original photos as well. You can also use PhotoShop filters to convert photos to sketches, but that doesn't work particularly well.

Let's see that technique in action

In this scenario your client has requested a logo of a mouse to be created for their website, and it needs to be done urgently. The person who normally does all the drawing for you is away and can't be reached, and there's no time to recruit somebody else without taking a huge risk. So what can you do?

A good way to start would be to just take a photo of your mouse.

Then edit the image in GIMP or PhotoShop to resize it to a more practical size and strip all the color information out. I found that desaturating with the Luminosity setting gave the best result in terms of reducing the shadow.

Export the image as a new JPG and close the editor. Open the new image in InkScape.

Click on the image to select it and then press Ctrl + X to send it to the clipboard.

Now select Layers from the Layer menu and click the button to add a new layer, which you could call “background”.

Press Ctrl + Alt + V to perform a “Paste in Place” operation. This puts the image back in exactly the same position that you cut it from (if you just do a normal paste, it might be offset).

Now set the layer opacity to a low value like 40 or even 30, and then click the padlock icon to lock the layer from any further modifications.

Add a new layer, which you could call “trace”.

Now just select the pencil tool (draw freehand lines) and carefully trace over the lines. This will work a lot easier if you use a stylus and graphics tablet, but it can still be done using a mouse. It may help to zoom in the picture. Do the work in small sections, to make it less frustrating when fixing mistakes.

Zoom right in on areas requiring very fine control. Don't worry about filling in shaded areas, we'll do that later. Also note that if any bits are difficult to see, just increase the opacity of the background layer temporarily so that you can see more easily.

You should now have a close to perfect outline of the subject image. Depending on the job you might want to use fill and shading, or you might leave it as a monochrome outline image.

Hide or delete the background layer and save this template in SVG format.

Now you can play with the image a bit. Maybe add some color.

Then a texture.

But for a logo this is probably overkill, so we should just keep it simple. Reverting to monochrome, we shrink the image down.

Now simply add some logo artifacts, like so:

Et voila! The finished masterpiece. This is usually the point where the irate client calls you and complains that you put a computer mouse when really they wanted a cartoon mouse. That's a topic for our next article, Dealing with Difficult Clients.

header image courtesy of Ramotion

Bogdan Rancea

Bogdan is a founding member of Inspired Mag, having accumulated almost 6 years of experience over this period. In his spare time he likes to study classical music and explore visual arts. He’s quite obsessed with fixies as well. He owns 5 already.