Craftsmanship in Designing Websites

Aug 30 2010 by Shawn Borsky | 43 Comments | Stumble Bookmark

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.

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.

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.

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.

Professional Pride and Value

Naming and Organization

Sweat the Small Stuff

Quality is in the Details

What Details You Should Sweat

Using Guides and Purposeful Alignment

Render and Identify Browser Type

Design with Real Content

Gradients and Texture

Texture

Gradients

Design with Purpose

Smart Mock-Ups

Learn Some CSS

Presenting Your Designs

Conclusion

Related Content

About the Author

43 Comments

Marijn

manohar

Ben

arnold

haris kotta

Leave a Comment

Search

Topics

Recent

Friends