Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

The Designer Who Delivers

Whether you design and code websites all by yourself or run a small business with a pool of talent, you will always face the challenge of how much to work on a design and UI before passing the mock-ups on to the developer? Moreover, how much visual work needs to be done in order to effectively present a website to a client? In this article, we’ll talk about best practices for clear communication, which tools to use and how to manage resources on both small and large projects.

The Designer Who Delivers

Determining Factors In Number Of Mock-Ups To Deliver Link

As the owner of a small business, I have watched our company grow from a part-time, basement-dwelling, under-the-radar operation to a small business with an office, chairs, desks, and staplers (aren’t staplers an indication of legitimacy?). During this process of breaking out of our egg shell, we have birthed a company culture and a set of best practices, and we have gained valuable experience in the field of Web design and development. One of these nuggets of experience is acquiring the ability to save time and money by creating just the right amount of visual material to communicate clearly with both the client and website developer.

Further Reading on SmashingMag: Link

I won’t even bother asking whether you’ve ever been assigned to create a custom Web application with an intricate UI, only to see your client pretty well freak out and tell you that it’s completely the opposite of what they had in mind. And let’s be honest: they freaked out not because they’re Web infants who drool every time a Flash intro pops up, but because you failed to communicate the project and its functionality.

Meeting expectations

Don’t get me wrong. Your UI was probably slick. It ran fast, the scripts were minified, it had sprites for all button and UI elements. From a technical and design standpoint, it was as hot as the BMW Mini Cooper back in 2007. The only problem was that your client was looking for a pickup truck.

Our approach to Web design and number of mock-ups is usually based on the size of the project. For the purpose of this article, I’ll break projects into two categories: the brochure website (i.e. a content-oriented website about a company or individual) and the application website.

Brochure Website Link

For small websites, I recommend you sit down with the client and spend a good hour just learning about their business. Before this meeting, all you probably had to start with was an email from your cousin saying something like, “Listen, Mike over at Gadget Inc. wants a cool site that will be #1 on Google.” After your meeting, though, you will be amazed at the quantity of relevant information that your client shares with you. Don’t be afraid to ask questions: information that would normally be difficult to extract is but a question away when you’re sitting face to face. Your inquisitive attitude will also reassure the client because it indicates that you’re genuinely interested in solving his business problems.

Learn to Listen

Now that you have a wealth of information, you should be able to deduce what the client really wants (it might not be exactly what you originally thought). Make sure you understand well what websites they like and the reasons they like them, along with the colors, logo and other visual cues that might help you get started on the design. If your client has not yet committed to you and is waiting on a proposal, you may want to provide a single mock-up with your proposal. A mock-up is often a worthwhile investment on a larger project, because it creates an emotional attachment with the client and speeds up the bidding process.

This more or less sums it up for small websites: clear communication with the client helps you establish a good base to work from, and the number of mock-ups should be kept to a minimum if you’re good at listening. In case you get stuck on a minute detail that the client doesn’t like, you could always post your mock-up on 4 or Smashing Magazine Forums5 and get some feedback from other designers. Most of the time, peer opinion will sway the client to your side if you know what you’re doing.

Application Website Link

Larger projects and Web applications are a completely different beast and should be dealt with accordingly. Your requirements for the project will arrive as a request for proposal (RFP), sealed in a gold-encrusted money-scented envelope and put together by a project lead. A committee of people will be responsible for the content, functionality and goals of the website, and their opinions will be slightly different. The job of the designer and/or team lead will be to interpret the client’s requirements and communicate them visually to the development team.

I have learned that written technical specifications are only as good as the people who read them. Your developers will understand them, but your client committee will interpret them in as many ways as there are people on the committee. Your responsibility, then, is to illustrate the project for both teams. All of the items mentioned above for the small website still apply, but you will also need to build an information architecture map, functional flow, interaction mock-ups and more. As you’re working through these visual elements, consider using some of the tools available on the Web to get feedback from a wider audience.

Don't skimp on functional mockups

While mock-ups that encompass detailed functionality are a costly venture, they are simply the best thing you can do before writing a line of code, because an illustration will give your client the right expectations. As a Web development company, you would also be fortunate to have Web designers who understand mark-up, AJAX limitations, accessibility and readability implications and more. We have had some curious interactions with designers who made fantastic brochures but couldn’t mock up a single screen of a website UI.

