Siam Communications Web Services & Tools » Web Tools

How Usable is Your Website?

admin — Sat, 12 Jun 2010 06:51:41 +0000

I had the pleasure of meeting with a user experience expert yesterday, Carl Heaton from Web Courses Bangkok. Carl showed me a great tool for website owners called UserFly (affiliate link).

Userfly allows you to test the usability of your website as each visitor goes to your site. You start by adding a small JavaScript to the web pages you want to track. It’s that easy.

You can then view your account activity and watch a video of the users experience on your website; what they looked at, what they clicked on, when they left your site. This is a fantastic tool for helping us website owners to understand website usability. It can also point to potential problems that we didn’t realize existed.

For instance, Carl showed me a video of their old site. (They have just launched a fresh new look this week.) On the old site, visitors wandered around aimlessly not sure where to click or what to look at. This resulted in a redesign of the layout which assists users in finding what they are looking for much quicker and in a much more productive manner.

I am trying out the tool on my site now and I am amazed at what I have been neglecting in providing my users with helpful guidance on where to go and what to look for. It looks like I may be examining the layout of my site in more detail in the months to come.

About Web Courses Bangkok

“It is the 1 year anniversary of Web Courses Bangkok. I started the company exactly 1 year ago and we have already helped 12 people become professional web designers AND taught over 200 people.” – Carl Heaton
You can find out more here: http://www.webcoursesbangkok.com

Related posts brought to you by Yet Another Related Posts Plugin.

5 Online WordPress Theme Generators

Editor — Wed, 05 Aug 2009 16:18:54 +0000

As we continue our series on Online Generators, we begin to focus more on sites that can provide more than just single components of a site. Today’s entry touches on an area that interests most of us … the ability to create your own WordPress Theme online.

One general comment is that we were very pleased by what was available today. But I personally feel that there is still some effort needed to make these sorts of tools easy to use for the masses.

We hope you enjoy our selection.

Theme Press

We started with Theme Press as our first WordPress Theme Generator because this site is what inspired us to research the topic. We liked the possibility of being able to upload our HTML templates to a site that could convert them to a WordPress template. What we quickly realized was that this site is meant for people that have some kind of website coding knowledge.

As developers, and with the advancements made by the WordPress team, we find it easier to modify existing WordPress themes than to submit our code to such a generator.

This tool does have some potential. But compared to the other tools that we discovered, it just wasn’t worth paying $10 at the end to download our WordPress Theme using this tool. Perhaps further revisions of this online tool will smoke the competition.

WP Theme Generator

This online WordPress Theme Generator has probably received the most publicity on the Internet thus far. They offer a tool bar down the left hand side where you can change the setting for the look and feel of your WP Theme, and then see the results on the right side.

We found this tool very simple and easy to use. But it is also a bit limiting when you consider the various option available to a WP Theme Designer. But it certainly get an A+ for ease of use.

WP Theme Builder

We were very impressed with this WP Theme Generator. The toolbar located at the top of the page was very easy to work out and understand. The options we were given allowed us to create a very professional looking WordPress Theme. The site also offers comprehensive tutorials for creating a WordPress Theme along with Support, documentation and an online FAQ.

The only disadvantage was the price. Yes, they charge for the service. But considering what you might pay online for a professional theme, the price is competitive.

Theme Generator – beta

This WordPress Theme Generator was a personal favorite. The expanding menus on the left hand side are very intuitive and easy to use. They offer you most options available and are broken down into the different areas of a WordPress Theme. Changes made in the menu are immediately visible in the theme. Also offered are some color templates to help get you started. Each of the color elements can be changed as you get into each of the areas of the theme.

The best way to experience this Online Generator is to play with it. It’s free and when you’re done, your WordPress Theme is saved with the click of a mouse button.

PixoPoint

This WordPress Theme Generator was also a favorite among the team. Again, an very easy to understand menu on the upper left hand portion of the screen broken down by the various areas of a WordPress Theme. This tool also offered many options for creating a theme that we find useful. The only down side to this theme is that when you made a choice in the menu, you have to click the ‘Submit Design’ key to see you changes every time.

One of the things missing from all of the online generators we tried was an Undo button. Each of the tools had it’s own feel to it, some clumsy, others more elegant. But still they all lacked a feeling like this was THE tool for creating a WordPress theme. I realize it is difficult to create a web tool that is liked by 100% of it’s audience. But it does seem that there is some room for other players for sites that are Online WordPress Theme Generators.

Related posts brought to you by Yet Another Related Posts Plugin.

6 Online Web 2.0 Button Generators

Editor — Sat, 01 Aug 2009 09:17:43 +0000

This is another post in a series to help you identify useful online web tools to make your site look it’s best.

These online button generators allow you to create click-able buttons (not web badges) and download them for inclusion onto your website. The criteria for these sites was that they could create a Web 2.0 looking button and allow you to save it to you own computer. However, many of these tools have gone beyond this and provide additional tools as well.

Read on to see what is offered:

Da Button Factory

This is one of our favorites of the group. It is simple and easy to use with a large, easy to read user interface. The real power with this tool was in the ability to Undo and redo changes that we had made.

Button Generator.Com

This online button generator does a bit more than generate cool buttons. It also generates a menu system from your buttons. The menu generator allows you to apply mouse-over effects and sub-menus as well. A very useful tool for web designers.

My Cool Button

This button generator also uses a very nice Web 2.0 style interface for creating your own buttons. The benefit of this tool is that it allows you to add an icon into your button design.

Button Boost

This tool is broken up into two different web tools; a Quick Start button generator where you start from a set or pre-defined button templates; and an Advanced button generator where you select the options for your button design and generate the button. The templates were great at helping us brainstorm a bit on what message we wanted the button to convey to our site visitors. Buttons can be generated as PNG, JPG or GIF files, depending upon your own preference.

Glassy Buttons

The user interface for this button generator is very disappointing. You would think that if you’re going to build a site that generates Web 2.0 buttons, the site should look a bit Web 2.0ish instead of a remnant of the 90′s. However, it is a very straight forward tool with no flashy effects.

As Button Generator

We’re not necessarily leaving the best for last. But this button generator provided a few more professional looking options for generating a Web 2.0 button. In fact, we feel this tool had the most options for generating buttons online. We were very impressed with the results.

Related posts brought to you by Yet Another Related Posts Plugin.

10 Online Background Pattern Generators

Editor — Fri, 17 Jul 2009 08:17:12 +0000

With many web design projects, it is seemingly the items with the most subtle results that can require the most effort. This is certainly true with backgrounds.

You have probably seen some cool effects like stripes or other background patterns that seem to set off the design of a web page perfectly. Well now these professional, subtle looking effects can easily be implemented into your own pages with a minimal amount of effort thanks to the efforts of a few programmers.

The following is a list of online background pattern generators that will create a background pattern for you to download and use in your web design. We hope you find these useful.

Background Maker

bgMaker offers a very simple interface. As you make changes to the box, you can see the visual result immediately. Once you are happy with the result, click save and the background image is saved to your computer. This site relies completely upon your own creativity to develop a background pattern.

BgPatterns.com

We have featured this site before in Online Background Pattern Generator. This site is also very easy to use and offers a wide variety of pre-built background images to help get your creative juices flowing.

COLOURlovers.Com

This site is similar to BgPatterns in that it offers a library of patterns to get you started. You may also upload your own patterns and customize them on the site. They seem to have a very active community of users to share your ideas with. One major advantage that this web site has is that it is available in 12 languages.

Dotted Backgrounds Generator

This is a very simple to use background generator for creating a series of dots that gradually disappear down the screen. The features and options of this background generator are a bit limited, but the results are good.

Pattern Cooler

This online generator has one of the best libraries of professional looking patterns I have seen. Each of these can be customized to your own color combination as well. If there is a specific type of pattern you are looking for, the home page offers a set of tags at the top to point you in the right direction.

Striped Backgrounds

This site only offers striped backgrounds. But this is sometimes the subtle touch that a web page or header may need. Like the other entries, this site is very easy to use and the results can be downloaded to your own computer with the click of a button.

Stripe Designer

This online generator is not as easy to use as some of the others. But it does offer a bit more than just stripes. You can also add a background image to the background and add a striped, or other type of texture as an overlay.

Stripe Generator

This is one of the easier online stripe generators we used. There are far more options available to give your striped background that professional Web 2.0 look and feel. Once you decide on your color scheme, you can also create a tartan background pattern with the same color scheme with the click of a button.

Stripe Mania

While the features of this online generator weren’t as many as some of the others, the results were impressive. With fewer options to worry about, we were able to develop a more professional set of Web 2.0 stripes in a shorter period of time. The user interface is pleasing to the eye and very intuitive.

Tartan Maker

While a tartan background wouldn’t be our first choice for some of our web sites, we were impressed by the output from this online generator. If you are looking for a subtle yet professional tartan background, this is your site. The user interface is very simple to use as were most of our entries. This is a sister site to Stripe Generator and if you have the need to generate image reflections or generate navigation tabs, these folks offer an online generator for you as well.

Related posts brought to you by Yet Another Related Posts Plugin.

Online Background Pattern Generator

The Coach — Mon, 25 Aug 2008 13:23:49 +0000

In another one of our projects, we had a design that required a white content area with the area behind it filled with a pattern. Unfortunately, the background pattern was something that the client was not happy with at all.

In the interest of time, they asked us if we could find something nice and fix the pattern. Even though this background pattern is a fairly small part of the website, it has a large visual impact on the site. Therefore, it was important that I spend some time finding several options for the client to review. As I carried out a frustrating, time consuming search for mediocre patterns, I ran across the Tiled Backgrounds Desginer website.

Within a few minutes I had three different homepages for review, each with a diiferent pattern and corresponding style. The tools is very easy to use and provides a tabbed interface for building your own background patterns. You have the option of specifying your colors, pattern images, scale, opacity, canvas and even the rotation of the pattern.

I highly recommend this tool for every Web Designers arsenal of tools.

Related posts brought to you by Yet Another Related Posts Plugin.

3 Online Photo Editing Tools

Eric — Fri, 25 Jan 2008 10:36:48 +0000

Finding a tool that let’s you polish up your photos for the web is not an easy task. Some photo editing tools are so feature packed, they become a little too difficult to use for the average computer user. So we went searching for online photo editing tools to see what was available and we’ve found three products that we think meet the needs of most.

The tools are Picnik, Splashup and Snipshot. All three allow you to upload a photo from your computer or from the Internet. Both Picnik and Snipshot also have a Premium upgrade that gives you far more photo enhancing effects to choose from than just the standard freebie package. Here is our brief take on each of the tools.

Picnik

Registration for a free account was extremely easy and didn’t take you through the email validation process that is common today. There are more photo effects available to the free user than with Snipshot, and the premium upgrade is the least expensive of the tools at $24.95 for one year, or about $2 per month.

Splashup

This was our favorite because it opened up a familiar application window when we were ready to get started with our photo editing. Registration was very simple with no email verification. And all of the effects are available with your free registration, but there are not as many effects as Picnik offers to premium subscribers. There was no Premium membership option available for this tool.

Snipshot

There was no registration required for us to upload a photo and add some effects. However, the effects available to the free user are very limited. The good news is the premium membership is the most expensive at $9 per month, the good news being that you only needed to buy a month premium membership at a time instead of a full year.

We recommend you to try out all three and make the choice for yourself.

Happy photo editing!

Related posts brought to you by Yet Another Related Posts Plugin.

New DHTML Color Picker Tool

Eric — Thu, 17 Jan 2008 14:46:03 +0000

Weâ€™ve just run across this wonderful new tool from COLOURlovers.

Getting the perfect color or color scheme for your web site, or graphic can be difficult. The most difficult part is remembering those cryptic hex codes or RGB codes for your favorite color.

So the folks at COLOURlovers created a color picker tool. But the best part is this tool is free, and theyâ€™re making the code available to put on your website.

As we are always scouring the web looking for useful Web Tools for our visitors, we will be putting this on our site. But we thought we should let our visitors know they have the option to get a hold of this tool as well to benefit their web design efforts.

You can get the code here.

Related posts brought to you by Yet Another Related Posts Plugin.

Cool Buttons created "On The Fly"

Eric — Tue, 08 Jan 2008 15:11:23 +0000

I can’t tell you how many times I have been designing a web site and come to a point where I say to myself, “I wish I had a really cool looking button for this section.”

So I start up Adobe Photoshop, of which my skills are somewhat lacking, and I attempt to create a stunning button. Hours later, I have a so-so graphic that looks like something a 3 year old drew with a crayon. Not my desired result and a major waste of time.

So I was very pleased to run across this fantastic online tool for creating very cool looking buttons. It takes very little effort on my part, but looks like I know my stuff when it comes to creating graphics.

In four easy steps, you too can have a Web 2.0 button that looks as stunning as the one shown here.

Step 1 – Select the size of your button with the handy slider bar

Step 2 – Select a color for your button

Step 3 – Optionally use a predefined, or uploaded, icon in the button and size it

Step 4 – Select your Text, font style, size and color

Click ‘Apply’ and there you have your newly created, stunning looking Web 2.0 button. Don’t like it? Then revisit any step and click ‘Apply’ again. When you like what you see, just download it to your computer by clicking the ‘Download’ button.

What could be easier? And better yet, what else can make me look like the web design professional I wish I was?

Related posts brought to you by Yet Another Related Posts Plugin.