If what you have to say on your website is so important, then what can we do to make it a more enjoyable experience and better compliment the content with the way we design for it?

Appropriate typefaces

Typography is not about picking a font that looks cool, but rather choosing a typeface(s) that compliment the medium and purpose. With recent advances in web typography (ahem, Typekit) we now have more control then ever over what typefaces we use for our content — but with more control, we must be even more careful and have a better understanding of type.

Web typography tips:

» When choosing a font for prolonged reading, try something with a larger x-height (for smaller body copy) or study serifs for improved readability and reader comfort.

» Choose typefaces that compliment the content, look and layout

For more on font pairing and web typography:

• On Web Typography
• Thirteen ways of looking at a typeface
• Type inspired interfaces

Breathing room

Websites or blogs with tons of reading require breathing room — or better yet, remember that white space is your friend. It’s difficult to read and stay focused on any information that is, for example, being crammed up against ads, has tight line spacing, or has cluttered design elements.

Don’t worry, it’s alright for users to scroll vertically to get to information. Don’t feel like you need to cram it all in there.

Here are a few design tips to help your content breathe:

» Improve your line spacing of body copy: a good rule of thumb is 1.5 em line-spacing of your body copy font size.
» Remember, white space is good and less is more

Websites with good breathing room:

• http://theswishlife.com
• http://fusionads.net/
• http://sushiandrobots.com/journal/

Establish an information hierarchy

When it comes to readable content, one thing to remember is  people do not like to read — they like to scan and get the information they want quickly. Establishing a strong hierarchy allows the reader to easily scan your website, blog, article, etc. for information without spending too much time on information they do not want to see or read.

A hierarchy guides your readers around the page and creates a more enjoyable experience for them.

Allow for digestible information

If your website or blog has length passages of information or words, try designing in a way that breaks up the content into smaller, digestible blocks of text. A possible solution could be having a home page with short excerpts of articles/information that lead to the entire story by clicking on a link.

Use color and use it well

Color should not only be used to create a mood, but also to draw attention to specific areas or text. Websites that use color sparingly and well typically have great results because of it. It helps readers scan and draws attention to important information.

A few tips on color usage on the web:

» Reversed out (white) text on dark backgrounds can make for difficult, prolonged reading.
» Using too many colors can distract the user and can cause confusion over important content/information
» Use color to communicate a mood

Contrast and call to action

Contrast and call to action allows information to be broken apart and also (like a good hierarchy) easily scan-able. Contrast can be used in typefaces as to separate headlines from body copy, while it can also create areas of darker/brighter color to draw attention or call upon a certain area of your screen.

Contrast can also be used to create tension and set a mood for the content. Try complimenting your content with appropriate typefaces or color. Also note that establishing call to actions early on in the sites preliminary stages is important content management and structures the users experience.

While all of the above factors seem simple in practice, it is often easy to just begin designing and forget about the content and medium in which we are designing for. Remember, content is king, but design is the land of which the king rules. If you have the above thought out and planned before you start designing it will pave the way to a more successful and relevant design.

Mike was a follower of mine on Twitter and after discovering my portfolio, decided to fill out my online Logo Design Project Worksheet. After reading his responses and a few initial phone conversations I felt that Mike and I shared something very similar, and not because we were both independent workers; we both had extreme passion for what we do and also valued thoughtful, relevant design. Continue reading below for a look into Mike Tittel Photography’s logo design process.

Design Brief

Again, Mike, a freelance adventure sports photographer [ view his portfolio ], shoots both editorial and commercial assignments, as well as maintains a stock collection which contains over 45,000 rights managed images. His primary goal, and main reasoning for getting in contact with me, was to reach further into the commercial photography industry and work for clients such as Nike, New Balance, etc. Essentially he was looking to expand his presence and market reach.

A few notes from my clients Logo Worksheet:

• Simple, clean
• Memorable and approachable
• Easy to work with across various mediums
• Something that reflects and works with his portfolio and current colors; background of current website is black

Brainstorming

After reviewing Mike’s portfolio and worksheet responses, my first initial response was to make the logo bold and dense to compliment the beautiful and powerful extreme sports photography he produced. I also felt that a bold logo/mark would lay well over busy images, since the logo would most likely be overprinted on top of busy background and photographs.

Like all my designs I started off with a sketchbook and pencil:

While many of the above sketches are completely unrelated to the produced concepts, sketching is important as it let’s a designer get as many ideas out as possible in a short amount of time — great activity for the brain. Also, when searching for ideas and brainstorming I like to doodle completely unrelated drawings — sort of allows me to free my mind for few minutes, before coming back to a thoughtful process.

Although the final concept was the first presented concept (see concept 3), the first below concepts were produced to have a more action/sports feel to it.

Concept 1

The ‘M’ in Mike was emphasized through the mountain/lightening bolt mark, with the additional two lines emphasizing speed: all which can been seen through my client’s photography.

Concept 2

Drawing from the above concept, a second mark was produced to emphasize speed, direction, balance and strength.

Concept 3 (“The Chosen One”)

Prior to the above concepts, this concept (seen above) was presented to the client first (sometimes we get it right on the first try), which I was particularly excited about. The image captured all of the notes Mike discussed (simple, clean, memorable, reflective of his work, etc.)

While Mike was more drawn to the first two concepts and direction they were headed, I felt that they stemmed too far away from the fact that Mike was a photographer. What Mike and I particularly enjoyed about concept 1 and 2 was the strength and bold feel, so the typeface, Knockout by Hoefler and Frere-Jones brought back the extra punch the first two presented.

