Feature
Post

Category
Design Focus

Friday Focus 08/29/08: Texture and Personality

This week on Friday Focus: websites with a fair amount of texture and a lot of personality.

Designs of the Week

Paiko

One good way to draw attention to the works in your portfolio is to make everything else grayscale or muted. That way the colors in your showcase really pop.

Långgatan 3a

The background texture takes a backseat to the colorful and carefully designed illustrations on this blog. It does, however, tie in well with the general feel of land and sea, maps and navigation, kitsch and cozy.

Ollie Kavanagh

Now this site seems to be the complete opposite of the previous two—it’s dark, it’s bold, and it’s got a lot of stuff going on. Yet nothing is out of place, and the use of transparency adds an interesting twist to the familiar formula of splatters and handwritten text to represent grunge.

Social Media Weekly

Design75 Powerful Adobe Fireworks Extensions – It really can be as Great as Photoshop!
A long list of add-ons that can transform Fireworks into an even more powerful graphics program.

ProgrammingjParallax
Replicate the famous parallax effect with the help of jQuery and this script. Check out the delightful demo for more information.

Feature
Post

Category
Design

Design Critique: The TechCrunch Redesign

Michael Arrington’s web 2.0 startup news blog TechCrunch isn’t just a huge success, making Arrington the poster boy of the tech blogosphere, it is also a very prominent leader in the blogosphere. When TechCrunch changes something, other bloggers look at it, and sometimes copies it. It was like that with the 125×125 pixel button ads, the de facto industry standard in the blogosphere right now, which I daresay got big because of Arrington’s design change in 2006 (from this version, I might add, to the previous one, screenshotted in this post).

And now they sport a new design, which in turn have sparked a lot of commentaries in the blogosphere, as well as 300+ opinions voiced in their Yep, We Redesigned post. Everyone’s got an opinion, it seems, as always when it comes to something as personal as design.

In other words, I won’t shut up either.

Screenshot of the new TechCrunch design

Screenshot of the new TechCrunch design

The Good

  • I like the whitespace, the easy colors, and the choice of fonts.
  • Front page using excerpts tightens the design a lot, toning down the need to scroll, and brings a better overview. I don’t care if the main reason is to get more pageviews, this adds to readability in TechCrunch’s case.
  • Top story on front page works, although I would’ve wanted some more schwung to it perhaps.
  • I like the middle column in the front page, only present for as long as needed. It works surprisingly well and almost gives the stories left of it a sort of a sub-top-story feel to it. Almost…
  • Previous/next post links on single posts are always good.

The Bad

  • The far right ad column is cluttered. Also, ads aren’t ideally aligned/placed, however, this isn’t something that is easily resolved, and ads are always the great EVIL of a design, so I won’t say more about it.
  • The site looks pale on high resolutions with maximized browser windows. Granted, that’s hard to do anything about if you want a clean and sober look.
  • The footer is simple, which is good, but I would like something more there. Especially on short posts with few comments, where the right ad column is a lot longer.
  • The subscribe element on the top of the right column is confusing. I expected some sort of tabbed box, instead I got links. I also miss the RSS icon (available in the footer), since it is something I think should be pushed.
  • A network menu is good, but it is not obvious that it is a network menu, it could just as well be a TechCrunch menu.

The What Now?

  • Why do you have previous/next post links on top of single posts? Sure, they might come in handy with short posts, but I find them unnecessary.
  • A blog like TechCrunch could really use a little more elaborate archives page. This one is just lazy.
  • No dates on the front page. While this is something I normally think is OK, the news orientation of TechCrunch makes me think it should be there.

Final Thoughts

Among the criticism of the new design is the fact that it isn’t “TechCrunch green” enough. The previous one certainly was. Personally, I think it does alright on that area, with a simple green bar in the absolute top of the browser window, green links and green hovering on headlines, and so on. It works, sure, it could’ve been picked up a bit more had they wanted to, but I don’t think there is any actual need for it, really.

Also, while clean, sober, and whitespaced, the design is a bit boring. I should like it, and I do, but it is a bit too corporate for my taste. That is a fine line to thread, and I think the real issue there is the use of images. Just doing logos, and always having them on the same spot, certainly doesn’t help with de-corporatifying the design. Then again, it is a business focused blog, so it isn’t necessarily a bad thing. After all, trying to be something you’re not isn’t something for the faint of heart, so why go out and about trying to look like a magazine, when you’re a news blog about startups?

My verdict: A step up, clean, sober, suitable, I like it overall. Good.

What do you think of the new TechCrunch design?

Feature
Post

Category
Code

WordPress Tip: Group Posts by Date in Listings

Some of you might be furrowing your brows at this one. What does he mean, add dates to listings? They are right there, in my post meta section, so what’s this nonsense? And since posts are chronological, they are already listed together with other posts with the same date, or the closest one at least.

That is true, in some themes each post got a date, and that’s fine. However, perhaps you’d like to group your posts by date in your listings, adding a divider to show that a new day has started. Like we do over at The Blog Herald, for instance. There, in listings, you’ll see a little divider telling you that the posts below are of this and that date, and when you’ve read them all, you’ll find another little divider with the next date, and so on. One date can have one or several posts under it, the important thing is that the actual date is only displayed once.

This is actually really easy to make happen, with the_date WordPress tag. Here is how.

How the_date Tag Works

Some WordPress versions ago, the_date tag changed. Suddenly, you couldn’t use it to display the date of each posts, because it would only output the results once per page and date. So if you had two posts on one date, only the first one would see any output from the_date tag. Theme designers solve this by using the_time instead, if they want to make sure that there is a date on every post in listings.

So the_date can only output every individual date once per page. Let’s use that!

Wait! Why Would I Want to Do That?

My main reason for using the_date like this is to avoid cluttering the page with the same date over and over again. I’m also reminding the reader of how often we update, and how many stories we actually publish every day. It is a way to help readers see your update schedule. Think about it, a small little timestamp in your post meta section will either be completely overlooked, or just not read since the reader already know that it is there. That is a good thing of course, you’ll want to check the date on posts sometimes, but I think it is a bit of an overkill in listings on some sites and blogs.

avoid cluttering the page with the same date over and over again

By using the_date like this, I make sure that the reader just sees the date once for each day and page, and since that means that it appears irregularly, it will have a greater impact. Again, that reminds the readers of the frequency of updates in a way a small timestamp never will.

However, you shouldn’t remove all your date formatting just because of this. Having dates printed on single posts is still a good thing, and if you’re not updating as often as, say, The Blog Herald, it might even look bad when there are several days between updates, which then will be very visible since the date pops out in listings. Use with care, and use when appropriate.

Group Posts by Date in Listings

So we have the front page of The Blog Herald, right? I want to output the date once, using a small little divider, get the posts for that date below it, and then output another divider. Like so:

Illustration for the_date use in The Blog Herald listsings

Illustration for the_date use in The Blog Herald listsings

You want that on your blog? It is easy, just put the_date in the appropriate spot, and it will spit out the date, just once. In the case of The Blog Herald, it is within the loop:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    	<div class="post" id="post-<?php the_ID(); ?>">
    		<?php the_date('', '<p class="the_date"><span>', '</span></p>'); ?>
    		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    		<div class="meta">
    			<div class="left">
    				<p>Filed as <?php the_category(', '); ?> with <?php comments_popup_link('no comments', '1 comment', '% comments'); ?> <?php edit_post_link('Edit', ' &bull; ', ''); ?></p>
    			</div>
    			<div class="right">
    				<p>by <?php the_author_posts_link(); ?></p>
    			</div>
    		</div>
    		<div class="entry"><?php the_content('read more'); ?></div>
    		<?php the_tags('<p class="taglist">Tags: ',', ','</p>'); ?>
    	</div>

    <?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

Something similar is used in every WordPress theme, since it is the loop that makes the magic happen. You should have no problem finding it in your theme’s files, just remember that different pages might use different files, so you might need to edit both home.php and index.php, as well as category.php, search.php, and so on. It all depends on your theme.

