Principles of Great Design: Craftsmanship — Smashing Magazine

Principles of Great Design: Craftsmanship

  • 8 min read

What does craftsmanship have to do with web design? We all want to produce websites that impress and make our clients say “Wow!” This article introduces the principles of great design and things to keep in mind when working on your projects.

What does craftsmanship have to do with web design? We all want to produce websites that impress and make our clients say “Wow!” This article introduces the principles of great design and things to keep in mind when working on your projects.

I love beautiful things. There’s very little in the world that takes my breath away quite like an object that was lovingly crafted, built with care and passion, and presented with the sort of pride that befits a marvelously well-made item.

That which is beautiful is increasingly difficult to come by in a world where a premium is placed on speed, and things are made to be disposable. We often sacrifice real craftsmanship at the altar of expediency. While we are still capable of recognizing the value of something that has been expertly constructed, we often choose the cheap and easy option instead.

For years, I shaved my face with a disposable razor. It did the job just fine. It was straightforward and easy. It even looked flashy. And every few weeks I’d pop off the disposable end, throw it away, and replace it with a ridiculously expensive new cartridge. I blew hundreds of dollars on razor cartridges over the years. And I never got shaves that I felt were perfect.

Straight Razor

About two years ago, I switched over to a beautifully crafted and expertly honed straight razor. I bought a hand-made heirloom razor strop, an excellent badger-hair brush, and some high-quality shave cream. I’ve never had better shaves in my life. The process has changed from an occasional annoyance, to a pleasurable ritual. I have tools that I will have for the rest of my life. Tools that will, likely, outlive me. They work better than my old tools. And, in the long run, they’re cheaper than my old disposables.

The difference in the level of craftsmanship between my old disposable razor and my new straight razor is vast. There is a significant and noticeable difference between cheap, mass-produced products, and hand-crafted, carefully detailed ones.

The standard line in this industry is that most clients don’t really know the difference between good design and great design. While that may be true, I contend that it is always possible to detect the hand of a dedicated artisan in her creations. To that end, I want to examine what we as designers can do to bring quality craftsmanship to our work.

More after jump! Continue reading below ↓

Meet Image Optimization, Addy Osmani’s brand new practical guide to optimizing and delivering high-quality images on the web. From formats and compression to delivery and maintenance: everything in one single 528-pages book.

Jump to table of contents ↬Feature Panel

What is craftsmanship?

Rolex

Craftsmanship is the quality that comes from creating with passion, care, and attention to detail. It is a quality that is honed, refined, and practiced over the course of a career. It is the quality that defines the difference between a Timex and a Rolex.

“Craftsmanship is what we should strive for, for the sake of both our reputations and our clients’ success.”

We recognize craftsmanship in the attention to the little details. Patek Philippe SA, makers of the finest of all wristwatches, strive relentlessly for perfection in their work. From their simplest models, to their most complicated, the details are what makes the difference. Their perpetual calendar models automatically account for leap years, their star-chart models accurately reflect the sky, and even their simplest models are second-to-none in terms of elegance.

We recognize craftsmanship in an object’s functionality. Breitling’s Navitimer Chronograph wristwatches are designed with an exceptionally accurate slide-rule in the outer bezel. Well-crafted and highly effective don’t have to be expensive either. The Lamy fountain pen is inexpensive, simple, and lays down ink like a pen that cost 4 times as much.

We recognize craftsmanship in an object’s durability. My Moleskine notebook holds up perfectly, despite spending a large part of its life in my back pocket. My hand-made and carefully built razor strop will be an item I’m proud to pass along to the next generation.

What does this have to do with web design?

Our clients often want work done quickly and inexpensively. We grab our standard toolkits and templates and bags of snippets and tricks, and we put out a product that the client is reasonably happy with. So, why all this talk about watches and razors and pens and paper?

We didn’t get into this business to add to the great pool of mediocrity. There isn’t one designer out there who wants to produce work that’s just “okay”. We all want to produce websites that impress, and make our clients say “Wow!” We want to create the sort of quality that earns us reputations as great designers.

