User Interface Tools That You Cannot Live Without

The easiest way to show development for what you want built and to get feedback from customers is to first build your product’s interface. For a non-developer, this can be intimidating, but with the use of some design tools, interface design is very easy and not very expensive.

There are several tools to pick from, each having their own strength and weakness. Here are some of my favorites:

Microsoft Excel – I personally would not use Excel, but I have included it since several people have used this tool for web development, and it seems like a tool that everyone has. With excel you can use each formula box to create a part of the website by coloring the box or turning it into a drop down, input box, or a field. Also, macros allow you to add fancy buttons to the pages.

Microsoft Visio – Visio is very easy to use and has a good library of shapes that allows you to drag and drop shapes into a Visio canvas and design your user interface. You can easily add colors to Visio and use the drawing tool to create your own shapes. Visio’s biggest benefit is that it is simple to use and will help you keep your designs simple. Visio’s biggest problem is that your drawing will only be a drawing and you will not be able to see what your interface will look like in a web browser. Many outsourcing companies do not use Visio, and this may be a problem when it comes to sharing your interfaces. Also, another problem with Visio is when you have a lot of overlapping images the interface becomes cluttered. Linking pages in Visio is not possible.

Nvu- Nvu, an open source project sponsored by Linspire, is a web authoring tool similar to Dreaweaver that helps you create web pages. If you are not willing to spend money on a web-authoring tool, then this could be the solution for you. I did not think the tool was as user friendly as some of the other tools mentioned in this blog, and the tool’s library was not as rich as Fireworks for interface development. Nvu is more competitive to Dreamweaver and is more difficult to use for beginners. I think as the tool develops, this could become a good alternative.

Adobe Photoshop - Many people use Photoshop to create web interfaces and have become very good at using Photoshop. I personally found it a harder tool to use since it is not a tool specialized for web page development. Buttons, drop down menus, text boxes, and other images for your site will need to be created since there is not an existing library that is included out of the box. Also, there seems to be a bigger learning curve when using Photoshop. I found Fireworks a lot easier to use. However, Photoshop is a better tool to use when it comes to adding pictures to your site. Also, most outsourcing companies use Photoshop which will allow you to easily share your work.

Adobe Fireworks - Adobe Fireworks is by far my most favorite tool. It has the simplicity of Visio and a much better library that is designed for web interfaces. The library contains buttons, text boxes, drop down menus, and other images that you can modify to fit your site’s needs. You can drag and drop images onto the canvas or create an image and use and re-use it. Another huge benefit is that it is created is done in HTML and you can even convert it to different web development tools such as Dreamweaver. Another big benefit is that you can easily enable a button to open another web page you created. This allows you to take your work, view it in a browser, and click through your site. You can even post your work to a server and have a focus group critique it. Also, web developers and designers can download a 30 day copy of Fireworks for free while they work on your project, or they can just use your html to continue your work.

Adobe Dreamweaver/Flex - For those already experienced with Dreamweaver and Flex, using either of these tools may be an excellent choice for website interface design. As you design your interface, you will have a lot of the work already complete. It may help you get to market faster, but if you are not proficient with these tools, it may be a bigger learning curve and slow down your project. In this case, I suggest going with a lighter tool as the ones mentioned above and allow the developer to take your work and use it to build out your product. On the other hand, if you are willing to tackle the learning curve, you may be better off in the long run learning how to use this tool. The only caution is: do not get caught up in building the product when you are suppose to focus on building the interface.

If you are a Microsoft aficionado, then you may want to try using Microsoft’s Silverlight, Expression Web and SharePoint designer tools. I have not yet tested them, but they may be better tools than the ones I mentioned above. If you end up testing them, let me know what your experience was like.

I hope I provided you a good selection of tools that can help you in your web interface development efforts. Completing your interfaces and getting feedback before you start development can really help you streamline the process and come closer to ensuring that your outsourcing project will be a success.

This entry was posted on August 17, 2007 at 7:34 pm and is filed under Design Phase. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or trackback from your own site.