We’re never one to shy away from darker color palettes and Human Resources MBA was the perfect opportunity to apply that. The design concept here was all about using textures—namely wood, leather, and paper—to come up with a look that meant business.

On the homepage, we gave visitors four main navigation choices, and recycled the look for those boxes in the sidebar widgets on the rest of the site. We also used a red wax seal for the article badges to provide a pop of contrast that still fits the elegant, traditional look. As for typography, we went for the dependable Georgia for paragraph text and Arvo by Anton Koovit for headlines.

Did we use the Genesis Framework once again? You bet.

Continuing our long-term project of designing online degree websites, we took on a specific niche in the next stint: a resource site for the Best Masters in Nursing.

It’s become a pretty effective strategy to find the right photograph to convey the ideal message of sites like these, supported by a look and feel that’s appropriate to the theme. In this case it’s friendly, excited medical practitioners and the cool, clean hues of blue and green for a hospital-friendly look without looking too drab or sterilized.

Once again styling the search box was top priority and had to be a prominent feature of the site. And as usual, the Genesis Framework proved to be a very helpful tool in delivering the live site in a speedy fashion.

One of our latest clients asked us to build a website geared towards online degree hunters. Our response was to give Top Colleges Online a look that spelled classic and modern at the same time.

The design was actually inspired by the image you see in the header (which also repeats in the footer). We maintained a highly scannable, readable look, and mixed Droid Sans with Calluna Sans all around.

One important requirement for the site was styling the Degree Finder search box, which was a little challenging with the combination of its iframe and drop-down menu use. We chose to embrace progressive enhancement in applying styles to the form elements instead of bulkier solutions such as JavaScript UI frameworks.

We’re also fortunate to work with a client that uses the Genesis Theme Framework, making our jobs easier in laying the foundations on their site. Plus, flipping the sidebar location to either left or right becomes easy as pie.

The all-new Blog Search Engine carries a cleaner, more modern and professional aesthetic, and makes sure to put the featured blogs in the spotlight by the use of prominent screenshots of their websites.

Since there was going to be a lot of images on the page, we thought it best to use solid blocks of color for everything else, including the social media icons on the sidebar. An important element to the design was grid alignment: we wanted to make sure that the boxes on the content area aligned with those of the sidebar, as well as the categories in the footer, so nothing looked out of line.

Another little detail was taking a featured blog’s category, e.g. “animal blogs” and using some regex magic to turn it into singular labels at the footer of each item. It was of course more important to highlight what type of blog it was than the usual date the post is published and using singular instead of plural description focuses on that single blog, instead of simply belonging to a group of blogs.

Check out Blog Search Engine today! Perhaps after you enroll in our blog design services you’d gain a wonderful citation on that directory.

We recently helped Geeks Are Sexy splash on a fresh coat of paint on its website. There are a few new features like the featured entries at the top, while some elements were retained in the redesign, still in their familiar spots.

Behold the new Geeks Are Sexy!

Turns out the answer lies not in poking around the Genesis code but WordPress itself. The prepend_attachment function has a filter that will let you modify how the attachment image—including its wrapper paragraph—is displayed. So all you have to do is add a filter that modifies the image size, like so:

add_filter('prepend_attachment', 'ag_prepend_attachment');
function ag_prepend_attachment($p) {
    return '<p class="attachment">'.wp_get_attachment_link(0, 'large', false).'</p>';
}

Drop this in your functions.php file and you’re set. Since this is a WordPress filter, this tip should also apply to other WordPress themes.

Redesigning AppleGazette was no small feat, even though the design remains familiar to its regular customers. Visually, we had to strike a balance between paying homage to Apple’s design influence and maintaining the site’s own identity. The result is a cleaner, lighter, more streamlined, more modern approach to blog design. If there ever was a site to take advantage of CSS shadows, gradients, and rounded corners, AG was certainly the place to do it!

Like what we did with ForeverGeek, browsing through image attachments was another mandatory feature for our network blog—more sites should do this.

The next challenge was in integrating advertisements and special content—not just your typical banner ads, but specially formatted user-submitted news and app reviews featured in between posts. GravityForms and custom fields helped accomplish this. Another favorite tool in our utility belt was the Cycle plugin. And needless to say, we used the Genesis framework for this one.

Visit AppleGazette and see the new design live!

The just-launched Recipe Finder blog was a quick exercise of designing within the confines of the web browser. Usually the first step is to construct wireframes and head to Photoshop (or Fireworks, or even Illustrator) but in this case, it was more efficient to do straight-up coding.

First, the blog used graphic elements from the already-running Recipe Finder main site. Second, although the layout was different, there was no need to type up markup from scratch thanks to our WordPress theme framework of choice, Genesis. Lastly, any code that needed to be typed was simply copied and modified from previous sites we’ve worked on. Finding things to reuse is key.

Come check out the new Recipe Finder blog!

We at Splashpress Media are having a re-design bash and this time Erati has been called upon, dressed in a new and exciting look. Covering news, view and reviews in the Television industry, styled with a clean look.

