Introduction

One of the most challenging and interesting parts of what I do is bridging the gap between potentially confusing technology and people who are far removed from how it works. I think people intentionally avoid this massive gray area because of lack of patience, lack of interest, or inability (or no desire) to communicate properly. It can difficult to explain concepts like table-free design, search engine optimization, and digitizing art for print to people without the necessary experience. Despite that, it’s necessary for people who are promoting themselves or their business to understand these concepts on a basic level and realize how they can expland their work into new, expanding markets.

I’ve taught billing systems and wireless networking to customer service representatives, math and science to family members and classmates, and blogs and social networking to colleagues and clients. What I’ve found to be the hardest concept to get across to people is the proper way to design and implement a website. I’m not exaggerating; explaining standards-based, table-free, search-optimized design to people without any experience can be a painful process to all parties involved. Clients want to understand what they are paying for - explicitly - and the only way to make this happen is to explain why I do what I do and why they want me to keep doing it that way.

I’m new to all of this… how can this article help me?

Clients (those who need the design)

This post explains the very basic ins and outs of website design and why it can be such a pain in the butt. Are you confused why you were charged for three hours of time just to change a few words? Have you asked for what seemed like a simple change only to be met with a sizable estimate? In adding my two cents to the conversation, I hope to clear up issues like these for people who might be looking to understand the process a bit better.

Designers (those who provide the design)

While I’m relatively new to the discipline, I’ve been teaching people and promiting understanding since I first strapped on that inbound call center headset. Let me help you find the words to use so you and your client are on the same page. Use your knowledge, skill, and people skills together to show your clients exactly what you do and why you do it that way. The worst that could happen is you lose 15 minutes and gain some personal clarity.

Understand: Web design is it’s own discipline with it’s own subsets.

I have always known this but it took an article at A List Apart, one of the most reputable voices in web design, standards, and usability, to really solidify this in my head. To quote the article (to avoid unnecessary paraphrasing):

Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

At the risk of flinging this topic from comprehensible to hopelessly high-concept, it is important to address the implicit abilities and obstacles of this very interesting medium.

Taking an idea for a website and moving it from concept to execution has an interesting middle step. This middle step, the one where you weight the benefits of making precisely what was visualized against the negatives of spending an inordinate amount of time building it, is something that designers are painfully familiar with but clients may not entirely grasp. It is quite simple to sketch an idea out on paper, somewhat difficult to translate this idea digitally, and very hard to build the exact product you had in mind to begin with. Maybe the technology does not exist, maybe you’re not sure how to build it, or maybe the idea was too complicated to begin with but, in the end, what is created never seems to exactly match what was conceptualized. Please keep in mind that there is nothing inherently wrong with this frequent occurrence.

There is another force at play here as well. In the end, even if you’ve created exactly what was on that bar napkin to being with, there is a chance (a good chance) that it just won’t look exactly how you thought or it simply functions poorly. It could be that all the artwork required to make the page look amazing makes the whole page load slowly. It could also be that the revolutionary way to navigate that you devised is not at all as intuitive as what you thought. Regardless of the reason, a perfectly executed concept does nothing to correct the errors that existed in the concept to begin with. While the “it just doesn’t look right” factor occurs in all segments of art and design, the “it doesn’t function properly” can only occur where interaction is happening.

Both of these factors work together to add unique facets to web design that threaten to destabilize the relationship between client and designer.

Clients

You don’t have to fully understand the internet and navigation and usability and optimization to understand why your designer tries to dissuade you from certain things. What you do need to understand is that your expertise in other fields does not translate directly to the web. Because something “looks” easy or “seems” easy does not actually make it easy to complete. Something as simple as content change or color change could require a lot of back-end work.

• If you don’t understand, do yourself and your designer a favor and just ask. If something seems easy but you are being told that it isn’t, ask her explicitly. Anyone able to make the changes should also be able to explain what they are doing.
• Get an estimate, even if it’s just a verbal agreement. Knowing up front that your image update is going to cost $200 might persuade you to approach the problem differently.
• Good web design takes time and, unless you can do it yourself, costs money. Making everything look right and function properly is an act of art, science, and patience. If you trust your designer, let him do what needs to be done and keep in mind that you’ll be glad you spent the money now rather than deal with fallout later.