Let’s take a look at the_date part of that, shall we?

<?php the_date('', '<p class="the_date"><span>', '</span></p>'); ?>

That’s a bit more than just the basic the_date call, right? It is quite simple, this is how it works:

the_date('date formatting', 'stuff before the date', 'stuff after the date')

Edit the bold parts, or just use the_date without any special options, it is your call. As you can see, for The Blog Herald, I’m outputting a p tag with the class the_date, and a span, before actually printing the date, and then I just close these tags after it. Since I don’t want to litter the page with this code when there is not date outputted, I’m using the tag to output it, hence it won’t be there if there is no date to output for that particular post.

Feature
Post

Category
Design Focus

Friday Focus 08/22/08: Playful One-Page Sites

This week on Friday Focus: one-page sites that sure to tickle your design tastes. They’re both playful and well-made, so enjoy!

Designs of the Week

tap tap tap

Every element in this site is just so fresh—from the sushi concept to the way the content slides out. My only tiny suggestion is to add some sort of visual cue when hovering over the iPhone-inspired icons. Even filling in the title attribute for tooltips will suffice.

Paper Switch

Despite the grunge feel, you can tell the makers of this site cared about details, and were not just forcing a certain style all over the place by splashing some Photoshop brushes around. The gray backgrounds for the forms in each of the sections appear to be unique (when they could have recycled images for consistency). And then there’s the scrapbook-inspired paper cutouts for the work showcase. Finally, there’s a very cute illustration of a bird perched on a tree that still looks grungy.

Stad Tam

Perhaps I should’ve also included this site in last week’s “eye-catching headers” batch since the top of this site, which basically half of the whole thing, is the blurb slash header area. The lower half shows and hides content using collapsible headers. The same goes for the inverted tabs at the top. Everything is compartmentalized, which keeps things neat and uncluttered.

Bananas and Coffee

There’s not much on this site but a bunch of graphs, but they’re done very nicely, with the help of some nifty CSS and JavaScript. The colors come from the two stars of the site: yellow for the bananas, and brown for the coffee, and make you feel raring to read what would otherwise be boring old charts!

Social Media Weekly

Design35 Greatest Works of Reverse Graffiti
Graffiti that’s environmentally-aware but still quite rebellious.

ProgrammingAn Experiment in Rounded Corners
Jonathan Snook creates a workaround for achieving rounded corners natively in Internet Explorer.

Feature
Post

Category
Publishing

Site is Down, Reddit Style

Granted, I’m not a dedicated Reddit user, but that being said, this is the first time I’m getting the “reddit is currently offline” page. It is nothing like the fail whale of Twitter fame, more of an ironic, appropriately geeky, kind of message you get. Like so:

Is this a good way to tell people you’re currently offline? What do you think a good offline page should contain? Tell us in the comments.

Feature
Post

Category
Code

Hide Table Rows with onChange()

On occasion, a developer will require that certain elements of a page stay invisible to users while others become visible, depending on a user’s action. In this case, the user makes a selection on a drop-down menu and the selected table row becomes visible while the rest remain hidden.

First, we establish the script and begin to define the function:

<!--