We worked up a plan to tie together the content for a reader on the homepage so that it looks clean, professional, and easy to read. Since TV is a visual medium, using lots of images was a priority feature.

We have used the CartoGothic Std font by Fontsite.com and implemented it using the @font-face. The logo has been overhauled and different sections have been created for content for better navigation. We have yet again trusted the Genesis Theme Framework to handle our work.

Enjoy the new design at Erati!

Yes, we’re still on a redesign spree with our network websites and this time it’s Freelance Writing Jobs, completely unrecognizable from its old look. It’s lighter and shall we say more writerly—the logotype, hues, textures, and use of manicules all lend to that feeling.

Much of the work went into reorganizing the homepage such that everything is at your fingertips. From the introductory message about FWJ to the equal height boxes and aligned headings (with a little help from jQuery of course), everything is neatly arranged so you don’t get overwhelmed by the information this massive site has to offer. The grid is your friend.

FWJ’s new logo uses the Philosopher web font, which is designed by Jovanny Lemonad and available for embedding through the Google Font Directory. Under the hood, we’ve turned once again to the trusty Genesis Theme Framework.

Check out the new design here!

Next up on our roster was a realignment of ForeverGeek. A realignment, you say? If you’re familiar with the old design, this new iteration still carries a similar look and layout, but with a few new touches.

There are now four main sections on the homepage: Features, Games, Anime & Comics, and the Rest—color-coded so they’re easy to distinguish. At the top, the latest post is featured in each box. In the content area, each section dynamically cycles through each post (with the help of the jQuery Cycle plugin).

Another new feature is the Media Wall, located at the footer of every page. Aside from categories and tags, letting visitors explore your site by images is a smart idea. Clicking on a thumbnail leads you to a larger view of the image, also containing links to related images added in the same article. The image attachment functions in WordPress make this easy to implement.

On the CSS3 front: While rounded corners aren’t really a new thing on ForeverGeek, the border-radius module makes it easier than ever. (It’s still a little complicated, but thank goodness for modern browsers!) We also used a bit of box-shadow and webkit-transition for the hover effects. And of course, a sprinkling of @font-face for the headers to use a typeface that matches the original branding.

So there you have it folks, the new ForeverGeek. Hope you enjoy the new site!

Just a few days ago we updated the Business Logs website with a fresh new look by its new design team, Ia Lucero and Ali Hussain. The homepage now gives you easy access to everything you need to know about our company: our goal, portfolio, ideas, and how to contact us.

The old design was light, narrow, monochromatic, and safe. This time, we went bolder with a dark design and a splash of bright green.

The new color combination is a business-y take on our parent company colors. We’ve also embraced the brave new world of CSS3-based rounded corners, shadows, transition animations, and custom typography. jQuery is always helpful, whether you need to add a carousel plugin or align box heights.

Under the hood, we’re still proudly powered by WordPress, but use the Genesis Theme Framework on top of it to speed up the development process. Working almost entirely in the functions.php and style.css files saves lots of time and appeals to the minimalist in me. We’ll talk about this in more detail in another article.

We hope you like our work, and welcome to the new Business Logs!

Today, I’m going to point you in the direction of 10 websites that are built on WordPress.org that will surprise you.  These sites come from large corporations, political organizations, universities, celebrities and more.

If you’re not sold on what the free WordPress.org blogging application can do for your business blog and website, click through to see some of these examples.  (Note: these are in no particular order.)

1. MTVU

This site is owned by MTV and uses a WordPress magazine theme to draw attention to a wide variety of articles.

2. Boston University Admissions

Several sites owned by Boston University run on WordPress, including the official Boston University Admissions site.

3. Jay-Z

Many celebrities use WordPress, and if WordPress is good enough for Jay-Z …

4 . Forbes Blogs

I write for a Forbes blog (Work in Progress), so I can attest to the fact that Forbes blogs do run on WordPress.

5. National Geographic

This is a cool one!  The National Geographic site in the Netherlands is built on WordPress showing its popularity around the world.

6. Harvard University

Need to see an Ivy League school using WordPress to really be impressed?  Check out the Harvard Gazette.

7. Nokia – Now Playing

Want to see a well-known consumer products brand using WordPress?  Check out Now Playing by Nokia.

8. United States Mission Geneva

Even government agencies use WordPress.  Visit the United States Mission to the United Nations and Other International Organizations in Geneva site to see an example.

9. Pepsi Refresh Blog

Another big brand using WordPress is Pepsi as part of its popular Pepsi Refresh campaign.

10. The Toledo Museum of Art

Even museums use WordPress!  Check out the Toledo Museum of Art site.

What cool business sites do you know of that run on WordPress or another popular blogging application?  Share your thoughts in the comments below.

It’s time to highlight another business doing great things with blogging applications in the WordPress for Business Websites series, and the company website featured today is Le Tutor.

As Aaron of Le Tutor explained in his submission:

“I love WordPress for business applications and advocate that all small businesses convert to using it. It takes all of the pain out of running your own website and you can have an amazing looking website for a quarter of what design agencies will charge you for a sub par site.”

The Le Tutor site has a great color palette.  Its clean design and use of images makes it easy to find information.