Skilled professional designers and developers often find themselves in the regrettable position of being treated like tools for the exercise of client whims. It is a rare case when we are afforded the respect and acknowledgement that we deserve for the effort and time that we have dedicated to honing our craft.

Developing craftsmanship in our work is the key to escaping those things that are less desirable about the business we’re in. It is the key to creating sites that rise above the mediocre and average, and it is key to earning the respect of clients and customers.

“Artisans are accorded respect for the work they do.”

How do we become artisans?

Craftsmanship, obviously, isn’t something that just happens. It requires a great deal of time, patience, and effort. Becoming a real artisan requires that you commit yourself to the continuous development of your craft. Traditionally, craftsmen developed their skills through apprenticeship to those masters of the craft who came before them. While we don’t often work that way in this day and age, there are a few things that we can do to emulate that process.

Practice

The first step is to practice. Practice every day. Design something new, walk through a tutorial, work on a personal project, whatever it takes to get you working with the tools of your trade each day. The more you do something, the better (and faster) you become at doing it. Practice is, without a doubt, the most important part of developing the quality of craftsmanship in your work.

Education

The second step is education. Web workers have the expertise of hundreds of others to draw upon, through blogs, online documents, and forums. It is critical to our craft that we take some time each week to work on building our skill sets. Use the myriad of resources available to you to further your education as a designer/developer. Read what your colleagues are writing. Participate in quality discussion. The more tools you have in your toolbox, the more likely you are to find the right one for the job.

Practice

Third, learn to accept criticism, and react appropriately. People have a hard time taking criticism of their work. When you put so much effort into a piece, it can be difficult to hear that what you’ve done isn’t good enough. However, nothing will help you improve so much as a good critic. Criticism isn’t personal. You and your critics have the same goal: a quality product. Learn to set aside your ego, and accept criticism as a means of improving the piece, rather than taking it as a personal affront. Request feedback from other designers, participate in design feedback forums, and set up usability and A/B tests. Soon, you’ll come to not just tolerate criticism, but actively appreciate how much it can help you grow and improve.

Detail

Fourth, pay attention to the details. As I mentioned earlier, this is where all of the difference is made. A true artisan is meticulous about the details. A website that looks beautiful, where the details have been attended to carefully, is a website that prompts return visits. Take the time to add polish and style to the small things that can easily go overlooked. Pay attention to hover states, borders, icon placement, grid alignment, microformats, semantic markup, and the like; these are the sorts of details that make the difference. Attentiveness to these details raises the quality of our work.

Future

Fifth, design for the future. Items that exhibit the quality of craftsmanship are timeless. They are built well, and built to last. Our websites should be as well. I realize that there’s an extraordinary amount of mutability in the work we do. Trends and practices change rapidly, there are always new features in the software we use, people develop new tools that give us more possibilities. But, despite the ever-changing face of this industry, it is possible to do work that has longevity. Progressive enhancement to include new standards, looking forward to new specifications, careful attention to best practices, and a willingness to step outside the box and take some risks all contribute to making a website that is designed to last.

A Call to Arms

“The standard line in this industry is that most clients don’t really know the difference between good design and great design.”

We have the opportunity to change our perception of what we can deliver our clients, and give them credit for recognizing the quality we can provide. We have the opportunity to foster a perception of designers and developers as artisans, for whom craftsmanship is a top priority. It will make a difference to our business, to our clients, and to their customers. Furthermore, seeing ourselves as artisans, and working to build craftsmanship in the product we create, is the key to building quality reputations and securing our community’s future.

So, let’s get to work.

Please share with us your thoughts about this article. We’d love to have an interesting discussion about this subject so feel free to contribute to the discussion. Thank you for reading the article. You can follow the Design Informer on Twitter here.

Also consider the following Smashing Magazine articles:

Smashing Editorial

(lu, il)

Explore more on