These days, most people don’t get their basic business documents like newsletters and flyers designed by professionals. Most of the time small businesses use a word processor to publish documents in-house. Just because these documents are homemade, doesn’t mean they have to look that way. Here are some basic typography tips on getting your home published documents to look a little more professional.

1. Use no more than two fonts

This is a rule that I see broken all of the time in self-published newsletters, brochures, flyers, etc. Many people feel that using many different fonts in a document will give it some flare and liven it up a bit. Or, they may think that using an abundance of different fonts will help communicate the message of a certain section of the document better. I can understand this thinking. But, unfortunately, it doesn’t work. Usually what ends up happening is the person trying to read the document gets confused and agitated. This happens because there is not a single visual voice to the document, resulting in an unprofessional look and feel.

The solution is to keep your font choices to a maximum of 2 fonts. This will keep the visual tone of the document consistent and help the reader, well, read. It may be hard to resist using all those pretty fonts, but you can do it! RESIST!

2. Don’t double up

There are two basic kinds of fonts out there: Serif and Sans-serif. Serif fonts have little “feet” called serifs, and Sans-serifs have none. Examples of Serif fonts would be: Times, Georgia, and Baskerville. Examples of Sans-serif fonts are: Helvetica, Arial, and Tahoma.

If you are going to be using more than one font in your document, use one Sans-serif and one Serif font. Never use 2 of the same kind of font. Using 2 different kinds of fonts gives a good contrast and gives the page life in a professional looking way.

3. Use space wisely

This tip is up to your discretion and really depends on the type of document you are producing. The key in most professional documents is keeping things legible. Let’s say you’re producing a newsletter for your business. Don’t try and cram as much info as you can on the page. Let it breath a little. Give your readers eyes a break. Whitespace can add a sophisticated feel to your documents. Just think of the difference between the layout of a luxury jewelry ad and some junk mail piece you get in your mailbox. The jewelry ad most likely uses a good amount of “empty” space, the junk mail piece crams everything it can into a small space. Now you have to decide if you want your publications to look elegant, or like junk mail. It’s up to you.

Conclusion

These are just a few basic typography tips to make your desktop publications a little more attractive, easy to read and professional. Now go make some great looking stuff!

Other resources

Typography tips for graphic design students
10 Common Typography Mistakes
Styles, Weights, Widths — It’s All in the (Type) Family

This weeks pick: David Fooks

David Fooks has done well with his little portfolio site. He keeps it minimal, but maintains interest throughout the site.

The Homepage

What I like about the homepage is that it takes an original path, but it doesn’t over complicate things or confuse the user. The use of illustration gives the site sense of mystery. The first thing I wanted to do was see what the jellyfish and the bear were all about. Upon rolling over them a little speech-bubble came up letting me know what this link was pointing to.

This feedback is what makes the illustrations work as navigation. The jellyfish and the bear are also effectively doing what I assume David wanted them to do: attract attention. Most likely users who go to this site will click on either of these illustrations pointing them to one of David Fook’s portfolios.

The Navigation

The main navigation also uses cleaver little illustrations with the same type of feedback as the links below. The icons are used well, and communicate what they are effectively.

The Portfolio

The portfolio section is a nice set of thumbnails ready to be clicked. This is a great way to organize portfolio peices. It gives the user the ability to quickly scan the work and until they see something that resembles what they are looking for.
Once clicked, the thublnail takes you to a project detail page that discusses the project. The entire portfolio can be navigated through this section as well without having to go back to the portfolio page.

Call to Action

Every site should have a clear call to action. This site’s call to action is on every page near the footer. A large graphic urging the user to “contact me” is used to clearly state what the user should do.

Conclusion

This site is one of the better sites that I’ve seen. Classy, elegant, and cleaver. David Fooks has done an incredible job and avoided the trap of over-designing. He has proved that simple does not equal boring.
Visit This Site

What do you think?

I’ve been seeing a lot of articles being published these days on whether or not to use a graphics program, like Photoshop or Fireworks, to design mockup of a website. The new trend seems to be going towards designing in browser using mostly markup and skipping Photoshop all together. There have been lots of great articles written by some really good designers who subscribe to this technique (This one is especially good).

Some good points

At first the technique sounded like it could be a good idea. And for some projects I think it would be. A content-heavy site that would need to have a stiff structure to organize the content could be designed with mostly markup, as the graphic elements would be minimal. It would certainly be easier for the client to grasp what the site would look like in the browser, and it would also cut out a step in the process. These are all great points.

I still use Photoshop.

Most of the sites that I design are for small businesses. These clients needs a site that gives voice to their message through the design. Using Photoshop to create my mockups allows me, in my opinion, to be a bit more creative and push the boundaries. I get to let my artistic instincts guide me. Making revisions to the PSD is much simpler that messing with the code. Getting things lined up and approved before the coding part makes the whole thing go much more smoothly. Also, code is boxy. And when you start with code, I would imagine that it would be hard to get away from that square look. This article is a good counter point to the in-browser argument.

Like I said, I could see designing in-browser with mark-up as beneficial for some projects, but not all. I think that it would behoove (yes, behoove) any designer to adopt both techniques and apply them accordingly.

With the arrival of the blog and many different content management systems, it is quite easy for a website owner to add valuable content to their site regularly. Valuable, fresh content is what the internet is all about. Users are searching for fresh information in your area of expertise every day. It would be a shame not to take advantage of the many options that you have when you own a website.

Get a blog

If you don’t have a blog that is connected to your site (e.g. www.yoursite.com/blog), it would do you good to get one. This is the easiest way to update your users with relevant content that they are looking for. Having your blog directly connected to you main website has it’s advantages as well. When people visit your blog they are already, technically, visiting your site. They are only a click away from your main site. We use WordPress on this site for blogging. It’s easy to use and has loads of flexibility and functionality.

Build a loyal following

Having a regularly updated site keeps your user base coming back for more. I know that I am very loyal to a handful of sites because of this very fact. They have updated information constantly (almost on a daily  basis) and articles on subjects that I am interested in. This is the superiority of the web to print. Imagine if you updated your brochure or printed a new ad in the paper every day. The cost would be huge!

Get on it!

So if you have a newly designed website, or an old one that needs a little love, show it some. Get in there and write an article or update a page on your site that has real value to your users. A website is a tool. If you use it properly, it will pay off.

In researching vertical navigation for a particular project, I ran across some amazing examples. Listed below are some of the best that I found.

Worship Leader Insights

Hommu

House Industries

Metal Mother

Open

Riot Industries

Conclusion

Navigation is one of the most important elements in web design. It must be clear, understandable, and attractive. Both horizontal and vertical navigation systems can be effective in a design. When do you think a vertical navigation is the best solution?