Craftsmanship in Designing Websites

Aug 30 2010 by Shawn Borsky | 43 Comments

With high pressure from clients and crazy development schedules for web designers, it is easy to forget to spend the proper amount of time crafting a design.

In the interest of speeding things up, it’s tempting to skip over small details. This is an easy pitfall to which to succumb, but in the end, it can hurt your overall career.

This article will share methods and simple tools for building better portfolio pieces, having happier clients, and imbuing your work with more value.

Professional Pride and Value

If you do not take pride in your job, strive to build better value, and feel rewarded in your work, this article is not for you. The first step to being a better craftsman is care for your work no matter what it is.

Regardless of whether or not the subject is close to your heart, as a designer you should always be proud of your work. It is true that clients, deadlines, and projects will occasionally force you to make decisions that you do not agree with, but part of being a valuable and effective professional is genuine care for your work and your clients.

Love your craft and it will pay off. Real value starts at the core of how you handle your work in your practices, presentation, and approach.

Naming and Organization

Many designers do not think of file naming, organization, or conventions as a craftsmanship issue.

A common practice among particularly zealous designers is to jump right in and start designing, throwing caution and a naming structure to the wind.

This may seem fine at first, especially for small projects, but this approach will quickly turn your files and presentation into an inescapable rabble of confusing lists and vague labels. Clearly, this is not the beginning of a world-class design.

Wrong file naming

Properly labeled files and organized project structures will not only make you more efficient, they will also make you appear more professional.

Good file naming

You may be thinking that naming and organization is an internal issue. Think again. If you are working for a larger client, you will eventually have to send the files off to the client, a developer, or another party. People are always pleasantly surprised to find clearly named and organized files, a sensible layer structure and easy-to-understand internal documentation. This can be a brilliant opportunity to make a strong and distinct impression on your clients. Every little bit counts.

Sweat the Small Stuff

It is easy to tell yourself that the little details and meticulous little changes are lower priority and the overall layout or function is all that is important.

Before you go any further, think of any product that is successful; especially products designed to last: large appliances, cars, computers, clothing, etc. Chances are that the difference between a top-notch version and a cheap one are not in one dramatically different aspect, but rather in the sum of their parts.

Quality is in the Details

You have probably heard the old adage, "You get what you pay for." There are really no exceptions to this.

For instance, think of something pretty simple like jeans. Some cost $10.00 and some can get into the hundreds of dollars.

What are the differences? A good pair of jeans will have better fabric, more solid stitching, finely tuned details, durability, and an overall better fit.

These are subtle differences, but they add up to a substantially different experience. You might save a few bucks by going with a cheap pair of jeans, but at the end of the day, they will fade quicker, rip easier, wear out faster, and probably look more baggy and unkempt. Quality counts.

Do you want to be a premium developer or a discount outlet?

My point is simple: Sometimes the smallest differences are the most important.

I know you aren’t designing jeans, but a website is still important to design with purpose.

A website should achieve an objective, speak subtle cues, offer better conversion, help the client be more professional, and last long enough to be a worthwhile investment.

This kind of value is not achieved by rushing through a layout, cutting corners, leaving elements unlabeled, or leaving open ends.

What Details You Should Sweat

The benefit of paying attention to small details is clear, but what does this mean for a website designer? Here are a couple of common elements that have a high probability of being overlooked in most web design.

Using Guides and Purposeful Alignment

First, don’t eyeball it. Guides are an essential tool for carefully calculating alignment, flushing text and images, and checking your measurements.

Use guides to make alignments and ensure that your elements are cleanly and evenly laid out. Ctrl/Cmd + R to bring up the ruler in Photoshop, then click and drag from the top or side rulers to create the guide, then drag to place.

Alternatively, you can use View > New Guide from the Photoshop’s application menu for even more pixel-perfect accuracy.

Now that you have guides in place, make sure to use them correctly.

Symmetry is one of the only standards of beauty that is agreed upon across all cultures. Symmetry can also mean consistency. When your design is planned, consistent and not arbitrary — it will feel more complete and solid.

When you start designing, be sure to create gutters, margins, and spacing setups to lay out elements clearly.

Take the extra time to find a relative unit of measurement (such as the X-height of the logo’s typeface) and make sure that the spacings and alignments consistently use that unit.

Great alignment doesn’t happen by accident; it’s well-thought out and purposeful.

Another advantage of spending time on alignment and using sensible guides is that you will have less discrepancies from the mock-up stage to when it is handed off to the developer.

Don’t expect your web developers to fill in your blanks. Many developers use the site mock-up to create exact spacing and styles.

