Drool

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.

Determining Factors In Number Of Mock-Ups To Deliver

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.

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.

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

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.

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 ConceptFeedback.com or Smashing Magazine Forums 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

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.

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.

Recommended Tools

• Concept Feedback, for idea-sourcing and design feedback;
• Basecamp for project management;
• Photoshop and Illustrator, for creating mock-ups;
• Balsamiq for functionality mock-ups;
• Gridding;
• Using a Grid as Background;
• Freshbooks, for tracking time;
• Paper and pen, for initial mock-ups.

Red Flags

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?).

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

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

• 45 Incredibly Useful Web Design Checklists and Questionnaires
• Free Printable Sketching, Wireframing and Note-Taking PDF Templates
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files
• 40+ Helpful Resources On User Interface Design Patterns
• How Many Ideas Do You Show Your Client?
• How to Respond Effectively to Design Criticism

(al)

© Aurimas Adomavicius for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Today, Apple has officially unleashed their iWork productivity suite to the App Store for download. There's not much you can do with it until Saturday besides drop your 30 small and drool at the screenshots, but it is worth a look. View in iTunes

Trim Your Turf: Geek Style is a post from Chris Pirillo

It’s a well-known fact that I love to collect wacky gadgets and gizmos. I seem to have a fetish for furniture and decor that reflects who I am, which I proudly display in nearly every room of my home.

A few weeks ago, I posted an article showing off some very cool Geek furniture I had come across. The response was so positive that I decided to take the concept to another level, and found other items you may suddenly feel the need to own.

ASCII Curtains are sure to add spice to any room of your humble abode.

The CPU Desk was made from scratch using 800 computer processors. This may be a great way to reduce computer waste in our landfills, but it won’t make your computer run any faster.

The LunaBlocks bricks make me drool a little every time I see them. They are designed and created by Thierry Nahon & Philippe Landecker, and come in multiple colors and materials that are easily stacked together.

Using guts from two old Apple G4 computers along with an ATI graphics card, Justin Adler created what is likely the sexiest table on the planet.

I am glad I paid attention in math class back in high school. This clock has had all of the numbers replaced with the equivalent notation.

If you’re a fan of RSS, then this lamp shade will brighten your day (or should that be “dim” your day?).

As December 25th draws near, these Game Controller ornaments may help you get into the Christmas spirit.

I love Tetris! I would keep a glass of ice water beside me at all times if I had a few of these Tetrice ice trays in my freezer.

ThinkGeek never ceases to amaze me. The Space Invaders cutting boards are all hand-made.

I had to save the best for last. Forget about reading a book while in the bathroom. If this bathroom was in my house, I don’t think you’d ever see me in my home office again. Feast your eyes on this work of perfection, fellow Geeks. This “Souped-Up John” features a TV, TiVo, DVD, XBox, laptop, refrigerator, megaphone, Ipod dock and a way to get some exercise!

Will someone please hide my credit cards? I feel an urge to shop coming on.

• Playing Tetris Eases Stress
• How to Picnic: Geek Style
• iPhone Coasters
• Top Furniture for Geeks
• ThinkGeek Coupons
• How to Make Electronic Music
• Gifts for Geeks
• Be Still My Beating Geek Heart
• Remix My Burps!
• World’s Shortest USB Cable

A new version of Foursquare for the iPhone is on the way and it will feature a revamped interface, a brand new user tab, and a new checkin history view.

This version of the app – v1.6 – should be heading to the App Store soon. Nick Starr shared screenshots of it with us and we’ve included a few below so that you can see some of the new features.

Looking at the images from Foursquare 1.6, the first thing you’ll notice is that the interface has been totally revamped. The colors, icons and menu layout are all completely restyled and rearranged in a much more appealing manner.

For instance, check out the new Shout and User Profile pages. They look almost indistinguishable from their current iPhone counterparts:

There are also a few new features. For instance, users have a profile screen that contains checkin history and friends that is accessible directly from the menu at the bottom of the app.

Friends’ Checkins also now have a pull-down to refresh mechanism, that harkens back to Tweetie 2.0 for the iPhone.

Friends info pages have also been completely redesigned and friend-by-friend ping control is much more attractive.

All in all, just looking at the screenshots is making us drool. We’re not sure when this release will actually hit the App Store, but we wouldn’t bet against a SXSW release.

What do you think of the new look? Let us know!

Tags: foursquare, foursquare 1.6, iphone, iphone apps

While I am sure that most folks won’t think all that much of these workspaces there is probably a lot who will start drooling after the first one and not stop until the last. As a confirmed dual monitor user who would never go back to a single monitor setup I can tell you that I had some serious monitor envy as I selected my favorite workspace images found over at Work Design Ledger.

Enjoy the view but I seriously recommend getting a drool towel handy before starting.

This first one was not so much for the desk workspace but rather the incredible workspace environment. Just a beautiful and relaxing place to be able to work I would think.

Now that the aesthetics are out of the way let’s get down to the serious hardware porn.