Best Web apps design

Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorf's site Copter Labs. Jason will be handling the back-end stuff like application planning and database stuff. At the end of the week, we'll unleash the actual working application for you. Here is the plan:

It's Easy, Right?

What we're going to create is a "list app". The idea being focused on simplicity and usefulness. Sign up for an account, and get started making a list in just a few seconds. Sounds easy right? Even the PHP dabblers out there probably could throw something like this together fairly quickly, right? Well the fact is, no, it's not that easy.

First of all, it needs to work and it needs to work well. That means good back end code that does what it's supposed to do and well. That means a good UI that is intuitive, helpful, and pleasurable to use. It means keeping the app secure and users data private. None of these things is trivial.

Through this whole 8-part series, we are going to create an app that hopefully does all these things pretty well. We aren't out to tell you this is the greatest app ever made, but rather, we are going to use this app as a walk-through journey of the app creating process and hopefully do as many smart things as we can along the way.

The Big Idea

This "list app" is going to be called Colored Lists. Lists (in real life), can be for anything: a to-do list, a grocery list, things to bring camping list... As you finish things, you cross them off. Things on a list may be of different relative importance as well. This makes paper lists potentially messy and inefficient. With a list on a computer, we can make crossing off items just a click and we can make rearranging them a matter of drag and drop. For dealing with relative importance, we can use colorization, which could also be used for things like grouping. Computers, and the web, are a perfect place for lists.

Sketch It Out

No need to get fancy right away. Here is a very rudimentary sketch of what the app might look like:

Looks like a list to me. Each list item is a long rectangle, because the big idea here is to colorize each list item, so putting them inside a colored box makes sense. There are some interactive elements to the left and right of each list item. Those are going to be for accomplishing the basic things we intent people to be able to do with their colored list. Lets take a closer look.

Early UI Planning

We don't necessarily want to be talking about specific technologies at this point, but we should be thinking about how the UI will operate, so we can make choices about technology that can accommodate our UI desires.

• Click-to-edit
• Drag and drop
• Two-click delete
• Automatic saving (after any action)

All this stuff basically adds up to a whole bunch of AJAX. We don't want to load special screens to do relatively trivial tasks like deleting a list item. That stuff should happen seamlessly, smoothly and with proper feedback in response to mouse clicks without page refreshes. In a sense, we are creating a one-page app, where the majority of interaction with this app happens on a single page. This is certainly by design, and not trying to adhere to any particular fad. Lists are easy and quick, that's why are useful. If this app is complicated, it's usefulness is diminished and nobody will use it.