Send it off with all the right alignments, placements, and layout elements. Your client, your developer, and your budget will thank you.

Render and Identify Browser Type

It doesn’t matter if you are using @font-face, Typekit, or good ol’ fashioned browser-safe typefaces. Your designs should reflect which elements are to be rendered from the browser and which will need to be converted to images as CSS background text image replacement.

It is true that Photoshop cannot render type exactly how it appears in the browser, but it can get close enough.

Also, keep in mind that various browsers and operating systems will anti-alias text in slightly different ways. In the example below, I am using Windows 7 with Firefox 3.6.

Font use

Remember, your clients are not artists and will usually take a mock-up at face value, so it is important to effectively communicate what fonts will actually look like and how they will work within the context of the web medium.

Further, your designs should act as a guide for the developer. A good practice is to place the size, color hex-value, weight, and font in the placeholder copy. This helps the developer know exactly what colors and fonts to use at a glance, without having to check the PSD file or ask the designer.

What does this mean? Simply put, if you intend for an element to render from HTML/CSS, turn off the anti-aliasing.

If you change the kern or leading, make sure you use values that are easily measurable to CSS letter-spacing and line-height.

Use solid round font sizes when designing. A font rendered at, for example, 13.73px will not translate as cleanly as it could for the web.

Bottom line: don’t create any guesswork for the developer and the client.

Design with Real Content

Design is about problem-solving.

Designing without content is like trying to come up with a solution without knowing what the problem is.

You should begin every web design with as much information as possible. You can’t begin a project unless you know your client’s goals and intended points of conversion.

When in doubt, always push for more information.

Ideally, your client will supply you with a final draft of the content that needs to go online. Unfortunately, this isn’t always the case. You may find yourself working with no assets from your client.

So what should you do when you have no imagery or copy? Make it up!

Use real content

If you haven’t been provided with any images to work off of, don’t just use any old placeholder. Instead, find a free stock image that supports your design.

If you don’t have any official copy, do your best to emulate it. As a rule of thumb, you should have enough information to fill out all the main headers.

Never use Lorem Ipsum for headers. It is a design element, not a replacement for copy. Lorem Ipsum is useful for conveying the size and shape of a block of text or a long list, but it does not say anything of the content that will eventually be there.

Having real content empowers you to create the best approximation of the final site possible, saving you countless days of revisions.

In the absence of real content, an educated approximation will make it easier for your client to give you useful and constructive feedback rather than frustrating, time-consuming revisions.

Your website design means nothing without relevant content and copy.

Designs that can live without their content are called templates because they are generally designed to give generic results and fit a wide range of simple needs.

Your clients probably aren’t hiring you for a template. They want a custom design, which means they want relevant content and copy.

Gradients and Texture

I can’t tell you if the website you are working on calls for texture or gradients, but they are essential techniques that the pros use to convey important elements such as dimension and personality.

Texture

Texture is by definition a subtle feature, but it is instrumental in conveying personality. Personality is critical in custom website design.

This is clear for a simple reason: your client chooses to hire you instead of buying a generic solution. A major point you need to communicate to their users is their unique nature or personality. If a user cannot gain a basic understanding of who your client is, then you have failed on some level.

Every business, no matter the size, has culture and interest that they exude via their products, branding, customer support, and other related services.

In general, a texture is a subtle but extremely detailed way to communicate these ideas.

Think of how you feel when you walk into a store. Recall the smell, the cleanliness, the staff’s helpfulness, etc. These are important sensations and associations. Unfortunately, we can’t put all of this onto the web, but we have a number of tools to communicate some key parts of it.

For example, when you walk into a Longhorn Steakhouse (recently re-branded), you see a clean slightly classy atmosphere, decor that is reminiscent of ranches, smoothly polished wood, and the faint aroma of leather.

Longhorn Steakhouse interior

If you were designing their website, you would start with these cues. For instance, you might use polished and worn wood textures, touches of leather texture with imagery like cowboy boots, ranch clips, and branding irons.

Longhorn's web design

Texture can be a pattern, imagery, an actual tactile texture, or even consistent usage of color, but it is key to starting a conversation with the user.

Here are some fantastic examples of textures in website design.

Wearable Print

Wearable Print

KELT

KELT

Converse

Converse

Le 28Thiers

Le 28Thiers

Creative Spaces

Creative Spaces

Think Up

Think Up

Here are a few more excellent examples of using textures in web design.

Gradients

A gradient is basically a subtle shift in color from one value to another. It is a fundamental method of conveying volume and form. In other words, gradients can make elements feel more three dimensional and active so they pop off the screen a bit.

While sometimes flat color is appropriate, most times designers are being lazy instead of being thoughtful.

Keep in mind that gradients should be used to highlight items or create visual hierarchy.

Not everything in your design requires a gradient. Ideal candidates for usage of this technique are call-to-action buttons, action copy or navigation bars.

A good exercise when you have 20 minutes or so is to visit a few CSS gallery websites and pay careful attention to where designers are using gradients or shifts in color to highlight items, make them pop-out more, or convey more depth.

Once you have a few in front of you, sketch them on paper. Keep your eye on how subtle the shift in color or values are, if they go from left to right, or top to bottom, and even where the designer has placed a highlight to communicate light or a reflection.

This will really help you grasp what a gradient is actually achieving when you use it.

Here are some great examples of effective gradients in website design.

Blinksale

Blinksale

relogik.com

relogik.com

FOX Classics

FOX Classics

Rockstar Business

Rockstar Business

Kaleidoscope

Kaleidoscope

Fully Illustrated

Fully Illustrated

Here are a few more sites that use gradients well.

Design with Purpose

You have probably heard this before, but it bears repeating: design details should never be random details. You should always apply design elements, highlights, gradients, and careful alignments to assist the content and build a visual conversation with the user.

That’s easy to say, I know, but what does this mean for a designer in a real situation?

Let me suggest another exercise. Before you actually start your design, grab a notepad, and write down all your basic elements and how they tie to their content. For instance:

  • Navigation bar: allows access to major topics
  • Buy Product button: takes user to purchase the widget
  • RSS icon: takes user to RSS feed
  • Search bar: allows users to search the website

Once you have done that, rank them based on importance to your client’s goals.

Now that you know what is most important, start designing.

Once you get to a halfway point in your design stage, go back to your list. Start applying careful details to your priorities. Is the Call Us button the most important? Is the RSS icon placed in the right location? Will people use a Search bar designed this way?

Give your design elements a complementary color, or a high contrast analogous color with a dimensional gradient, a sharp 1px white highlight on top, and a thin but smooth drop shadow.

Move to the next element (say, the navigation bar). Give that a slight gradient to make it pop out and then give it a bright 1px underline to separate it from the content top.

Hopefully, you get the idea.

These are very specific examples, but you should be able to see the thought process.

Design details are powerful tools, not just pretty flourishes.

Smart Mock-Ups

If you have a cool jQuery rollover, hover state, or drop-down menu — don’t explain it — show it.

Not only will this practice help you work through potential design problems before they happen, but it will make your developer and client love working with you.

Imagine that you are building a house, and you get all the plans and the architect has left out all the windows and doors from the plans. You would be pretty annoyed, right?

Not only is that lazy, but now you will have to do all the problem solving, scoping and planning that was the architect’s job.

Not cool.

This is what it is like for a developer who gets a design with no hover states, no drop-down designs, or special element designs.

Furthermore, you just created a grab-bag of guesses that the client has not approved and may hate when the developer figures something out.

Better to do the legwork now and get it wrapped up in a nice neat little package.

Learn Some CSS

There is nothing more annoying for a developer then getting a mock-up ready for coding and finding that 80% of the stuff in it is barely feasible in CSS or is clunky and time-consuming.

Do yourself and everyone a huge favor and learn some CSS. Specifically, learn what CSS can and can’t do — and learn what it does well.

For instance, CSS is ideal for creating reusable and consistent elements, CSS can quickly (and at smaller file sizes) render color, type style, and more.

The newest specifications of CSS is powerful and can replicate many design features that previously required images and allows for new techniques that couldn’t be done before. Learn your weapons before you charge in to battle.

Take the example below. (These are by no means attractive but you will see my point.)

Callout box

The call-out box on the left uses a browser-rendered typeface with no anti-aliasing, a solid 1-pixel outline and the heading uses a looping header gradient. This would be simple for a developer to code and reuse.

Now, the same theoretical call-out on the right uses an inner glow, a radial gradient on the inside content box, the header typeface is not browser compatible, the rendered Arial has anti-aliasing, the header uses a non-loop-able gradient and a fading divider line, and the whole box has a soft drop-shadow.

It is possible to do a few of these things with CSS3, but in order to keep the same look, developers will usually export the image to a file.

Technically, this works, but an image like that is not reusable, not scalable, not attractive, and requires the developer to export a new image for every box.

Bottom line: know the capabilities of CSS and use them to your advantage.