The site also makes great use of video by incorporating a testimonials section filled with both videos and written testimonials.  Also, notice the strategic use of the sidebar to include information, a contact form, and video content.

The Le Tutor site also includes a blog filled with written and video posts that offer a mix of informational, educational and fun posts.

Kudos to Le Tutor for demonstrating that there is so much you can do with WordPress to make a business website standout without investing a huge amount of money.

To have your website considered for the WordPress for Business Websites here on BusinessLogs, follow this link, and leave a comment on the Call for Business Submissions post with your company website’s URL.

Think of it this way — your business blog content is only as good as how it is received by visitors.  That means you need to not only write shareworthy content, but you also need to adhere to your brand promise by presenting a business blog that is well-developed and designed.  In other words, brand, design and usability must live cohesively in order for your business blog to be the best it can be.

Let’s look at those three keys to business blogging success more closely:

1. Brand

Your business blog is an excellent channel to communicate your brand promise, messages and image and enables you to connect with and build relationships with consumers around the world.  It gives you a unique opportunity to develop loyal brand advocates who will help you spread the word about your brand, defend your brand, and build your business both on and off the social web.  Follow the link to learn about business blogging and brand building.

2. Design

Your business blog design creates an immediate perception in consumers’ minds about your brand and instantly creates expectations for the business behind that blog.  It’s essential that you invest the time and money necessary to design a blog that clearly communicates your brand promise.  For example, when I created my blog for women working in the field of business, Women on Business, one of my goals was to bridge the gender gap that’s inherently part of the business world.  Therefore, I avoided using pink and other overtly feminine elements in the design.  Ensure that your blog design is appropriate for your business, brand and audience for maximum impact.

3. Usability

Your business blog should be easy to use.  In other words, it should load quickly, have clear navigation, and just work.  For awhile, every new website and blog was filled with flash animation, pop-up ads, and other nifty features that seemed cool but really only hurt the user experience on the site or blog.  That’s because people want to be able to find the information they want or need quickly.  The Internet is a cluttered place and people are fickle in their travels across the web.  If they can’t find the information they’re looking for on your business blog quickly, then they’ll leave and find another blog to suit their needs.

For example, visit the Walt Disney World website when you have a few minutes (or perhaps many minutes).  This is a perfect example of a website that is simply not usable.  It takes forever for pages to load, often they load incorrectly, and it’s simply a cumbersome site to navigate due to all the extra animation, features, etc. cluttering every page.  I love Disney.  I live near Disney World.  I have reasons to visit the Disney World website often (e.g., to check park hours, make dining reservations, etc.), but I dread every time that I have to visit because I know I’ll end up annoyed and spending five times longer than I should have to in order to accomplish a simple task.  That’s exactly what you want to avoid on your business blog, so invest both the time and money necessary to ensure your business blog is very usable.

Image: stock.xchng

Today is Day 1 of the new WordPress for Business Websites series, and the first company website to be highlighted is Accelerated Business Results.

When Laura Mattis of Accelerated Business Results provided the URL to her company website, which is built on WordPress, here is what she had to say:

“My company just recently updated their website. We made the move to WordPress and have been thrilled. We’re doing some creative and valuable things on the web-front these days, especially in the SharePoint and WordPress spaces.”

Take a lesson from Accelerated Business Results, and check out the screenshots and commentary below to see just how great WordPress can make a website look!

The use of color and the clean layout makes it easy to read the content on the Accelerated Business Results site.

Notice the coupon on the right side of the page shown below!

Some products and services can be purchased immediately through the site!

The site also includes a business blog.

Accelerated Business Results adds a multimedia element to its site with video blog posts.

Blog posts include blogger bios and an easy to read comment area.

Can you believe this website was built on WordPress?

To have your website considered for the WordPress for Business Websites here on BusinessLogs, follow this link, and leave a comment on the Call for Business Submissions post with your company website’s URL.

But to set your blog apart, you’ll want to tweak that theme- and when I say tweak, I mean make small changes here and there. To make these tweaks to your theme of choice, a tool like the Firebug extension for Firefox can be very handy- but, really, any text editor will do.

1. Tweak your header
   Usually the first place new visitors will look, and a good place to start. Some themes include “theme options” pages that show up when you’ve activated the theme, and others include banner photos or graphics that can easily be replaced with your own. If you’re using the default WordPress theme Kubrick, the aptly named Kubrickr will automatically find photos on Flickr for you to customize your header with. To get more in-depth, I recommend reading through WordPress’ official codex page on Designing Headers.
2. Play with your widgets
   Most WordPress theme designers “widgetize” their themes, and for good reason: widgets are probably the quickest way to personalize a WordPress theme. Built-in widgets, available in every fresh installation of WordPress, include widgets for displaying your Archives, Calendar, Recent Comments and so forth- and And if the theme you love isn’t widgetized, you can do it yourself.
3. Experiment with color
   Even slight changes to the colors on your site can have a big impact. Online tools such as the Color Scheme Designer can keep you busy for hours, or you can check out pre-made color schemes at sites like colr.org and GenoPal.
