I consider myself creatively impaired when it comes to visual design. I know generally what I like and what I think works, but I’m not good at actually creating it from scratch. I leave that type of stuff to the pros and absolutely think that just because you can use Photoshop, or make a website, that does NOT qualify you as a designer!

But once in a while, I need to sort of cheat and pull off some design-y type things and I have found several online tools that help me do this in a competent way. Plus, most of these tools are just super-fun to play with!

Web-based Color Palette Tools

Need to pick a font color for a website that will match the overall look and feel? Or maybe you need to introduce an additional color that will match. These handy tools will let you upload a logo or any image and generate a color palette of complementary colors.
Color Palette Generator
This is very simple to use – just paste in the url of a logo or image and it will generate some colors.
Adobe’s “Kuler”
tool does a few more things. It has some preset color schemes which can be useful if you’re starting from scratch, or you can create your own based on a color you select, or an image. It also presents versions of the color schemes based on mood or other criteria.

Browser Add-Ons for Color Palettes

The Firefox add on Rainbow Colors lets you analyze a website and extract a color palette right from your browser, from any website. It’s slightly buggy to use, but overall does a nice job.

For Chrome you have a couple of good options.

The Palette for Chrome extension creates a color palette based on an image on a website. As you’re browsing, you just right-click (CTRL+Click on a Mac) an image and select Palette For Chrome, and it will whip up a color palette in seconds.

The Colorzilla extension (by the makers of the useful CSS Gradient Generator ) does a few different things, but the feature I like the most is the ability, much like Rainbow Colors, to generate the color palette from any website you are browsing, without having to identify a specific image.

Fonts and Typography

In addition to being creatively impaired, I’m also a bit of a design snob. This is a really unfortunate combination! I want to come up with really elegant and cool font combinations (because of course I look down upon poor typography as if I were a pro) but it’s really hard for me to do that when left to my own devices. But once again, there are some really nice tools available that can help the common-a-garden snob such as myself.

Ever see a nice font and want to know what it is? What The Font lets you identify a font based on an image that you upload. Or if you see it on a website, you can just paste in the exact url for the image.

My personal holy grail and what lead to this list of resources was a search for a free online tool into which you could select a font and it would suggest complementary fonts that would look good with it. I was not able to find exactly this, so if someone out there knows of its existence, please leave a comment!

All the tools I’ve listed in this post are free, but if you are really into fonts, you should look into Type DNA which is a paid application.It not only helps manage the fonts on your computer but will actually help you choose fonts and find complementary fonts.

In my hunting I did find several articles showcasing various examples of font combinations that work really well. So you can use these as inspiration and examples:

40 Best Typeface Combinations in Web Design

10 Great Google Font Combinations You Can Copy

Top 19 Font Combinations

40 Font Pairings

25 Examples of Beautiful Typeface Combinations

Font Combinator is a really cool way to test out how different fonts from the Google Fonts directory will look together.

TypeTester.org – this is similar to Font Combinator, although it gives you 3 columns of text side by side to play with. Type Tester has a broader range of fonts than Font Combinator and you can also play with things like word spacing, alignment, and both font and background color.

Esperfonto is the closest I could find to the holy grail I was looking for – a tool that would suggest font pairings. It works pretty well but seemed a tad limited. It’s connected with the MyFonts.com directory of fonts, but when I tried typing in something like Museo, which you can find on MyFonts, Esperfonto couldn’t find it. But it will let you specify certain characteristics you are looking for (e.g. Modern, Traditional, Cool etc) and then make suggestions based on that.

How To Make a Landing Page

Ever need to put together a one-pager for a specific product or project? It always seems like it should be simple, but there’s an art to creating a good landing page. Let these smart people guide you:

Formstack’s ‘Anatomy of a Perfect Landing Page’

50 Effective Landing Page Templates

Examples of Effective Landing Pages

Call To Action Graphics

Another apparently simple task which is tricky to do well for the non-designer, is making buttons or graphics for things like “calls to action” – you know the kind – Click Here, Download This, Subscribe Now etc.

Hongkiat.com has a really great resource that includes many free  PSD templates that you can easily customize to make your own buttons.

In WordPress, there is a really handy button maker plugin called: Max Buttons which generates pure CSS buttons for your site.

You can also create CSS buttons using this awesome tool from CSS-Tricks.com

And for a general resource for all things free and design-related, keep your eye on this freebies page from SmashingMagazine – they offer all kinds of free resources for icons, fonts, images, etc.

What resources have you found that should be on this list? Or what are you currently looking for that should be included here?

header image courtesy: http://www.flickr.com/photos/songallery/4592139716/

• Comments Off

One of the reasons why WordPress is so awesome is because it makes building powerful websites pretty easy. Pick a theme, add some content, hit Publish and there you have it. Lack of technical know-how is no longer a barrier, and the array of shiny, sexy themes that are available along with the inexpensivenss of it all can make it dangerously easy to under-think the process of building a website. But while WordPress and its eco-system have made many parts of the process simple and taken the grunt work out of making a site, the one thing that YOU still have to do, is the analytical thinking and planning behind your site.

