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.


Leave Your Comment
Login to CommentBecome a Member
Not already a part of our community?
Sign UpSign up to participate in the discussion. It's free and quick.