4. Change your fonts
   We used to have just two choices when it came to web fonts: serif or sans-serif. Today, we have methods like sIFR and FLIR, which replace your fonts using Flash, the newish Cufon, which doesn’t require Flash, and CSS3′s @font-face, which works by downloading the specified fonts.
5. Personalize your About page
   This one, which requires no CSS tweaking at all, just might be the most important way of all. Tweaking your About page, the only page that comes pre-built with WordPress, is where you can truly let your personality shine through. A photo of yourself is always good, but you should feel free to add anything here that shows the world- or your readers, at least- who you are. You can read more about tweaking your About page in a previous post of mine.

Of course, we’ve only barely scratched the surface of the ways you can tweak your WordPress theme. For more ways, the WordPress Codex is an excellent place to start.

1. Organize Your CSS

Jon says you should write a table of contents at the top of the file, but I don’t really care about that, especially since I’m usually the only person to look at my CSS file. A table of contents is useful if how you demarcate your sections changes with each CSS file, but why make your life complicated? I like how his example file has an entire section for “Typography”. That’s like going to a supermarket and seeing one gigantic isle marked “Food”…. all parts of web design have to do with typography so lumping them all together doesn’t help you out much.

I lay out my CSS files the same way, every single time. I 1) lump all container/layout blocks together (divs with an ID of “header”, “footer”, “maincontent”, etc.) at the top, 2) then my headings H1 through H6, 3) then paragraph and link styles, and 4) then all my lists (navigation, etc.). I’m normally looking through my CSS with something like, “hey where’s that footer style?”, “damn that subtitle on the right has too much padding-bottom”, or “I have to change the hover state on that current navigation tab”, so organizing my CSS file according to what type of element it’s referring to jives with how I think about CSS.

Here’s the CSS file I always start with, feel free to nab it and use it for yourself.

Now couple the page organizational idea I just mentioned with the CSS indentation technique I’ve written about before, and you have a pretty clean CSS file. Check out Business Logs’ springtime.css for an example of the combination of these two techniques. Now if your brain doesn’t work like mine, I fully recommend organizing your CSS file in a way that matches how you work. Don’t just copy what I’ve said here if it doesn’t make sense to you, find out a pattern that makes sense to you and go with it.

2. Avoid Default Styles

As someone who works on fairly complex layouts all the time, I’ve learned that the easiest way to confuse myself and stare at my CSS file for awhile is to have default styles running rampant. By “default style”, I mean defining a default tag with no specificity, like this:

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px dotted red; }

or:

h2 {
    font: bold 18px/1.4em "Lucida Grande", "Verdana", sans-serif;
    color: #000;
    border-bottom: 1px dotted #ccc;
    padding: 0 0 3px 0;
    margin: 0; }

The problem with defining all links or all H2s at the same time is that I use different link and H2 styles all over my layout, depending on where the tag shows up. A link inside of an H4 in the main column is going to look different than a link inside of a right column paragraph, but if I define all links to be red and have a bottom-border like I did above, then they’ll both start out with those styles. I’ll have to overwrite the color and the border-bottom if I wish to make them look different, and if I forget, then the default link style will cascade down and show up, probably making my link pretty ugly.

What I do in my CSS is this:

h2 { }

    #maincontent h2 {
        padding: 0;
        margin: 0;
        ... }

To remind myself that a generic H2 is around, I leave the empty h2 { } in my stylesheet, right above all the specific H2 styles. This doesn’t really do anything from a CSS standpoint, but stylistically I now can scan down my CSS file and see if a wacky style somewhere is due to a default style I forgot to remove, or if it’s something else. Plus, scanning down a nice column of empty heading tags really breaks up the style sheet for me, making it easier on the eyes.

Judi brings up a good point down in the comments, and that instead of totally neglecting the default style, you find the lowest common dominator across all your particular H2 headings, or what have you, and make that the default. If all of your H2s have 0 margin, then make it so. Thanks Judi!

3. Use Your Utility Tags

Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. You might have a subheading on your blog with a different color for your permalink vs. your comment link, or a heading with a quick subheading right below it in a smaller font. For these little styles, I don’t like to drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else. Instead, I use some tags that I like to call Utility Tags. They would be:

<small>, <em>, and <strong>

I use these three tags all the time to accomplish little areas of design that are overkill for an extra div or class. Here’s an example of some XHTML that uses a utility tag:

<h2>Title Of Entry Here <small>Quick subheading here</small><h2>

Inside of an H3 heading I dropped a small tag to accomplish a subtle design change. I want the H3 main text on one line, and then the small text on the next line in a different font. Here’s my CSS:

#parentelement h2 {
    font: bold 18px "Trebuchet MS", "Tahoma", sans-serif;
    color: #f00;
    padding: 0 0 3px 0;
    border-bottom: 1px dotted #aaa; }

    #parentelement h2 small {
        display: block;
        font: normal 12px "Lucida Grande", "Verdana", sans-serif;
        color: #333; }

I used a utility tag inside of a heading, no class needed, and then targeted it directly via CSS descendant selectors. This keeps your XHTML uncluttered and lets you do quickie styles with no real effort. What’s the display: block; doing in there? Well normally <small> is an inline-level element, so instead of dropping <br /> right before it to make it jump to the next line, I just swap its display for block and have it do it by itself.

