Web Application Design and Prototyping Tools

Sep
20
2008
FormElementScreenshot

Creative Commons Licensephoto credit: j wynia

I carry a variety of notetaking devices. They all have their benefits and I tend to oscillate between pen/paper and electronic devices. However, the notebook nearly always tends to hang out around me and I dump ideas onto the pages as the day goes on.

Those notebooks have been filling up with ideas for projects. Combine that with some client projects and my shift in schedule (which hasn't freed up as much time as I'd hoped), and I find myself at the beginning of several projects at once.

This raises a few needs that have been hanging out there. Designing and starting a web application project involves a few things for which I've never been happy using the existing tools.

First, there's actual layout design. While Photoshop works fine for doing the "sketches", the people who are in a role to review those design ideas tend to get overly focused on things like font choice when you're trying to figure out whether you should use one screen or a wizard for registration only to suddenly notice that the wizard was chosen just as the app goes to production.

That's why my interest was piqued when Balsamiq came out a while back. It provided a way to do mockups of screens and keep people focused on the functional design instead of colors and fonts, just like I want. However, there are quite a few apps that I'd use more that also are in the $100 range (Balsamiq is $79) and I haven't bought those yet, so it's unlikely that I'll be buying it any time soon. Plus, I'm not exactly a fan of the Comic Sans font.

SketchyToolkit2

However, the other night, I was relaxing in front of the TV before bed and I figured I'd doodle a few sketches like the widgets in Balsamiq. As I was drawing, I also was thinking about Antonio Lupetti's technique for sketching on screenshots, which I've been wanting to use more in articles and presentations/screencasts, so I included some of those elements as well.

It didn't take long and I had 4 sheets of paper pretty well covered. Because I started by just sort of doodling, the elements didn't end up to scale, but I like the way some of the icons, etc. turned out. I'm thinking of fixing the tablet PC (battery won't hold even a slight charge and the stylus disappeared) and re-do them on a grid that will make them the right comparative size.

However, I did scan the pages to PNG's for sharing.