This approach, while time-consuming at first, will save hundreds of development hours, because the application will behave and look the way the client expects. Your information hierarchy and functionality mock-ups will allow your developer to work completely independently from the designer, with minimal interruption and questions.

Red Flags Link

Even if you follow these guidelines and wield a creative stylus, you will have conversations or get emails that should set off alarms in your head. These communications usually start with, “This is not as hip as I wanted,” or “I was expecting something unexpected,” or “We really want it to look social.” These statements are problematic for a couple of reasons, the first being that you have a limited budget and time frame for the project and have already used up some of them. The second problem is that these statements are as ambiguous as Ricky Martin’s sexuality (not anymore, eh?).

Hard to define requirements

Well, just as with the requirement-gathering phase, your focus here should be to drill to the heart of these statements and figure out what exactly is meant by each. The work you have already done can usually be salvaged, and the client might want nothing more than a different illustration, color combination or font stack. I suggest approaching this with changes that require little effort. Start with small tweaks, and then send the mock-ups. Continue with moderately complex changes, and then send the mock-ups. Rinse and repeat. What you will find through these small adjustments and your communications is that the negativity in their initial email was actually an exaggeration of a small issue.

Lessons Learned Link

The route you take in a successful project will depend on the size and composition of your team and your ability to communicate with the client. The more projects our team completes, the more strongly we believe in visual communication, which falls strictly on the designer’s shoulders. It is also safe to say that a Web designer is a mixed and intricate breed of professional: an individual who must understand business, be able to read customers, stay creative and fresh with visual solutions, and be technical enough to understand Web technology limitations and best practices.

Additional Articles Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19

↑ Back to top Tweet itShare on Facebook