The point in the ‘M’ was replaced with an orange lens with the negative space resembling a simplified camera body (see image below). This logo was much more flexible, as the ‘M’ could also be singled-out as a mark on its own. I also told Mike that this logo would turn out to be his own personal “Fedex gem.”

Logo applied to the website

Business cards and stationery

The business cards were printed by Jakprints and implemented a fifth color, metallic silver, on the backside ‘Mike Tittel.’

Testimonial

While it’s not everyday that you get to work with clients that are not only a pleasure to communicate with, but equally as thrilled with the process AND the result, Mike was kind enough to write a fully detailed testimonial, which you can read on his blog.

While this is only the start of a few projects I’ve been working on with Mike and his company, it’s been a pleasure working with him up to this point and wish him and his company the very best success in the future.

Business Inspirational Collections

1. 21 Simple But Impressive Corporate Websites of Top Brands
2. 30 Most Inspiring Business Websites
3. 30 Beautiful Real Estate Websites
4. 50 Excellent Corporate Website Designs
5. 40 of the Best Websites of Non-Profit Organizations
6. 50 Inspirational E-Commerce Websites
7. Corporate Showcases and Typographic Resources

Color Inspirational Collections

1. 30 Beautifully Blue Web Designs
2. 50 Beautifully Dark Web Designs
3. 40 Inspirational Black & White Websites
4. 25 Inspirational Black Websites
5. 35 Black Web Designs That Show Us That Once You Go Black, You Never Go Back
6. 33 Nicely Designed And Well-Colored But Simple Web Designs

Portfolio Inspirational Collections

1. 50 Excellent Designer Portfolio Sites
2. 25 Gorgeous Graphic Designer Folios
3. Top 25 Amazing and Original Portfolio Designs of 2008

Misc. Inspirational Collections

1. Amazing 2008 November Websites
2. Top 100 Web Designs of 2008
3. 100 Websites With Outstanding Artistic Design

Typography Inspirational Collections

1. 27 Beautiful, Typography-based Web Designs
2. 15 Beautiful Typography Inspired Websites
3. 101 Examples of Text Treatments on the Web
4. 20 Examples Of Dark & Minimalist Website Designs With Great Typography
5. 40 Beautiful Examples of Minimalism in Web Design
6. 20 Elegant & Clean Websites
7. Stunning Modern Websites Design

CSS Inspirational Collections

1. 30+ Awesome CSS Websites
2. The Best CSS Designs of 2008
3. 50 great websites designs for your inspiration

‘This N That’ Inspirational Collections

1. 30 Beautiful Menu Examples
2. 30 Beautiful Website Footer Designs
3. 50 Inspirational Website Introductions
4. 36 Beautiful Login Page/Form Designs
5. 50 Beautiful Websites with Illustrated Landscapes
6. 50 Beautiful Hand-Drawn Web Design
7. Showcase of Beautiful iPhone App Websites
8. 35 Inspirational Software and Application Websites
9. 25 Great Examples of Using Gradient Effects in Web Designs
10. 41 Sleek Single Page Websites
11. 50 Monochromatic Website Designs

Feel free to add your own favorite inspirational collections in the comments below.

The video starts out with a gathering of various typeface deciding whether or not to offer membership to Zapf Wingbats… hehe!

If you just joined Twitter or still thinking about it (sign up here), one of the first questions I remember asking myself was “how do I meet friends that share my interest in graphic design, website development and blogging?”

Below are four steps to befriend other graphic artists, developers and bloggers and grow your social community on Twitter. And don’t forget to follow me, I always try to be helpful.

Follow Lists

• JustTweetIt: A Graphic Designers Directory
• One Uber Twitter Follow List for Creatives & Geeks
• Designers to Follow on Twitter
• 50+ Designers to Follow on Twitter
• Top 8 Friendly Designers to Follow on Twitter
• 100 Web Designers to Follow on Twitter
• 10 Designers you Gotta Follow — also from JustTweetIt
• Social Media Directory for Designers

You can also check out 26 Twitter Graphic Designer’s business cards. See if their skills are worthy enough before following them.

Web Apps

• Twubble: searches your friends graph and picks out people who you may like to follow
• Twits Like Me: finds others that share your same interests through your tweets
• TwitDir(ectory): It’s like Google for finding Twitterers with similar interests

Blogging

While recently asking to my fellow Twitterer’s if they would be interested in submitting their business cards for an upcoming post and after publishing the article (with links to mine and their accounts) my followers increased over 100 people overnight. Here’s why:

Through the power of the almighty Retweet making it possible for their followers to find me, submit their business cards and befriend me, and through the popularity the article received once published, I was able to reach out to new great friends and help them discover me.

It also helps to have a Twitter icon somewhere on your blog as well. Don’t miss out on my upcoming Twitter submission post to submit your BEST Printed Design Projects. If interested, please email me at brihoff@mac.com with an image of the project and a few sentences regarding the creative process or inspiration for the piece.

When all else fails… Steal friends

Worse comes to worst you can always steal The Top 10′s friends. Pick through their thousands of followers and start following them — pretty sure they have plenty of great people to follow and hopefully they will follow you back.

This post is to help other find “their inspiration” by spreading your LAST.FM love. Discover what people just like you are listening to while designing or blogging.

It’s simple: Leave a comment on this post, with a link to your Last.fm profile and a sentence or two about what you do.