One of the other difficulties is that I've seen too many projects, particularly inside the firewall, receive horribly ugly and unusable web templates. At the same time, for my own projects, I'm not ready to pay a designer yet to do the final design (though I may be soon if you're a designer and interested), and need to get on with building things in the mean time.

So, I've been wanting a decent "generic" web application template that lets me focus on building functionality and, once that's nailed down, do the final design as more of a "redesign" from the generic template.

The thing is that, while there are thousands of web "site" templates and blog templates, there are very few that are oriented to web applications. There are so few, that something like 2/3 of the Google links for my searches led back to this 1 template. That theme is nice, but not the look I'm aiming at for my temporary template.

Among other requirements, like the sketchy mockups, I want the the ability to actually have a completely grayscale look to the initial prototypes to hammer home the temporary nature of the design. So, last night, after I tossed Revolver into the DVD player to finally watch it (incidentally, not the kind of movie to be working during as I'm going to have to re-watch it to entirely "get" it), I decided to take a shot at building such a template myself.

I grabbed a copy of the 960 CSS Framework (something else I've been wanting to mess with) and whipped up a batch of pages that covered the basic HTML elements, a bunch of form elements and a start on stuff for data display, like tables. I threw in a bit of jQuery for things like drop shadows and by the end of the movie, had some decent results. There are still plenty of little bugs (like the jQuery tabs didn't cooperate, so I threw some other ones in instead until I can figure that out), but I'm pretty happy with it so far.

It's grayscale by default, but all of the color definitions are in a single CSS file, so changing the colors is easy. All in all, it's pretty modular and I think it will turn into an ASP.NET master page quite easily as well as allow a complete swap-out for a different design later as nearly everything is pretty vanilla HTML tags.

I zipped up both the sketchy PNGs and the web application template together so you can download them if you'd like to take a look.

Download the Prototype/Design Toolset Package

An Open Plea to Creators of Login Pages

Sep
15
2008

I just reset my password on the ASP.NET forums for the 6th time. I know that it's been 6 times because I can see archived emails proving that point. However, none of those emails gave me a clue to either what my changed password was or why I keep needing to change it.

So, I reset the password yet again and went to my email to click reset link #7. When I went to choose a new one, I was immediately reminded of why I forgot my password and why I will likely continue this cycle of resetting the reminder finally sticks.

I put in one of my "normal" passwords that I use for things like forums and was greeted to what jogged my memory:

Invalid password. All passwords must be at least 6 characters long and contain at least 1 uppercase character, at least 1 lowercase character, and at least 1 numeric character (digit).

I've since gone back to create a new account as a test and this message is nowhere on any of the following:

  • The registration page.
  • The "Lost your password?" page.
  • The reset password page.
  • etc.

Of course, if this was a singular instance of this problem, I'd probably just move on, irritated. However, this kind of thing is nearing universality as web sites and web applications start pushing for password policies. This is just one of the best examples of how to do it wrong.

I'm not going to get into whether the policies themselves make sense. Heck, in some places in the world, password policies are making it into banking legislation, removing the option from doing it any other way.

However, if you're going to enforce a password policy that is anything other than "whatever you feel like entering", it is your job to help the people who are interacting with your site remember the conditions when they created that password.

So, PLEASE, if you are building such a site, with such a password policy, display that policy whenever my login fails, whenever I might be about to reset or request that you send me a new password, when I register and, quite frankly, whenever the username and password boxes appear on your site. It would make the world a better place.

Standardized ASP.NET MVC Controller Actions with Visual Studio Item Templates

Sep
07
2008

First, I think that this may be the longest title for any post on this site. I ditched 2-3 other variations for the only one that accurately describes this post.

Anyway, over the last couple of months, I've been working on getting better with screencasting tools. I learned a lot doing the last one and took that into the tinkering I've done with another one over the past week or so.

It stretched out over that timeframe because of a bunch of other stuff going on as well as some time spent on one-time tasks, like creating a Keynote theme to use for future screencasts that's a bit better thought out than the one I used on the last screencast. This look is something I'm much happier with and gives me a basis for more consistent look and feel going forward.

There's none of my shining face because I lent my webcam to a friend. I do see the value in adding that to the recording, but am not sure the best way to do it.

Anyway, on to the topic I actually covered in this video.

In ASP.NET MVC, the Controllers often end up with an Action method for all of the really common bits of functionality: Create, Insert, Update, Delete, etc. Stephen Walther put together a list of suggested standardized naming and usage for these Actions and I've been using them in the couple of ASP.NET MVC projects I'm working on.

In the process, I created a Visual Studio Item Template to make creating a new Controller that follows that convention easy. When I showed it to a co-worker, he expressed interest in how I did it and I saw an opportunity to explain something that's actually useful.

So, if you've ever wondered how to get your own templates into that Visual Studio "Add New Item" dialog box next to "Class Library", "Application Config File", etc. This is the screencast for you.

Anyway, give it a watch and let me know what you think.


Creating Visual Studio Item Templates from J Wynia on Vimeo.

Handling Pro Bono and Discounted Projects

Sep
01
2008

A few weeks ago, I was reading this article on 30 Ways to Create an Incredible Client Experience and I thought about something I started doing a while back. It actually seems counter-intuitive at first, but turns out to actually improve the experience on projects where you're charging less than your full rate.

From time to time, I do a project or a portion of a project for free. Some are for friends or family, some for charity and sometimes I have some hours that I don't bill for because I screwed up.

When I first started out, I would do that free or discounted work and it would never be mentioned again. Then on more than one of these projects, things were just sort of sour.

On one, someone was upset that the project was late (I was too), and I'd actually put in a ton of unpaid work over a couple of months to get it done and we still didn't make it in time. The client made a comment that hit me hard. He was looking at my bill, which only included the first 40 hours of each of those weeks and said, "Maybe if you'd been willing to put in more than just the minimum effort, we'd have launched on time."

Right there and then, I realized how important perception and visibility are to a project. Later on, as I read more about marketing, human psychology, etc. I learned a bunch of things about the way people view "free". Further experience taught me that if the value wasn't visible, people will invent a number in their head. And, if the number they come up with on their own is closer to what you pay the neighbor kid to mow the lawn than to what they pay their mechanic, you're in trouble as a tech professional.

A few years ago, I was having a conversation with another consultant and was complaining about how a pro bono client I was helping seemed decidedly ungrateful. He told me that he billed even the free stuff and just discounted it. He went on to tell me to ask this particular client how much they thought they were getting for free.

I followed up on that suggestion and discovered that the non-profit in question thought that the web work I was doing would cost about $300 on the open market. Problem was that I'd given them the same amount of time that my paying clients pay well over $5000 for. Clearly there was a mismatch.

So, what I do now is to shine a light on that free and discounted time. If I'm doing some geeky work for someone that goes beyond a quick phone call or a chat over a meal, I write up the time spent at my normal market rate. I then apply the appropriate discount. That means that if the whole project is free, there's a completely normal project invoice, with a 100% discount applied.

That's something to think about for those who are starting out doing web or design or other work where the common advice to break in is to do a project for cheap or free to build your portfolio. That advice is frequently criticized because it can lead to either that first client or everyone they refer to you expecting the same cheap deal. If, however, you bill that portfolio building project and just discount it, the point that it was a one-time deal is much clearer. You can even name your discount to nail the point home.

I also do this for the kinds of things where I either screw up (I'm the first to admit that it happens) or need to a bunch of research and don't feel ethically right billing for it. I did it a couple of months ago, where the actual bill for the month was something like 22 or 24 hours and I included another 8 that I discounted 100% because I spent an entire day rebuilding the staging server after I messed it up by trying to take a shortcut.

Given that we had had conversations about the delay, putting it on the bill made it clear that I had really made an effort to rectify things. It also showed that I had skin in the game for the problem.

It's really all of those various reasons that have reinforced this technique. All kinds of assumptions and underlying miscommunication gets cleared up when this stuff shows up on a bill. I'm really still quite amazed at how well it diffuses bad blood on both sides.

If you've got frustrations with or have held back from doing discounted work because you aren't sure how to handle it, this approach is worth thinking about. It works great for me.

 

J Wynia

For better or worse, I'm the guy who runs things here. I'm a web consultant, software developer, writer and geek from Minneapolis, MN. This site is a fairly wide cross-section of the things I'm interested in and enjoy writing about.

Oh, and if you happen to be looking for hosting for your Subversion repositories or just web hosting in general, take a look at Dreamhost. It's what I use for Subversion and your signup helps me out.

Feeds and Links


www.flickr.com
This is a Flickr badge showing public photos from J Wynia. Make your own badge here.

Search


Pages

Archives

Computers Blog Directory
© 2003-2009 J Wynia. All original content is licensed under the terms of the Creative Commons Attribution license unless otherwise noted. Content from other sources is licensed under its original terms.