4. Use The Right Tool For The Job

I’m not a validation nazi, but I do appreciate the usage of semantic tags instead of generic ones. There are 6 heading tags (<h1> through <h6>) so before you start dropping in <div class=”sectiontitle”>, use what you’ve already got in your arsenal, namely, heading tags, because they’re there for a purpose. I rarely use DIVs for anything other than a box to surround sections on my site, so if your XHTML suffers from divitis then try replacing some of your tags with pre-existing HTML instead.

5. Name According To Where It Is, Not What It Looks Like

Over at PingMag, the article tells you drop classes like “red” and “strong” on your DIVs for quick styling, but I think that’s an awful piece of advice. Better names would be “error”, “important-message”, or whatever else you can come up with, because at least those names let you know WHAT it is instead of force-feeding you what it looks like. What’s better, telling you that the thing over there is a firetruck and you knowing that it’s red, or me telling you there’s a big red truck over there and you asking me if it’s a firetruck. One conveys more semantic meaning than the other, so pick the better of the two if given the choice. A commenter named ASD summed this up nicely:

“class=”strong red align_right” – you are serious?

This is awful naming. Names should relate to content, not presentation. That’s the whole point of CSS – seperating presentation from content.”

Couldn’t say it better myself.

Bad Drop Shadows

The hallmark of 3D-looking user interface design is subtlety. If your widgets look like there’s a slight light shining down from the upper left corner of the screen, then you accomplished your goal. If they look as though they’re 5 feet off the screen because their drop shadow was left on Photoshop’s default, then it looks like garbage.

Bad Gradients

Gradients should be used sparingly and for effect, not because they’re easy to do in Photoshop. When light is shed on an object, the area of the object that’s closer to the light source is lighter than the area of the object that’s farther away from the source, thus producing a gradient (and a drop shadow.) Real-life gradients are subtle and smooth, but poorly reproduced web design gradients go from dark to light too quickly, or are choppy and/or too industrial-looking. The best gradients are the ones you can’t point out from across the room, and the worst gradients are the ones that look cartoonish.

Bad Size-to-Spacing Ratio

The “big” web 2.0 look is easy to accomplish, but without using the correct padding and spacing around elements it looks amateurish and ugly. Monster-sized fonts are easy to use, but it’s tough to make them play nicely with other elements on the page. Some good examples of big typography: Coudal’s “The Show Live” and Coudal.com, Emily Chang, infosion™, Rollyo. Some bad examples? Flock Developer (padding/margins on the yellow download area, lack of whitespace within main copy on their homepage), Megite (completely lack of whitespace surrounding larger type, large links butt right up against other large links),

• Host on your own domain: One of the biggest mistakes made by business bloggers is hosting on a third-party domain, such as “typepad.com” or “blogspot.com”. It can be a great way to get up and running with minimal technical fuss, but in the long run it will come back to bite you. Once you’ve built an audience, search engine value, etc., you’re tied to that domain. Get off on the right foot, and make sure you’re using your own domain name from the beginning.
• Get a real design: Marketing is ultimately about differentiation, and you’ll have a hard time standing out when your business blog looks just like a hundred others. Skip the free themes, and put some money toward hiring hiring a blog design company to do the job right. Never underestimate the effectiveness of powerful design.
• Integrate the blog with your business site: The classic business blogger story goes something like this — “Blogger gets website. Blogger writes and writes and writes. Blogger builds an audience. Blogger wonders why no new business is coming in. Blogger had forgotten to tie the blog back to his business website.” Don’t be that guy. Integrate the blog into your business site. Make sure readers know who’s doing the blogging, and what else you can do for them.
• Keep it simple: It’s exciting for your inner geek to play with widgets, plugins, add-ons, modifications, customizations, etc., but your readers really don’t care about that stuff. They came to read blog posts. The cleaner and more pure you can make your blog, the better. Cut as much clutter as you can.
• Define an “audience of one”: Narrow your audience down to a specific niche (ideally one that meshes with your company’s target market), and then create a persona profile that describes an individual from that niche. Give him or her a name. Find a headshot you can use. Figure out what he or she wants out of your website, and then write all your blog posts to that one imaginary person. This will keep you focused on your audience at all times, and will give your voice a more personal touch.
• Stay on topic: Related to the last point — once you’ve defined your audience, only post things that are relevant to your audience. (Don’t dilute your blog with posts about your family, a great new movie, or how sorry you are for not posting more. Save that stuff for your personal site.)
• Provide content, not commentary: Rather than just “reblogging” links to other sites or blog posts with a quick little comment of your own, focus instead on being the site that other people are talking about. Post original thoughts, views, tips, etc., not just your rehashing of what other people have already done.
• Promote the blog through your business: Business blogging is a two-way deal. Instead of just using it as a lead-generation tool, make sure that your current customers know about the blog as well. It will help to build awareness, increase loyalty, and increase your ability to communicate on important topics.
• Answer the big questions: Business blogs are most useful in a time of change, and yet this is when many businesses panic and neglect their blog. When something is happening, many people will be hitting your blog for answers. Don’t let them down. If your blog seems to be pretending nothing is going on, people will lose trust in it, even during calm times.
• Enable discussion: If you want to have a conversation, you’ve got to be willing to take a few thumps. Enable comments on your blog, and don’t go around deleting everything that’s unflattering. The only things that should really be moderated are blatantly offensive trolling and obvious spam.
• Don’t obsess about traffic: It’s fun to watch your traffic spike when you get on Digg, or get a link from a major blogger, but the reality is that these traffic spikes have little effect on the overall success of your business. Stay relevant to your core audience, work hard to get the word out, and then be happy with whatever you’ve got. Even one interested reader can totally change the course of your company.

• MySpace users are teenagers and young adults who are into music, not regurgitated Associated Press articles.
• When people want civil discourse and intelligent conversation, they don’t think of MySpace.
• The news portal business is overly-crowded as it is, why enter it?

Another pet peeve is that permalinks to content have a frameset toolbar at the top. This is similar to how Spivot used to behave, but they recently took that “feature” away which is great to see. MySpace, don’t hijack!

As a designer and someone who visits many news sites each day (New York Magazine, NY Times, Newsvine, Daylife, etc.) I can honestly say this is the most appalling visual redesign I’ve seen in awhile. There are huge gaps of whitespace randomly strewn through the interface, major news article headlines are in the smallest font possible, images are not integrated thoughtfully within each article’s masthead box, they do not explain what the random small colored blocks mean throughout the interface, the bottom half of each page looks like someone just gave up and never designed it, etc., etc.

Scott Karp had this to say about the redesign:

“What are we to conclude from stark contrast between the (sometimes breathless) praise of USA Today’s “social media” redesign among tech/media bloggers and commentators, and the near universal rejection of the redesign among USA Today readers who commented on it? Could it be that it’s really the social media revolutionaries who “don’t get it” when they assume that what the people want is to rise up against the media autocracy and take control, when in fact what most people want is to get high quality information from a reliable source?”

So are “the people” right or the bloggers on TechMeme? Notice that everyone who is praising the social features on this site is praising *the technology* first and not even mentioning the shotty, haphazard user experience, but isn’t that what Web 2.0 is all about? Fawning over Ajax technical implementations and programming libraries before noting that nothing is actually *designed*? Seems like all the technical or social media prowess on the planet can’t buy you happy users, and USAToday is learning that firsthand.

This is the true problem with the “social media revolution” and the problem is that no one actually cares to examine what people actually want, instead giving them what they just think they want or what looks good on paper. When someone goes to the USAToday website, do they want easy and visually appealing access to news articles, or do they want to put in more work for themselves and leave comments and click up arrows? Do USAToday readers really want to put more time into the actual usage of the site, or do they want to hit one of the major topic sections, scan some headlines, and then flip to another location?

Mark Potts nails it:

“Gannett deserves credit for trying to innovate on USAToday.com, much as it has taken the lead in thinking about new ways to gather and manage news at its other papers. But this new design doesn’t seem fully baked (and the number of technical errors I came across moving around the site was quite disturbing).”

Paul echoes my opinion:

“While you can applaud the fact that they are taking a step in the “right” direction with more interactive features, how does the design encourage interaction on the site at all? Its as though they are too scared to make anything prominent so they went the next best route and made absolutely nothing prominent.”

10. Wayfaring
Out of all the sites that use Google Maps, Wayfaring is by far my favorite. They’ve integrated Maps into the user interface very well, and the simple but usable layout is what many other startups should try to emulate. Very nice monochromatic color scheme as well, working with various hues of green to effectively block out sections of content — it also neatly keeps HTML/CSS weight down.

9. Sharpcast
Synchronization startup Sharpcast has a simple website with expertly-crafted illustrations every place you turn, similar to a company further down on our list. Screenshots of their software are always nice to see, especially when (from what I can tell) the interface looks just as clean and elegant as their website. (Note: their site is currently switching from beta to public, so it’s not the same as it was when I originally made the list.)

8. Current TV
Current TV is a brand new concept where they combine user-generated content with actual TV airing to produce a type of on-demand network of great content. Visit their On-Air Preview page to get a taste of what is currently live on their TV channel. The site is dark but has some great coloring for each section to keep the visual interest alive, and their community area has a really creative way of showing the size and scope of their readers.

7. Plaxo
Regardless of what you think of Plaxo, it’s still one of the most beautifully designed corporate-type sites you’ll ever find. An extraordinary amount of time and effort was spent crafting every aspect of their site, from the glossy icons and glowing buttons, to the ever-present rounded corners and shadows everywhere. A lot of the site is done with ugly table code however, so that knocks the score down a bit.