For your site to be an effective business tool, it must reflect the core goals and missions of your company. Whereas many of us start the planning of a site by looking at the available WordPress themes and letting those designs sway our decisions, we really need to be starting from a more strategic point of view and making decisions about themes, plugins etc, based on the bigger picture.

So before you put pixel to screen, or start buying themes, consider the following.

1) What are the values and overall mission of your company?

For your website to ‘feel’ right at a fundamental level it must be a reflection of the driving force behind your business. What are the values that you want to convey? What is it about your business that keeps you motivated to run it every day? What is it about your business that your customers connect with?

2) What are the business goals of the company?

This is a key point that should influence everything from site development to marketing strategy . Get clear on what the specific goals of your company are. Sure, everyone wants to increase sales and profits but perhaps there are specific areas of your business that you are trying to grow, or areas you are moving away from. Your goals may change over time, so it’s good to review them periodically and make sure your site is still in alignment with your business goals.

3) Who is your desired clientele?

Do not try to be all things to everyone. Just because you CAN provide a certain service or make a certain product doesn’t mean you should prioritize it on your site if it’s not what you ultimately want to do. So focus on catering to the customers you really want to attract to ensure you are building a business that will serve you financially and emotionally.

4) If your site was an employee, what would its job description be?

In order for you to know whether your site is successful, it has to have a clear purpose with defined outcomes. How will you know if your site is working for you? What would the results be? More product sales? More leads? More email subscribers? etc Outlining clear goals and benchmarks will help craft the site and provide focus for design, content and tracking results.

5) What do you want visitors to do at your site – what are the actions that count?

Considering points 1 – 4 above should have brought you clarity on the purpose of your site, and therefore what steps you actually want your visitors to take upon arriving at your site. Your website should always be guiding your visitor toward what you want them to do next. Knowing what actions you would consider to be significant and tracking them, will help you understand if your site is effective or if it needs tweaking.

6) Your homepage is only one page, not the entire site.

Your website is more than just your homepage. Your homepage should provide guidance for those who land there, but it is not the be all and end all of your site. Not everyone will come to your site through your homepage – internal pages will act as landing pages for search engine visitors, so make sure that no matter what page people land on, you are providing the appropriate message and information for that visitor to take the next step.

Once you are clear on these points, the theme, graphics and text that you use will end up serving your purposes precisely. The more clear your sense of direction, the better result you will get out of your site.

*header image courtesy: http://www.flickr.com/photos/bluekdesign/4890727263/

• Comments Off

I teach people on a daily basis how to use WordPress, from the ground up. A few face-smackingly simple issues come up time and again.

1) Pasting from Word will make your posts look funky

Anytime you copy and paste directly into the WordPress editor, from Microsoft Word, another website, or any other outside source, you run the risk of it looking, well,  a bit funky ,when you publish it. This is because other applications, especially Word, have their own set of formatting that gets carried over when you copy/paste. Usually this ends up conflicting with the formatting and styling of your theme. You may not realize there is an issue until you publish the post and something looks off – the fonts don’t quite match, or the spacing is strange. 9 times out of 10 in these cases, it’s because you copied/pasted from Word. To avoid such issues, simply use the 2 clipboard buttons on the second line of the post editing toolbar with the T and the W on them.

Wait, you only have a single toolbar? Make sure to click the “Kitchen Sink” button – the last button on the right of the toolbar.

Ok, now in the middle of the brand new toolbar you will see the 2 clipboard buttons I am talking about:

The “Paste from Word” button (clipboard with a W on it) will attempt to strip away any junk and leave you with clean text – it will generally retain basic formatting you may have done, such as bold, italics etc. If you still have problems when using this, then try the Paste as Plain Text option (clipboard with a T on it). This will strip away all formatting from the source, so you will need to re-format your text using the WordPress editor.

2) “How do I make a line break dangit?”

When you are typing in the WordPress editor and you hit the Enter key, WordPress will create a Paragraph break (the equivalent of <p> in HTML), which means it will leave an empty line between the place where you hit Enter, and the new cursor position. Sometimes this is infuriating when you just want the cursor to go to the next line. This is a regular line break (<br> in HTML) rather than a paragraph break, and is easily accomplished by holding down Shift when you hit Enter.

3) “My homepage is a static page, so where do my blog posts go?!”

When you use a static page as your home/front page in WordPress, all you have to do is then create a new Page called Blog. Leave this blank – it basically just acts as a container in the WordPress system to indicate where your blog posts will be displayed. In the WordPress Reading settings (Settings > Reading) , choose this Blog page under the Posts page dropdown menu. Then add the Blog page into your menu bar. Magically, this will become your blog homepage and when you click on “Blog” WordPress will automatically display your blog posts.

