Inspect Element

Web Design & Development Blog

The general convention in web design is to present static images of designs to clients but what happens when you have an idea that can’t be visually presented in this form? Perhaps it is some form of interaction or animation that can breathe extra life into the design.

Of course you could just explain your idea to the client but the problem here is they may not understand what you mean or have a hard time visualising it. The next step is to show them something similar on another site but there is still a disconnect from what you want the client to see and what they’re actually seeing.

Build Your Idea as Part of the Design Stage

Why not go ahead and build your idea? After all, the most effective way to display any ideas is to build a fully working version as part of the design. There can be no confusion as to how it will work as it will be up and running for the client to see and interact with for themselves.

When the client can actually use the concept themselves and as long as it works well and is a good idea, they will be much more likely to like it and agree to sign it off as part of the design. They’ll also be much more engaged in the design and confident with your work, creating an increased trust in you, which can only have a positive effect as the project moves forward.

Example

At my workplace, we have recently adopted this approach and finding it immediately effective. Sovereign had a poorly implemented promo area that was barely used by visitors so we decided that the best approach to propose an improvement was to build a fully working concept of what we wanted to show.

If you head over to the Sovereign site, you will see that the concept was agreed and as it was already built by myself, it was implemented into our CMS with minimal effort for our developers.

If you’re like me and work with a separate team of developers who don’t specialise in CSS, you can teach them new techniques or encourage them to use progress enhancement with CSS3 such as border-radius and text-shadow if they don’t already.

No Need to Re-Invent the Wheel

One of the real benefits of this approach is that while it may seem like it will extend the design phase considerably, it really doesn’t have to. Chances are that any idea you have will be similar to something that has already been created and released for free by someone in the excellent design and development community we’re a part of.

In the case of Sovereign, all I needed to do was modify Build Internet!’s superb Interactive Picture tutorial and place it on top of a screenshot of the homepage to complete the illusion of how the final version would look for our customers. Every web designer should know how to code HTML, CSS and even possibly some Javascript, so modifying existing code shouldn’t be a problem and for some even creating something from scratch should also be easy and therefore not take too long to develop.

Any extra time spent is worth it because it is offset in development time. As you’ve already built part of the design, you’ve saved development time as you’ll be able to copy and paste it straight into the build.

Conclusion

The benefits of this approach are clear and while it may take a little extra time to develop a working version of an something as part of the design phase it is worth it for the increased trust in the relationship between you as the web designer and your client. Whether you’re developing your design yourself or passing it onto a development team, the completed development of the concept can just be slotted right into place.

Taking this to the Next Level

Andy Clarke proposes that we skip the design stage in Photoshop completely and design directly in the browser using HTML and CSS in his Designing With CSS tutorial DVD. I haven’t seen it yet but the core idea is certainly something I am keen to explore in the future.

Try this in your next project and let me know how you get on. If you already use this approach then let everyone know how it works for you by leaving us a comment.