6. Netvibes
Netvibes and Pageflakes are locked in the death throes of a one-upsmanship battle, which unfortunately for both companies is not the place to be in. Fortunately for Netvibes, I think their user interface trumps Pageflakes which adds at least one more feather to their cap. In case you are not familiar with Ajax portal homepages, they attempt to emulate the functionality that Lycos and Excite provided back in the late 90s, but without needing any page refreshes. And unlike Excite and Lycos, they’re nearly completely unprofitable because they allow so much user customization that no advertisements are shown at all. The subtle color themes are very well-executed, with beautifully rendered boxes that appear to have multiple layers of depth. Netvibes sets the Ajax portal standard, so if you ain’t putting it down better than Netvibes you better walk off the court right now.

5. LinkedIn
Similar to Plaxo’s look, LinkedIn also has a pleasing blue color scheme, but their layout is more reserved with their efforts spent more on the information architecture and layout rather than small graphical details like Plaxo. Most sections of the site have their own simple illustration nearby, which helps greatly in identifying the key information on the site. The Connections tab (need to be logged in) has great information graphics that immediately show how “connected” you are to any other person in your network. The small, information packed illustrations definitely go a long way into providing a better user experience.

4. ScienceBlogs
ScienceBlogs is a grouping of a few dozen great blogs on scientific topics like medicine, chemistry, psychology, and more. They are part of the larger whole of Seed Magazine, a fantastic new science magazine that has some of the best art direction of any printed periodical I’ve ever seen. Yet another great design from Mike Pick & Tim Murtaugh, 2 guys that need more exposure in the design community because they some incredible work.

3. Joyent
Joyent launched over a year ago (has it been that long!) and it’s still one of the best examples of design you can find gracing a startup’s site or application. Cameron Moll always produces astounding work, and this is no exception. Each section of the newly-redesigned site has its own illustration and color scheme.

2. Threadless
What crazy t-shirt company has more fans than Threadless? The guys that run Threadless aren’t business or marketing geeks, they’re straight-up web designers and developers, so you can expect their company site’s user experience to be top notch. As with some of the other sites, they use Flash as a means of highlighting some sections of the site. Each page of Threadless.com is unique, just a great job all around.

1. Akamai
Akamai has been around longer than a lot of the companies on this list (put together!) and their new website is one of my favorite designs of all-time. Akamai provides many data-hosting services like streaming media and content delivery, and their website is as slick as their client list. They’ve effectively added interactive Flash animations to various parts of the site, and even their NOCC global control center is absolutely incredible.

I just read a good article about Jay-Z in the latest GQ magazine, and one of the interesting things he talked about was the concept of making music that’s not just a flash-in-the-pan but everlasting and continually solid. Lil’ Jon makes club music that has a big beat but no symbolism behind it, so in a few years we just won’t listen to it because he makes disposable music. Jay-Z said that his goal is to always make classic songs and albums, ones that we can listen to over and over and always retrieve deeper meaning. I still listen to Reasonable Doubt (his first album, dropped 1996) because the entire album is comprised of classic, solid music. All the pop songs, jewelry raps, and emo ballads will soon be forgotten just like the vast majority of albums made in the 60s and 70s were forgotten except for a handful that were timeless and great.

Great design isn’t about mashing the latest trends together and throwing against the wall and seeing what sticks. So much of the design work I see in the industry today is what Jay-Z called “disposable” — designs that only represent the trends being used currently but will look foolish and outdated in a year, or a few months. If you want to see what classic web design looks like, just hop over to Stopdesign andCuban Council. Those two sites have looked essentially the same for years and are still two of the most beautiful agency sites out there. Doug took some stock photography and brought them into Photoshop to add new colors and linework, then coupled that with a solid layout (who else does 1/3rd width per column so eloquently?) and perfect typography. The Fantastic Four from Cuban Council have worked on everything from the iPod Store to Suicide Girls so their site is a pixelized feast with useful Flash additions and only the most relevant information shown. They don’t talk about superfluous junk like the processes they use, they just show you who they are and what work they’ve done. Usable and timeless.

Unfortunately, timeless creations like Stopdesign and Cuban Council are few and far between because design like that just isn’t appreciated in this disposable industry. Ah! That’s what Web 2.0 really means, it means that applications, design, and companies are disposable, flash-in-the-pan creations with no individual redeeming values. A dozen social networks, a hundred bookmarking sites, a thousand Office-replacement web apps, all with designs that look like this, this, this, or this. Plain sites with no zest, no visual direction, no classic layouts or typography, nothing to separate them from all their competitors.

The best visual design stands the test of time like a solid album, where you can visit it now and a year from now and it still has the same allure. Disposable design is me-too design, throwing the trends everyone else is using into a blender and then churning it out into HTML with no overall sense of visual direction, flow or cohesiveness.

Create classic albums, not disposable songs.

Interfacing

On Dictionary.com, my favorite definition for the word interface is this:

A point at which independent systems or diverse groups interact. Source »

People stuck in the computer world tend to only think of an interface as what is visually (or aurally, depending on many factors, ability being one of them) depicted on the screen. A user interface is commonly thought of as the invisible layer that connects information coming out from the application with user input going into the computer. The part of the system where input and output is exchanged can be thought of as the user’s interface with the application, however I like to think that this is not the only “interface” one should think about.