function changeRow() {

Next, we find the number of elements in the select menu. This count is especially useful for dynamically-generated menus when the developer may not always know the number of available elements at design time:

var intCount = document.getElementById("selTest").options.length; //gets count of items in select menu

We also need the number in the zero-indexed array of the selected element:

var intValue = document.getElementById("selTest").selectedIndex; //gets number (0 index) of selected item

Now we loop through the number of elements in the menu:

    for (i=0;i

With the document.getElementById(strValue) function, a developer can assign the area he’d prefer to make visible. We’re using table rows here, but this same technique applies to any div, span, or form field.

The onchange() function in the select menu calls the function that sets the selected row’s style:

<form method="post" action="#">
    <table id="tbTable" cellpadding="2" cellspacing="2" border="0">
        <tr>
            <td>Change Here
            </td>
            <td>
                
                    Row 1
                    Row 2
                    Row 3
                
            </td>
            <td>
            </td>
        </tr>

For each row, we assign the id value to the range of options available in the menu. Each row has its default style set to visibility:hidden;. Again, this is very useful for database-generated forms and tables:

        <tr style="hidden;">
            <td>Row 1a</td>
            <td>Row 1b</td>
            <td>Row 1c</td>
        </tr>
        <tr style="hidden;">
            <td>Row 2a</td>
            <td>Row 2b</td>
            <td>Row 2c</td>
        </tr>
        <tr style="hidden;">
            <td>Row 3a</td>
            <td>Row 3b</td>
            <td>Row 3c</td>
        </tr>
    </table>
</form>

If you need the elements in a page to cover the same area, you can change the visibility:hidden; lines to display:none; and the visibility:visible; to display:;. This script is also useful for any desired style change (font size, font color, etc.). For such a simple script, it packs a wide variety of uses.

Demo: View a simple HTML file that does this!

Feature
Post

Category
Webapps

A Review of OmniStar Mailer

There are many ways to make a website or a blog an effective communications tool for businesses. I think you would agree with me that the days when websites merely function as online brochures are over. Sure, you could just have a static page telling people what the company does and how great their products or services are. But this will usually just go ignored. People want interactivity. People want something engaging.

According to Google Analytics the average website keeps a visitor for about 20 seconds before they navigate elsewhere. And most of the time, when users leave your page, they forget to come back. They forget you ever existed.

What can make your audience visit you frequently and stay a little bit longer? Aside from your site being interactive, you have to help out people by telling them what’s happening on your side of the forest! Tell them what’s new and why it’s important for them to know. A handful of popular blogs these days offer newsletters. While a lot of savvy blog users already read updates on their RSS readers, there are still a lot out there who appreciate being sent updates by email.

And this is where an email marketing service would come in. These applications can be useful as newsletters or as public relations tools.

Email marketing systems are usually applications or services that can send email en masse to target audiences. This can be for purposes of sending out newsletters, promotional materials or other messages to opt-in subscribers. Such software would usually contain a database of contact information, campaign statistics, and reports.

Of course, these can also be used for bulk, unsolicited emails, but that would depend on the intent of the sender, too.

There are about 20 million results for “email marketing software” on Google, and if you’re in search for an effective system, we’ve been approached to try out one such service by Omnistar Mailer.

OmniStar’s Mailer service was created with efficiency in mind, with the aim of helping businesses reach out to customers effectively without having to funnel money towards administrative employees who spend countless hours sorting through spreadsheets and emailing clients.

Introduction

Now I’ve used several Email Marketing Systems for the past 5 years. And one of the very first things I look out for are the following: a free trial and/or a money-back guarantee, immediate installation and quick support responses, and an interface that’s easy to operate.

I tried an OmniStar demo account and to tell you frankly, my first impressions were “clean”, “uncluttered”, “organized”, and a “pleasing workspace”. Check out their Admin Main Page below.

I think this Admin Page tells a whole lot about what’s under the hood. It’s not scary, nor undaunting even for the first-timers. Now let’s see the other areas and find out what makes OmniStar useful.

Features Set

OmniStar Mailer has numerous features that will surely address your personal or corporate needs. While it tries to offer the best features available, OmniStar stands out by understanding that not all would immediately understand the use of such tools.

They have conveniently placed a Getting Started Wizard to immediately get you developing your first newsletter. I think that is very important. They have taken that extra step to make you understand what steps are needed to get you on your toes.

Installation & Set-up

I’ll have to say it’s easy. Once you sign up, OmniStar will send an email to you explaining the steps needed for you to get going. You will need to download the application software and install it on your webserver. Your clients or future subscribers do not need to download anything at all. However, if you have problems with the installation process, you can also request a free install by their engineers, which I think is very very cool!

Setting up your subscriber database is very easy too. I have a small mailing list of 3,000+ saved in CSV format. OmniStar works well with it and took me a few moments to get all my subscribers in and active. They have said that they’ve worked with lists that are as huge as 250k subscribers. Not bad at all!

Ease of Use

Because of OmniStar’s uncluttered interface, I personally loved using it. Important areas are easily understood and provision for easy navigation was excellent. They offer quite an extensive FAQ and 24-hour tech (telephone or email) support! Great!

Email Creation

There are just many tools to help you build your first spectacular newsletter. It is very easy to add/customize your project with your images/pictures, texts, hyperlinks, special characters, anchors, lines, table, time, date, post/sub scripts–the works! Alternately, you can also choose to develop your newsletter as an HTML file using either DreamWeaver or FrontPage, and then import that whole page into OmniStar to send it out.

Reporting

OmniStar offers in-depth reports on every email campaign you send out. For example, if your email contains links, OmniStar will tell you which of your subscribers clicked on those links. It will generally track every click your subscriber makes on your emails.

A very important matter to me. When I shoot my arrows, I’d like to know if I am hitting the target or not!

Summary

I can say that OmniStar’s web based email marketing software is within the league of useful and user-friendly Email Marketing Systems currently available. It’s almost turn-key, scalable, robust, private and secure (because it runs on your own web servers) AND is intuitive to a great degree. It just has all the standard things I would look out for in these systems. I would just mention 2 things though

  1. That the application price of US$257 per website is a little “out there”, but with all the bells and whistles OmniStar offers, the price may be “just right”.
  2. When I entered the search key “report” in their knowledge database… their system doesn’t seem to know what “report” means.
  3. Finally, Omnistar Interactive has offered all readers of this blog 20% off by simply entering the promotion code devlounge when you order Omnistar Mailer.

Other than that I’d tell you to go get your FREE demo account right now and give this baby a test drive. We’re all on the semester of the year where there’s just several holidays every month. You’d need OmniStar to catch on that holiday fever!

Disclosure: The above review was done upon the request of OmniStar, and written by guest poster Jim Reyes, who is a regular contributor on Splashpress Media blogs Blogging Pro, Froodee, Gadzooki and Forever Geek.

Feature
Post

Category
Design Focus

Friday Focus 08/15/08: Eye-Catching Headers

It’s eye-catching headers this week on Friday Focus. Whether you believe in making the most of the content above the fold or not, it pays to make the top part of your websites extra beautiful because it’s the first thing people see.

Designs of the Week

Andre Augusto

Let’s start off with a blog and portfolio which reflects the owner’s signature look. I personally love that shade of reddish-fuchsia-pink ever since Last.fm popularized it during early Web 2.0. Here, it stands strongly against shades of gray.

Frisk Design

Now aside from a large, chunky logotype that’s hard to miss, you can create a striking header with a bright graphical background. Of course be sure to check if all the text in that area is readable first. In this case, it clearly is as the designers made sure to use light colors where the text was dark blue, and vice versa.

Ping My Map

Now here’s proof you don’t need candy colors to call attention to your site. All you need is good contrast, large title text (be reasonable though!), and a lovable mascot. Preferably a bird. Seriously though, if you want to introduce a new product to the masses via a website, say everything you want to in the quickest way possible. The header of the page is the most convenient place to do that.

Chocolat Media

This is another site that uses more subdued hues compared to our 2 earlier examples, but the callout image is a bit more abstract and at the same time typographical. It also summarizes the services offered by the company. I sure hope they put in some good alt text in there!

Social Media Weekly

DesignAdobe Photoshop: 50+ High Quality .PSD Files and Tutorials
Rev up your Photoshop program and try out all these tutorials and graphics on for size.

Programming8 Innovative Design & UI Elements That Make Sites Better
Great ideas for communicating with your audience more easily.

Feature
Post

Category
Design

Are You Designing for the Smaller Screen?

I’ve been thinking quite a lot about screen resolutions and, just as importantly, screen sizes the last year or so. Being a fan of small laptops and portability, I get constantly reminded that just because I pack a decent resolution of 1024×600 pixels (or whatever), that doesn’t mean that sites looking good on a traditional screen will work on my 8.9″ one, despite them both showing as much horizontally. The way I see it, there are X aspects of smaller devices you need to at least consider when doing designs, if you want to be future proof:

  • Smaller laptops/netbooks with decent resolution, like the Asus Eee PC or any screen under 12″ basically.
  • Smaller devices with a screen size at 5-7″, sporting a resolution at 640-800 pixels horizontally.
  • Mobile phones or similar with sub-640 pixels horizontal resolution, possibly with a vertical focused screen size ratio (like the iPhone).

That last one is easiest, they more or less require special treatment. Sure, you can use Opera on a mobile phone, or Safari on the iPhone, and surf the regular full-grown web well enough, but if you want it to look good and really work for the screen, it’ll need special adaptations. That is usually a completely different version of you standard site.

The Netbook Issue

The original Eee PC

The original Eee PC by Asus

Laptops and similar larger, but still small, devices are harder. The popular Asus Eee PCs started out with a 7″ screen with 800 pixels width, that’s too small for most sites today, usually optimized for a 1024 pixel horizontal limit. Some sideways scrolling is OK, I suppose, but fluid designs or smart choices could probably at least minimize the occurrence of that. However, your traditional site could work, if you laid it out in a reasonable fashion.

It gets worse when we’re talking 5″ or 6″. The resolution won’t be 800 pixels width, it’ll be something like 640 or less. That more or less makes any site designed for 1024 pixels width a nuisance to read. Everything will look like crap, basically, and we won’t want that as a designer. Visitors on small screens like that should be getting special treatment, probably with a completely different version of the site altogether.

Add Vertical Issues

a little bit of vertical scrolling isn’t really an issue

Web designers often concern themselves with a site’s width. It is indeed important to fit everything, from content and images, to ads and links and whatnot, in the Perfect Column Setup. Compared to that, a little bit of vertical scrolling isn’t really an issue when having access to decent screen real estate. I’d venture so far to say that the blogosphere helped push this forward, it is OK to scroll down again, although advertisers still yap about being above the fold all the time. That may be as it be, but what might be a little scrolling on a normal sized screen, say 768 pixels height (1024×768 being the most common screen resolution), or perhaps even more, but it’s not as fun if we’re talking 480 pixels height in screen real estate.

It is not that there’ll be a lot of scrolling per se, it is more an issue of the small amount of actual content being displayed. Take a site like this, and a post like this. Lots of text, which is fine and pretty easy on the scrolling factor after all. But add big strong graphics, add a powerful header image, add ads breaking up the post, and you’ll get a mess. Then take that to a really small screen, and you won’t be stuck surfing the web as much as you would otherwise.

This is a tough nut, however, because while we can optimize for less width to play with, the vertical scrolling is necessary on most websites today. There are solutions, some better than others, but the one thing they have in common is that they will probably not fit the big screen, just the smaller one. In other words, while vertical scrolling isn’t as big an issue as horizontal one, you might be better of optimizing for it.

Back to the Roots: Mobile Websites

This concept would work on a mobile phone (showing The Onion anno 1997)

This concept would work on a mobile phone (showing The Onion anno 1997)

Mobile phones are getting more and more web friendly, with the iPhone leading the charge. What they have in common is that they are vertical aligned, meaning that there is more height than width to play with in your design. The fact that a mobile phone, or similar device, shouldn’t be too bulky is actually a good thing here. It means that it’ll be easier for us to do fluid designs, having text wrap from left to right, no fixed layouts or anything.

Like it was, once upon a time. Only prettier.

One thing is for sure though, these sites need special treatment. There are plugins for publishing platforms, and several services that repackage your content, and optimize it for mobile phones, and that’ll help us along the way. However, we do need to consider how we lay out these sites as well, and how we can design them to connect to their older siblings (being the traditional website, should you not be a fan of metaphor). After all, if you do have a special website for mobile devices, it should feel like a natural adaptation to the smaller screen, right?

Are you designing for the smaller screen, and what do you do to make it easier for visitors to your site using smaller devices?

Feature
Post

Category
Design Focus

Friday Focus 08/08/08: User Generated Goodness

08/08/08—what a date for today’s Friday Focus! Aside from celebrating the start of the Beijing Olympics, how about enjoying some user-generated goodness for our sites this week?

Designs of the Week

#080808

This mashup brings together all 08/08/08 content from all over the net, particularly through Twitter, Flickr, Technorati, and Google. This site is beautiful not just because of its catchy logo (which you can download and personalize), but because it also presents oodles of content from everyone in a well-organized manner. I only wish it auto-refreshed!

p0pulist

There are several different things I like about the interface of this site, but what I like most is the pseudo 3-dimensional look applied to the header and other elements.

Myoats

The variation in image sizes lead the visitors eyes effectively: there’s one big featured image that spans the width of the layout, then there’s the left column contains medium-sized images for more popular creations, and finally there’s the right column containing small images for recent creations.

Social Media Weekly

Design14 Design Retrospectives
A list of articles that describe the redesign process of their websites. This tip is twofold: you can get inspiration by reading them, and when you’re done with your redesign, be sure to write about it as well.

ProgrammingFacelift Image Replacement
An image replacement script alternative for those who want to use fancy fonts.

Feature
Post

Category
Interviews

Cymbolism: An Interview with Mubashar Iqbal

Picking the right color for your design can be a hassle, that’s why there’s so many color schemer tools out there, of course. Recently, a slightly different one was launched by Suffolk Software, called Cymbolism. What it does is that it asks you which color you associate with a word, “love” for instance, and use that data to suggest colors based on keywords, rather than just displaying sets. I found that interesting, so I decided to interview the developer, Mubashar Iqbal, about this service.

The Interview

So what is Cymbolism, your new web app?
Cymbolism is a crowd sourcing application that that attempts to quantify the association between colors and words. Users are shown a word, and are asked to select which color they associate with that word. The user votes are tallied to quantity which colors are most associated with that word.

How would you say a designer should use Cymbolism?
When working on a new design, the creative brief usually includes a few key words that help drive the design direction.

You can lookup these words on Cymbolism, via the search functionality, and see what color people associate with those words which can provide you starting point for your designs color scheme.

Even if you decided to go against the current trends, Cymbolism will tell you what the trend is.

What sparked the Cymbolism project?
I’m really bad a picking color schemes for my web projects, so I’ve been reading a lot of articles and books on color theory, and they mention the psychology of color a lot. I started searching around the web to see if there was something more up-to-date for those associations, when I couldn’t find anything the idea for Cymbolism was born.

What are your thoughts on how colors are used in web design today?
I think the bigger sites still play it a little too safe. Most of those sites have much the same light background with a little splash of color. Even companies that have strong color associations (UPS for example) don’t make strong enough use of these colors.

What do you think govern our color choices in design? Is it all trends?
External trends do play a large role in color choices. When we see one effective use of color it usually spawns a lot of copy cats.

Same is true off-line. We still pay too much attention to what the next big color will be at the annual fashion shows, driving a lot of color choice in the print world.

Online we are able to adapt quickly and easily so people should not be afraid to try new things.

I’d like to thank Mubashar Iqbal for the interview, and urge you all to take a look at Cymbolism. Maybe it can help you in your upcoming project!

Feature
Post

Category
Design Focus

Friday Focus 08/01/08: Flash-Based Sites

It’s August already and we’re kicking off our first Friday Focus of the month with some Flash-based sites.

Designs of the Week

The 3D art here is superb, but what I enjoy most about this site is the floating effect achieved through continuously moving elements, like the hot air balloons, the rays of light, the flock of birds, and the sliding effect that loads the text.

Tonik Gym

I like that this layout is tilted—Flash gives you the liberty of doing that. I also like the feeling of “stiffness” from the graphical effects as it goes well with the theme of the website.

Trinity Lutheran Church

What a sleek site. Narrow type and neutral hues give it a modern yet dignified look. But it’s the beautiful photography that adds flavor to each section. Sometimes all you need are nice pictures.

Social Media Weekly

Design400+ High Quality Patterns
A huge collection of patterns all ripe for the picking.

ProgrammingUnit PNG Fix
Here’s another solution to the PNG transparency problem in IE6. A very compact and easy to install script.