Design Principles for Master Developers

It is difficult in the rapidly changing digital ecosystem to be a virtual jack-of-all-trades.

While it would certainly be convenient to have one person responsible for everything that a Web presence requires (from design to marketing and everything in between), the reality is that even in our fast-paced virtual economy the best results are still achieved by the “specialists.”

These specialists however need not work independently (at least not completely) — there are benefits to being well versed in a multitude of technologies and digital practices. For this reason, ensuring your Web developer knows something about effective design principles will serve your enterprise well and its users even better.

Web design is a very broad field but one particular focus of developers should always be that of readability. By applying several best practices to this omnipresent design challenge, your enterprise will be well on its way to creating websites and application interfaces that get the digital job done.

Readability Equals Desirability

It is always best before starting a Web design project, or applying visual elements upon an interface, to think about the qualities you’d like to have in your project. While “easy to use” and “attractive” are certainly important qualities, there are many other considerations that must be made related to how users will consume content in whatever medium it is presented.

Web developers today have an edge in that they can apply — often with just a few small modifications — design changes quickly thanks to HTML and CSS (which affect both structure and presentation). What these frameworks ultimately offer is more efficient and immediate control over the finished product without the need for a designer.

A few areas which directly influence readability include fonts and typography, line heights and spacing, shadows and gradients, even color.

Art of the Font Size

Selecting a font is certainly not an easy task. Ideally developers should choose a type which is readable in that it works in sizes both large and small. You might think this leaves little in the way of choice, but you’d be wrong.

If you’re worried that the fonts you choose aren’t viewable to users, consider the use of Typekit or Webtype, but do monitor any changes in Web performance as these services can cause delays in page rendering particularly on higher traffic sites.

When it comes to selecting a font size, start by testing the size of various fonts within the designed interface. Developers will find that some fonts will be more readable for headlines, whereas others better suited to long form copy. Regardless of which font you choose, play it safe and use a size no smaller than 12px and no larger than 16px for the body copy. Headlines and sub-headlines are much different when it comes to the appropriate or optimal size to use but they still must be balanced with other page elements to ensure maximum readability.

The Science of Line Heights

The amount of space between individual lines of text also plays a significant role in readability.

Consider the Web properties you visit most often; does the copy feel crowded or spacious (some might even say sparse)? While it’s important to accommodate for various browser settings, there’s no reason at all not to spread out the content by adjusting the line height as the result will be improved readability. Paragraph-style content should typically have a line-height of approximately 1.5, while headings should stay closer to 1.0 or 1.1.

It’s not just line heights that impact readability — it’s also often the structural choices made as related to line widths. There are reasons why newspapers use columns, and books are a particular width — words are harder to read when lines are too long. It’s the same on the Web which means that content columns should rarely, if ever, exceed 60 characters.

Shadows and Gradients

It’s difficult to say who exactly used shadows and gradients first, but we do know that almost everyone has used them (not always well) in the past. The way to use these effects is not as a decoration, but rather as a means to supplement and enhance the user experience.

In the case of Shadows for example there are numerous ways that developers can mimic the occurrence happening in nature. For example, shadows are never black but have what is referred to as “radiosity” — higher objects cast a shadow on lower objects, some surfaces are reflective and some are not. If you choose to implement shadows on design elements keep these ideas, culled from the natural world, in your finished work. To make shadows appear more natural, soften it by using grey instead of black, and never exceed 3px in size (width) or distance from the element.

Shadows also prove useful when buttons in particular are in their active state (clicked, or are pressed). When applying a shadow to an active state button, consider using an inner shadow as it reinforces the action that has taken place.

Gradients too should have the same natural look — specifically as it relates to light. When you think of light as coming from a specific direction (as it always does), you create a more natural look on elements such as buttons. The most natural direction for light to hit an object is from the top of course, which makes the top of the element light and the bottom darker. This is the reason gradients need to go from light to dark — it’s natural.

Color, Colors Everywhere

Color is another important area of consideration to make for developers interested in making a big impact on design. Fortunately, there are thousands of resources available to help make informed, practical and effective decisions.

Color is one of those design elements that is in great part influenced by personal choice — to the discontent of nearly everyone I’ve encountered. Before developers make any selection of color for use in interface design (or any design for that matter), they should of course match use color matching tools and color pickers as well as understand the hues of each selection. To play it safe, select no more than two to three colors and keep them within the same general palette. If you are forced to work with more color, consider blending (check out color palettes to see what’s possible). For example, if you have a colored background, use a text color that is a hue and not white — as it is often too stark.

Developers, influenced by best practice design, can influence readability in a positive way. By focusing on color and font choices, the height and width of structural elements, shadows and gradients, and alignment, creating a more desirable design is not only possible but the finished product will be enjoyable to users.