One caveat to this, is if you are using a Premium theme which has a special homepage layout, which you configure in the theme’s options panel. In the WordPress Reading settings, it will still show that your homepage is showing blog posts, even though it may not be, depending on the theme. In this case, the theme probably provides a Blog page template, so you would again create a Page called Blog, and make sure to select the Blog template under Page attributes.

4) “I tried to install a theme I bought, but I’m getting an error message that the theme is broken”

The most common cause of this I have seen is that theme developers have hidden the actual theme folder within another folder in the zip file you purchased. When you purchase a premium theme, you download a .zip file. If the theme developer is being user-friendly, you would simply upload this same zip file into your WordPress dashboard. However, what frequently happens is that, if you open up the zip you downloaded, you will find another zip within that main folder. THIS is the .zip you need to upload. WordPress cannot detect it if it’s hidden in this way. In the first image below you see the initial .zip file I downloaded upon purchase. If I uploaded this as-is, I would get an error message.

In this second image, you see why. I unzipped this folder and you see that there are several other files in there, including another zip called ‘striking’ (the name of the theme) – this contains the actual theme files and is what you would need to upload.

5) “How do I turn on/off the comments for a certain page/post?”

In one of the recent versions of WordPress, they decided to clean up the writing interface. In reality, what happened is that they hid a bunch of stuff under the obscure label “Screen Options” at the top right of your screen. The ability to turn on or off comments for a particular page/post, stumped newbies and experts alike for a while – where did that control go? So if you are missing this feature, try clicking Screen Options and then check the box for Discussion. This will reveal the box to control comments. Note that the box called Comments, doesn’t provide access to control the ability to comment – it only shows what comments if any, exist for that post/page.

6) “There are things showing up in my footer/sidebar but I can’t find when to change them!”

If you seeing what appear to be widgets in your footer, sidebar or any other widget area – ie. Category lists, Recent posts etc, but when you go to Appearance > Widgets, those sidebar areas appear to be empty, you are most likely seeing default fallback widgets set by your theme. Some themes are set up so that if you have not added any widgets, it will automatically display a Category list or some other default content. All you have to do is add a widget to that section, and it will override the default, and you will only see the widget you have set.

Are there any other apparently simple but infuriating WordPress issues you have come across?

*header image courtesy: http://www.flickr.com/photos/striatic/2192192956/

• Comments Off

I had a client recently who needed to create private, password-protected sections on her WordPress site. She wanted each of her clients to have a private page with information related to what they were working on together. Easy! Password-protection is an in-built feature of WordPress, in case you didn’t know.

When creating a page, you simply click “Edit” next to Visibility in the Publish box on the right. Choose “Password protected” and set the password as you choose.

But what if you want to create a series of pages for the same client to access? This would mean you would have to create a password for each new page which seems a little cumbersome.

Fortunately there’s a handy plugin called Password Protect Children Pages which will automatically password-protect the Child pages, ie. sub pages, of any password-protected Parent page. Additionally, if the correct password is entered on the parent page or any of its children pages, all related pages will be viewable to the user, so the experience is smooth for your client.

So the next question is, how to provide an easy way for your client to navigate the private area you have created for them?

A simple solution I found is courtesy of another plugin called List Pages Shortcode. As the name suggests, by placing a shortcode in any page or post, it will display a list of your pages.

If you were to use the basic shortcode:
[list-pages]
You would display a list of ALL your pages. Of course you only want to display the pages for that particular client or section.

So instead use the shortcode:
[child-pages]

to output the subpages you have created. You can also modify the order the pages are displayed in. For example, the following will output the child pages with the newest first:
[child-pages sort_column="post_date&show_date=created"]

As an example I created a main/Parent page for Client A, with 2 subpages. On the Parent page for client A, I use the short code plugin:

And the result is a simple way for my client to navigate their private section on my site:

In addition to private client pages, what else might you use this for on your site?

*header image courtesy: http://www.flickr.com/photos/holster/195031415/

• Comments Off

Need a Twitter plugin that does a little more than simply display your own Tweets in the sidebar? Tweet Blender does a ton of stuff:

Tweet Blender is tag-aware and has support for multiple authors, lists, hashtags, and keywords all blended together. The plugin can show tweets from just one user or a list of users (as all other Twitter plugins do); however, it can also show tweets for a topic which you can define via Twitter hashtag or keyword. But there is more! It can also show tweets for multiple authors AND multiple lists AND multiple keywords AND multiple hashtags all blended together into a single stream.

The output is pretty slick looking too….

After you install the plugin you’ll find a pretty comprehensive set of options under Settings> Tweet Blender, but the real action happens on your Widgets screen. You’ll find several new widgets available that have Tweet Blender functionalities, as described above. Another widget not mentioned above is one called “Tweet Blender For Tags”, which “Shows related tweets by searching Twitter using tags of your post as keywords.”

Find out more at: WordPress › Tweet Blender « WordPress Plugins.

What are your favorite Twitter plugins?

• Comments Off