Sky and ground
When you look up at the sky and then trace the skyline down to where it connects back with the earth, you are looking at the horizon line. This is the connecting point where terra firma meets with atmosphere (at least visually) and can be considered the meeting point of two wholly separate, but interdependent entities. This is where the sky and ground interface.

The horizon line is not always straight: the connecting line takes the shape of this two-way juncture and if there are mountains reaching up from the ground the horizon line will be physically different than if there were no mountains at all. It can be said that the horizon line is a compromise between the ground and the sky, where the meeting of these two massive elements is modified based on variables found in either of the two conjoining parties. I find the horizon analogy useful for talking about what an interface truly means — a give-and-take arrangement between two different, but constantly connected, elements of the world.

Everywhere an interface
When discussing a person’s experience with their surrounding environment, one can imagine that at every single moment of one’s day, they are faced with a finite number of environmental interfaces. A walk down a hall cannot simply be thought of as getting from Point A to Point B, but it is rather your goals and intentions meeting with the hall’s goals and intentions. Your intent is to move quickly and safely down the hall in order to get to your final destination, while a hall is designed to be a connecting space between two rooms or spaces.

A hall is not designed to protect you from the elements (that’s what a roof does), or to keep your feet warm in the winter (that’s what carpeting does), or to alert you to obstacles in your path (that’s what a lighting fixture does), but rather to be the connecting space between Point A and Point B and nothing more. Your goal of moving down the hall to get somewhere fits in nicely with the hall’s purpose of connecting two open spaces, however when you mix in additional elements to this interface, you are adding additional variables that could potentially disrupt this communicative process. If you trip while you are walking down the hall, it is not a communication breakdown between the hall and yourself (remember, this “communication” I’m talking about is the give-and-take between your goals and the hall’s intrinsic purpose) but rather an interruption between the environmental interface. You tripped because your toe got caught in the carpet and because there wasn’t enough light to notice the snag, not because the hall didn’t do its job or because you didn’t know how to walk correctly down it. What happened was a communication breakdown caused by external factors associated with your interface with the hall, not with you or the hall itself.

When you first buy a VCR (huh? a VCR? what’s that!) the blinking 12:00 will plague your life for as long as you let the clock go unset. The blinking number is the VCR’s way of letting you know that setting the time is probably a good idea, and your goal for this situation is to interact with the VCR in such a way as to 1) make the blinking stop, and 2) correctly set the time. So your goals and the VCR’s goals are a close match, both you and it want the clock to be changed, so why is this such a big deal?

The problem arises when you actually try and change the time. Just like when you tripped in the hallway, there are many variables that can cause you to err in your interaction with the environment, and in the VCR’s case, the cryptic buttons and programming sequence is what is tripping you up. You want to change the time, the VCR blinks 12:00 to let you know that setting the time is possible, however the buttons and widgets on the VCR can tangle you up and stop you from ever getting the blinking to stop. These little technological variables get in the way of your interaction with the VCR, therefore your goals and the VCR’s goals cannot be met without great difficulty.

These external factors
Earlier I mentioned that there are a finite number of external interfaces/situations available at any given point in time, and I want to elaborate more on why I feel it is a finite number as opposed to an infinite one.

There are a finite number of people on this earth, and if every single person on the planet had their hand in a different environmental factor (one person made the carpeting in your hall, another made the light fixture, another designed the wallpaper on the wall, another person developed the vacuum cleaner used to vacuum your hall’s shaggy carpet, etc. etc.) there would still only be a finite number of external factors with which you could interact in a given situation. Even if you cut your hand on the wall, tripped over the vacuum, got a rug burn from the carpet, and managed to touch or interact somehow with something designed by every single person on this planet, you would still only have a finite number of external factors working their way into the basic interface you started with — your goal of moving down the hall interacting with the hall’s purpose of connecting multiple rooms. Because of this, and because there is not an infinite amount of anything on this earth, there are only a finite number of variables that can work their way into your communicative process with something in the environment.

The best software communication
Just like when carpet causes you to trip down the hall, overly heavy or counterintuitive software interfaces can cause you to “trip” when using the application. Even though our daily lives are fairly complicated, if you break down exactly what you need to keep track of and remember, those definitely aren’t as complicated — the who, what, where, when and why of our routines. If you allow people to elegantly store such information and appropriately link data together (drag the “where” on top of the “when” and you have an event, drag the “why” to the “who” and you have an interpersonal relationship, etc.) then you’ve got yourself a hit. One of the reasons that 37signals’ apps were such a breakout hit when they appeared is because they gave people simple tools that they could use in ways that made sense without the interface getting in the way. The next version of Backpack is basically a personal database and organizer, they’re getting out of the user’s way and allowing you to add whatever you want, in whatever order, when you want, stored however you want.

Ning allows people to link certain data models and interfaces together to create something meaningful, Dabble DB finds and stores information and lets you play with it to create more meaning. Backpack lets you organize your life, Ning lets you build services that help you on your life path, and Dabble lets you pull meaning out of seemingly meaningless data. What ties these three applications together is that you are given a set of tools and then you figure the rest out for yourself. People are smart, I think that instead of creating tiny, focused applications (and turning them into companies) there should be more broadly-focused software that relies on human knowledge and intuition.