Designers

You know what you’re doing and you’re as honest as they come so it can be downright insulting when someone questions your judgement. Still, what would you think if a contracting firm kept coming back for more money and more time on a remodelling job? Would you keep handing over money, no questions asked, or would you try to understand what is going on so maybe you can make an executive decision? It’s your job to patiently and effectively explain where the time and money is going so your client can budget effectively and potentially cease problems that get out of hand.

• Communicate well and often. If you think you might go over budget, say so. If problems are occurring, explain them. You might be used to guiding a project and making decisions but, when you’re on someone else’s time and money, it’s up to them. Give them all the information they need to make the right choice.
• You’ve heard of Always Be Selling (ABS), right? Well, for this post, it’s ABT, Always Be Teaching. You can never go wrong if you spend a little extra time sharing some of the knowledge you have. Don’t just say “the code was screwed so I fixed it,” explain what was wrong and what you did to fix it. This helps you by honing your knowledge and keeping you honest; this helps your clients to better understand what you do and showing them that you’re willing to give a little extra.
• While you might know the best way to do something, maybe the client has a different idea in mind. It can be painful to leave behind ugly code, deliver an unfinished product, or stop working on something that clearly needs more attention but it’s even more painful to fight against it. Explain the situation (#1), share the knowledge (#2), and leave your ego at the door.

Did I miss anything? What can clients do better to help designers understand the goal? What can designers do better to make the customer know the value their getting?

Amazing work… this iPhone photo looks like it was from 1932:

Introduction

Last time we left off, I had put together a structure of what I wanted my website to display and what it might look like. After about weeks of stressing out in Illustrator, I finally decided on a design I like.

Matt Jurman’s article, mentioned in the previous post, speaks to a high quality design and says that the following elements should be present for a design to be considered “high-quality:” balance, unity, emphasis, contrast, and rhythm.

I’m new to all of this… how can this article help me?

Welcome to the new format of all of my blog posts (news items and quick ones not included). I’m worried that I might be struggling in a vacant gray area between the “knows” and the “know nots.” This blog is specifically for people who are just starting to explore what technology can do for them and their business. As such, I want to position everything that I write to face towards the novice, not the expert. I feel like a perpetual novice, always learning, and when I share that knowledge, I feel like I know it better in the end.

So, what does this article do for the novice? You’re either someone exploring web design for the first time, a web coder or developer who is trying to improve their design skills, or a complete web novice who wants to come up with a picture of what their business or personal site should look like. Whatever your situation, you want a web site that looks good, does what it should, and isn’t too hard to maintain. I strive as much as possible to build with those goals in mind.

This article walks through some basic aspects of design and shows you how I used them to create a picture of what my site will look like when it is finished. I used to this “design language” and “core elements” were just a bunch of fancy words people used to look smart. I was surprised when I actually took the time to understand them and practice them and found that my designs improved drastically. I want to help explain these concepts to you, show you how they work, and give a few resources where you can read even more.

My web site design in words

Balance … the headings (like “Home,” “Hire Me,” etc. as well as “Contact” and “News & Information”), logo (”Josh Can Help”), light header text (the “tame your technology” at the top), and lion tamer icon all provide the “heavy” while the rest of the text provides the “light.” It’s the interaction and distribution of heavy and light that make appropriate balance.

Balance can be used in several different graphic design elements… Creative Curio explains

Unity … All my freelance-related elements (yellow text) are grouped together on the right and all of the blog content on the left. Also, navigation elements are together, blog sidebar functions are together, and the posts are formatted similarly to come together as one. Groups of objects allows for macro white-space and makes finding the information you need much easier.

A List Apart speaks about white space (excellent article)

Emphasis … The left sidebar is prominent and draws the eyes through the navigation down to the tamer icon at the bottom. On the right, the headlines grab the attention subtly. Though the emphasis in this final design is how I want it, it’s the flow from focus point to focus point that is the most difficult. You want to provide a bold visual element to attract a visitor’s attention and then lead their eyes through the elements you want them to see. I’m not sure if I’m doing that appropriately but it should not be too hard to fix ex post facto.

A good piece on focus and not “squandering a user’s attention” from iLearn

Contrast … There is the obvious contrast of the left sidebar with the white space on the right. There’s also contrast within the sidebar with the colored navigation items along with the logo at the top. In the white space to the right, the black text on white background is the ultimate contrast. I would like to use a bit more exciting colors but it seems like the more vibrant they become, the more I lose the already minimal vintage feeling the website has. I may need to play with this.

A List Apart (again) with a very in-depth look at contrast. It’s a lot to understand but important.

Rhythm … the blog posts are formatted similarly and the blog widgets on the right will have similar formatting between them. The navigation items also have a rhythm between them. I see visual rhythm in a similar way that I see unity. Each of the different elements should roll from one to the other within the group. As soon as the

Here are a few of the highlights:

>>> I had a little bit of fun with the colors without going overboard. As you can see, there aren’t a lot of colors and the ones that are there are not particularly bright. I’m a big fan of very colorful artwork but I save my own exploration of this for my graffiti. My audience and my potential customers are typically over thirty (possibly far over thitry) and probably wouldn’t have the best reaction to a busy, extravagant design. My own design style concentrates on typography, cleanliness, and simplicity and I think this page reflects that.

>>> One recurring theme you see on the site and in my business in general is the lion tamer silhouette. I really like this symbol and want to use it as one of the few shapes I’m using on the site. You can also see I’m playing with some of the vector decorations that frame my business card. These two elements lend a slightly vintage feeling to the design while keeping it from feeling stuffy.

>>> The emphasis is clearly on the information to the left of the screen. This is (in order) a description of the work I do, a summary of the work I’ve done, and a blurb about me and what I’m all about. The next element are the blog posts which are secondary to the information you need to hire me for your projects. Finally, if you’re interested in reading more on my blog, there is the typical sidebar with information, ads, and more widget fun.

Here’s what might change:

+++ The description in the center might be different or look different. I don’t want it to compete with the “Josh Can Help” logo but it should draw the eye back up from the left sidebar.

+++ The left sidebar color may change. I’ve tried many different ones and I think I like the current one best but I’m not sure.

+++ The menu item descriptions may fall below the main text or appear when the mouse hovers over… not sure yet.

What’s next?

Complete and total destruction. I’m taking the default Wordpress theme, stripping it bare, and building back up into something wonderful. I’ll give an overview of what I’m doing and why but I don’t want to get into the nitty-gritty code details because it might be a bit too high-level (la-tee-da).

I’m always looking for a bit of inspiration, be it color schemes or layouts, and currency provides both.

Pull a bill out of your wallet (if you have one) and look at it really close. The detail is impressive and the layout is very interesting, particularly because it has a lot of limitations/requirements. Currency is very ornate and acts as a representative of the country at large. Cash is like a language: it speaks volumes at home and is typically useless abroad.

I found a few bills that I had been using as decoration and scanned them into my computer (fairly low resolution… is that still illegal?). I put the back and front together, then zoomed in and sampled colors that were representative of that bill. Those are the vertical brush strokes at the bottom. Then, I found a very contrasting color somewhere in the image and cut that across the middle. The result is interesting, to ay the least.

This Indian Rupee has a great combination of purple, light blue/turquoise and a little bit of pink/orange. In person, the colors look almost iridescent. The window is a watermark of a person (someone important I assume). I see an interesting 3 column design buried in there (portfolio?):

Falls under the ever-popular retro category for sure. Calm the ornateness down a bit and cut back on a few colors and that could be a very successful one-page design.

The colors on this one are some of my favorites. The right 4 on the pallet above combined with the pink is very vibrant and appealing. The back of the bill is slightly reminiscent of an American dollar with the building in the middle and the decorations around it. Whatever is extending out underneath the “1″ on the back is a super-superb mesh-type design. For some reason, I really like these symbols from the front of the bill:

Next up…Argentinian:

This one looks really royal and ancient, like it has some Greek influence. Photoshop helped me bring out some great colors on the back because this one is really faded out. The front of the bill has a great layout that I’m struggling to figure out a use for.. maybe a business card? With a cartoon avatar? Maybe a classy handout for a photography or art exhibit? That italic font combined with the small caps on the front is also a great feature of this one.

I like this one particularly because of its bold colors. Like the bill before, the vibrant orange in this one was brought out a bit in Photoshop. The layout is the familiar one from our own currency. I’m really feeling that font on the front though I can imagine that its usage is pretty sensitive (easy to use in the wrong spot or overuse it). There is a lot to see on this one because it’s a big bigger than the other ones (lengthwise). Great decorations surrounding the bust:

I took the end pieces, got rid of the surrounding pixels, rotated, and made a mirror image. Try making that little guy into a pattern… very “oriental rug” style.

Another note from Thailand with a really different color scheme. The two colors on the far right, the dark maroon/purple and the light yellow are a particularly nice combination; I can imagine those being used in a room or something. Lighten up the light colors and I could see this pallet used on, say, an upscale art gallery site or on a nice restaurant menu.

There were quiet a few shapes in this one that I like but, in particular, the corners on the front. The corner of this corner piece looks like an arrow, a shape I’m fond of for no discernible reason.

One more from the same country…

This one really strikes me because of just how ornate it is. The color pallet appears to be very limited but, zoomed in, there is a lot to see. The decoration is completely over-the-top but, because it’s cash, it’s allowed to be garish and distracting.

It might be hard, at first, to see where any usable inspiration could come out of this but it all lies in the details. I found the winged creature in the top left on the front very appealing; tone down the detail and stylize it and you could have a great crest for a logo. There are also several patterns in the framing that could be used, maybe in a more subdued color, as a background.

Finally, one of my favorites…

I got these bills a long time ago (15 years, maybe) from my grandpa and I never really liked this one in the beginning. They got put away for many years and just recently pulled out and this one jumped out as being so unique. Look at the guy on the front, how 50’s Hollywood is that image? The brown color is great (better in person) and the composition as whole feels, to me, very theatrical. The font for the “100″ is perfect and has this old west feeling to it. It’s also very creative how they incorporated the watermark spot into the unused portions of both portraits.

Hope you enjoyed that; I thought it was great to pull this apart a bit and really get up close and personal. I wish I could scan these with more detail but, well, that’s probably not a good idea.

This is a guide I wrote several months back. I have it posted on my homepage and at Squidoo but my homepage is going away in favor of a much simpler system so I wanted to move this. It’s also a bit more visible here, where I’m getting hits, rather than on the homepage, where I’m getting no hits! FYI, I also added a new, very important step (#5)…

This guide is for anyone and everyone who knows little about fonts, typefaces, and document design. This small primer serves as either an introduction to typography or all the information you’ll ever need to know as a non-designer. Whether you’re a teacher trying to deliver curriculum the best way you can or a CEO writing a formal letter, you should understand what fonts and styles say about your document and how to use them to your advantage.

I’m going to start this guide off with a warning: don’t dig too deep. Take what I say in this guide at face value and proceed no further. The art of typography is a complete mystery until you take that first step, read that first blog post, and fall deep into an obsessive-compulsive well. Before long, you’ll be second-guessing everything you thought was true and wondering if maybe, just maybe, you could try your hand at designing a typeface. Trust me on this one; take the relatively minute but very useful information that I’m giving you and leave it at that. You’ve been warned.

Who cares about typography?

The only people, ultimately, who care about the typography you present are the readers that are subjected to your work. I realized this after receiving a TERRIBLY designed assignment in class and wondered what that woman was thinking. I have seen the gamut of documents over the years and it’s more often than not that someone goes outside of the “safe zone” of Arial and Times and pulls it off well.

Am I implying that there is no hope for the design challenged? Not in the slightest! That’s what I’m here for… Josh can, after all, help.

We’ll walk through the (very) basic vocabulary of type and show you a few ways to add some personality to your documents without going overboard. I’ll show you some simple ways to make that PowerPoint presentation shine without losing control. I’ll also show you a few places where I get my fonts and a great link for taking that next step.

Step 1 - Write your document

There are people who write, there are people who design and then there are people who do both. If you are on one side of the fence or the other, you have somewhat of an advantage. By focusing on just one aspect of document creation and functionally ignoring the other, you can put all of your energy into that one task and really make it shine. If you do both, however, you might feel pulled in two directions at once and end up stuck and frustrated. It’s an ancient battle: content versus design.

In order to counter the tendency to multi-task, restrict yourself to one task or the other. Instead of writing your content in the design program (whether it be Word, PowerPoint, or your HTML editor), write your content in the simplest form possible. In Windows, try Notepad, the stripped-down text editor typically found under Start Menu > Programs > Accessories.

As you write, keep an outline format in your mind. If the project is a simple paper or letter, there is not too much to be concerned with (header, footer, salutation, sign-off). If, however, you’re constructing a how-to document or a multi-section presentation, you want to make sure you indicate headings, sub-headings, and/or sections. You’re not allowed to determine the look (yet) but you can make notes (say, labeling the headings with “h1,” subheadings with “h2,” etc) that will help you construct the document in the next step.

** Of course, make sure you save your document in this format. Not only do you want to keep all of your hard work thus far but this will also make it easy to move the text into several different programs and/or formats in the future**

You might wonder why I called Word a design program. Word is there to make your text look good and format it to the nth degree. I’ve been using Word for many years and I’m STILL figuring out how to use half of its functions. When I write in Word, I’m always futzing with the settings and the look of the document as I’m writing the document. When I write in Notepad, I’m not allowed to do any visual modifications during the creation so I stay in one train of thought.

Write first, design later. Your final product will reflect your focus segregation.

Step 2 - Add to your design program and choose an outline format

Once all of your text is written down and edited as best you can in whatever program you’re using, now it’s time to place it in the program you will use to modify the design of the document. Notepad or any other text program that does not format your content is great for this step because you won’t be adding text embellishments to baseline formatting. When you copy from Word back into another Word document, there are two sets of formatting that the program can use. When you copy from notepad, there is only one.

The easiest way to do this step is just to copy the original text from your text-editing program and paste it into the design program. This is actually an interesting step for those who are unfamiliar with the difference between formatted and unformatted text. Take note of what changes were made after you have added your text into the new program; you might be surprised.

The first thing to do now that your text has been added is to take the notes regarding sections and divisions and start thinking about what you want to do with them. Don’t make any alterations quite yet; you want to make sure you keep a holistic mindset as you go about this task. You want to preserve the flow of your document and use divisions to move it along. Each section is not a separate document with different formatting; they will each be a different idea building towards your main point. We’re not talking about fonts and bolds and italics just yet, only the structure.

If you’re writing a document for a website or a blog, the end product will not be a “Word document” or a “PowerPoint presentation.” Whether you write your websites directly in text or you use a different program like Dreamweaver or Nvu, I still recommend formatting your document in a word processing program. You want your final product to look polished and it is much easier to quickly edit the style in a word processor than it is in HTML. Write your doc, format and style it in a different program, then add the unformatted text to your web design program and make the appropriate changes there. It is a few extra steps but your document will look better and, in the end, you will save time. Oh, and the spell check is pretty handy too.

Step 3 - Choose and add section styles and list elements.

For this step, you’re just going to concentrate only on the headers of the document (the titles for your PowerPoint slides or the names of the different sections for your how-to guide, for example). Change the whole document to a basic font (I recommend Arial) and make sure your headings are separated from the rest of your text (meaning a line/break in between them so you can differentiate it visually). Also, make sure that the page dimensions you are working with match the final product. Set the margins of your document to give you the correct width of your final product (this is more important for web documents where there may be width constraints on the page).

Now, start playing with sizes and weights starting with the main headline. For this document, my main heading is the title, “6 steps to effective typography in any document” so I changed this to 18 point first to see what it looked like. Once that size looks about right for the rest of the document (meaning that it stands out but doesn’t dwarf the rest of the text), I’ll start working on the next headline, in this case “Who cares about fonts?” I changed it to 16 point but it looked too similar to the main headline so I changed the main to 20 point. Now, the differentiation between the heading, subheading and main text looks right. Another option would be to drop both sizes down one step and add bold to both.

If you’re working with sub headers, sub-sub headers, and sub-sub-sub headers, you may find that your main heading has to be enormous to differentiate itself from the rest. This might be a case of over-organization on your part and it might be time to look at how your document was built. Ask yourself: are all these headers necessary? Can some groups come together? Are the triple-sub-headings coming before 2 or 3 sentences? Sometimes visual styling a document can call attention to possible shortcomings.

It’s important to note something here… especially before we get into picking fonts. Aesthetics is a study of relativity. For example, I find myself perpetually confounded by the direction that fashion trends take. I also find it hard to believe some of the ways people decorate their homes. This does not, necessarily, make them aesthetically challenged; it speaks more to how relative taste is. Good typography, in its most basic state, is making something readable and inoffensive. In its most complicated, exciting state, typography is making words come alive and making them say something beyond their tacit definition.

If you are working on a classroom presentation, a business proposal for executives, or any other document that might reach a broad audience, concentrate on readability and organization. A document that no one wants to read (or can’t read) is not a great trade-off for expressing your creativity. I’m sorry to break it to you, but that’s the truth. I’ll let you take a minute.

After headings, play around with numbered or bulleted lists if you have any. My rule is this: if you’re going to call attention to the amount of items on the list or they are in some kind of order (importance, chronological), make them numbers. If it is just a list, go with bullets. As for lettered lists, I don’t use them too often but, when I do, the list usually falls between numbers and bullets - the items are in some kind of order but their rank is not important.

(Can you tell which one of these I would recommend NOT using?)

At this point, your document should look almost completely presentable, if potentially boring (remember: boring looks for a document is not always a bad thing). Next, we’re going to chose a font and line spacing. Yay!

Step 4 - Pick a font and line spacing

Ok, here’s the tricky part, picking a font that works. Here are the basic rules:

-> No more than 2 fonts on a page for your main content. Using 3 or 4 different fonts can quickly lead to a cluttered, ugly feeling to your document or web page. Please, however, experiment to your hearts delight; rules are made to be broken. The more you play around, the better you will understand the K.I.S.S. mentality.

-> Serif fonts (fonts like Times and Georgia that have “the small finishing strokes on the arms and stems of letters, and serve to form a link between letters” [fontsite.com]) are generally easier to read for long periods than sans serif (fonts like Arial and Verdana that do not have these marks). Pick up a novel and you’ll see why. Be careful when mixing serif fonts with sans serif font; it can be VERY dangerous. It can also, however, set them both off. Again, mess around to find the balance.

-> If you’re not sure a particular feature you added looks right and there’s no one else to check with, try something different. Typography just feels/looks right when it’s right. Trust your gut.

-> Keep your final product in mind. If you’re designing for the web, you have a very limited number of choices. I check this list at Codestyle.org out before I start picking fonts to make sure that what I’m using is common. Remember, web documents can have a whole list of fonts to pick from so pick two or three that you can live with.

If you will be sending the document to other people electronically for them to edit, they will need to have the same font you are using or else their computer will pick something else completely. If you are printing the document out or intend to distribute a final copy electronically, you probably want to convert your document to a PDF to retain the styling you worked so hard to achieve. My favorite PDF convertor is CutePDF and can be found here at Cutepdf.com for free. Very simple to use and consistently makes great documents.

In your document designing program, start with the fonts you have installed on your computer and see if any of them tickle your fancy. Look through that whole list and try a few of them out. Make sure you are applying to all of your text at once, including the headers. For all possible choices, look at the document a few different ways: try zooming in and out or changing the line spacing. Also, some fonts can be a bit bigger or smaller so you may need to change the size by a point or two.

what you want to look for is a font that not only stays legible but also one that communicates a particular message. Technical documents and how-to guides look great in Arial and Verdana but also try Arial Narrow or Trebuchet MS. Letters or stories look good in basic Times New Roman but experiment with Palatino Linotype or Bookman. If you’re not finding exactly what you want and the final version of your document will be set (meaning a PDF or printed out), check out some of the fonts on the following websites:

Biggest and best of the font sites. Try out their font search!

Lots of great, free fonts for you to choose from

John at ilovetypography.com chooses his favorite fonts and posts them in the black bar on the right. This is a great place to start if you’re interested to see what great type can do.

Just recently found this great font resource. More free fonts than you can handle! Be careful about installing too many fonts - it could slow down some of your applications (especially paint.net).

I encourage you to experiment, try new and different things, and find out for yourself what works and what does not. Picking a “symbolic” font for yourself or for your business can be a great way to lend a unique solidarity to all of your documents - something for all of your marketing, stationary, letters, and other communications.

If you can’t find the perfect font to fit the tone you’re trying for and you’re unsure what to use, better safe than sorry. Stick with Arial or Verdana for sans serif fonts or Times or Georgia for sans serif. It’s much better to pick an uninspired font that communicates your message than to go out on a limb and end up looking unprofessional.

Once you settle on a particular font for your document, work with your line spacing. Documents are much easier to read and look more appealing when they are spaced somewhere between 1.2 and 1.8 times the size of the font. This can be done with your word processing program (typically you’ll find the option by itself as “line spacing” or under the “Paragraph” formatting option). Try 1.2 and 1.5 and see what you think. Your document will span an extra page or two but the presentation will be much better.

Added: Step 5 - Watch your alignment

Here is something I picked up from reading a great, very simple book about design, Robin William’s (no, not that one) The Non-Designer’s Design & Type Books.This is a great start for anyone without design experience that either want to get their feet wet in what design means or want nothing to do with design but want their documents/webpages/anything printed to look better.

She talks about a very important piece of the design puzzle: alignment. Watching your alignment means that everything on the page is lined up with something else. Why do properly-formatted outlines look so good? Each level is aligned with all the other elements at that level. Why does a well-built spreadsheet look so good? Because Excel forces your information into a grid so it is easy to read. Robin’s Principle of Alignment goes like this:

Nothing on the place should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.

This is easy in Word because it formats the text and, for the most part (ahem) keeps it pretty. If you’re putting text together in a visual program, like Photoshop, it gets a bit harder. Use guides and rulers to make sure that left text edges line up with each other and try to make sure you can draw a clear mental line from the edge of everything to something else.

Step 6 - Try something new

So your document is basically finished! It sounds great, it looks great, it’s the whole enchilada. Now save it. Save it again. OK, now let’s try something fun.

Let’s play around a little bit with your headers and body text. Change your headings to a different font, maybe a serif one if your body is sans serif. Add a horizontal line after your subheadings. Try adding italics to key points for emphasis or bold weight to key sentences (go easy). Try placing relevant icons to headings or specific paragraphs (free, high-quality icons can be found here, at IconArchive.com). Use indentation to move the main text inwards or try moving your subheadings more towards the center. Play around with centering and right-aligning different page elements.

Most often, the times when I found something that worked really well in a document were when I was just messing around. It would usually look terrible after the first 5 changes and then I would do something different and come up with an idea. After a while of messing around with the text formatting and changing some of the existing styles, I would end up with a unique look that I really liked.

Another technique is to just leave it alone for a day. Try something new, save it as a different file name, then come back to it the next day. You may like it more, less or not at all. You also might come up with another little tweak to go along with your first one that really ties things together. Give it time, let it marinate, and you may just end up with something you can be really excited about.

Step 7 - Follow the rules

For the detail-orientated, I’ll direct you to a great list of typography rules to follow. There are quite a few of them but if you want that professional look, you would be wise to glance through and make sure you’re not including some glaring errors. The list was be found here, at About.com.

My last business card ordeal was such a cluster that I’m not even going to link back to that post. Besides, it seems to be getting an inordinate amount of p0rn spam comments and I’d rather NOT help those garner any more attention.

I digress…

I also need a business card and have not been giving this important piece of a business that relies on word-of-mouth enough attention. I was pondering new designs when I came across an artist who does letterpress artwork. I posted his work on a forum I frequent and got offered an excellent deal on letter pressed business cards. I immediately went to work on the design and came up with this:

I was digging it but the printer said that each extra color was an extra plate and would cost more. The printing was already more than I wanted to spend so I went with all-black:

I was really enjoying the design and loved the “old design for new techology” meme. I liked it so much, I posted it on the forum where I met the printer. It didn’t meet with quite the same approval as it had in my brain. Here’s what was said (verbatim):

My eyes are drawn all over the card and can’t find any focus. The font/italics aren’t very good and seem amateurish.

I like the card, but it makes you look like a lion tamer or animal trainer not a tech guy. Maybe have him using the chair and a whip on a PC? That is if you are going to stick with the original idea… And the accents that are on the corners, I would change it to one continuous border, have it just on the top and bottom make it look a little busy.

it’s just hard on the eyes. One more thing… you do look like a lion tamer. My suggestion is to go with the motion of the wheel and not try to reinvent it.

As for the 1920’s circus theme.. It can be done, however I think you missed the mark. To me, frilly script fonts, and borders don’t say “circus” to me. I’m also not making the connection between circus and technology. I’ll also add that your message “Josh Can Help” also does not fit with a circus style theme.

Ouch! I was convinced that no-one really understood where I was coming from with the design but I knew that these people had piles more experience than I do and there was very little that they were liking about it.

I was taking it personally and that is the worst way to try and learn anything. So I read and re-read everything and came up with a few more toned-down versions. For the record, I still like the first one the best.

These look cleaner and more toned down but, in my opinion, they were starting to lose character. I realized that the “look” I was going for was, more or less, only in my head.

Well, the wolves liked these much better…

If “Josh Can Help” is your company name, it should be the most important element on the card, and your tag line should be secondary. I’m still not feeling the overall style / idea, but I figured I’d point that out.

The simple ones are an improvement. I agree with the above poster, the company name should stand out the most. I’d also make the tamer bigger since there is so much room in the middle.

Try Vertical. Take the logo, or graphic, put in on top of the card with the ornate corners top and bottom. then imprint the rest below the graphic. seriously, try vertical. see how it looks.

Hmmmm…. then, a little more encouragement (the only reason I didn’t scrap this and start over):

I think that most people on this board don’t quite get letterpress printing… I personally like the approach you’re taking, talking high tech with low tech works for me…. and the lion tamer graphic works too. Letterpress with the right stock is a really nice tactile thing… and a classic serif font is a must for it. Sans serif with letterpress would be a waste of the extra money for print. You might as well print them thermographic instead if you go that way. The only change I would suggest is to have the graphic in the top half of the card and all the text below it. The script font was ok, but not great, given the context you’re aiming at for the design, you likely wouldn’t have seen a single word in-line in a script in a sentence, a true italic, yes, but not a script. Now if you were to take the card vertical and do one word per line stacked and larger with tighter leading, some caps as well, then it would work. I hope this helps.

With this new information, an idea to rotate it to vertical, and a few kind words, I came up with this:

I was REALLY liking this, much more than my original design, and it was very “letterpressy.” The forums went wild!

That one looks very good. I like the changed orientation and the subtle ornate borders. I would work on the font for Josh Can Help. Something a bit more exciting and antique.

my thoughts exactly. looking much better!

I was thinking about a different font as well and also wanted the text to be aligned on both sides (justified). It also needed to be in a vector format (Illustrator). I was scared to work in Illustrator (I’ve opened it five times since I bought it) but I found a few tutorials that helped and came up with the final version minus decorative elements:

The dimensions are a bit off and it’s not perfectly centered but the font, leading (space between lines), tracking (space between letters), and text are all finished.

What do you think?

Edit: final design getting printed: