Design Principles for Master Developers

Posted on

  • email
  • twitter
  • facebook
  • share this

share this


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.

Filed under: ,

 
     :: Try iContact for FREE for 30 Days! Sign up now at iContact.com ::


Login To Comment


Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up

3 comments

IsmaelV 08-13-2012 4:45 PM

This is very good advice and informative as well. Much of what you state is design 101. Most designers online keep to this, but their many out there that have have forgotten or are dictated by clients to disregared the basics of good graphic design.

JoeH 08-15-2012 4:50 AM

The above says, "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."

OOOPS - Line lengths all through this article are about 90 characters long.  But you are absolutely correct in theory. I rarely create a web site that is not 3 columns wide. My personal standard for character count is closer to 50.

Another issue worth warning about is the anally-retentive practice of fully justified text. It is the Wonder Bread of designs. Looks great as a design, but that's all it. Fully justified text is a holdover from the days of the IBM Selectric Typewriter. It was a huge success with creating documents that had to have a level of tamper-proofness.

By inserting micro-spaces into a contract or other legal document, it made tampering with the text harder to do. But it is totally unnecessary in web sites. Also, those spaces interfere with the eye rhythm of a fast reader whose grasp of words relies as much on shape as it does on the alphabet and they totally destroy that reader's ability to sub-consciously "mark" the end of one line and the start of the next by groking the pattern of the lines.

Finally there is the issue of the size of "paragraph" blocks. Forget the definition of a para that you learned in the 6 or 7th grade. When layout out texts for the monitor, a paragraph os no a "coherent thought that starts and ends with a significant sentence."

On the monitor, a paragraph is a sentence of group of small sentences that you can swallow in one gulp. Blocks of text that are more then 5 lines long are harder to read on the screen. I do not know why 10 or 20 lines is not difficult to read in print, but it is.

Looking back at the early books, there were practical reasons why there were entire pages without a paragraph break. Books in the late 1800s still were that way. Even books from the 1920s have long, unbroken texts.

But look at modern web sites whose publishers clearly have lots of money for, and an interest in, serious readability issues. For example, look at NYTIMES.com and you will see all the above issues at play. Also LATIMES.com and CNN.com.

Their paras are sometimes only one sentence, maybe two lines long and highly readable.  (like this one)

Finally, my pet peeve. I think I may be the lone Jeremiah who wanders the Internet crying "The Primary Nav Menu Belongs in the Left Sidebar, Not the Right."

Of course, the irony of that is, the original Jeremiah spoke a mid-eastern tongue that is written and read from the right to the left. But here in the West, we read a page from left to right.I am always annoyed when someone "hides" the nav menu on the right side.

I would call down The Wrath of The Book on them but that whole book was written from right to left.

Website Design Company 08-18-2012 5:40 AM

Thanks for mentioning line height. It often an important element that is overlooked.

Add to the discussion!

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter