For the novice web designer starting out with a niche topic, is it feasible to attain all those goodies on the first pass? The answer is a resounding no.

Assuming, you’re not designing for world-wide brands where industry terms like “pixel perfection” are accepted as the norm, is it okay to not be perfect all the time? In this scenario, the answer is a resounding yes.

The Best Way to Eat an Elephant is in Small Chunks

The thing with perfection is that it takes time, patience, skill and yet more time. If you’re working for yourself, then you’ll probably want to start seeing results far quicker than the road to perfection is able to offer. Isn’t it better to get something out there to act as a starting point?

A design that you can tweak and test can offer the novice web designer the perfect scenario from which to learn their craft. Perfection, much like eating an elephant, is best achieved in small but manageable chunks.

We’re not talking about publishing scruffy work here, but insane levels of perfection are not necessarily the way to go. To aspire to perfection is a common theme in the DNA of most designers, but in all honestly, perfection might be best achieved in a number of steps.

When just starting out, it’s surely refining the creative process that must take precedence.

Can Perfection Even Exist in a Constantly Changing Landscape?

It begs the question, does perfection even have a place when you are designing for the web. The answer is probably not. Does perfection even exist?

The first thing to consider is the environment in which web designers’ work. The landscape is constantly shifting and evolving to reflect new ideas of how things should look. In this respect, websites are never actually complete.

They have to scale and change in accordance with external factors. Take the rapidly evolving nature of the Google search algorithm. Does anybody actually know what these guys want? The so-called Internet Marketing gurus might try to convince you that they do, but they may as well be trying to pin a tail on the proverbial donkey.

For example, the process by which web designers can achieve perfect search engine optimization must be constantly tweaked in light of visible results. There are an array of analytic programs out there that can help you keep track of such nuances like

• traffic statistics
• incoming keywords
• bounce rate
• click-through rate

However, these statistical programs can only offer such insight and point out areas of improvement if your site is actually up and running.

Avoid Procrastination at all Costs

When you’re first starting to design and publish your own websites, there’s a ton of stuff to learn. You’ll be kept busy enough without wasting time becoming too precious about the tiniest of details.

If you start delaying the launch of a site until everything is perfect, you’ll slip into a state of procrastination that can be very difficult to get out of. The best advice you will ever be given is to just start and make little changes as you go. It’s infinitely easier to test that way anyway.

Striving for perfection in web design, while a worthy cause, is one that you can afford to take your time over. It’s not like designing a physical product where alteration and development cannot easily take place following production. Web design is not like that at all.

In such a fast-moving and unique industry, web designers can afford to start out with a simple approach. Iteration and polish can be applied over time. Letting go of your ego may prove difficult. Putting something out there that you’re not completely happy with can be difficult to accept.

Consider the satisfaction of knowing that your website is alive and kicking while other designers may still be agonizing over which shade of blue to use for their background, and you might just start to feel differently.

Rinse and Repeat: Subsequent Designs Will Be Easier

It’s a rinse and repeat kind of scenario.

If you’re looking to make your mark in the niche publishing market, you’ll find that the techniques you learned from tweaking your first website over time become invaluable in getting subsequent sites just the way you’d like them in half the time.

If you’re the type of person who has hundreds of ideas that are only half-finished, it’s time to get something published. You can clean them up over time while continuing to take steps down the road to a full-time income from Internet Marketing. You might find that you don’t even need to. Craigslist is a prime example of an Internet success story, and perfect web design hardly comes into the equation.

Make your new motto: publish today, perfect tomorrow.

Author Bio

Ned Jackson is a full-time web designer from Orlando, Florida. He is a resident writer for DegreeJungle.com where students can learn about college programs such as computer programming and computer security. When he’s not fine tuning his sites, he can usually be seen cruising on his Harley.

After looking through several sites and noting how each treated different aspects of typography I think I understand better when I like and don’t like indents.

I set up a simple demo to let you play around with these aspects. It’s not too hard to figure out how to use it, but it might make more sense to read through this post first.

How I Looked

My thinking was that my preference, and perhaps yours, had as much to do with other aspects of how the type is set as whether or not an indent or line space was used. I still suspect a certain amount of the preference is simply that we’re used to the line space online, but I wanted to see if there was consistency in when I found indents a good fit, and equally, a bad fit.

I started by visiting the 3 sites I linked to in the previous post from 3 designers who’s work I admire. I hadn’t listed them specifically because I liked how they used indents, but simply because they were using them.

On revisiting the pages I noticed right away that I liked one, wasn’t crazy about another, and was in the middle on the third.

Here are the sites again in order of how I liked the indents, Naturally this is a completely subjective judgement and you may or may not agree with me.

• Jessica Hische — liked
• Mark Boulton — ok
• Jason Santa Maria — not crazy about

I spent a few minutes on each page and used WebKit Inspector to record a few things.

• What typeface was used?
• What font-size was used?
• What line-height was set?
• How much indent was used?
• What was the length of the measure?

I also observed how big or small the text blocks generally were.

One point I should make is that I didn’t try to determine if any of the pages were easier to read than the others. That’s really the most important thing, but I couldn’t think of a good way to make a meaningful measurement of that judgement.

Mainly I was considering how each looked visually. Think of it as which text seemed more inviting to read.

What I Found

When I looked at the aspects above and noted the settings of each there was definitely some consistency that matched my preferences, both good and bad. I’ve taken my preferred settings to other sites and experimented with them and so far they’ve always held up as a predictor of whether or not I’ll like how the indents look.

Here’s what I’ve found to work for me. The numbers are an approximation.

• line-height > = 1.6em
• indents > = 2.0em
• larger text blocks — subjective. I didn’t specifically count the lines in each.
• less links and other markup in text — this was also subjective and i’m not sure it holds completely

The typeface used or the size of the font didn’t make much difference. The main thing was that larger line-heights and larger indents (both to a point) made indents more inviting to me.

With the text blocks when they were more consistently larger and regular in size and shape I thought the indents looked better. When lists and shorter paragraphs that employed additional spacing were mixed in a lot I didn’t care as much for the indents.

However I did like when subheadings were used well, standing out and providing ample space between sections.

The measure of the text didn’t seem to be a big factor, unless it turned what might have been a longer block of text into a shorter one or two sentence block. As long as the measure worked in general it seemed to work with either indents of extra spacing equally.

For fun I did some simple math on each of the 3 sites above. I divided the measure (px) by the font-size (px), though again as long as the measure works for spaces I think it works for indents too.

• Jessica — 660 ÷ 13 = 50.769
• Mark — 682 &divide 18 = 26.778
• Jason — 440 &divide 18 = 24.444

Once I’d observed the above I started playing a little. Through WebKit Inspector I increased the line-height and indent on Jason Santa Maria’s text and I liked it more. I played around with Mark’s site and Jessica’s site as well other random ones and the changes all correlated well with my like or dislike for the indent.

This is, of course, completely subjective, but it does suggest that indents can work well online. I think the key is ultimately to modify different settings to achieve a typographic color that works well.

You may or may not like the indents at the same settings as I did, but I suspect there will be combinations of line-height, indent, font-size, etc. where you do think they look good.

The Demo

Again I created a demo that will let you experiment with some of the settings.

I grabbed the opening paragraphs of The Old Man and the Sea and have them set by default with the following:

font-family: Georgia;
font-size: 1.0em;
line-height: 1.6em;
text-indent: 2.0em;
max-width: 30em;

There are some drop downs at the top to alter each of the above. The different fonts are limited to a few that I think should work on both Mac and Windows. I also added the generic serif and sans-serif options if you want to experiment with other fonts on your system.

The other settings are given a reasonable range, usually around 1em in the middle, though in the case of measure the values range from 17.5em to 50em in steps of 2.5em.

Summary

Again this whole topic is somewhat subjective. The conclusion I drew from my last post was that there’s no single right or best way to style paragraphs, however indents were typically advised for print and there’s a movement among designers to drop the line-space online in favor of using indents.

My casual observations showed mixed feelings in the use of indents, but now that I’ve taken a deeper look I think with the right typographic color, which for me is when greater line-height and text indent are used, especially on larger blocks of text, the indents work.

Play around with the demo and try my preferences and explore some of your own to see if you find indents appealing as well.

The following is a guest post from Amanda Tradwick that looks at two popular places to get online degrees. I’ll add some thoughts of my own at the end.

ITT and DeVry: A Comparison of Web Design Programs

If you are interested in completing your formal training in Web design, or if you are a professional who is looking to change careers, there are many online schools that can provide the training you need and allow you the flexibility to continue to work or tend to family responsibilities while you study.

Two popular online schools, ITT Technical Institute and DeVry University, offer programs in Web design. If you are considering pursuing your degree with either of these well-known colleges, here is more information about how the two programs compare so you can determine which is right for you:

Programs Offered

Both schools offer a program in Web design, each with different parameters.

• ITT offers an associate’s degree in Information Technology — Web Development
• DeVry offers an associate’s or a bachelor’s degree in Multimedia Design and Development

The broader degree offered by DeVry has to be narrowed by adding a specialization in Web Design and Development.

Those who are looking for a specific degree in Web design might find that the specialization option at DeVry is not comprehensive enough. However, the abbreviated associate’s degree program at ITT may not be extensive enough. Your individual professional goals will determine which program is the best option.

Program Focus

The degrees offered by each school offer a general education in Web development, though each has a different focus.

The program at ITT teaches students how to design, create, and maintain Web sites. Training includes coding with popular programming languages, use of database technology, and more. The program promises to provide students the training to become Web administrators, applications developers, software developers, and Web site developers.

The program at DeVry is a bit more theoretical in nature. The program teaches students business fundamentals, principles of Web site layout and structure, and standards of design. Practical skills focus on the use of database technology and how to develop and use animations, videos, and images.

Those who are looking to quickly enter the workforce or to change careers would likely benefit more from the program at ITT, which is more focused on teaching practical skills in a shorter period of time.

Investment

The amount of time and financial resources required to complete each program greatly varies.

The bachelor’s degree at DeVry is a typical four-year program. However, the associate’s degree is 30 months — six months longer than the typical two-year program available at ITT.

Both associate’s programs are comparable in price.

• The program at DeVry costs $37,405
• The program at ITT costs $40,896

Though the program at ITT is shorter, it includes more credit units than the program at DeVry. The associate’s degree at ITT includes 96 credit hours, and the longer program at DeVry includes 67 credit hours.

This means that the program at ITT includes more classes, but that the classes meet for a shorter duration. If you prefer a more fast-paced, skills-oriented program, then the program at ITT would better suit your needs. In contrast, the program at DeVry is more conceptual in nature, but allows greater time for learning the material.

Determining the program that is right for you will depend on the type of learner you are and the goals that you have for your professional development.

Those who are looking for a more intense, results-oriented program in a shorter time span would benefit more from ITT’s shorter, practical curriculum.

Those who want a more traditional bachelor’s degree and are interested in developing as a manager or project leader would benefit more from DeVry’s program.

Both are fully accredited and offer financial aid. Of course, both also offer the flexibility of online learning, allowing professionals to create their own schedules and to balance study with work and other responsibilities.

General Thoughts from Steve

Back to me. I think education is important, not just for web designers, but for everyone. We’re all different though and we learn in different ways and have different goals for what we’ll do with the things we learn.

I mentioned 3 places to learn from at the start of this post.

• Physically attending a 4 year college or university
• Getting an online degree
• Teaching yourself though books and online tutorials

All 3 can be great ways to learn. You’ll have to do the last at some point if you want to stay current and continue learning. The question is whether to go either of the first 2 routes.

I’m someone who did go to college. In fact I went to several in earning 2 undergraduate degrees, neither in web design or development, though. As a web designer I’m mainly self taught. The online degree is the one path I didn’t travel.

My guess is many of you reading are either self taught or starting on the self teaching journey. Ultimately I think your success as a web designer will come from the understanding and skills you acquire and not so much from where you acquire them.

At the same time I wouldn’t brush off a more formal education. Had I not spent the years in college that I did, I don’t think I would be able to teach myself the way I can now. I wouldn’t be as disciplined or organized in how I learn. Picking up tips and techniques from tutorials can be a great thing, but they don’t always show you the big picture and help you integrate what you learn into a whole you make your own.

Both the big picture and the finer details are important for success.

In the end how you learn is up to you as long as you learn. The only mistake you can make is a failure to learn.

Author Bio

Amanda Tradwick is a grant researcher and writer for CollegeGrants.org. She has a Bachelor’s degrees from the University of
Delaware, and has recently finished research on native
american grants for college and wyoming
education grants.

Soon after Tim Brown suggested using a modular scale for more meaningful typography.

These two concepts are leading and pointing the way forward for all web designers to follow. They are the new canon for web design.

Designing From the Content Out

Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection.

The above is a quote from Mark’s post. Grids aren’t arbitrary structures. For them to be most effective they need to be tied to the thing they are attempting to structure. That requires a constraint to connect them.

In print that constraint is the size of the page. The page is static. It will always be the same size throughout the work. It can be divided and subdivided into geometric systems that become a grid.

Online things are different. There is no fixed canvas within which we work. For years web designers have tried to impose a fixed canvas through the use of fixed width layouts, but with the myriad of devices and device characteristics this is no longer feasible. We can no longer design for a single optimal set of conditions and assume it will work well enough under all other conditions.

We need a new canon as we can’t rely on the canvas. What we can rely on is the content. We can reverse things and instead of starting at the page edges and working in, we can start inside with content and design out.

To begin we need a constraint from within the content. This constraint shouldn’t be arbitrary as our goal is to connect the design to the thing being designed. What you choose is up to you and the specifics of your project, but there are some obvious choices.

• Type
• Images
• Ads

The last would depend of course on whether or not your site has ads, but it’s safe to say that most every project will have type and images or other media.

Write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.
—Jason Santa Maria

Choose a typeface for the body of your content and decide what font-size will work best. Ask yourself what images will be used and if they need to hold a consistent size in either direction. If you’re using banner advertising which of the standard sizes will your design need to accommodate?

With even just one of these constraints we can work our way out and build a typographic grid and in so doing connect the structure of our design with the content we’re designing for.

Making the Connection Through Modular Scale

A modular scale, like a musical scale is a prearranged set of harmonious proportions
—Robert Bringhurst

In choosing a constraint above we’ve decided what aspect of the content our design will connect to. How do we go about connecting it? How do we choose the widths and heights that will make up the modules of our grids? How do we relate the design to content?

Tim Brown suggests we use a modular scale to set the measurements we’ll use throughout the design. The video above describes the process and I can’t urge you enough to watch all 31 minutes of it.

Say you’ve set your body type to be 16px (or better yet, 1em). To connect the rest of your design to that type, the measurements you use should be multiples of that same 16px.

Measurements like the size of headings and subheadings, column widths, grid modules, should all be part of some meaningful scale based on that original 16px measurement. This meaningful or modular scale is what leads to unity and a harmonious design.

To create a modular scale you start with a number (in our case 16px), choose a ratio such as 1:1.618 (the golden section) and do the math.

• 16 × 1 = 16
• 16 × 1.618 = 25.888
• 16 × 1.618 × 1.618 = 41.887
• 16 × 1.618 × 1.618 × 1.618 = 67.773

and so on. In the opposite direction we get

• 16 ÷ 1.618 = 9.889
• 16 ÷ 1.618 ÷ 1.618 = 6.112
• 16 ÷ 1.618 ÷ 1.618 ÷ 1.618 = 3.778

and again so on.

Math…ughh. Don’t worry. Tim created a modular scale calculator to do the math for you. In fact he gave us the ability to add a second starting number that when used with the same ratio creates what he calls a double stranded modular scale and leads to a greater variety of measurements to choose from.

With scale in hand you use the values as measurements throughout your design. For example from the above your main headline might be 41.887px, which corresponds to 2.618em. The calculator provides the em value in addition to the px value.

What Ratio Should You Choose?

How do you choose a ratio? Does it have to be the golden section? That choice is really up to you, though ideally your design concept will indicate a ratio you might use.

You might choose a ratio from nature or mathematics. Another potential source of ratios is music.

Music is exactly where Owen Gregory suggests we look in Composing the New Canon: Music, Harmony, Proportion. Why not music? It’s based on scales we inherently find harmonious. It communicates emotion. It gets people to act and remember.

Scales of different intervals are part of the musical language. Using a major 3rd or perfect 5th as the scale upon which we base our design make sense. It might not be a bad idea to start learning a little music theory to understand something of what these scales represent and communicate.

Fortunately Tim is building these musical scales into his calculator. We won’t have to worry about the math and even more we’re being given a starting point for research into music theory.

Whether you use ratios from music or some other place, the main point is to think about what ratio you might use to compose your modular scale and to begin using values from the scale as measurements in your design.

Summary

Trying to design from the canvas in no longer makes sense for web designers. There are already far too many canvases out there that we’d need to account for and what will work well specifically for one canvas will cause problems in the next.

Responsive design shows us how to develop sites that work across multiple devices and conditions. It doesn’t tells us how to develop a grid or what hierarchy is best. It doesn’t tell us how to connect the design to the content.

Fixing something in the content and then working your way out through the use of a modular scale does show us how to make this connection. This new canon points the way toward design unity and harmony.

• choose a constraint from the content
• take a measurement from the constraint to use as a starting number
• choose a ratio to use for the scale
• do the math
• choose measurements from the scale for other parts of the design

As I’ve said before it’s an exciting time to be a web designer. The industry is changing and those of us working today have an opportunity to help shape the future.

Have you changed your own process? Are you still starting with the cancans or have you made the switch to starting from the content and designing out?

The questions come from a post by Kyle Meyer, entitled Design is a Machine that I recently read. Kyle’s post evolved from the work of Sol LeWitt, an artist I’m unfamiliar with who saw art as a machine rather than something creative. Kyle points to the following quote from Sol LeWitt at the start of his post.

In conceptual art the idea or concept is the most important aspect of the work. When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand and the execution is a perfunctory affair. The idea becomes a machine that makes the art. This kind of art is not theoretical or illustrative of theories; it is intuitive, it is involved with all types of mental processes and it is purposeless. It is usually free from the dependence on the skill of the artist as a craftsman.

While I think some aspects of design can and are reduced to the mechanical I don’t think it can be said to be a machine. I know I don’t want to see it that way or it would instantly lose all interest to me. But it’s not simply about what I want.

Quoting Kyle:

There are formulaic approaches to visual problems that often yield a solid result or act as a foundation for commonly-defined creativity (grids, typographic scales, everything that is The International Style).

All true, however these approaches are tools and the same tool in different hands can lead to very different results.

We all have code libraries to quickly reproduce a menu or site layout and we follow established patterns that lead to similarities in finished products, but there are still many design choices made along the way, including which tools and patterns to use.

The primary function of a web designer is to communicate. I don’t think there’s a single or inevitable way to communicate.

A simple example is the choice of wether to communicate with words or pictures. A concept doesn’t inevitably lead to one or the other.

If you give 2 designers the same problem to solve and give each the same predefined concept and insist they use the same grid system, typographic scale, color scheme, etc., I don’t think you end up with the same website.

There would naturally be a certain amount of similarity because the problem is the same and many of the constraints will be the same, but the finished product will still be different.

Each of us does put something of the machine into our creative process. You might fall back on the same half dozen typefaces or rely on one of a small handful of layouts for projects. Still I think there’s a wide variety of possibilities even with the same fallbacks.

The machine in design is the constraints we impose in order not to have to make every one of the infinite choices available to us on every project. You fall back on the same palette of typefaces in order to put more of your attention into choosing colors. You fall back on familiar color schemes in order to put more attention into a choice of grid.

However, you program the machine and there’s creativity in that programming.

When designers consistently fall back on a set of tools and use them as a constraint time and again it’s where their style emerges.

George Polti reduced all stories to something like 36 different plots used again and again. Yet there are an infinite amount of stories within those 36 plots. The same problem with the same concept and the same set of constraints, doesn’t automatically lead to the same inevitable solution.

A game a chess could theoretically be reduced to a finite number of possible moves, with each position on the board having a best move leading to an inevitable conclusion. Those finite possibilities though, are so numerous that for practical purposes they are infinite. The game does not inevitably play itself out the same way each and every time.

A designer can reduce his or her designs to a machined process, however it’s only at the discretion of that designer, which implies choice and a non-machined creativity. Design itself isn’t a machine even if we sometimes choose to feed it through machines of our creation.

Whether or not our designs become a machine is wholly up to us. And because we make that decision, design itself isn’t a machine.

Two things have me thinking about paragraphs. First is an observation that using indents has become more common with designers I follow and admire. Second is a post by Nathan Ford, Islands of Thought in Macrotypography, in which he rails against the extra line space as the wrong way to indicate new paragraphs.

In his words:

These spaces effectively chop the text into what I call “islands of thought” — disconnected paragraphs floating downstream, with only their left-right boundaries holding them together.

Nathan’s point is the extra space breaks the flow of reading. His post is a great read and I’d encourage you to take a look if you haven’t already seen it.

He provides a bookmarklet at the bottom of the post to let you see how any site would look with indents instead of spaces and I’ve been playing around with it all week.

Here are a few designer’s who know more than I do that are currently using indents to mark paragraphs.

• Jason Santa Maria
• Jessica Hische
• Mark Boulton

Take a look and see what you think and also give Nathan’s bookmarklet a try.

History of the Paragraph

Indenting the first line of a paragraph is the most common way to show a paragraph in print. It wasn’t always that way. A variety of cues have been used to mark new paragraphs.

Nathan’s post links to a post by Jon Tan, The Paragraph in Web Typography & Design, which provides some history and it’s another I’d encourage you to read.

Jon also created a page with examples of paragraph typography.

For a long time in history, paragraphs weren’t there at all. Text displayed in one long block. Later, special charters like the pilcrow ( ¶ ) were added inline to mark a new paragraph. Whitespace was then introduced, first replacing the special characters inline, and then as the familiar indent.

Eventually the use of the line space boundary became more common and today it’s the standard on the web.

Jon speculates that the reason the line space is less preferred in print might have to do with cost. More space means more materials are needed. Online the cost of materials isn’t a factor. We should be more concerned with usability.

Advice from My Bookshelf

I have quite a few books about typography sitting on my shelves and it seemed like a good idea to consult some of the masters.

My first stop was Robert Bringhurst and The Elements of Typographic Style. He mentions several ways to indicate a paragraph, but only mentions a line space following a block of quoted text. I kept looking.

A half dozen or so books later I mainly found typographers recommending an indent as the primary means to show the start of a new paragraph, however they do mention several other ways, including the use of a line-space as a boundary.

In her book Thinking with Type, Ellen Lupton tells us paragraphs don’t exist in nature, unlike sentences which are a part of spoken grammar. Paragraphs are purely a literary device and numerous alternatives can be used to indicate them, including some extra space. She does recommend using ½ line space instead of a full space.

Here’s are the alternatives she mentions

• indent with line break
• outdent with line break
• line break only
• line break and ½ line of space between
• extra space inside line, without line break
• symbol inside line, without line break or extra space

She even suggests that inventing news ways to mark a paragraph is an intriguing typographic exercise. In other words no one way is etched in stone.

Most of the ways I saw suggested to mark paragraphs were plays on the above. There was also the use of a drop line, in which the first line of the new paragraph is indented up to the end of the last line of the previous paragraph.

Additionally there were mentions of how to treat specific paragraphs.

• versals such as elevated caps, drop caps, or outdented caps in first paragraph
• running indent (both left and right margins) usually reserved for quotes
• on a point indent as you’d find in bulleted lists
• outdented block on the whole first paragraph
• nested indents to show typographic hierarchy

Still the most mentioned and preferred way to indicate paragraphs was the use of an indent on the first line of all paragraphs other than the first or those that follow things like blockquotes and lists.

Ideally this indent should be related to the type size and/or leading or it could be based on some unit of the typographic grid. 1–2 ‘em’s was the most common recommendation

Timothy Samara cautioned that an indent works best with fully justified text. The amount of indent is subjective, but needs to be noticeable.

However he suggests that indents don’t work as well with ragged right text as the rag already varies the line length reducing the visual power of the indent.

What I came away with was there is no absolute rule to indicate a new paragraph though clearly print tradition advises the simple indent as the most common and perhaps most useful way.

Is the Web Different?

Most, if not all, of the books I looked through were focused on print. Does moving type to the web change things?

The common way to show paragraphs on the web is the line space boundary. Perhaps it has something to do with the cost issue, though more likely it’s due to the space being the default of all browsers.

In print the thought is that people read linearly and sequentially so it makes sense for one paragraph to flow smoothly from one line to the next, whereas online reading might not be so linear as people navigate through in-content and navigational links.

We’ve all heard for years that people on the web don’t read, but rather scan. I think the truth is more that people scan first to decide whether to read or not, but once they’ve decided to read they do read just like they do with printed text.

Does an extra space making scanning easier? I don’t know. In some ways I can see that they would. I also see Nathan’s point that they only force an unnecessry pause on the reader.

Having played with Nathan’s bookmarklet all week, the indents are growing on me. I’ve also come across pages where I don’t like how they look. I suspect that has to do with how well size, leading, and measure were used, but I haven’t checked on those details enough to say for certain.

What I will be doing is paying a lot more attention to paragraphs and experimenting. I have a feeling indents will grow on me the more I see them and any resistance I feel is more to do with being used to seeing line spaces than anything else.

Summary

I think it’s a good idea for all of us to take a deeper look at how we might style and indicate new paragraphs.

In print there’s a preference for using a 1–2 em indent with exceptions for first paragraph after headings and subheadings and those that follow things like blockquotes and lists when a line space boundary is already present.

While the web has generally not used indents and favored line space boundaries, there is movement to change this and bring us all back to indents. I can’t say I’m fully sold yet, but I don’t think it’ll take much more selling to get me there.

There are a variety of other ways that can be used to mark paragraphs and even suggestions that creating an entirely new way would make for a good exercise. The one certainty is there’s no absolute right way show the start of a paragraph. There are preferences and guidelines, but no absolute rules.

What do you use? Do you have a preference or feel there is a right and wrong way to mark new paragraphs? Have you given it much thought before now and will you give it more though after reading this post?

Here are the they questions we were asked:

• What are the greatest news of 2011?
• What are the trends for 2012 and what can we expect from this year?
• What changes happened in 2011 and how did they affect you personally?
• What do we have to pay attention to in 2012 in order to stay tuned with the trends?
• What are your plans for 2012?
• Something else you would like to add?

I wanted to add a few thoughts here about where I think web design has been and where it’s heading, though not specifically in 2011 and 2012.

Where We’ve Been

One of the great things about the web is anyone from a junior high student to your great grandmother and grandfather can easily set up a website and begin publishing. It’s also one of the worst things as it leads to a lot of very poorly designed sites.

We’re left with a lot of noise and the challenge is to find the signal within.

This is natural and the same thing has played out in every industry that significantly reduces the barriers to entry. What this has meant and continues to mean for web design is you get a lot of people designing sites with little to no training, myself included.

The last couple or three years have seen many amateur designers realize that they’re missing something in their design education and we’ve seen more emphasis on learning and using solid design principles in websites.

Designers with a formal education like Khoi Vinh and Mark Boulton have helped make us aware of things like grids and typography.

On the technical side designers tried to figured out the best way to develop their designs. I can remember when I first started learning to build websites and was initially confronted with a choice in using absolute or relative measurements.

• Set a fixed width and your design may not work across all computers
• Set a relative width and your design may not look how you want across all computers

It’s been a central issue in designing for the web since the beginning and has only been compounded as we’ve all begun browsing on smart phones and tablets and any other device that can connect us to the internet.

It’s only in the last year or two where the technology has caught up allowing designers to create flexible layouts while still maintaining enough control over their designs.

Responsive design, mobile first, progressive enhancement, etc. are now leading to a change in philosophy about how we all build sites from concept to finished product.

Where I Think We’re Heading

In the coming years I see all of the above continuing. We’ll see more people of all skill levels wanting a website. Some will enter the industry as designers and developers and some will just be looking for a low cost way to get a site running.

As much as I’d like everyone to realize the benefits of a custom design tailored to their brand and business I doubt this will happen.

More likely we’ll more CMS/theme solutions. I do think we’ll see improvement here as designers move from all in one generic themes to themes tailored to specific industries along with enough options for site owners to create something of a customized solution.

On the graphic design side of things I expect the focus to continue to be on improving our knowledge and ability to work with solid design principles, particularly where the typographic grid is concerned.

In combination with the ideas of being responsive and flexible I think a major challenge in the near term will be to rework how designers have treated structural layout in print to better fit the canvas that is the browser.

Consider the following:

• Design principles
• Minimalism
• Typography
• Grids
• Content out
• Responsive design
• Mobile first
• Progressive enhancement

The above ideas weren’t necessarily new in 2011, but I think 2011 was the year they began to coalesce into a new philosophy for creating websites.

About 10 years ago I was starting on the journey of learning to build websites. A change in philosophy was taking place at that time as we moved from slicing images and table based layouts to developing layouts with divs and css. The next change is happening right now.

That change is being driven on two fronts.

• An industry filled with people with little or no formal training are realizing that a solid understanding of design fundamentals is a good thing.
• The technology that allows us to build websites is catching up to the history of design and making it easier to develop sites that use those design fundamentals.

What I expect to see happening in the coming years is the rich tradition of design and the changing technology of the web reaching a point where they can truly work together.

I expect web designers to take the solutions of those that have come before and learn to adapt those solutions and apply them to the new challenges the internet brings.

The next few years are going to be exciting times for web designers and developers.

Understanding how visual tension works and how to control it is an important tool for designers to master.

What is Visual Tension

Before we can get to how to create and release visual tension we need to understand what it is. Consider the following definitions of tension.

tension (n)

• physical or mental strain or stress
• a force created through stretching or pulling
• the interplay of conflicting elements
• a situation or condition of hostility, suspense, or uneasiness
• a balance maintained in an artistic work between opposing forces or elements

Even though I’m sure you know what tension is, consider the nuances of the different definitions above. We’re concerned with all of them, but when it comes to graphic design it’s the last that’s probably most important to us.

Imagine the image above is of a ball on the side of a mountain. Our knowledge of round objects and gravity tells us the ball can’t possibly be stable where it is.

The image is perhaps a snapshot in time, that we know changed from the previous moment and has to change in the next moment.

Stability won’t be achieved until the ball stops rolling somewhere on the horizontal. The current unstable snapshot carries tension because it’s not stable.

When we’re looking at a web page, the visuals we see can also be thought of as a snapshot in time.

What we perceive visually is more than a series of shapes and colors, objects and movements. What we experience visually is more dynamic. We see the interplay of directed tensions.

About a year ago, I posted 19 factors that impact compositional balance. In that post I said visual balance had two components, weight and direction. Similarly we can say that visual dynamics is direction tension.

Why Visual Tension is Important

When we design a web page we’re looking to communicate something. You have several messages of differing importance you want to convey to your visitors.

Graphically we do this by creating a hierarchy of design elements.

You create a dominant element or dominant area in the design containing your most important message and then lead your visitors through a series of less dominant focal points that contain secondary and tertiary messages.

Tension adds visual interest and energy. It adds visual weight. Hierarchy is created entirely through scaling visual weights.

It makes sense then to learn how to create and release tension so we can better direct our audience around our designs.

One point to keep in mind is that like everything else hierarchy, we need to use tension sparingly. Too much visual tension everywhere will pull the eye in all directions at once and hurt your design.

How to Create Visual Tension

Consider the series of images above.

To the left is a dot placed in the center of a square background. There’s equal space (forces) around it and the dot sits quietly and statically in the center. No tension exists.

In the middle image I’ve moved the dot off center. The space is now active as the forces are no longer equal, setting up a state of tension. The greater space on the left seems to be exerting a force that pushes the dot to the right.

We feel as though the dot is struggling to regain the center and symmetry or perhaps moving to the right and off the page.

In the last image I’ve moved the dot closer to the right edge. As the space between the dot and the edge decreases the tension increases until the moment when the dot touches the edge.

The Structural Skeleton’s of Shapes

There’s something else beside the positive elements and negative space determining the forces at play.

In his book “Art and Visual Perception,” Rudolph Arnheim saw shapes as having a structural skeleton running through them. Above is his structural skeleton for a square.

Elements placed along any of the axis or in the center will appear more visually balanced, more stable. They’ll carry less tension. Elsewhere on the structure there’s a greater sense of tension.

Multiple Shapes

If we add a second element we introduce new forces and a new dynamic.

Each of the images above contains 2 dots. With this second dot the dynamic shifts from being about the location of each dot to the spatial relationship between them and to a lesser extent the location of the combined dot group.

As we move the dots closer together the space between them decreases and again tension is increased. This continues until the dots touch and overlap.

Overlapping the dots releases the tension in the space between them. However, it now sets up another tension.

We know the two dots can’t occupy the same space at the same time. This is the new tension that’s been created. To relieve it we perceive the 3 dimensional space between them.

The tension (and depth) here is further increased by increasing the size of one of the two dots.

Additional Ways to Create Visual Tension

As we saw above asymmetrical space is one way to add tension as it creates unbalanced forces on elements.

Another way to create tension using space is through the figure/ground relationship. If figure and ground each carry equal weight it can create tension as each threatens to overtake the other.

Juxtaposition can also be used. Juxtaposing conflicting elements is one of the stronger ways to visually show tension. An ice cube next to the sun for example. The greater the conflict, the greater the tension.

Similarly contrast can be used to create tension. Light and dark, large and small, curves and straight lines. And again the greater the contrast, the greater the tension.

Angular lines typically carry more tension than either horizontal or vertical lines, because the are perceived as less stable.

Breaking rules, such as moving an element off the grid creates an uneasiness, an escape from order. This uneasiness creates tension and naturally draws the eye and adds visual interest.

Examples

Above is a design from Jan Tschichoild. Tension is created through the asymmetrical balance of elements along with contrast of both tone and color.

The elements in the lower right are all pulled close to each other like the two dots we saw above. Additional tension is created through the contrast between the circle and the straight lines and the contrast between the horizontal text and vertical column of text.

Below is the studio page from the Definium Design Group webs tie. Like Tschichoild’s design above it shows an asymmetrical balance of elements as well as contrasts in tone and color.

Additionally we see the use of a diagonal line running through the upper left corner and a diagonal flow through the logo and tagline.

I think there’s a nice tension and release at play here. If we start in the upper left, there are two dark shapes enclosing the logo. These elements are close together as though there’s an attractive force between them.

On the right a series of links are pulled closely together, yet pushed away from everything else. The text in the content section is also pulled closer to itself than anything else.

In between these areas there’s space for the eye to rest when traveling from one part of the design to another. I wonder though, if more tension/release would be present were the content are pushed lower down on the page creating more space between page title and the black bar above.

Summary

Tension and release is a very common pattern in all the arts.

Visual tension creates visual interest. It’s more dynamic and leads to more complex relationships between elements. We can use this to evoke feelings of energy, vitality, forcefulness, and even modernism.

More tension leads to more attention, because we feel something is off and we need it to resolve itself back to a more static state of rest. When tension is present we feel something is going to happen and we don’t want to miss it.

Varying visual tension throughout a design by creating contrasts in space, pulling some elements closer together and pushing others further apart, creates rhythm and flow through a design. Tension in one area, release in another.

What can we do to create the illusion of depth in our designs?

Depth Cues

If we think of the 3 dimensions as up/down, sideways, and towards/away, it’s the last we’re talking about when seeking to add depth to our work. Because this towards/away dimension isn’t really present we communicate a sense of depth through a series of visual depth cues.

There are 2 types of depth cues

• pictorial cues — can be reproduced in a photograph or realistic painting
• non-pictorial cues — can’t be reproduced in a photograph or realistic painting

Pictorial depth cues do not have to be applied singularly to the entire design. They can be applied independently to the different elements that make up your design.

Each cue has its own unique properties that communicate different visual information. Each can communicate something different while still expressing depth.

Your visitor will find depth even in a flat design so the question isn’t whether or not to be 3d or 2d, the question is which depth cues will you use.

The rest of this post will focus on some pictorial depth cues.

Pictorial Depth Cues

Below are some of the different cues we can use to give the illusion of depth being present in a design.

Occlusion (overlapping objects) — This is the strongest cue for depth. It overrides all other cues when a conflict seems to be present.

When one object obscures part of another object it’s clear there must be a depth of space between them. Objects that are nearer occlude (cover up) objects that are further away.

It’s important that the partially occluded objects are recognized for their complete shapes or the total composition can be seen as two shapes sitting side by side.

Transparency is a form of occlusion where we’re given a peak behind the occluding objects. Parallax is another technique to show moving elements occluding one another.

One way we can use the above is to organize information so that more important information partially occludes less important information.

Size and scale — Larger objects appear closer and smaller objects appear further away. By placing different sized objects near each other we add a cue that the difference in size comes from a difference in depth.

If we take things further and create a series of similarly shaped objects, varying scale only, we can create a perspective of size and scale that shows how deep our composition is.

We can use the above to show the relative importance of information. Less important information will take up less space and be smaller.

Texture — By definition textures imply a sense of depth as they aim to let you feel the surface of a visual element.

As distance from the viewing port increases, textured elements become smaller and more densely packed together.

A ground texture can also provides a size reference for other objects.

Linear perspective — By projecting a number of closely parallel lines that converge in one or more places in and around the composition we directly show 3-dimensional space.

These lines don’t need to be visible, though they can be. They can also be implied by the objects in the composition.

Perspective is by definition a technique for representing 3-dimensional objects and depth relationships on a 2-dimensional surface.

Cast shadows — A shadow cast by one element on another gives cues about their relative distance. Drop shadows are perhaps the most common way one adds depth. Reflections work similarly in that a reflection appears on a different surface.

When the shadow is smaller, darker, crisper, and nearer the object casting it, the nearer the object is to the surface holding the shadow.

You can increase the depth by making the shadow larger and lighter and placing it further away from the object. Blurring the edges of shadows also increases the illusion of depth.

Location on the picture plane — When objects are seen higher up on the picture plane they are usually perceived as being further away.

Perhaps this has to do with a look at the world around us.

When we stand in our 3-dimensional world it’s those things we see at the bottom (the earth, the grass, the pavement) are those we’re physically connected with, those things that are generally closer to us.

The clouds, the sky, the stars, those things we see above are also further away from us.

Lighting and shading — Much as light adds depth by casting external shadows, it also shows depth in how it acts over the surface of one object. How light plays over a surface gives clear cues about the shape of that surface in all 3 dimensions.

Gradients, Bevels, Embosses, and the like show depth in the way light is held and reflected off a surface.

The surface of an object can also show more or less light depending on its orientation from the light source. Closer to the light source will show a brighter surface with more reflected light.

Depth of field (focus) — The eye focuses on one object and as it does other objects become slightly blurry, while the focused object remains sharp.

The closer another object is to the one with the focus, the less depth is perceived between the two. The further away on the same depth plane an object is from the focused one, the blurrier it should appear.

This is true regardless of whether or not the out of focus objects are nearer or further from you. The blurriness is relative to the difference in depth with the object in focus.

• Depth of Field: One of the most important elements in photography
• Depth of field
• Tutorials: Depth of field

Reference to nearby or known objects — Any object of known size provide a reference for all other objects in the composition. The size of the object can be known because it’s a real object like a person or house, or because it’s size has been defined elsewhere in the composition.

The known object adds a context tied to the absolute world and as such adds scale to the picture.

The nearby object adds a different kind of context, but a context nonetheless. An object can only be small in relation to another larger object.

Degree of contrast — The contrast between and object and its background is reduced as the distance between them increases. This is why a darker cast shadow appears closer. It typically shows more contrast.

It also helps account for depth of field as the greater the contrast in focus and blurriness, the greater the distance.

Color — Cool, dark colors tend to recede into the background. Warm, bright colors tend to move to the forefront.

Perhaps a result of the cool blue sky being further away than the warm reddish brown of the ground beneath our feet. It likely also comes about given the different visual weights different colors carry.

Summary

More depth gives you more control over the hierarchy of your design elements as different elements are placed at different depths.

Every image, every design, will divide itself into figure and ground. The greater the depth, the greater the distance between figure and ground, and the more important the foreground element becomes visually.

Since the canvas we work in is 2-dimensional, we can only impart a sense of depth through visual depth cues. There are a variety of different cues you can use, each communicating in its own unique way and each with a different strength in making us see depth.

How many of the above do you use to convey a sense of depth? Several I’m sure. Perhaps a better question is which have you not used?

My Story

I’m working on a site redesign and one of the major problems I’m trying to solve is a structural one that provides flexibility for future content.

I came up with a graphical solution I thought would work, and while refining it a bit, began seeking out sites with similar flexible structures to see how they technically achieved their solution.

As I was seeking this technical inspiration I was still tweaking the graphic solution and eventually realized that without intention my design might have started to imitate a little more than having been inspired.

I don’t think anyone would look at my design and see it as an imitation. As it stands now it’s not an imitation at all. It’s more a case of I know where the site is heading.

What I’m setting up allows the possibility for imitation. It’s only a possibility and may never been seen by anyone else as copy or imitation, though I can see it and it makes me think I need to do one of the following.

• Rethink the existing design and make changes to further separate it from what inspired it.
• Rethink the design problem and find another solution.
• Rethink whether the problem is worth solving or if the idea leading to it is better dropped

There’s no pressing deadline on this project so I’m still deciding which of the above is the best approach. I’m playing around a little with all three options while I make up my mind.

Erik Spiekermann – Putting Back the Face into Typeface from Gestalten on Vimeo.

How Inspiration Becomes Imitation

While there are certainly some designers who wholeheartedly rip off others, I think more often designers are genuinely trying to draw inspiration from another site and unintentionally take a little too much from it.

At the same time some design solutions end up being so simple and obvious that they’re used to the point where they come close to becoming a standard. For example would anyone accuse you of copying from another design if your design is divided into header, footer, main content, and sidebar?

In the video above Erik Spierkemann talks about designing a typeface that’s been inspired by another. After looking at the inspiration, drawing it, sketching over it, and studying it for a time he moves on to do something else and comes back later to draw it from memory.

It will inevitably be different, because memory only works so well. The typeface he ends up drawing will naturally be influenced by that other, but it won’t be a copy.

The looking, thinking, and studying all find their way into his typeface. At the same time since he’s not actively looking at it while designing his, he inevitably ends up with something different that’s a combination of the one typeface and all the others that have inspired him over the years.

Erik, of course, has been designing long enough to have developed his own style and to have culled many different inspirations. A less experienced designer may not have done either and so a single new source of inspiration may dominant their new design too much.

One other potential issue is clients. Not that clients force you to imitate of course, but I’m sure you’ve had clients approach you asking for your site to look like another they see. It’s a natural request. They want their site to look like site x and in order to satisfy their request you veer a little too much toward imitation.

I’ll get back to this point in a bit.

How To Avoid Imitation

Jessica’s post offered some thoughts on how to avoid imitating the work of another designer.

• diversify
• look to history
• train your eye in general

I think the first might be the most important here. The more diverse your inspirations, not just on one project, but over the entire lifespan of your career, the less any one source of inspiration dominates what you create.

Both of her next two points are similar. We can look to history in order to find more diverse sources to draw from.

The more sources we draw from the more we’re training out eyes. With more inspirational fodder we have more examples of what works and what doesn’t.

In the spirit of diversifying, we should look beyond websites to draw inspiration. We can look to:

• print design
• package design
• art
• architecture
• nature
• anything you see around you

We can also seek diversity within web design alone. If you’re designing a site for a local real estate agent draw inspiration from a photographer’s website or better yet a photograph.

The further away from the specifics of your project you grab inspiration, the better.

I typically stay away from pulling inspiration from websites when designing because I don’t want to unintentionally take too much. Still it’s hard not to be inspired by sites I like and I know some of what inspires me inevitably finds its way into my work. See my story above for a recent example.

Another point Jessica made is that not everything you design needs to end up online. We all need to practice to improve our craft and one way we learn to do something new is to copy others. It’s a tradition passed down through all the arts. That doesn’t mean every time we copy another to learn it should end up live on a site.

Remember Picasso’s quote “good artists borrow, great artists steal”

Imitate to learn, but don’t publicly share that imitated work. That’s borrowing. Instead imitate so deeply that the techniques become your own. They become a part of you mixing with everything else.

Above I mentioned clients wanting their site to look like another. If you dig a little and ask why a client likes a particular site you’ll find it’s often just one aspect of they design they want. It might be the layout or the color scheme or the feelings evoked in a single image.

Once you gain that understanding you can draw inspiration from just that aspect while going in a different direction with the rest. Even if you find you took a little too much of that one aspect you usually haven’t taken too much from the total design.

Summary

It can be hard not to imitate at times even when we have no intention of it. It doesn’t take a lot for an inspiration to inspire us a little too much and we find ourselves creating at best a derivative work and at worst a copy of the original.

The best way to avoid copying is to diversify your sources of inspiration as much as possible in order to not have any one source make up too much of the inspiration.

In conjunction with a variety of sources you want to practice your craft as often as possible, with the knowledge that much of your practice is for you and you alone.

If you do find your work is a little too close to the work of another you have to be honest with yourself and work to make it less so. It’s ok to be inspired, but not to take too much of the work of another.