CSS is semantic, so it’s fairly straightforward. Want to adjust the font size? There’s a font-size property. Want to change the color of something? There’s a color CSS property. It’s not as complex as you would think and the language is very close to plain English.

Understanding what your building blocks can actually do is a powerful asset in building optimized and efficient design.

Remember, the more control you have over the actual implementable design, the better it will be in final practice.

Developers love solving technical problems but not design problems. Keep your job to yourself, and both of you will appreciate it.

Here are some great resources for an introduction to CSS:

Presenting Your Designs

This should be obvious, but many designers forget to put the time in to do this. Presenting a design to a client is half the battle.

Why is this important? Because your client will likely be making more emotional judgments than logical ones.

Make sure you treat their brand with love and respect. Put the mock-up into a nice PDF with a cover page or print it out (yes, I know its web resolution, but you can scale up to 300 dpi for this one).

Include a list of your decisions and always use positive language. You are here to lift up your client, so make sure to avoid negative comments.

This is where your underlying structure will really work for you. Take the following example under consideration. Imagine that you had to hire a designer by just seeing their desk. How would you make your decision?

Your clients will judge your level of professionalism and reliability by the way you present your work.

A good presentation exudes expertise, organization, and clear purpose in your designs. When you present the whole package in a clean and attractive way, you will have a happier more attentive client every time.

Conclusion

If you take nothing else away from this article, please remember this: love what you do, and let it shine through.

By respecting yourself, your work and your process, you will build value in yourself as a designer and produce satisfied, referral-happy clients.

Keep in mind that this article is only a primer. The road ahead is long, but if you truly love what you do, it will trickle down into meaningful improvements all across your life.

Related Content

About the Author

Shawn Borsky is an interface and brand designer. Shawn runs Anthem Design Group and posts thoughts on branding and design via his blog, The Borsky. You can follow Shawn on Twitter or get in touch with him through his blog.

43 Comments

Phil Zeelte

August 30th, 2010

Hey great article Shawn. I particularly agree with the organisational aspects you mentioned, but especially “Design with purpose”. Without giving elements, or even the whole site a reason to exist on the page, there is no point in the website existing on the web imo.

david praznik

August 30th, 2010

Nice post, thank you!

Patrik

August 30th, 2010

Woohaa! Good article. I really agree on “Smart Mock-Ups” and “Learn Some CSS”. Working on 80% done design where allot of “user interaction” is missing, is by far the most annoying thing. Especially if the client think that the design stage is done. Guessing games consumes more time because you don’t have a clear goal and the client might not like it so you have redo it.

Also about non-reusable or inconsistent graphics. Not only does designers need to know the basics of CSS, they should also know what performance is and why it is important.

parry

August 30th, 2010

good to read that….i really need some change :)

edurup

August 30th, 2010

good post thanks a lot

Max Luzuriaga

August 30th, 2010

Great post, Shawn!

Marijn

August 30th, 2010

Thank you for your clear article, good stuff. About the ‘which would you hire’ image.. i would hire the one with messy desk. The one with the clean desk must be picking his nose all day, (almost) no one works with a desk as clean as that one…

Mofo

August 30th, 2010

Great post, but I think it’s also important to add usability. If the site you’re creating for a client looks great, full of gradients and texture and all that, but isn’t usable and intuitive, then it doesn’t do them any good.

Sometimes it’s difficult to design with real content. Especially if you’re pitching an idea or trying to close a deal with a concept. In an ideal world you would always have real content, but sometimes it’s just not feasible.

Lopes

August 30th, 2010

Good article, congratulations

mtrang

August 30th, 2010

Great article. I oftentimes get so overwhelmed with deadlines that I forget how important it is to have a well structured and solid foundation of files and preliminary design concepts before diving in.

Mariusz Woźniak

August 30th, 2010

Well written, however these are pure basics.

jamesvec

August 30th, 2010

Probably one of the best articles of have read on having personal pride in your work. Sometimes when we get busy some of these things get overlooked, we just need to remember to step back and make the right decisions.

Chris

August 30th, 2010

this is a great writeup. I recently started working on getting my own blog up and running at my website. Check it out if you get a chance, it’s about keeping and writing clean code. Also, it’s my first real entry so be nice!

Bryan McAnulty

August 30th, 2010

Nice article. The importance of organization is overlooked too often. It is very important for designers to show/give developers as much information as possible.

I thought this was an especially good and simple tip for designers: “A good practice is to place the size, color hex-value, weight, and font in the placeholder copy.”

secangel

August 30th, 2010

Great article! I have learnt a lot through this. Thanks for the ideas!

imran khan

August 30th, 2010

This is great detailed article… i think you put alot research on getting all this or this is what you practice..
Great Article…

Troy Groberg

August 30th, 2010

Excellent points. I particularly like the part about naming files and layers. You don’t usually get to see a designers desk to see how organized they are but the way they handle naming conventions can give you some really good insight. It also is a good indicator of that designers reliability and future usefulness.

Jacob Gube

August 30th, 2010

@Bryan McAnulty: Beat me to it. I was going to say that as well. Although I discovered/remembered that I used to do this — I don’t know why I stopped doing it. It’s definitely a great idea; it gives you some functional copy.

Brad

August 30th, 2010

Thanks for the great article. I will be adding it to my design toolbox. Great reminders of the basics of great web design.

Jason Howmans

August 30th, 2010

Really interesting article. One of the most well thought out posts I’ve read in a while!

Organization and real attention to detail are probably the two areas where most designers fall short, so it’s quite refreshing to see it outlined so well here.

theComplex

August 30th, 2010

Great post! These intricate details are so important.

bdwg

August 30th, 2010

thanks for ideal post!

jason rushin

August 30th, 2010

Fantastic article! Every engineer, developer, and product manager should read this. Hell, every marketer should read this too.

manohar

August 30th, 2010

Really useful…

Thanks for submitting…

Iain

August 30th, 2010

Wow excellent article! I already use most of these points made in all of my client projects, but particularly interesting is keeping certain design elements ‘CSS friendly’ which will make my Developer less-likely to strangle me :P

Rafi

August 30th, 2010

This is a total awesome article particularly about the small things that we designers some times tend to ignore, but all small fails make a big failure. The article explains better about the craftsmanship of a professional designer vs. an amateur. I really like how this article is presented especially the “quality in details” part. Thanks for the great article.

Bill

August 30th, 2010

Agree with Mariusz, these are the basics. The article hinges on some pretty radical preconceptions about designers, clients and best practices.

Ben

August 31st, 2010

Stunning Post! thanks a lot

Eldred Curwen

August 31st, 2010

What a fantastic article. I am immediately sending this to my designers as a great aide momoir.

Alf Catadman

August 31st, 2010

Wow! Amazing revelation. My site is 2 years old and this article inspires me to do a facelift.

James Thompson

August 31st, 2010

Great article. Someone else mentioned “these are the basics” and I agree, but it’s unbelievable how many clients I have to explain some of these basics too because their last ‘web guy’ didn’t have the first clue of the ‘basics’.

Again, great article. Thanks

John

August 31st, 2010

One of the best articles I’ve read concerning the simple but often-overlooked checklist of making a professional impression on your clients.

Jim

August 31st, 2010

Very comprehensive. Thank you.

Rick Sloboda

September 1st, 2010

Neat article. I really like one of the early points: Regardless of whether or not the subject is close to your heart, creative types should demonstrate genuine care for their work and their clients. Our web copywriting firm covers everything from medical diagnostics to accounting to plumbing, and these aren’t necessarily topics we drool over. But we do get excited about providing clients quality content that presents them in a professional light, gets them results, and helps them grow.

David

September 1st, 2010

Great article, it’s good to be reminded of why i became a designer in the first place.

Nathan Victor

September 1st, 2010

Appreciate the jeans metaphor. Making things where the minutiae has not been ignored but instead planned and made great is important.

Craig

September 1st, 2010

Really great collection, and great ideas and inspirational on how to be effective and successful.

Sudarshan Gurung

September 8th, 2010

nice article Jacob. not only for beginners but also for pros as well. sometimes even the pros makes small mistakes here and there.

Good job.

Steve Nelson

September 9th, 2010

Thanks for listing our FOX Classics web site Shawn, we really enjoyed working on it. It’s also great to see strong traffic growth for them as we continually tweak the sites features.

Thanks again.

arnold

September 12th, 2010

One of the best articles in sixrevision…
thanks to the author for sharing your knowledge…

Fu

September 23rd, 2010

hey that helps me a lot… thanks

Lily

April 5th, 2011

Very good article overall, but please don’t advise people to print web designs!

The golden rule when designing for print is to always print a sample of your work – it looks different in the flesh than it does on screen and it’s the only way to judge the impact accurately.

This works both ways – don’t make judgements on designs based on seeing them in a medium they’ll never be viewed in!

I think presenting it inside a laptop screen or similar could be a nice way of showing an overall branding, but the full page design should never be printed.

haris kotta

June 29th, 2011

agin a nice article, it helped me a lot to understand the things related to web designing.

Leave a Comment

Subscribe to the comments on this article.