Aurimas Adomavicius is a creative lead at DevBridge, a Chicago based web application development company. He is also responsible for the creation of the website review community, Concept Feedback. A photographer, web developer, and web designer whose opinion can be often heard on the company blog and on Twitter.

  1. 1

    Gaurav Mishra

    April 16, 2010 3:27 am

    Interpretation such a crazy task sometime..
    Nice summing up and a good article
    “Web designer is a mixed and intricate breed of professional: an individual who must understand business, be able to read customers, stay creative and fresh with visual solutions, and be technical enough to understand Web technology limitations and best practices.”

  2. 2

    Little Mr Design

    April 16, 2010 3:33 am

    Great Article, I work in a team of a few designers and developers. we are lucky enough to have developers who are quite skilled at design also. So when building they can make appropriate tweaks to our designs.

    We luckily make sites for ourselves so don’t do much client work, feel sorry for all that do full time.

    Little Mr Design

  3. 3

    It’s a good article for those who don’t have a good project plan. I’m trying to say that you can avoid having problems with your client if you use a detailed questionnaire at the beginning. I always give it a lot of time until I get all the information I need so when I deliver the mockups, I’m sure that the client gets what he or she wanted. It saves you time and also you won’t ever hear ‘that’s not what I had in mind’.

  4. 4

    Great article! Thank you!


  5. 5

    Matt Morse (@mut1ey)

    April 16, 2010 3:53 am

    Information. Information. Information! That’s the key – you’re quite right. If you communicate thoroughly with your client at the beginning and gather as much information about them, their project, their needs, their competitors and their likes and dislikes and then CONTINUE to communicate with them throughout the project, it will leave less room for error and you, as a designer, coming up with your own interpretation of what they want.

    Remember – Assumption is the Mother of all fook ups.

  6. 6

    Jennifer Farley

    April 16, 2010 3:58 am

    Enjoyed this article, well written with good info and backed up with entertaining illustrations. Thanks.

  7. 7

    Good read. However, you have typo in picture no. 3: it should read “really listen” instead of “really listed”

  8. 9

    its just gr8 …i loved it..

  9. 10

    Well, that was an unexpected, cool and fresh article. I really liked it and think it will have a wide audience appeal. :o) Just goes to show you that if you stay true to your own voice, and the primary tasks at hand, you will most likely succeed. One of the best articles I’ve read on Smashing Magazine lately. Nice job!

    ps. but seriously, why did you have to rub in the Ricky Martin thing. My dreams are already shattered…..

  10. 11

    Erik Teichmann

    April 16, 2010 6:28 am

    Nice article! I love the font used in the images, care to enlighten us as to what face it is?

  11. 12

    Thank you for the info, one of the most infuriating things about a projects process is clients telling you they don’t like something but they want to leave it up to you to come up with something better without giving details. I’ve banged my head too many times because of these requests and I still do sometimes. So this definitely helps me out a ton.

  12. 13

    Really awesome article! Will always remember

  13. 14

    In “Recommended Tools” you omitted Adobe Fireworks, a great tool for both prototyping and real design!

    Just my $0,02 :)

  14. 15

    Thanks guys, glad you like the article!

    The font is Hudson and you can find it here:

    The other font used is Andy Bold, here:

    And Lica – sorry about Ricky; I admit – he was an easy target.

  15. 16

    Excellent article. I’m sending it to my boss ASAP!

  16. 17

    Erik Teichmann

    April 16, 2010 7:14 am

    I second on Fireworks. It’s a pain in the butt because it’s a second class citizen in Adobe Land, but even so, it really does get the job done. I hope they make the text handling better in CS5…

  17. 18

    April 16, 2010 7:43 am

    Great Article. Really makes you look back and think about your last proposal or site completion. Was that really what they were wanting or asking for?

    Cheers and keep up the good work!

  18. 19

    5 stars. great work.

  19. 20

    Franco Scaramuzza

    April 16, 2010 9:36 am

    I like your article, but wouldn’t you consider a mock-up included in the proposal spec work?
    I think a mock-up should be the result of the discovery phase after the client hired you. Which means the client actually pays for your knowledge: translation of his thoughts and objectives into a effective web design.

  20. 21

    Franco – good question, and I might have not fully covered it. I only endorse mockups to be submitted with the initial proposal for large scale projects. Projects that have very extensive, well written RFP’s that pretty much lay out everything there is to know about the project.

    There is always a chance you will miss, but for a large reward a small initial investment is usually a good strategy.

  21. 22

    Eric van Hall

    April 16, 2010 4:13 pm

    Well written and informative article. I agree with Franco that a mock-up should only be made after the client hired you. However, I have at times made a mock-up in the acquisition phase to entice the prospect (seeing is buying).

    We also make a design briefing (text, mood board, simple mock-ups) and have our client agree with it’s content before actually starting the design phase. The briefing is given to the designer.

    On a lighter, but very entertaining and very true note:

    Sounds familiar huh?

  22. 23


    April 16, 2010 5:39 pm

    I have to say that was a cool article. Shopping around for staplers myself. Hole punch and reinforcements already covered.

  23. 24

    not only was this post exactly what i needed to read right now, but it was well written, informative, and way more interesting than i thought it would be. [i second lica] one of the best articles i’ve read on sm in a while.

  24. 25

    Mohamed Aslam Najeebdeen

    April 16, 2010 11:15 pm

    Thank you for the information.! :)

  25. 26

    Nice Artcile :) Some clients really makes you crazy :)

  26. 27

    *me laughing about the “1 cup of unexpected” * (Volcanic Ash someone?)
    Very well written article.
    I always enjoy reading articles with nice comparisons.

  27. 28

    That “well equipped web designer” made my day! Thanks a bunch! :))

  28. 29

    really nice post, i totally relate to the words you said. would love to see more of you, excellent writing and great illustrations! keep up.

  29. 30

    @Aurimas nice job :)

  30. 31

    Great article – really like the design. There is no substitute for thorough, detailed up-front documentation. I prefer that we create detailed wireframes and storyboards that everyone involved – clients, stakeholders, developers, designers – review and approves. This should happen before we start any visual design. And it’s not good enough to just send the client an 80 page PDF of wireframes and expect them to review it in detail. You really need to sit down with them and walk them through it asking questions and pointing out potential issues along the way.

    Another good approach is to conduct full-day requirements workshops. Article on this approach:

  31. 32

    Great article, but for a mockup creator I really like this free program called Mocking bird.

  32. 33

    Xcellence IT

    April 18, 2010 9:54 pm

    True. Its indeed very important to understand client requirements at first hand, as it helps to save a lot of efforts….

  33. 34

    excellent article! a must read for all designers =)

  34. 35

    Does anybody know what font is used for the green header texts in this article? Looks really good… Thanks! :-D

  35. 36

    Ramon – I posted links to all fonts used. Read through the comments.

  36. 37

    M R K Development

    April 19, 2010 4:08 pm

    I would suggest fireworks gets added to the mockup stage here.

    It really is a great all round web design tool and certainly helps me get mockups done fast.

    Thanks for the article.

  37. 38

    James Johnson

    April 19, 2010 5:46 pm

    Great article. It really touches on the issues, especially the “unquantifiable” requests. Hehehe. That’s a big part of my job. I’ve found that it really requires sitting down with your client and getting to know them a bit. It’s the only way to figure out what that stuff means.

  38. 39

    what’s the software u are using under the “don’t skimp on the functional mockups” title?
    I would appreciate if you can help me find a software that handles everything from a to z for a web development company.

  39. 40

    Igor Ivankovic

    April 19, 2010 11:22 pm

    Really useful, thank god i was already following this advices :D Cheers!

  40. 41

    Great read, best bit of advice I can give though is always be as positive as possible with your client no matter what the reaction to your proposal is. You can always work around your first proposal. Most clients feel that if they don’t have some negative feedback to give then they will appear to have not taken an interest or that it makes them look like they don’t care that much, so its totally normal to get told ‘something just isn’t working’ or ‘Its not really hip enough!’. Stay positive, love your design! ;)

  41. 42

    Gautam Wadhwani

    April 20, 2010 1:31 am

    Great Article,

    You have presented very important and complex things in a very simple way, please keep such posts coming.

    • 43

      These mac ads are shown on regular TV in NZ I belivee. Unless I’m spending so much time on the PC _whilst_ in front of the TV that I’m mistaking what is on which screen? ;)This anti-Windows cripple-ware mac advert confuses me though. My primary-use machine is a macbook, and the occasions when I boot it into OSX (instead of linux) I’m invariably annoyed by the cripple-ware that is Quicktime If you want to run something full screen you’re informed you need to fork-out for the costly pro-version. Given that is one of the main apps an OSX user would utilise and full-screen is an essential feature of a video player, the ad is just slightly hypocritical.I’m sure the ads are working, I’m just not sure they’re truthful.

  42. 44

    Yep, loved this post. I totally agree that listening to the client can save you a lot of trouble later down the track..

  43. 45

    Rakesh Sivan

    April 21, 2010 7:49 pm

    Agreed. Aurimas has some valid points here.

  44. 46

    Nice article! Very informative and helpful to my small business!

  45. 47

    Alice Dagley

    April 26, 2010 6:18 am

    I think the more time you spend on preparation the less time you spend on the project itself.
    Of course we should admit that the amount of time we spend on discussing details on the project and evaluating the scope of work mostly depends on a client. If your client knows what he wants and understands what you are talking about you need less time and vice versa.
    Sometimes I prefer to spend a bit more time and create a prototype of a website to show a client how it looks and how it works, then discuss the details and features that your client have no notion about.

  46. 48

    Note to all. Stop usigng Photoshop for web mock-ups. It was designed for different purposes. Adobe Fireworks is the No. 1 software to design and mock-up. Finally it’s starting to become industry standard and it bloody well deserves to be. I hope Adobe starts funding Fireworks devolopment more.

  47. 49

    Love the resources!
    Next time use less clip art.
    FYI: Both a drill and a buffer can cause irrepairabe damage to the roof of your car.

  48. 50

    Dhruv Patel

    May 2, 2010 2:17 am

    good tips!

  49. 51

    Anish David

    May 3, 2010 12:40 am

    Thank you for the information :)

  50. 53

    Alex Blundell

    May 11, 2010 2:33 am

    I totally agree with keeping mockups to a minimum on samller projects.

    Spending time with the client to really get inside their heads is crucial. If you ask the right questions and really listen to the client, when you start designing, you’ll both be on the same page.

    With this approach, when you unveil the mockup to the client, you will be safe in the knowledge that, although it may need alterations, what you have produced will meet the clients expectations.

    If the customer is not completelly sure what they want then creating one design direction with a few variations of that design, will allow you to better guage what the client wants without the need for “stabbing in the dark”

    I find that I clients are happier when you take on board what they have said and produced one main design concept, than just randonly rolling out 3 or 4 totally different designs.

  51. 54

    I liked the above article.

    I want to ask as why do most web designers these days are focused on Font families and hardly pay attention font sizes. I would request Smashing Magazine to encourage web designers to use better font sizes, make it easily readable as even screen resolutions are increasing. Websites shouldn’t just be beautiful to look but also make us easily go through them and protect our eyes.

    In case if something is not so useful, then use some tools like tabs or accordions to hide that data but not with cost of poor font sizes.

  52. 55

    Like the article!


↑ Back to top