Sketching User Interfaces

I’ve always favored the trusty pencil and paper when first sketching out all kinds of ideas, and user interfaces are no exception. Visio-type tools come in handy for diagramming architecture and logic, but when visual creativity is needed, the pencil allows you to be much more loose and free-form. I was inspired recently by a video of Adaptive Path as they brainstormed user interfaces for an iPhone application. The designer used colored pencils and the sketches are gorgeous.

I am currently working on a web application for a volunteer organization, so I decided to break out my colored pencils and start sketching. I loved how it felt. The argument from many people will be, “adding color can lead you into too much focus on details when they’re not yet needed.” While that may be true, I wasn’t really thinking about bringing these colors into my final palette. I was just using them to add fun to the process of brainstorming.

UI sketch
UI sketch

Version Control with TortoiseSVN

What is TortoiseSVN?

TortoiseSVN, a subversion client for Windows, is used for version control. It is open source and highly regarded in the programming community. You can use it for just about any kind of project, but the most popular is for controlling source code. You can find out more about it at http://tortoisesvn.tigris.org/.

Using TortoiseSVN is incredibly easy, but people first starting out may findĀ  that the myriad of options can be overwhelming. TortoiseSVN does have a simple interface, but you will quickly realize that there are several methods available to carry out similar tasks. After piecing together bits of the official documentation and unofficial videos, I finally settled on a method that works for me.

Even more bewildering, especially if you are new to this process, is how to place an existing project under version control. I will specifically describe how I handle that, and will describe how I set up a repository and working folder to maintain my files on a daily basis.

Step One – Create the Repository

The repository is where your master files are kept — where files will be checked in and out of. Simply create a normal Windows folder, anywhere. We will call ours “My Project Repo”. Then right-click the folder for the context menu and select TortoiseSVN | Create repository here. You will then get a confirmation that the repository was successfully created. From now on, you will never treat this folder as a normal Windows folder.

Create repository
Create repository

Step Two – Import the files

Since we have an existing project, we will now import our project files into the repository. You will want to choose your highest level folder in your project hierarchy to import. We will be placing a Visual Studio project (called CampaignMonitorTest) under version control, so we will want to choose the folder in the main Visual Studio/Projects folder. (I realize that there is a VS plugin for TortoiseSVN, but I wanted to stay away from that for now).

To import the project folder into the repository, open the repository browser by right-clicking the My Project Repo folder and selecting TortoiseSVN | Repo-browser. A window will display the contents of your repository. Right now it is empty.

Import files
Import files

Right-click in the file area of the repo browser window and select TortoiseSVN | Add folder.

Add folder
Add folder

In the next window, navigate to your project folder and select OK. Enter a log message in the pop-up window, such as “initial import of project folder”. TortoiseSVN will then import your entire project. You can navigate your folder structure in the browser, just as you would in Windows explorer.

Imported files
Imported files

Step Three – Checkout a Working Copy

Your SVN folder is currently holding version 1 of your project, but your Visual Studio project folder has no connection with version control whatsoever. To remedy that, let’s first delete the Visual Studio project files from the project folder (this is the actual project folder in your Visual Studio hierarchy. If this seems scary at first, make a backup of your project files first). Now, checkout a working copy of your repository to the Visual Studio/Projects/CampaignMonitorTest folder by first right-clicking the top-level folder in the repo browser and selecting Checkout.

Checkout
Checkout

In the next window, navigate to your Visual Studio/Projects/CampaignMonitorTest folder for the Checkout directory.

Checkout from repository
Checkout from repository

After clicking OK, TortoiseSVN will checkout a working copy of your project. You will see that you are currently at revision 1.

Checked out rev 1
Checked out rev 1

If you look at your working copy, inside the Visual Studio hierarchy, you will see your project folder with an icon overlay, indicating that your project is currently under version control, and is up-to-date.

Working copy up to date
Working copy up to date

Step Four – Ignore Unnecessary Files

There are a few things inside our project folder though that we don’t necessarily want versioned. For example, the files inside the obj folder are automatically created upon project compilation, so we don’t need to include those. In TortoiseSVN, we simply add that folder to the ignore list by right-clicking the folder and selecting TortoiseSVN | Delete and add to ignore list. You will then see a new icon overlay, indicating that the folder is marked for deletion (not from your file system, mind you, but from version control).

Marked for deletion
Marked for deletion

Step Five – Commit Files

Up in the Visual Studio/Projects folder, you will notice the CampaignMonitorTest folder is indicating that files within it have been modified and not yet committed back to the repository (this will normally be caused by your modifications to the code, but right now it is because we marked a folder for deletion).

Out of date
Out of date

Right-click the folder and select SVN Commit… Enter a log message and click OK. You will then see that your files are at revision 2.

Revision 2
Revision 2

You will now notice in your Visual Studio/Projects folder that all of your versioned files display the overlay indicating that they are up-to-date. You will also notice that the obj folder has a new overlay, indicating that it is currently being ignored by version control, as you requested.

Up to date
Up to date